상자 셋. 그 이상 그리지 않는다.

"화면 / 화면을 띄우는 서버 / 스토리팩. 실행되면 서버 안에 기억이 남습니다." [00:41]

"LLM은 기억력이 좁아요. 처음엔 똑똑하다가 엉뚱한 소리를 하는 이유가 그겁니다. 그래서 필요한 장만 읽게 짰어요." [01:41] — 현재 챕터와 옆 챕터만 준다.

오늘의 포인트: 팩 안에는 배경·캐릭터·음악·효과음이 이름표 붙은 목록으로 들어 있고(04_resources.txt), 매 턴 어떤 걸 꺼내 쓸지는 LLM이 정한다. 사람이 "이 장면엔 이 그림"이라고 일일이 안 붙인다. "재료를 갖춰 놓으면 알아서 꺼내 씁니다. 으레 식탁 위에 포크와 나이프가 있죠. 에이전트가 눈 뜨자마자 '아, 여기서 밥을 푸는구나' 알도록 주방을 꾸려 놓은 겁니다." [13:29]

한 줄로: "이건 알아서 하는 게 아니고 수칙을 읽고 일하는 작업 도우미예요." [46:35]

붙는 단어: 프론트엔드/백엔드 ● · 서버 ● · 컨텍스트(기억력) ○ — 5분.

폴더 트리 한 장. 실제 경로 그대로. 옆에 packs/_template/(빈 틀)도 보인다.

"에이전트는 폴더를 열면 이름하고 구조만 봅니다. _template이 있으면 '아, 여러 개 붙는 구조구나'를 이름만으로 압니다." [20:44]

"내용하고 뼈대가 따로 있으니까 내용만 갈아끼울 수 있어요. 지난주에 '고등학교 일진의 모험담' 한 문장 던졌더니 주인공이 만들어졌잖아요. 그게 되는 이유가 이 폴더예요." [11:37]

반대 사례(웃긴 대목): "엉망진창인 다운로드 폴더 잡고 '분석해 줘' 하면, 그다음부터 엉망진창으로 일합니다." [44:55]

결론 한 줄: "구조 자체가 자산입니다. 구조화돼 있으면 LLM이 그걸 자산화해서 이미지든 뭐든 해줍니다." [44:25]

CLAUDE.md가 보이면 한 마디만: "네오가 깨어나 처음 읽는 글." [12:05]

붙는 단어: 프로젝트·폴더·파일 ● · 컨텍스트 ○ · CLAUDE.md ○ — 4분.

왼쪽은 명세, 오른쪽은 절차, 아래는 실제 로그. 라이브 생성은 하지 않는다 — 이미 나온 결과를 연다.

"resource_list가 만들어졌다는 게 되게 중요한 발견이에요. 요소를 다 명세화하고 API로 한 번에 생성해 낼 수 있다는 건 엄청난 겁니다. CG·게임·영화로 치면 이 명세가 그대로 제작 목록이에요." [36:02]

같은 명세로 이미지도, 효과음도, 음악도 나왔다. 이 앱엔 pack:images · pack:audio · pack:video 명령이 있고, 이미지 제공자는 Gemini·BytePlus Seedream 등으로 갈아끼운다. 텍스트 하나가 여러 양태로 뻗는다.

절차는 셋 — 명세 → Dry Run(돈 안 나감) → 병렬. "피자 박스를 열 명이 접으면 빨리 끝나죠. 명시 안 하면 한 장씩 합니다." [41:12] [50:21]

정직하게 한 마디: "수요일에 무료 등급이 소진돼서 주인공 한 장에서 멈췄죠. 실무에서 매일 일어나는 일입니다." [52:20]

아래 로그 박스는 실제 events.jsonl 두 번째 턴이다. 사람이 "이 장면엔 이 음악"이라고 붙인 게 아니라, LLM이 목록에서 골랐다. (seq 6 npc_dialogue는 지면상 생략 — 라이브에서는 터미널에서 그대로 보인다.)

붙는 단어: API ● · API 키·비용 ● · 명세·제작 목록 ○ · Dry Run·병렬 ○ — 3분.

챕터 목적 — "꽌시가 무슨 말인지 몰라도 되지만 그런 개념이 있다는 건 알아야 합니다." [10:19] 외우는 게 아니다. 다음에 만났을 때 "아, 그거"가 되면 된다.

"용어를 알아야 한다는 것에 사로잡히기 쉬운데, 그보다 관계가 중요하고, 그 이전에 구조화하는 사고방식이 중요합니다." [10:49]

원칙 — 정의를 먼저 말하지 않는다. 방금 P03~P06에서 본 화면에 이름을 얹거나, 곧 실습에서 만날 자리를 예고한다. 장마다 "오늘 어디서"가 있는 이유.

세 칸을 손으로 훑으면서 한 번만 걷는다. 왼쪽 = 내 컴퓨터, 가운데 = 남의 컴퓨터, 오른쪽 = 바깥.

