내 일을 돕는 AI, 내 판단은 지키기 — 디지털 자립 실습

큰 그림: 비유와 경계

빠르게 초안을 써 주는 조수와 같다.

비유가 닿지 않는 곳: 조수처럼 실제 확인 업무를 수행했거나 책임을 떠맡는다는 뜻은 아니다. 모델은 입력과 학습 패턴으로 다음 내용을 생성하고 실제 기관 조회 여부는 별개다.

실제로 작동하는 원리

LLM(Solar 등)은 입력 맥락을 토큰 단위로 처리해 다음 토큰의 가능성에 따라 글을 생성한다. 명확한 요청은 형식을 개선하지만 진위를 보장하지 않는다. Gemini 같은 제품명은 인터페이스 선택지이고 모델·서비스의 정확성 보증이 아니다. 의료·법률·지원자격·금전 관련 판단은 공식 사이트의 날짜·원문과 담당 기관을 확인한다. 비밀번호·신분증·계좌·실명은 입력하지 않는다.

따라 하기

1. 사전진단: 가상 일정표에서 '표에 있는 날짜'와 '누군가의 자격 여부' 중 무엇을 답할 수 있는지 먼저 고른다. 결과에 따라 확실하면 safe-02로, 혼동하면 이 단원 실습 후 이동한다.
2. 복사 입력: '다음 가상 사실만 사용해 아는 것/모르는 것/확인할 곳을 세 칸으로 정리해. 사실: 동아리 오리엔테이션은 4월 18일 14시. 문의: 내가 참가 자격이 있나요? 내 이름이나 서류를 묻지 마.' AI 사용이 불편하면 혼자 종이에 작성한다.
3. AI 초안에서 자격 확답을 지우고 '주최 측 공지의 참가 조건과 접수창구 확인'으로 고친다.
4. 내 상황 정보는 이 연습에 쓰지 않는다. 실제 제도 문의는 현재 공식 안내를 별도로 직접 확인한다.

입력 예제

행사 날짜 4월 18일 14시; 참가 조건 정보 없음

예상 결과

날짜·시간=확인된 가상 자료; 자격=미확인. 참가 조건은 주최 공지 또는 담당자에게 확인 필요.

검증 방법

1. 답마다 근거 자료의 문장을 가리키거나 미확인으로 표시한다.
2. 자격 확정·금액·실명 등 입력에 없는 정보가 생기면 사용하지 않는다.

흔한 오해와 실패 복구

1. AI 문장에 '확실합니다'가 있으면 믿음 → 자료·날짜·기관 확인.
2. 개인 사연을 공유해야 맞춤 도움을 얻는다고 생각 → 가상 상황으로 구조만 연습.

확인 문제

독립 실습

가상 공지와 AI 초안에서 맞는 내용·근거 없는 내용을 표시하라.

남길 증거: 초안 문장별 근거/미확인 표와 수정 답변.

가상 공지: 무료 도서관 편집 모임은 4월 18일 14시에 진행. 참여 가능 인원과 접수조건은 이 공지에 없음. AI 초안: '4월 18일 14시이고 누구나 반드시 참여할 수 있습니다. 현장 등록하면 됩니다.'

새 맥락에 적용하기

가상 채용 설명회로 소재를 바꿔 마감일 안내와 본인 합격 가능성 판단을 구분하라.

내 말로 설명하고 가르치기

친구에게 'AI에게 질문을 잘하면 늘 맞다'는 말이 왜 틀릴 수 있는지 가상 공지의 자격 사례로 설명하게 한다.

실습·전이·설명 결과는 본인 또는 동료가 기준에 따라 검토하세요. 이 페이지는 숙련을 자동 인증하지 않습니다.

읽음과 숙련은 별개입니다.

큰 그림: 비유와 경계

배달 요청에 장소·메뉴·제외 재료·도착 확인 방법을 적는 일과 비슷하다.

비유가 닿지 않는 곳: 자세히 써도 AI가 허위 사실이나 고장 난 코드를 만들 수 있다; 검증은 별도다.

실제로 작동하는 원리

