1편과 2편, 무엇이 같고 다른가

오늘의 흐름

핵심 블록 합계 185분

여기에 휴식 10분 × 2회와 진행 버퍼 20~30분을 더해, 총 225~235분(약 3시간 45분~3시간 55분)을 확보합니다.

오늘의 도착점

Claude Code란

Anthropic(클로드를 만든 회사)이 만든 코딩 에이전트입니다. ChatGPT처럼 대화창 안에서 답만 주는 것이 아니라, 내 컴퓨터 안에서 직접 움직입니다 — 폴더를 읽고, 파일을 만들고, 프로그램을 실행합니다.

1편에서 배운 바이브코딩(카파시)의 원리는 그대로입니다 — 도구만 더 힘세졌습니다.

준비 체크

이 아이디어, 오늘에 적합한가?

• 첫 버전 기능을 3개 이내로 줄일 수 있다
• "뭘 누르면 뭐가 나온다"를 한 문장으로 말할 수 있다
• 로그인 · 회원가입 같은 복잡한 인증이 필요 없다
• 사내 데이터 · 개인정보를 다루지 않는다
• 유명 서비스를 통째로 재현하는 것이 아니다 (예: "인스타그램 같은 거" → 당일 축소 필요)

마지막 블록에서 내 앱을 게시판에 올려 폰으로 열어 봅니다 — 스마트폰을 옆에 두세요.

Claude Code 설치

1. 시작 메뉴 → "PowerShell" 검색 → 실행 (관리자 권한 필요 없음)
2. 아래 설치 명령을 복사해 붙여넣고 Enter

irm https://claude.ai/install.ps1 | iex

설치 확인 — claude --version을 입력해 버전 번호가 뜨면 성공입니다.

로그인 · 첫 만남

mkdir my-app; cd my-app; claude

1. 위 한 줄을 붙여넣고 Enter — 새 폴더를 만들고 그 안에서 Claude Code를 시작합니다
2. 브라우저가 열리면 유료 Claude 계정으로 로그인합니다

환경 점검도 말로 시킨다

Claude Code 자체는 추가 설치가 필요 없습니다 — Node.js는 필요 없고, Git도 "있으면 더 좋음(권장)" 정도입니다. 오늘 만들 결과물(단일 HTML 앱)도 사실 지금 상태 그대로 돌아갑니다.

그래도 지금 환경을 점검하고 나머지 도구 설치를 Claude Code 본인에게 말로 시킵니다 — 이유는 셋입니다.

1. Git이 있으면 Claude Code가 더 잘 돈다 (공식 권장)
2. Node.js · Python은 앱을 키우는 다음 단계에서 바로 필요하다
3. 손이 비어 있는 지금이 설치하기 좋은 때다

본격적으로 시작하기 전에 내 컴퓨터 환경부터 점검하자. 나는 코딩을 전혀 몰라.

1) 개발할 때 자주 쓰는 도구들이 내 컴퓨터에 설치돼 있는지 확인해줘 — Git, Node.js, Python.
2) 없는 것이 있으면, 그게 뭐에 쓰는 도구인지 한 줄씩 설명해주고 하나씩 설치해줘.
3) 설치 중에 권한을 묻는 창이 뜨면 내가 눌러야 하니까 미리 알려줘.
4) 다 끝나면 전부 잘 설치됐는지 버전 확인으로 검증해서 표로 정리해줘.

조사 · 기획 — 계획 모드

Shift+Tab을 눌러 계획 모드로 들어갑니다 — 화면 아래에 "plan"이 표시됩니다.

계획 프롬프트

나는 [앱 이름 — 무엇을 하는 앱인지 한 줄]을 만들고 싶어. 나는 코딩을 전혀 몰라.

바로 계획을 세우지 말고, 먼저 나에게 질문해줘.
- 이 앱을 정확히 이해하는 데 필요한 것을 한 번에 2~3개씩만 묻고, 내 답을 듣고 이어서 질문해줘.
- 누가 쓰는지, 꼭 필요한 기능이 무엇인지, 어떤 화면이 필요한지 분명해지면 질문을 멈춰줘.

질문이 끝나면 아래 형식으로 "앱 계획서"를 만들어줘.
1) 앱 한 줄 소개
2) 첫 버전 핵심 기능 — 3개 이내 (욕심내지 말 것)
3) 화면 구성 — 말로 그린 그림
4) 만드는 순서 — 단계별
5) 결과물 형태 — 더블클릭하면 브라우저에서 바로 열리는 웹앱 파일 하나(HTML)로 만들어줘. 인터넷 연결이나 설치, 로그인 없이 내 컴퓨터에서 바로 돌아야 해.

계획서 검토 · 승인

Claude가 "앱 계획서"를 보여주면, 승인하기 전에 3가지를 확인합니다.

1. 기능이 3개 이내인가
2. 화면이 머릿속에 그려지는가
3. 내가 남에게 설명할 수 있는가

실행 — 지켜보기

파일이 만들어지고 코드가 쓰이는 과정이 화면에 실시간으로 흐릅니다.

1. Claude가 승인을 물으면, 내용을 읽고 수락한다
2. 궁금하면 "지금 뭘 하고 있는 거야?"라고 물어봐도 된다
3. 기다리는 동안 다음 두 개념 슬라이드로 진행한다

로컬이란

오늘 만드는 앱은 파일 하나(HTML)입니다 — 더블클릭하면 브라우저에서 열립니다. 오프라인으로 작동하고, 데이터는 내 컴퓨터를 벗어나지 않습니다.