주소 · IP · DNS — 가운데 칸에서 한 번 짚는다. "남의 컴퓨터에 올렸으면 찾아갈 방법이 있어야 하죠. 기계는 숫자로 찾습니다 — 그게 IP 주소, 번지수예요. 근데 사람이 172.66.47.83을 어떻게 외웁니까. 그래서 이름을 붙입니다 — 그게 도메인이에요. 그 이름을 번지수로 바꿔 주는 전화번호부가 DNS고요."

이어서: "여러분이 주소창에 이름을 치면, 브라우저가 먼저 DNS한테 물어봅니다 — '이 이름 번지수가 뭐야?' 번지수를 받아서 그제야 그 컴퓨터에 갑니다. 이게 매번 일어나요."

사설 IP와 공인 IP를 여기서 가른다. "localhost는 '이 컴퓨터'예요. 그래서 여러분 폰에서 치면 여러분 폰을 가리킵니다 — 제 노트북이 아니라요. 이게 이따 P27에서 폰이 안 열리는 이유입니다."

"그런데 같은 와이파이 안이면 얘기가 달라져요. 제 노트북 번호 192.0.0.2를 치면 옆자리에서 제 화면이 열립니다. 딱 이 방 안에서만요. 카페 밖에서는 안 됩니다."

"그리고 재밌는 게, 같은 자리를 부르는 이름이 여러 개예요. localhost, 127.0.0.1, 0.0.0.0 — 셋 다 같은 데로 갑니다. 이름은 여러 개, 자리는 하나."

오른쪽 칸이 이 장의 회수다. 세 주소가 같은 모양이라는 걸 손으로 짚는다 — http://주소:포트/경로. "바뀌는 건 주소 자리 하나뿐이에요. 얼마나 멀리서 부를 수 있느냐만 다릅니다."

회수 예고: P21·P28에서 *.pages.dev 주소가 생기는 순간 "이름 하나를 빌린 것"이라고 다시 짚는다. 도메인 구입·연결은 오늘 안 한다 — 질문이 나오면 "그 이름을 사서 이 번지수에 연결하는 것"까지만.

3분.

CLI는 이 방에서 가장 많이 멈추는 단어다(08.29 점심 진단). 정의보다 왜 굳이 글자로 치는가를 먼저.

네 줄을 직접 쳐 보인다. ①②③은 10초. ④에서 멈춘다 — 브라우저에 localhost:8000을 치면 방금 만든 폴더가 열린다. "지금 보고 계신 이게 제 노트북 안입니다. 인터넷에 올린 게 아니에요." → P13 로컬 vs 배포로 그대로 이어진다.

왼쪽 터미널의 초록 줄 두 개를 짚는다: "브라우저가 뭘 달라고 했는지 여기 그대로 남습니다. 이게 로그예요." → P15 콘솔 예고.

화면을 가리키며: "무섭게 생겼는데 제가 여기 치는 건 한국어예요."

윈도우 분들껜 셋만: PowerShell, py, dir — P10에서 이어 말한다.

붙는 단어: CLI ○ · 터미널 ○ · 명령어 ○ — 5분.

인터넷 안내문 대부분이 맥 기준이다. 윈도우 쓰는 사람은 읽을 때마다 한 번씩 번역해야 하는데, 그 번역을 지금은 AI가 해준다.

실전 규칙 하나(이 장에서 가져갈 유일한 것): "나는 윈도우 11을 쓰고 있어. 명령어는 PowerShell 기준으로 알려줘." — 이 한 줄이 없으면 에이전트가 맥 명령어를 던지고, 학생은 "안 되는데요"에서 멈춘다. 수요일 막힘의 상당수가 여기였을 것.

폰은 만드는 쪽이 아니라 보는 쪽이다. 오늘 만드는 건 전부 웹. 폰은 결과를 확인하는 자리에만 등장한다(P13에서 이어짐).

P23에서 회수할 말: "저는 맥이라 이렇게 치는데 윈도우는 다릅니다."

붙는 단어: 윈도우/맥 ● · PC ○ · 운영체제(OS) ○ · 아이폰/안드로이드폰 ○ — 4분.

Git은 오늘 이름만: "고칠 때마다 올립니다. 이 기록을 훨씬 촘촘하게 해주는 게 Git이에요. 최종_진짜최종 없애주는 물건." diff · merge · rebase는 없다.

왼쪽 화면을 손으로 훑으며: "한 줄이 한 번의 저장이에요. 누가 언제 뭘 고쳤는지가 다 남습니다."

오픈소스는 이 청중에게 무료 소스 라이브러리 · 플러그인이라고 하면 바로 붙는다. 오른쪽 Kenney 화면이 P22에서 실제로 쓸 그림·소리다.

라이선스는 한 줄만: "작품에 쓰시는 분들은 이게 실제로 걸립니다." 가운데 카드에서 초록 체크(되는 것)와 빨간 엑스(안 되는 것)만 손가락으로 짚는다. (§결정 3 — 한 줄에서 멈춘다.)

붙는 단어: Git ○ · GitHub ○ · 오픈소스 ○ · 라이선스 ○ — 3분.

정의를 먼저 말하지 않는다. 화면을 띄워 놓고 “지금 보시는 이게 앞무대예요”로 시작한다.