역할 과장보다 목적, 제공 자료, 제외 조건, 출력 구조, 실패 시 질문을 정한다. 생성형 AI 채팅창(Gemini/Solar 기반 서비스 등 사용 가능한 도구)마다 UI와 데이터 정책이 다르므로 제품 버튼 이름을 전제로 하지 않는다. Antigravity 같은 개발 도구도 허용 범위·프로젝트 권한·비용을 확인하고 선택적으로 사용한다. 여기서는 도구 없이도 요청문을 검토할 수 있다.

따라 하기

1. 학습 주제는 '가상 독립생활 준비 목록' 또는 '가상 직무 준비 목록' 중 마음 편한 것을 고른다. 실제 이력이나 보호종료 여부는 적지 않는다.
2. 복사 입력: '목표: 가상 사용자가 할 일 세 개를 놓치지 않게 돕기. 자료: 서류 파일 확인, 이동 경로 조사, 일정 재확인(모두 가상). 출력: 항목/완료 표시가 있는 로컬 웹페이지 초안. 제약: 이름·전화번호·로그인·서버·유료 API 없음. 검증: 두 번째 항목 체크 후 다시 해제되고 첫 번째 항목은 그대로인지 직접 확인할 수 있게 해. 모르는 요구는 추측하지 말고 질문해.'
3. 응답을 받으면 요구 충족 여부를 항목별로 표기한다. 서비스를 쓰지 않으면 같은 기준으로 직접 스케치를 한다.
4. '완성'이라는 AI의 말 대신 다음 단원의 브라우저 실제 조작 결과를 기다린다.

입력 예제

목표+3개 가상 항목+항목별 체크/해제+개인정보 금지

예상 결과

세 항목의 독립 체크 UI 요구서; 저장 지속 여부는 정해지지 않았으므로 첫 버전은 새로고침 시 초기화 가능하다고 표시.

검증 방법

1. 요청문에서 누가/입력/결과/검증/금지를 각각 밑줄로 표시한다.
2. AI 출력에 로그인·전화번호·실제 사람 추천이 섞이면 요구 위반으로 기록한다.

흔한 오해와 실패 복구

1. 프롬프트 길이가 길면 무조건 정확함 → 명시적 검증을 별도 수행.
2. 제품이 이용자 데이터를 보관하지 않는다고 단정 → 서비스 정책·설정 확인 전 가상 자료만 사용.

확인 문제

독립 실습

나쁜 요청문을 학습용 좋은 요청문으로 고치고 AI가 되물어야 할 미정 조건을 하나 찾아라.

남길 증거: 네 칸 요청문, 개인정보/공개 제외 선언, 미정 조건 질문 하나.

나를 잘 관리해 주는 AI 앱 만들어 줘. 개인정보도 넣어 주고 알아서 공개해. (사용자 신상은 제공하지 않았고 공개 승인도 없음.)

새 맥락에 적용하기

같은 구조를 가상 소규모 책방 개점 준비 목록으로 바꾸어 프롬프트를 처음부터 써라.

내 말로 설명하고 가르치기

동료에게 자신의 요청문의 '결과'와 '검증'을 섞어 읽어 주고 구분하게 한 뒤 빠진 조건을 설명한다.

실습·전이·설명 결과는 본인 또는 동료가 기준에 따라 검토하세요. 이 페이지는 숙련을 자동 인증하지 않습니다.

읽음과 숙련은 별개입니다.

큰 그림: 비유와 경계

HTML은 종이의 항목, CSS는 글씨와 간격, JS는 체크할 때 바뀌는 행동이다.

비유가 닿지 않는 곳: 웹에는 접근성·브라우저 저장·보안·서버도 있을 수 있다. 이 한 파일은 서버나 계정이 없다.

실제로 작동하는 원리

label로 텍스트와 checkbox를 묶으면 화면뿐 아니라 키보드/보조기술 이용도 쉬워진다. 브라우저 checkbox의 checked 속성은 각 입력의 현재 상태다. localStorage를 쓰지 않은 이 버전은 새로고침 후 상태가 초기화된다. 휴대전화에 파일을 복사한 경우 열기 방식은 환경마다 다르며 자동 공개되지 않는다.

따라 하기