터미널이란

검은 화면의 정체는 이것입니다 — 마우스로 클릭하는 대신 컴퓨터에게 명령을 글자로 입력하는 창입니다. 예전엔 개발자만 쓰는 언어였지만, 이제는 그 언어를 Claude가 우리 대신 말해줍니다. 오늘 우리가 직접 입력하는 줄은 딱 두 줄뿐입니다.

내 앱 열기

Claude가 다 됐다고 하면, "브라우저에서 열어줘"라고 말하거나 my-app 폴더 안의 html 파일을 더블클릭합니다.

검수 프롬프트

앱이 일단 완성됐어. 이제 검수를 하자.

1) 먼저 네가 스스로 점검해줘 — 계획서의 기능이 전부 들어갔는지, 버튼을 눌렀을 때 안 되는 곳은 없는지 하나씩 확인해줘.
2) 코딩을 모르는 사람이 처음 열었을 때 헷갈릴 만한 부분이 있으면 알려줘.
3) 점검이 끝나면 "내가 직접 확인해볼 것 3가지"를 알려줘. 내가 해보고 이상한 점을 말로 알려줄게.

반복 개선 루프

1. 내 앱을 직접 써 본다
2. 이상한 점을 말로 이야기한다
3. Claude가 고친다
4. 다시 확인한다

배포 — 게시판에 붙이기

게시판은 재단 서버에 이미 만들어져 있습니다 — 가입할 것도, 깔 것도 없습니다. 붙이는 데 필요한 것은 열쇠 하나뿐입니다 — 우편함 열쇠처럼, 붙일 수 있는 사람에게만 있습니다.

여기는 도전 목표입니다 — 블록 5까지 마쳤으면 이미 완주입니다. 배포가 안 돼도 완주 실패가 아닙니다.

Claude Code에게 배포 시키기

이제 이 앱을 배포하고 싶어. 아래 순서대로 해줘.

1) 앱이 index.html 한 파일로 완결되는지 확인해줘. 다른 파일(css·js·이미지)이 더 있으면 index.html이 맨 위에 오도록 전부 zip 하나로 묶어줘.
2) 앱 이름을 정해줘 — 영문 소문자·숫자·하이픈만, 끝에 내 이니셜을 붙여서 (예: book-log-hc). 한글·공백·대문자는 안 돼.
3) 아래 명령으로 배포해줘. [배포 열쇠]는 강사가 알려준 열쇠로, [앱이름]은 2)에서 정한 이름으로, [파일]은 index.html 또는 zip 파일로 바꿔서.
   curl -F token=[배포 열쇠] -F name=[앱이름] -F file=@[파일] https://subserver2.duckdns.org/apps/deploy
4) 응답으로 돌아온 주소를 알려주고, 그 주소가 실제로 열리는지(HTTP 200) 확인한 결과도 알려줘. 실패했으면 응답 내용을 그대로 보여줘.

잘 됐으면 Claude Code가 이런 한 줄을 받아 옵니다 — true는 성공이고, url 뒤가 내 앱의 주소입니다. 나머지 숫자는 몰라도 됩니다.

{"ok":true,"url":"https://subserver2.duckdns.org/apps/book-log-hc/","files":1,"version":1}

폰으로 확인하기 · 안 되면 우회로

1. Claude Code에게 "내 앱 주소만 한 줄로 다시 보여줘"라고 말합니다 — 그 줄을 마우스로 긁으면 PowerShell에서는 그대로 복사됩니다(붙여넣기는 우클릭). 복사한 주소를 나에게 카톡으로 보내 폰에서 누르면 됩니다
2. 내 앱이 폰 화면에 뜨면 — 오늘의 도전 목표 달성입니다 🎉
3. 폰에서는 내가 컴퓨터에서 적어 둔 내용이 안 보이는 것이 정상입니다 — 기록은 기기마다 따로 저장되니까요. 앱 화면이 뜨면 성공입니다
4. 옆 사람에게 주소를 보내 열어 달라고 해보세요 — 남의 폰에서도 열립니다

명령이 안 먹으면 — 끌어놓기로 우회

1. 브라우저 주소창에 https://subserver2.duckdns.org/apps/를 그대로 입력해 엽니다
2. 내 앱 파일(html 파일 하나 — 이름이 index.html이 아니어도 됩니다)을 화면에 끌어놓습니다
3. 앱 이름과 열쇠를 넣고 [올리기]를 누르면 — 같은 주소가 나옵니다

마무리 — 오늘 가져가는 것

배포까지 못 간 분도 오늘 완주하셨습니다 — 완주 최소선은 브라우저에서 내 앱이 열리는 것이었고, 그건 블록 4에서 이미 넘었습니다.

진행자용 타임테이블

진행자(HC · 보조 진행자) 참고용

위 표는 지연 없는 기준 진행표입니다(0:00~3:25, 205분 = 핵심 185분 + 휴식 20분). 여기에 진행 버퍼 20~30분을 더하면 총 225~235분(약 3시간 45분~3시간 55분)이 됩니다.

블록 6은 도전 목표 구간입니다 — 시간이 부족하면 폰으로 확인(21쪽 위 절반)까지만 하고, 끌어놓기 우회 안내(21쪽 아래 절반)는 마무리로 넘겨도 됩니다.

막힘 대응 표

진행자(HC · 보조 진행자) 참고용