“프론트엔드라고 하면 어렵고, 화면이라고 하면 끝납니다. 오늘은 화면이라고 부르겠습니다.”

1분. 다음 장으로.

실제로 열어 보인다. 사주앱을 띄운 채 view-source:를 붙이거나 오른쪽 클릭 → 페이지 소스 보기.

“조금 전 그 예쁜 화면이 사실은 이 글자들입니다. 브라우저가 이걸 읽어서 그려 주는 거예요.”

“그리고 남의 사이트도 다 보입니다. 숨기는 게 아니에요. 원래 이렇게 만들어져 있습니다.” — 여기서 한 번 놀란다.

한글 주석(<!-- ① 정보 입력 화면 -->)을 짚는다: “여기 한글로 메모도 적혀 있죠. 사람이 읽으라고 적어 둔 겁니다.”

상자 둘. 그 이상 그리지 않는다.

“지난주 챗봇은 뒤가 있었어요. 그래서 대화가 이어졌고 선택이 기억됐죠. 오늘 만드는 둘은 뒤가 없습니다.”

“그래서 이따 슈팅게임 점수가 안 남아요. 새로고침하면 0입니다. 남기려면 뒤가 필요하고, 그때부터 다른 얘기가 됩니다.” → P36에서 회수.

사주앱도 같다 — 내 정보가 내 폰에만 있는 이유가 뒤가 없어서다. 그게 이 앱의 장점이기도 하다(개인정보가 어디로도 안 간다).

표를 손으로 훑는다. “페이지 하나 여는데 브라우저가 13번 물어봤어요. 파일 하나하나를 따로 달라고 합니다.”

“200이 뭐냐 하면 ‘여기 있습니다’예요. 못 찾으면 404고요. 그 404 맞습니다.”

jsDelivr 줄을 짚는다. “이 한 줄만 남의 서버에서 옵니다. 90킬로바이트짜리 만세력 계산기예요 — 아까 그 오픈소스요.” → P18 예고.

“그리고 P09에서 제가 친 그 한 줄, python3 -m http.server — 그게 제 노트북을 서버로 만든 겁니다. 서버가 대단한 게 아니에요.”

이 장은 말로 설명하지 않는다. P27에서 실제로 보인다 — 폰에서 localhost를 쳐서 실패시키고, 배포 주소로 성공시킨다. 여기서는 예고만.

“localhost는 ‘이 컴퓨터’라는 뜻이에요. 그래서 여러분 폰에서 치면 여러분 폰을 가리킵니다. 제 노트북이 아니라요.”

“남도 보게 하려면 남의 컴퓨터에 올려야 합니다. 그게 배포고, 오늘은 폴더를 끌어다 놓는 걸로 끝납니다.”

순서대로 짚는다. “남의 컴퓨터에 올렸으면 찾아갈 방법이 있어야죠. 기계는 숫자로 찾습니다 — IP 주소, 번지수예요.”

“근데 사람이 172.66.44.185를 어떻게 외웁니까. 그래서 이름을 붙입니다 — 도메인이에요. 그 이름을 번지수로 바꿔 주는 전화번호부가 DNS고요.”

왼쪽 화면: “시애틀, 런던, 상파울루, 이스탄불에서 같은 이름을 물어봤어요. 전부 같은 번지수가 나오죠. 전화번호부가 전 세계에 퍼져 있는 겁니다.”

“.pages.dev는 빌린 이름이에요. 내 이름을 사고 싶으면 도메인을 사서 이 번지수에 연결합니다 — 오늘은 안 합니다.”

이 장은 학생이 집에서 실제로 쓸 수 있는 유일한 도구다. "폰으로 확인해 보세요"는 말이 쉽지, 배포 전에는 못 한다. 그런데 이건 지금 당장 된다.

"여러분 노트북에서 F12 한 번 누르면 창이 하나 열려요. 무섭게 생겼는데 오늘은 그중 딱 하나만 씁니다 — 폰 화면처럼 보기."

시연: 슈팅게임을 띄운 채로 F12 → Ctrl+Shift+M → 기기 목록에서 iPhone 선택. 같은 페이지가 그 자리에서 폰 모양으로 바뀐다. 여기서 한 번 웃음이 나온다.

이어서: "제가 아까 QR로 보여드린 것도 이겁니다. 다만 그건 진짜 폰이고, 이건 흉내예요. 흉내로 90%는 잡힙니다. 나머지 10%는 손가락 크기하고 실제 속도라서, 그것만 진짜 폰으로 봅니다."

붙는 단어: 반응형 · 폰 화면과 PC 화면 · (덤으로) 개발자 도구가 P15 콘솔과 같은 창이라는 것 — 두 장 뒤 P15에서 회수한다. 3분.

"API 키는 키예요. 집 열쇠, 은행 열쇠와 같아요. 누가 가져가면 여러분인 것처럼 행세해서 AI 모델을 불러제낍니다. 한 번 부를 때마다 삼백 원, 오백 원, 칠백 원 돈이 뜯겨 나가요." [30:21]