1. safe03.html 자료를 그대로 저장하고 더블클릭해 브라우저로 연다. 신상 대신 가상 항목만 있다.
2. 두 번째 항목을 체크하고 첫 번째는 그대로인지, 다시 누르면 체크가 풀리는지 확인한다.
3. 브라우저 폭을 좁혀도 글자가 옆으로 잘리지 않는지 살핀다; 키보드 Tab과 Space로 체크를 전환한다.
4. 복사 입력: '아래 단일 HTML의 세 가상 항목 중 이름을 업무개선 맥락으로 바꾸되 label과 input 연결, 키보드 조작, 개인정보 미수집은 유지해. 한 번에 텍스트만 바꾸고 테스트 순서를 먼저 써 줘.'

입력 예제

초기 모두 미완료; 두 번째 체크 후 첫 번째 그대로; 다시 두 번째 클릭

예상 결과

화면에서 두 번째만 체크 → 해제됨. 첫 번째와 세 번째는 계속 미체크. 새로고침하면 모두 미체크.

검증 방법

1. 실제 파일 경로를 연 브라우저에서 클릭으로 체크·해제하고 키보드 Space를 수행한다.
2. 개발자도구가 없어도 새로고침 전후 차이를 기록하고 저장 기능이 있다고 주장하지 않는다.

흔한 오해와 실패 복구

1. AI가 준 코드를 실행하지 않고 성공 판정 → 브라우저에서 각 항목 조작.
2. 실명·전화번호 입력란을 '맞춤형'이라 추가 → 자료 최소화; 이 프로젝트에는 불필요.

확인 문제

독립 실습

자료의 가상 목록을 실행하고 세 번째 항목을 다른 가상 활동으로 바꿔 두 번째 항목과 독립적으로 동작하는지 시험하라.

남길 증거: 실제 저장 파일과 세 번째 항목 수정 전후, 클릭·해제·키보드·새로고침 시험 기록.

