L00c. 장난감 하나 만들어 세상에 내놓기
모듈: 첫 빌드(S0) · 2시간
오늘의 질문
한 화면짜리 제품이 "됐다"는 걸 무엇으로 아는가?
"됐다"를 느낌이 아니라 눈으로 본 증거로 말할 수 있으면 오늘 수업은 성공이다.
용어
- spec(사양) — 만들기 전에 고정해 두는 약속. "무엇을, 몇 개, 어떻게 보이게"를 적은 짧은 글.
- state(상태) — 같은 화면이 상황에 따라 다르게 보이는 모습. 오늘은 4가지(불러오는 중/비어 있음/오류/성공)를 본다.
- preview(미리보기) — 선택한 도구 안에서 만든 화면을 바로 띄워 보는 창.
- sandbox publish(무료 샌드박스 게시) — 선택한 도구가 주는 연습용 공개 주소로 화면을 내놓는 일.
쉬운 이야기
동생이 레모네이드 가판대를 차렸다. 첫날 엄마가 묻는다. "장사 잘됐니?" 동생은 "응, 잘된 것 같아"라고 답한다. 엄마가 다시 묻는다. "레몬이 떨어졌을 땐 손님한테 뭐라고 했니?" 동생은 대답을 못 한다.
"잘된 것 같아"는 false certainty(거짓 확신)다. 확인한 게 아니라 느낌이다. 오늘 만들 장난감도 같다. AI가 화면을 한 번 띄워 주면 "됐다"고 말하고 싶어진다. 그런데 할 일이 하나도 없을 때, 저장이 실패했을 때 화면이 어떻게 보이는지는 아직 아무도 확인하지 않았다.
그래서 오늘은 만들기 전에 사양을 먼저 고정한다. 사양은 바뀌면 안 되는 약속이고, 화면에 적힌 할 일 목록은 언제든 바뀌는 값이다. 이 둘을 섞지 않는 것이 오늘의 첫 연습이다.
실제 파일
설치할 것은 없다. 브라우저로 아래 파일을 읽기만 한다.
① 도구·모델 지도
파일: docs/learning/workbook/appendix/tool-map-2026-09.md
찾을 것: L00a에서 고른 기본 경로의 도구가 무료 등급에서 "게시(공유)"를 허용하는지 적힌 칸.
예시로 보이는 것: 게시: 무료 등급에서 가능 / 불가 — 지도 표기를 그대로 확인
② 4상태의 원래 설명
파일: docs/learning/workbook/lessons/L06-product-surface-4-states.md
찾을 것: "3. 쉬운 이야기"의 음식 배달 앱 예시 네 줄.
예시로 보이는 것: 2. 주변에 음식점이 하나도 없으면 ... (empty)
오늘은 초급 버전으로 맛보고, 코어 L06에서 제대로 만난다.
따라 하기
모든 작업은 L00b에서 안전하게 연 선택한 도구 안에서 한다.
5-1. 사양 카드 먼저 쓰기
종이나 메모장에 아래 사양을 그대로 옮겨 적는다. 이 사양은 오늘 끝날 때까지 바꾸지 않는다.
장난감 이름: 오늘 할 일 3개 카드
화면: 1개
입력: 1개 (할 일 한 줄 적는 칸 + 추가 버튼)
규칙: 카드는 최대 3개. 4번째를 넣으려 하면 안내 문구를 보여 준다.
상태 4개: 불러오는 중 / 비어 있음 / 오류 / 성공
확인 방법: 화면 아래 "상태 미리보기" 버튼 4개로 각 상태를 강제로 띄운다.
"상태 미리보기" 버튼은 실패를 기다리지 않고 각 상태를 띄워 보는 확인용 스위치다.
5-2. 첫 요청 보내기
**화면 찾기(브라우저 기반 앱 빌더 도구인 경우): 입력창=아래/왼쪽, 미리보기=가운데/오른쪽, 게시 버튼=위쪽. 코딩 에이전트 도구라면 이런 고정 화면이 없고 index.html 같은 파일이 결과로 나온다 — 그 파일을 더블클릭해 브라우저로 직접 연다.
선택한 도구의 입력창에 사양 카드를 통째로 붙이고 아래 두 문장을 덧붙인다.
위 사양대로 한 화면짜리 웹 페이지를 만들어 줘.
상태 4개 각각의 화면 문구를 먼저 목록으로 보여 준 다음 만들어 줘.
이 두 문장은 한 번에 보내도 된다. AI가 한 응답 안에서 목록과 화면을 같이 줘도 정상이고, 굳이 두 번 나눠 보낼 필요는 없다. 기록 카드의 "요청 횟수"는 보낸 횟수 그대로 적는다.
결과 예시: 도구가 4상태 문구 목록을 먼저 보여 주고, 이어서 미리보기 창에 카드 화면을 띄운다. 이 목록은 초안이다. 최종 확인은 5-3에서 각 상태 화면을 직접 띄워 본다.
흔한 오류: 문구 목록 없이 바로 화면만 나오면 "4상태 문구 목록을 글로 먼저 보여 줘"라고 한 번 더 요청한다.
5-3. 4상태를 눈으로 확인하기
미리보기 창에서 "상태 미리보기" 버튼을 하나씩 누르고, 보이는 문구를 확인표에 옮겨 적는다.
- 불러오는 중: "할 일을 불러오는 중…" 같은 문구가 보이는가?
- 비어 있음: "아직 할 일이 없어요. 첫 할 일을 적어 보세요" 같은 다음 행동 안내가 있는가?
- 오류: 이유와 함께 "다시 시도" 버튼이 있는가?
- 성공: 입력한 할 일이 카드로 보이는가?
하나라도 비어 있으면 그 상태만 콕 집어 다시 요청한다.
5-4. 무료 샌드박스에 게시하기
게시 전에 공개 범위(누구나 볼 수 있는 주소인가)와 되돌리는 방법(취소·삭제 메뉴 위치)을 확인한다. 둘 다 확인 못 하면 게시 대신 5-5 로컬 텍스트로 간다.
선택한 도구의 "게시" 또는 "공유" 버튼을 누른다. 도구가 연습용 공개 주소를 주면 그 주소를 새 탭에서 열어 4상태를 한 번 더 확인한다.
결과 예시: 새 탭에 내 카드 화면이 뜨고, 주소창에 도구가 준 주소가 보인다.
흔한 오류: 게시 버튼이 없거나 결제 단계로 넘어가면 멈추고 5-5로 간다. 돈을 내는 단계는 S0에서 하지 않는다.
5-5. 게시가 안 되면 — 로컬 텍스트 제출
미리보기 창에 보이는 4상태 문구를 그대로 복사해 텍스트로 제출한다. 이것도 완주로 인정한다. 제품이 "됐다"는 증거는 주소가 아니라 4상태를 눈으로 확인한 기록이기 때문이다.
혼자 하기
과제: 소요 시간·사용량 기록 카드 쓰기
아래 칸을 자기 숫자로 채운다. 강사나 교재가 정해 주는 기준 숫자는 없다. 남의 숫자와 비교하지 않는다.
시작 시각: ______ 끝 시각: ______ 걸린 시간: ______
보낸 요청(프롬프트) 횟수: ______
다시 요청한 횟수: ______
도구가 보여 준 사용량 표시(있으면 그대로 옮겨 적기): ______
사용량 표시를 찾지 못했다면 그 사실: ______
가장 오래 막힌 곳 한 줄: ______
이 카드는 다음 빌드 때 "이번엔 얼마나 걸릴까?"를 짐작하는 가장 믿을 만한 근거가 된다.
실패
막힘별 안내표
| 막힘 | 증상 | 해결 | 우회 |
|---|---|---|---|
| 미리보기가 안 뜬다 | 빈 창만 보인다 | 새로고침 후 다시 요청 | 문구 목록만 제출 |
| 상태가 하나뿐 | 성공 화면만 있다 | 빠진 상태만 콕 집어 요청 | 확인표에 "미확인" 표시 |
| 게시 버튼이 없다(도구가 원래 게시 기능을 제공하지 않음, 또는 공유 메뉴를 못 찾음) | 공유 메뉴를 못 찾음 | 부록 지도 §2 "코드 가져가기" 칸에서 게시 유무 확인 | 로컬 텍스트 제출로 완주 |
| 결제 화면이 뜬다 | 카드 번호를 묻는다 | 즉시 창을 닫는다 | 로컬 텍스트 제출 |
| 무료 한도가 끝났다 | 요청이 거절된다 | 한도 회복 뒤 이어서 | 종이 화면 4장 제출 |
| 사양이 바뀌었다 | 카드가 5개가 됐다 | 사양 카드를 다시 붙임 | "최대 3개"만 재요청 |
실패 1 — "화면이 떴으니 끝"
성공 화면 하나만 보고 게시했다. 할 일을 다 지운 사람은 하얀 빈 화면만 본다.
왜 위험한가: 쓰는 사람은 고장인지 정상인지 구분하지 못하고 떠난다.
실패 2 — 사양을 도중에 바꾸기
"카드를 5개로 늘리면 더 좋겠다"며 중간에 바꿨다. 이미 확인한 4상태를 처음부터 다시 봐야 한다.
왜 위험한가: 확인해 둔 증거가 사라지고, "됐다"를 말할 근거도 같이 사라진다.
보완
- 오류 상태에 "다시 시도" 버튼이 없으면, 최소한 "잠시 뒤 다시 눌러 주세요" 한 줄이라도 넣게 요청한다.
- 비어 있음 상태가 그냥 빈 칸이면, 다음 행동 한 줄("첫 할 일을 적어 보세요")을 넣게 요청한다.
[실: 데이터 vs 코드] 오늘 입력한 할 일 3개는 데이터다. 매일 바뀐다. "카드는 최대 3개"라는 규칙은 사양이다. 오늘은 바뀌지 않는다. 할 일을 바꾸려다 사양까지 고치고 있다면 둘을 섞은 것이다.
축소 전략
시간이나 무료 한도가 부족할 때, 핵심 약속("4상태를 눈으로 확인했다")만 살린다.
- 게시 주소 → 로컬 텍스트 제출: 주소가 안 나오면 미리보기 화면 문구를 복사해 제출한다.
- 4상태 전부 → 미확인 허용: 네 칸 모두 채우되, 못 띄운 상태는 "미확인"으로 표시한다. 이 확인표를 로컬 텍스트로 제출하면 완주로 인정한다.
- 비용 0 대체 경로: 무료 한도가 끝났거나 도구가 열리지 않으면, 종이에 화면 4장을 손으로 그리고 각 상태 문구를 글로 옮겨 제출한다. 돈도 새 계정도 들지 않는다. 한도가 회복되면 같은 사양 카드로 이어서 만든다.
워크시트
대응 워크시트: ../worksheets/W00c-first-toy-shipped.md
워크시트에서 게시 주소 1개(또는 로컬 텍스트)와 4상태 확인표, 소요 시간·사용량 기록 카드를 완성한다.
동료 리뷰
짝의 결과를 보며 "예/아니오"로 확인한다.
- 짝의 4상태 확인표 네 칸이 모두 실제 화면 문구로 채워져 있는가?
- 오류 칸에 "다음에 할 수 있는 행동"(다시 시도 등)이 적혀 있는가?
- 기록 카드의 숫자가 짝 본인이 직접 잰 것인가, 짐작한 것인가?
단어장
| 용어 | 내 말로 설명 (직접 채우기) |
|---|---|
| spec(사양) | |
| state(상태) | |
| preview(미리보기) | |
| sandbox publish(무료 샌드박스 게시) |
증거 점검 질문: "내 장난감은 됐다"고 말하려면 어떤 기록이 있어야 하는가? 내 확인표에 그 기록이 네 칸 모두 있는가?
예고
다음은 L00d. 왜 여기서 멈추는가 — 코드가 아니라 메타층.
오늘은 장난감을 "됐다"까지 데려갔다. 다음 시간에는 이 장난감을 6개월 뒤에 고쳐야 한다면 무엇이 막힐지 묻는다. 오늘의 "4상태 확인"이 다음엔 "코드 바깥의 다섯 가지"로 이어진다.
목표
오늘 만든 "오늘 할 일 3개 카드"의 게시 주소(또는 로컬 실행 텍스트)와 4상태 확인표, 소요 시간·사용량 기록 카드를 완성한다.
작성란
A. 사양 카드 (그대로 옮겨 적기)
장난감 이름: 오늘 할 일 3개 카드
화면: 1개
입력: 1개 (할 일 한 줄 적는 칸 + 추가 버튼)
규칙: 카드는 최대 3개. 4번째를 넣으려 하면 안내 문구를 보여 준다.
B. 게시 결과
게시 방식 (해당하는 것에 O 표시):
[ ] 무료 샌드박스 게시 주소
[ ] 로컬 실행 화면 텍스트 제출
게시 주소 또는 로컬 실행 텍스트:
(직접 적기)
C. 4상태 확인표
각 상태에서 실제로 본 화면 문구를 그대로 옮겨 적는다. 못 봤으면 "미확인"이라고 쓴다.
| 상태 | 실제로 본 화면 문구 |
|---|---|
| 불러오는 중 | |
| 비어 있음 | |
| 오류 | |
| 성공 |
D. 소요 시간·사용량 기록 카드
자기 숫자를 그대로 적는다. 강사나 교재가 정해 주는 기준 숫자는 없다.
시작 시각: ______ 끝 시각: ______ 걸린 시간: ______
보낸 요청(프롬프트) 횟수: ______
다시 요청한 횟수: ______
도구가 보여 준 사용량 표시(있으면 그대로 옮겨 적기): ______
사용량 표시를 찾지 못했다면 그 사실: ______
가장 오래 막힌 곳 한 줄: ______
자가 점검
제출 전 스스로 확인한다.
- [ ] B란의 게시 방식 중 하나에 O 표시가 되어 있다
- [ ] C란 4상태 확인표 네 칸이 모두 실제 화면 문구(또는 "미확인")로 채워져 있다
- [ ] D란 기록 카드가 남의 숫자가 아니라 내가 직접 잰 숫자다
- [ ] 증거 없는 완료 금지: "됐다"고 적은 상태마다 실제로 본 문구가 C란에 남아 있는가?
- [ ] 실패 시 축소: 게시 주소를 못 얻었다면 B란에 로컬 텍스트 제출로 표시했는가?
제출 기준
게시 주소 1개(또는 로컬 실행 텍스트) 1개와 C란 4상태 확인표 4칸이 모두 채워져 있으면 통과한다.
워크시트를 제출하려면 로그인이 필요해요.