화면 오른쪽 목차를 손가락으로 짚는다 — "환경 변수 사용(권장), 그리고 유출 대응 체크리스트. 만든 사람들도 이게 새어 나간다는 걸 아니까 문서에 이렇게 적어둔 거예요."

".env는 environment의 줄임말, .local은 로컬 세팅. 키나 환경 설정을 담는 상자." [34:44]

규칙 한 줄로 접는다: 키는 상자에, 상자는 내 컴퓨터에, 상자는 절대 같이 보내지 않는다.

노출되면: "원칙은 로테이션. 새로 만드는 겁니다." [33:53] — ⚠ 수요일 키는 실제로 노출됐고, 오늘 새 키로 왔다(§준비물).

태도 한 마디: "저는 아직도 일레븐랩스 홈페이지에서 어디서 효과음 만드는지 몰라요. 키 던지고 API · 모델 · Best Practice 찾아오라고 시킵니다." [49:00] — P15의 Best Practice로 이어진다.

P03에서 옆에 흐르던 게 이것. "안 될 때 저는 여기를 봐요. 빨간 줄 복사해서 그대로 AI한테 던지면 됩니다."

화면의 세 줄은 수요일 사주앱에서 실제로 찍힌 것이다. 빨간 줄 = 만세력 계산기를 못 불러왔다(P18에서 붙일 그 부품), 노란 줄 = 키가 없다(P14의 그 열쇠). "무슨 말인지 몰라도 됩니다. 이 줄을 그대로 복사하면 돼요."

그리고 Best Practice: "검색어에 Best Practice를 붙이세요. 우리말로 정석. 좋은 정보가 그 키워드 아래 잘 모여 있습니다." [49:31]

1분. 짧게 끊고 넘어간다.

랜드스케이프 회수(한 호흡) — 다섯 단어: 화면 · 서버 · 팩 · 열쇠 · 주소. 나머지는 이 다섯에 매달린다. 여기까지가 48분 지점이어야 한다.

앞 장 마지막 줄 “AI가 대신 칠 수 있다”에서 그대로 넘어온다.

“아까 제가 터미널에 네 줄 쳤죠. 그거 요즘은 제가 안 칩니다. AI한테 시켜요. 그런데 더 재밌는 건, 회사들이 그걸 알고 도구를 그렇게 만들기 시작했다는 거예요.”

비자 이야기를 먼저. “비자가 작년 봄에 낸 게 결제창이 아니라 명령어예요. 문서 첫 줄이 ‘당신의 AI 에이전트에게 비자 카드를 주세요’입니다.” — 여기서 웃음이 한 번 나온다.

두 번째 칸이 이 장의 하이라이트다. “비자 홈페이지를 열면 우리는 광고를 봅니다. 그런데 그 페이지 안에 ‘여기 아래는 이 페이지를 읽는 AI를 위한 것’이라고 적힌 구획이 따로 있어요. 같은 주소인데 손님을 둘로 나눈 겁니다.” → 이 청중에게 가장 오래 남는 장면.

마이크로소프트 칸에서는 이유를 짚는다: 그래픽 화면은 사람 눈을 위해 만들어졌고, AI가 그걸 이해하려면 스크린샷을 해석해야 해서 느리고 비싸고 자주 틀린다. 명령어는 짧고 모호하지 않다.

MCP는 이름만. “표준 콘센트” 한 마디면 된다. 숫자는 읽지 말고 손으로만 짚는다.

마무리 문장을 그대로 읽는다. 필요하면 현장 언어로 한 번 더: “내가 툴을 익히는 속도보다, 툴이 AI에게 맞춰지는 속도가 더 빠릅니다.”

붙는 단어: CLI(회수) · MCP ○ — 4분.

사진 한 장과 일화 하나로 4분. 연도를 외우게 하는 장이 아니다. “고치고 싶은데 고칠 수가 없었다”는 감정 하나만 남기면 된다.

읽어도 되는 문장 — “1980년, MIT 인공지능 연구소에 새 프린터가 들어왔습니다. 종이가 자주 걸렸는데 연구소가 다른 층이라, 한참 뒤에 가보면 아무것도 안 뽑혀 있는 거죠. 스톨먼은 이전 프린터에서는 이 문제를 직접 고쳤던 사람입니다. 그런데 새 프린터는 그게 안 됐어요. 설계도를 안 줬거든요.”

“코드를 가진 교수를 찾아갑니다. 그리고 거절당해요. ‘제록스에 안 주기로 약속했다.’ 요즘 말로 NDA입니다. 당시엔 이게 소프트웨어 업계에 막 등장한 새 관행이었어요.”

⚠ 교수 이름(로버트 스프롤)은 정황 근거만 있고 1차 문헌이 단정하지 않는다 — “카네기멜런의 한 교수”로만 말한다.

free 두 가지 뜻은 말로 한 번 더 풀어 준다. “돈 받고 팔아도 됩니다. 문제는 값이 아니라 통제권이에요.” 자유 4가지는 번호가 0번부터 시작한다는 것 자체가 이 동네 문화라고 한 마디 붙이면 웃는다.