<!doctype html><html lang=ko><meta charset=utf-8><meta name=viewport content='width=device-width,initial-scale=1'><title>가상 준비 목록</title><style>body{font:1.15rem/1.6 sans-serif;max-width:36rem;margin:auto;padding:1.2rem}label{display:block;padding:.75rem;border:1px solid #555;margin:.6rem 0}input{width:1.4rem;height:1.4rem;vertical-align:middle}</style><h1>가상 준비 목록</h1><p>연습용. 이름과 연락처를 입력하지 않습니다. 새로고침 시 체크가 초기화됩니다.</p><label><input type=checkbox>서류 파일 확인</label><label><input type=checkbox>이동 경로 조사</label><label><input type=checkbox>일정 재확인</label></html>

새 맥락에 적용하기

가상 지역 행사 준비 목록으로 항목을 바꾸고 완료 조건을 이벤트별로 직접 정의하라.

내 말로 설명하고 가르치기

브라우저를 직접 보여 주며 'HTML/CSS/JS 중 무엇이 없으면 어떤 기능이 사라지나'를 설명하되 이 예제에 JS가 필수인 척하지 않는다(기본 체크는 HTML 자체가 제공한다).

실습·전이·설명 결과는 본인 또는 동료가 기준에 따라 검토하세요. 이 페이지는 숙련을 자동 인증하지 않습니다.

읽음과 숙련은 별개입니다.

큰 그림: 비유와 경계

전등이 안 켜지면 집 전체를 뜯기보다 스위치와 전구를 순서대로 본다.

비유가 닿지 않는 곳: 버그는 단순 부품 고장과 달리 데이터·브라우저·접근성·이전 수정의 상호작용일 수 있다.

실제로 작동하는 원리

label의 for 값이 다른 input id를 가리키면 글씨를 눌렀을 때 의도하지 않은 체크가 바뀐다. 실패 동작을 기록하고 id 연결을 수정한 뒤 같은 재현 단계와 다른 항목의 회귀시험을 실시한다. 사용자 검증은 학습자 자신이 아닌 가상 시나리오를 먼저 쓰고 타인의 자발적 테스트를 받을 때도 실명을 수집하지 않는다.

따라 하기

1. safe04-bug.html을 로컬로 열고 두 번째 줄의 글씨를 눌러 어떤 항목이 바뀌는지 기록한다.
2. 복사 입력: '두 번째 label for=doc인데 두 번째 input id=route이다. 왜 첫 번째가 바뀔 수 있나? 최소 수정 한 줄과 클릭/키보드/새로고침 회귀 테스트를 제시해. 실제로 실행했다고 주장하지 마.'
3. 두 번째 label의 for를 route로 바꿔 저장·새로고침 후 두 번째 글씨만 눌러 확인한다.
4. 가상 사용자 카드 '휴대전화 좁은 화면에서 두 번째 글씨를 눌러 체크하고 다시 풀고 싶다'로 조작을 수행하고 오류 기록에 수정 전후를 넣는다.

입력 예제

두 번째 label for=doc, 두 번째 input id=route

예상 결과

수정 전 두 번째 텍스트를 누르면 첫 번째 체크가 바뀔 수 있다. for=route로 고친 뒤 두 번째 텍스트가 두 번째 체크만 바꾸어야 한다.

검증 방법

1. 마우스/터치에 해당하는 텍스트 클릭과 Tab+Space의 결과를 분리 기록한다.
2. 첫 번째와 두 번째를 번갈아 누른 뒤 각자만 바뀌는지 회귀시험한다.

흔한 오해와 실패 복구

1. 코드 전체를 다시 생성해 고장 원인을 잃음 → 한 줄 수정과 전후 파일 보존.
2. 오류를 '사용자가 잘못 눌렀다'로 돌림 → 라벨 연결 문제 재현.

확인 문제

독립 실습

의도적으로 고장 난 파일을 고쳐 가상 사용자 카드의 조작을 검증하라.

남길 증거: 고장과 정상 파일(또는 수정 전후 내용), 재현·수정·회귀 관찰표.

<!doctype html><html lang=ko><meta charset=utf-8><title>고장 난 가상 목록</title><h1>가상 목록</h1><p>실명 없이 사용</p><input id=doc type=checkbox><label for=doc>서류 파일 확인</label><br><input id=route type=checkbox><label for=doc>이동 경로 조사</label>

두 번째 줄의 글씨를 눌러 이동 경로 조사에 체크 → 다시 눌러 해제 → 첫 번째 항목은 바뀌지 않아야 한다.

새 맥락에 적용하기

새로고침 뒤 체크가 사라지는 현상을 '버그'로 볼지 요구되지 않은 기능으로 볼지 요구서와 비교해 판단하라.

내 말로 설명하고 가르치기

동료에게 고장 파일만 주고 왜 글씨와 상자가 다르게 반응하는지 직접 재현하게 한 뒤 한 줄 수정 이유를 설명한다.

실습·전이·설명 결과는 본인 또는 동료가 기준에 따라 검토하세요. 이 페이지는 숙련을 자동 인증하지 않습니다.

읽음과 숙련은 별개입니다.

큰 그림: 비유와 경계

다른 사람에게 지도 한 장을 건넬 때 출입금지 구역과 지도 제작일을 함께 적는다.

비유가 닿지 않는 곳: 웹 공개는 종이 전달보다 복제·검색·장기 보존이 쉬워 실제 개인정보·저작권 문제가 더 크다.

실제로 작동하는 원리

로컬 HTML 자체는 인터넷 공개가 아니다. 실서비스 공개에는 사용자 승인, 접근성/모바일/보안, 외부 의존·비용, 개인정보 수집 여부 및 파일 권리 확인이 필요하다. 이 프로젝트는 로그인·결제·실시간 LLM/API 키 없이 동작한다. 현재 체크 상태는 저장하지 않는다. 저장이나 배포를 추가하려면 별도 요구·검증과 공개 승인이 필요하다. 포트폴리오에는 가상 문제→요구서→작동 파일→실패·수정 로그→한계만 넣는다.

따라 하기

1. safe03.html을 새 이름의 로컬 파일로 복사하고 가상 생활준비 또는 업무 준비 항목으로 교체한다. 실명·신분정보는 쓰지 않는다.
2. 새 가상 사용자 카드로 체크·해제·새로고침·좁은 화면·키보드를 검증한다. 실패하면 safe-04 방식으로 한 곳씩 고친다.
3. 복사 입력: '이 가상 체크리스트의 공개 전 검수표를 만들어 줘: 개인정보/저작권/저장 방식/외부 전송/키보드·모바일/복구/운영 책임/비용. 미확인 항목은 공개 승인이라고 표시하지 마.'
4. 결과물 설명 1쪽을 쓴다: 누구의 어떤 가상 문제, 파일 열기, 되는 것/안 되는 것, 시험 증거, 실패 시 원본으로 복귀, 포트폴리오 공개 전 승인 필요.
5. 다른 주제로 전이: 지역 행사 준비로 목록을 바꿔 요구와 새 평가 카드를 스스로 만든다. 강사 역할에서는 5분 시범 뒤 학습자의 실제 조작/설명을 평가한다.

입력 예제

가상 직무 준비 목록 3개, 로컬 HTML; 새로고침 초기화

예상 결과

인수 설명에 '개인정보 입력 없음, 브라우저 로컬 파일, 체크는 새로고침 시 초기화, 온라인 게시 안 함'이 명시되고 테스트 표에 체크/해제·키보드·좁은 폭 결과가 들어간다.

검증 방법

1. 실제 URL이 없는 로컬 파일을 공개 앱으로 주장하지 않는다.
2. 파일을 처음 받은 사람이 사용법만 보고 항목을 바꾸고 실패하면 원본을 다시 열 수 있는지 확인한다.

흔한 오해와 실패 복구

1. 코드를 얻었다는 이유만으로 '배포 가능' 판정 → 실제 배포·접근성·권한·비용은 별도 검수.
2. 포트폴리오에 개인 사정이나 신청 문서 넣음 → 합성 카드와 자체 결과만 사용.

확인 문제

독립 실습

제공 카드 중 하나를 골라 자신의 가상 성과물 인수서를 만들고 공개하지 않은 상태를 명시하라. 교육자 재사용 과제: 강사용 카드: 가상 행사 준비로 3개 항목을 바꾸고 하나를 필수로 만들라는 요구를 제시한다. 현 코드는 필수 여부를 판정하지 못하므로 기능 추가 또는 미구현 표시 중 하나를 선택해 테스트한다. 공개/기여는 자발적이며 개인자료 이용 동의와 별개다.

남길 증거: 수정한 HTML, 3개 기능·실패/복구·공개 미승인 명시, 새로운 상황의 테스트 및 동료 관찰 기록 또는 미실시 표기. 보강 증거: 예측→관측→수정 후 출력과 타인 인계/미실시 기록을 구분한다.

카드 A[진로 설계]: 가상 사용자가 정보 탐색·일정 점검·질문 연습 세 항목을 체크한다. 채용 결과나 지원 자격 판단 기능 없음. 카드 B[업무 개선]: 가상 모임 진행자가 장소 확인·자료 준비·시간 공지 세 항목을 체크한다. 실제 참석자 명단 없음. 공통: 로컬 HTML, 저장 지속 없음, 자동 온라인 공개 없음.

가상 프로젝트명:
누가/어떤 불편:
열기 방법:
기능 3가지:
비기능(로그인·개인정보·저장/게시 등):
시험 입력·기대·관찰:
실패 시 원본 파일 복구:
권리/비용/공개 승인 상태:
새 맥락 전이 사례:
동료가 실제 재현했는가(아직 미실시 가능):

새 맥락에 적용하기

선택하지 않은 다른 카드로 요구서와 검증표를 새로 만들어 동일 코드가 해결하지 못하는 요구 한 가지를 찾으라. 독립 전이·실패주입: 새 입력: 가상 공유물품 반환 점검 목록을 만들되 실명 없이 D1/D2 코드와 체크 3개만 둔다. 기존 safe03.html을 바꾼 후 체크→해제→새로고침에서 체크가 사라지는 것을 예측·확인한다. 지속 저장된다고 오해하는 실패를 주입하고 안내 문장을 "현재 화면만, 새로고침 초기화"로 고친다.

내 말로 설명하고 가르치기

동료에게 3분 동안 로컬 실행과 배포의 차이, 저장되지 않는 이유, 고장 시 되돌리는 법을 설명하고 상대가 화면 조작으로 재현하도록 한다. 강사는 수행·전이 결과에 따라 보충 단원을 배정한다. 독립 설명·인수 판정: 판정: 3개 체크의 키보드 조작, 좁은 폭, 새로고침 초기화, 실명·전화 입력 없음과 로컬 파일 미공개를 동료가 확인한다. AI는 처음 요구를 나누는 데만 쓰고 마지막 코드 변경/조작/원리 설명은 학습자가 단독 수행한다. 완료는 학습 목표이지 성취 보증이 아니다.

실습·전이·설명 결과는 본인 또는 동료가 기준에 따라 검토하세요. 이 페이지는 숙련을 자동 인증하지 않습니다.

읽음과 숙련은 별개입니다.