전환 — “여기까지는 한 사람의 원칙 이야기입니다. 이게 어떻게 산업이 됐을까요.”

사진 저작권: Patafisik, CC BY-SA 4.0, via Wikimedia Commons. 크레딧 줄은 법적 의무라 화면에 남겨 둔다.

사진 셋으로 사람 이름을 붙여 두고, 아래 연표는 손가락으로 짚으며 넘긴다. 4분 안에 다섯 줄이다 — 한 줄에 45초.

성당 vs 시장은 영화 비유로 바꾸면 바로 붙는다. “성당식은 완성될 때까지 아무에게도 안 보여주는 감독판입니다. 시장식은 러프컷을 매일 올려놓고 누구나 코멘트를 달게 하는 방식이에요. 상식적으로는 전자가 좋을 것 같은데, 소프트웨어에서는 후자가 이겼습니다.”

“눈이 충분히 많으면 모든 버그는 얕다” — “시사회에 100명이 앉아 있으면 편집 실수는 반드시 누군가 잡아냅니다.”

순서가 핵심이다. 넷스케이프가 먼저 열었고(1월), 이름은 그 뒤에 붙었다(2월). 회사가 실용적인 사업 판단으로 코드를 여는 시대가 오자 “다른 이름이 필요하다”가 된 것이다.

⚠ 명명 회의 날짜는 OSI 공식(2/3)과 피터슨 본인 회고(2/5)가 갈린다 — “1998년 2월”로만 말한다. 또 피터슨이 직접 제안한 게 아니라, 토드 앤더슨이 회의 중 그 표현을 끼워 넣어 퍼뜨렸다는 대목까지는 여유 있을 때만.

⚠ 피터슨 사진은 원본이 512×542로 작아 확대돼 흐리다. 그래서 셋 중 가장 작게 배치했다 — 화질 얘기는 굳이 하지 않는다.

전환 — “그래서, 지금 그게 어디까지 왔을까요.”

이 장이 이 챕터의 목적지다. 비유가 주인공이고 연혁은 배경이다 — 위 네 칸은 15초에 훑고, 표와 사진에 4분을 쓴다.

강사 대사 — “커밋을 자주 박을수록 떨어질 때 덜 떨어집니다. 말뚝을 10미터마다 박으면 10미터를 떨어지고, 1미터마다 박으면 1미터만 떨어져요. final_최종_진짜최종이 사라지는 이유가 이겁니다. 파일 이름으로 버전을 관리할 필요가 없어져요.”

사진 셋을 순서대로 짚는다 — ① 손이 퀵드로를 거는 순간이 커밋. ② 로프가 아래로 계속 이어지고 말뚝마다 걸려 있는 게 히스토리. 오른쪽 확대 컷에서 말뚝 간격을 짚으면 “자주 박아라”가 한 번에 붙는다. ③ 아래에서 같이 출발해 중간에 갈라지는 두 루트가 브랜치다.

“분산”은 한 문장이면 된다 — “모든 참여자가 전체 역사를 통째로 갖고 있습니다. 회사 서버가 날아가도 아무나 한 명의 노트북으로 완전히 복구돼요. 인터넷이 끊겨도 혼자 계속 기록할 수 있고요.”

GitHub 한 줄 정리 — “Git은 도구고, GitHub는 그 도구를 쓰는 사람들이 모인 광장입니다. 2018년에 마이크로소프트가 그 광장을 75억 달러에 샀어요. 한때 ‘오픈소스는 암이다’라고 했던 그 회사가요.”

오른쪽 GitHub 캡처는 겁을 주려고 띄우는 게 아니다. “한 줄에 하나씩, 누가·언제·무엇을 고쳤는지가 적혀 있을 뿐입니다. 여러분이 오늘 만들 앱도 이렇게 남습니다.”

⚠ 라이브로 git 명령을 치지 않는다. 이 장은 개념만이고, 실제 커밋·배포는 뒤 챕터에서 결과 화면으로만 보인다.

이 장의 목적은 하나다 — “오픈소스가 어디 있냐”는 질문에 대한 가장 강한 답. 이 방에 있는 모든 사람이 오늘 아침에도 FFmpeg를 썼다. 유튜브를 봤으니까.

왼쪽 그림을 가리키며: “위에 있는 게 우리가 아는 회사들이고, 저 밑에 가느다란 기둥 하나가 FFmpeg입니다. 2000년부터 자원봉사로 유지되고 있어요.”

→ 앞 장(오픈소스가 위태롭다 · left-pad · xz)과 바로 이어진다. “아까 그 얘기가 이겁니다.”

영화인용 연결: “프리미어나 다빈치가 뒤에서 하는 일의 상당 부분이 이런 처리예요. 차이는 FFmpeg는 사람 없이 시킬 수 있다는 것. 파일 100개를 한 번에 돌립니다.”

명령어 한 줄을 읽어 준다 — -i는 입력, -vn은 “영상 빼고”. “이게 CLI예요. 아까 본 그 창에 이 한 줄을 칩니다.”

⚠ 유튜브는 말하지 마라. 공식 확인 문서를 못 찾았다(떠도는 건 개인 블로그 정황뿐). 넷플릭스는 확인됨 — 자사 기술블로그에 “an FFmpeg-based filter that runs together with other video transformations”라고 적혀 있다. 크롬도 소스 트리에 FFmpeg를 포함한다. 이 둘까지만.

앞 장(FFmpeg)에서 바로 이어진다. "FFmpeg가 영상을 다루는 도구라면, 이건 영상을 가져오는 도구예요. 둘은 거의 항상 같이 씁니다."

숫자 두 개만 짚는다: "1,363개 사이트를 지원합니다. 사이트마다 화면 구조가 다르니까 해석기를 1,731개 따로 만들어 뒀어요. 이걸 자원봉사로 유지합니다."

우회 이야기는 흥미롭게, 그러나 짧게. "사이트들이 막으려고 하죠. 그래서 브라우저인 척하고(--impersonate), 내 로그인을 빌리고, 유튜브처럼 창구가 여럿이면 다른 창구로 물어봅니다. 재밌는 건 가장 확실한 방법이 천천히 묻는 것이라는 거예요."

⚠ 반드시 한 줄 붙인다: "도구가 자유롭다고 남의 영상까지 자유로운 건 아닙니다. 저작권과 약관은 그대로예요." — 이 말을 빼면 안 된다.

마무리는 클로드 코드 예시로. 오른쪽 두 상자를 나란히 짚는다. "제가 친 건 위에 있는 한국말 한 문장이고, 아래 두 줄은 에이전트가 알아서 친 겁니다. 오늘 배운 게 다 여기 있어요 — CLI, 오픈소스 도구 두 개, 그리고 그걸 사람 말로 시키는 것."

3분.

오늘 쓰지 않는 것을 왜 보여주나 — 집에 가서 검색하면 이 두 이름이 계속 나오기 때문이다. “같은 종류구나”만 알면 헷갈리지 않는다.

“올리는 곳은 하나가 아니에요. 오늘은 Cloudflare Pages를 쓰는데, Vercel도 똑같이 폴더를 올리면 주소를 줍니다. 개인용은 둘 다 공짜예요.”

v0는 이 청중에게 실제로 유용하다 — 설치가 없다. 브라우저에서 말로 설명하면 화면이 나온다. “터미널이 아직 부담스러우시면 여기서 먼저 감을 잡으셔도 됩니다.”

차이를 한 줄로: Vercel은 서버가 필요한 사이트에 강하고, Cloudflare Pages는 화면만 있는 사이트에 간단하다. 오늘 만든 건 후자라 어느 쪽이든 된다.

읽어 주지 않는다. 손으로 훑으며 “이 여덟 개는 집에서 열어 보세요. 단톡방에 올려두겠습니다.”

세 개만 짚는다 — Cloudflare Pages(오늘 쓰는 것) · Replit(터미널이 부담스러운 분) · Kenney(오늘 게임 그림이 여기서 왔다).

Hugging Face는 이 청중 중 영상·음성 생성에 관심 있는 분에게 다음 단계다. “모델이 뭐가 있는지 직접 보실 수 있어요.”

이 장은 안전망이다. 오늘 못 따라온 분도 이름 여덟 개는 가져간다.

P20 끝에 띄우고 한 마디만 — “키는 무료로 2분이면 만듭니다. 이 세 장을 단톡방에 올려두겠습니다.” 읽어 주지 않는다.

이 수업 권장 — 대화·사주 문장까지는 A만(카드 등록 없음). 전원 여기까지면 충분하다.

“무료로 몇 번 되는지”는 단정하지 않는다. 구글이 숫자를 문서에서 뺐고 계정마다 다르다. 수요일에 무료 한도가 소진돼 주인공 한 장에서 멈춘 게 이 때문이다.

지킬 것 셋(화면에 없음, 말로만) — ① 키를 채팅창·단톡방·화면 공유에 붙이지 않는다. 붙였다면 샌 것으로 친다 ② 샌 것 같으면 지우고 새로 만든다(로테이션) ③ 폰에 넣은 키는 그 브라우저에만 남는다.

수요일에 실제로 걸린 것 — 켜져 있던 서버가 옛 키를 물고 있었다. 완전히 끄고 다시 켜야 새 키를 읽는다.

기존 Google Cloud 사용자는 자동 생성이 안 된다 → Projects에서 프로젝트를 먼저 가져온(import) 뒤 만든다. 현업 경험자 질문 대비.

이 장은 이미지까지 해보고 싶은 분만. 화면에 띄우고 “여기까지 오실 분은 이 한 장 보시면 됩니다”로 끝낸다.

볼트 02_보강_2026.09.02의 구글API키_획득절차 · 학생용_무료API키_발급안내와 일치.

P21 끝에 띄우고 한 마디만 — “집에서 하실 분은 이 두 장이면 됩니다. 단톡방에 올려두겠습니다.” 읽어 주지 않는다.

오늘 강사는 ①(드래그) 또는 ②(wrangler pages deploy)로 한다. ③은 “에이전트한테 ‘올려줘’까지 시키는” 사람의 길이다.

구글 키와의 차이를 한 번 짚는다 — 돈이 안 달려 있는데도 열쇠인 이유는 토큰이 새면 남이 내 사이트를 덮어쓰거나 지울 수 있어서다.

프로젝트 이름 = 주소. 오타가 영구 주소가 된다. 처음에 정한다(예: hong-saju).

이 장도 읽어 주지 않는다. “에이전트한테 배포까지 시키고 싶으신 분만 보세요.”

권한은 한 줄로 충분하다 — Account · Cloudflare Pages · Edit. 템플릿을 쓰면 필요 이상으로 넓어진다.

함정 둘(화면에 없음) — ① 고친 게 바로 안 보인다(캐시): 시크릿 창이나 하드 리프레시(Ctrl+Shift+R) ② wrangler login이 창을 못 띄우면(윈도우) 터미널에 뜬 URL을 복사해 직접 연다.

구글 키와 반대다 — AI Studio 키는 다시 볼 수 있지만 Cloudflare 토큰은 생성 직후 한 번뿐이다. 여기서만 “지금 복사하세요”가 맞는 말이 된다.

사주앱(P16)과 같은 구조다. 거기선 대상·경험·목표·금지 넷을 적었고, 여기선 조작과 부품이 더 붙었을 뿐이다.

왼쪽 명세를 소리 내어 읽는다. 다 읽고 나서: “여기 기술 용어가 한 줄이라도 있었습니까. 없어요. 제가 적은 건 누가 보고, 어떻게 만지고, 뭘 느끼고, 뭘 하지 말라는 것뿐입니다.”

“총알은 알아서 나간다, 쏘는 버튼은 없다” — 이 한 줄이 왜 중요한지 짚는다. 60명이 폰으로 처음 잡는 게임이라 버튼이 하나라도 늘면 안 된다. 제약을 먼저 적는 것이 좋은 명세다.

오른쪽으로 넘어가며: “게임 엔진도 남이 만든 겁니다. 그림하고 소리도요. 이거 없으면 이 게임 못 만들어요.”

오픈소스 두 번째 — 아까는 계산기 하나(만세력), 이번엔 엔진·그림·소리 전부.

assets/CREDITS.txt를 잠깐 띄운다: “조건이 ‘표기’인 것도 있어요. 이 파일이 그겁니다.”

⚠ 스프라이트 실물은 img/sprites/의 진짜 파일이다(32~104px). 확대해서 각이 지는 건 원래 그렇다고만 말하고 넘어간다. boss_body.png가 1024×64라는 것은 P24에서 “보스가 찌그러져 보인다”를 설명 없이 이해시키는 복선 — 필요하면 그때 짚는다.

화면 셋을 나란히 — 터미널 + 에디터 + 브라우저.

REPLAY 1~2단계, 필요하면 3단계까지. 4번은 시간이 될 때만.

명령어를 칠 때 P10(기기와 운영체제 — 같은 말을 다르게 친다)을 한 번 더 회수한다.

파일 이름을 보이면서: "이름을 왜 이렇게 붙였을까요. 사람도 알아보고 기계도 알아보라고요."

붙는 단어: 윈도우/맥 ● · 파일 이름·구조 ● · 소스 코드 ○ — 10분.

⚠ 시간 관리 — REPLAY 실측은 1~3단계 85분이다. 오늘은 골격만 10분이 목표다. 2번(이동)에서 막히면 붙들지 말고 완성본으로 전환하고, 골격은 미리 찍어 둔 캡처 3장으로 대체한다.

⚠ bullet_player_viper.png는 화면에서 점처럼 작아 스프라이트 실물을 안 띄운다(그 줄만 그림 없음). 대신 이름이 세 토막이라는 것만 짚는다.

순서: 이미지 생성 → assets/sprites/enemy_weak/enemy_scout.png 덮어쓰기 → 하드 리프레시(Ctrl+Shift+R / Cmd+Shift+R) → 다른 색 적이 내려온다.

"지금 얘한테 그림 하나를 새로 그려 달라고 시킬 건데, 다른 회사 서비스한테 전화를 거는 거예요. 아까 그 열쇠, 여기서 또 씁니다." — P20 API 키 회수.

함정을 숨기지 말고 그대로 보여준다. 일반 새로고침으로는 안 바뀐다. "브라우저는 그림을 한 번 보면 기억해 두려고 해서, 강제로 다시 불러오라고 알려줘야 해요. 그게 방금 누른 새로고침이에요."

⚠ REPLAY C-1: 대본을 쓰다가 실제로 한 번 걸렸다. 무대에서 당황하지 말고 그 자리에서 설명 재료로 쓴다.

붙는 단어: API 키 ●(회수) · 캐시 –(한 마디) — 8분.

먼저 변경 범위를 말한다: "건드릴 데하고 안 건드릴 데를 먼저 말합니다. 이게 프롬프트 잘 쓰는 것보다 중요해요." — enemies.js(움직이는 코드)는 한 줄도 안 건드린다.

"이 목록 하나만 봐주세요. 게임을 움직이는 큰 코드는 이 목록만 읽고 '적이 몇 종류 있구나' 하거든요. 그래서 적 하나 추가하는 게 게임 전체를 다시 짜는 일이 아니라, 이 목록에 한 줄 더하는 일이 돼요." — P05 "구조 자체가 자산"의 회수.

붙는 단어: 변경 범위 ● · 구조=자산(회수) — 6분. 시간이 밀리면 제일 먼저 자르는 장이다.

⚠ 계획서 불일치 — 볼트 04_수업활용_리허설.md는 enemies.json을 가정했지만 실제 구현엔 그 파일이 없다. 무대에서는 이 문서/REPLAY.md만 본다. 학생이 파일명을 물으면 difficulty.js라고 답한다.

⚠ 실패 시 — REPLAY는 "7종 버전 별도 배포 주소"를 대체로 적었다. 그 주소가 실제로 있는지 아침에 확인(준비물 항목).

치기 전에 묻는다: "숫자 두 개만 바꿀 거예요. 하나는 적이 내려오는 속도, 하나는 나오는 간격. 이게 이렇게 바뀌면 게임이 어떻게 달라질 것 같으세요?"

바뀐 뒤: "숫자 하나 바꿨는데 게임이 달라지죠. 그리고 방금 그 무서운 콘솔에서 한 거예요." — P15(문제를 볼 때)의 뒤집기.

영구히 바꾸려면 difficulty.js 맨 위 LIVE_TUNE 세 값 → 저장 → 새로고침.

보스 시연 (실측 검증) — 보스는 고정 105초에 나오고 잡는 데 2~3.5분이 더 든다(호밍니들 113초 · 바이퍼 178초). 자연 플레이로는 4~5분. 그래서 시작 전에 콘솔 한 줄을 미리 친다. "숫자 세 개 더 바꿨더니 보스가 15초에 옵니다."

⚠ 보스전에 들어가면 3번 키(펄스레이저)를 쓰지 않는다 — 사거리가 안 닿아 데미지 0이다(P24 시연 자세 ②).

붙는 단어: 소스 코드 ● · 콘솔 ○(무섭지 않다) — 4분.

"고칠 때마다 올립니다. 이 기록을 훨씬 촘촘하게 해주는 게 Git이에요." — P12 회수, 여기까지만.

"같은 주소가 PC에서도 폰에서도 열립니다." → 예순 명이 각자 폰으로 한 판. 시간이 남으면 적 하나를 더 라이브로 추가한다.

폰 안내 문구: "폰에서는 손가락으로 끌면 됩니다. 폭탄은 PC에서만요. 금방 죽는 게 정상이에요."

⚠ 하단 안내문이 폰에서는 틀린 말이다("방향키/WASD+마우스 · SPACE · 우클릭"). 학생이 그걸 보고 헤매기 전에 먼저 말해 준다.

⚠ 실물 iOS Safari·Android Chrome은 미검증이다(에뮬레이션만 통과). 아침에 폰 1대로 연타·핀치 줌을 확인한다.

⚠ 60명 최초 로드 = 1인당 2.1MB. QR을 쉬는 시간에 미리 열게 하면 동시 접속 부하를 피할 수 있다.

붙는 단어: 재배포·Git ○ · 반응형·기기 ○ — 3분.

P08에서 봤던 그 지도 그대로. 이번엔 칸마다 오늘 만든 것이 들어가 있다. 새 단어를 얹지 않는다 — 이미 나온 것만 제자리에 놓는다.

왼쪽부터 짚는다. 내 컴퓨터 — 사주앱 화면과 내 사주(기억), 게임 코드와 difficulty.js. 남의 컴퓨터 — 두 주소(pages.dev). "올렸으니 남도 봅니다. 다만 점수는 여기 없어요 — 각자 폰에만 있습니다." 바깥 — 구글 AI, 이미지 생성, 열쇠와 비용. 그리고 왼쪽으로 들어온 것: 만세력·Phaser·Kenney.

회수 문장 다섯을 하나씩 읽는다. 설명을 덧붙이지 않는다.

클로징: "어떤 시스템과 스토리텔링이 합쳐져 돌아가는 구조를 만드는 것, 전체가 그렇게 어려운 과업은 아닙니다." [27:39]

5분.

네 줄만 읽고 끝낸다.

① 오늘 만든 것 중 하나를 자기 재료로 바꿔 본다 — 사주앱의 주제 버튼 하나, 게임의 적 그림 하나. 둘 다 안 해도 된다. 하나면 된다.

② 안 되면 어디까지 됐는지 캡처를 남긴다. 환경 문제는 창작 실패가 아니다. "실패해도 어디까지 됐는지 말할 수 있으면 됩니다."

③ 주소가 나오면 단톡방에.

④ (선택) P10에서 본 실전 규칙 — AI에게 첫 문장으로 내 환경을 말하는 습관. "나는 윈도우 11이야."

두 주소는 화면에 띄운 채로 두고, 단톡방에도 올린다. 2분.