목차
  1. 00이 책은 무엇을 약속하는가
  2. 01설치, 한 시간이면 끝난다
  3. 02첫 대화, 그리고 권한 창
  4. 03AI에도 종류가 있다
  5. 04챗봇과 무엇이 다른가
  6. 05작업 공간 만들기, CLAUDE.md와 Skill 🔒
  7. 06지도, 왜 코드보다 설계가 먼저인가 🔒
  8. 07무엇을 만들고, 무엇을 안 만들까 🔒
  9. 08모으고, 견주고, 갈림길을 고른다 🔒
  10. 09PRD, 설계 문서로 굳히기 🔒
  11. 10화면 시안 고르기, 웹 넷 앱 넷 🔒
  12. 11PRD 고쳐 쓰기, 왜 바뀌었는지 남긴다 🔒
  13. 12지도, 오늘 진짜로 만드는 것은 설계 문서 🔒
  14. 13설계 문서 완성하기, 이것만 보고 만들 수 있게 🔒
  15. 14만들 자리, 개발 환경과 빈 화면 🔒
  16. 15웹 첫 화면, 네 바퀴 — 문서 먼저 화면 나중 🔒
  17. 16웹 둘째 화면과 간판 시안 🔒
  18. 17앱을 내 폰에 띄우기 🔒
  19. 18앱 화면과 간판, 문서대로 하나씩 🔒
  20. 19갈림길, 저장되게 만들기 또는 화면 더 🔒
  21. 20GitHub 가입, 열쇠부터 만든다
  22. 21Supabase, 데이터를 둘 창고 만들기
  23. 22웹과 앱을 창고에 잇기 🔒
  24. 23설계 문서 고쳐 쓰기, 누가 만들어도 똑같이 🔒
  25. 24올리기 전에, Vercel 가입
  26. 25인터넷에 올리기, GitHub 창고와 Vercel 주소 🔒
  27. 26빠진 것 마저 만들기, 한 바퀴에 하나씩 🔒
  28. 27메뉴 더하기, 문서에 없던 것을 넣는 순서 🔒
  29. 28앱 회원 로그인, 이메일로 받은 코드 🔒
  30. 29구글 플레이에 올리기, 비공개 테스트까지 🔒

AI 종류와 Claude Code · 웹 · 앱 만들기용

1부 — Claude Code라는 도구 · 03장 · 약 7분

AI에도 종류가 있다

AI 종류와 Claude Code — Claude가 답을 만드는 원리와 AI가 기억하는 양의 끝. 왜 "수정해줘" 라고 하면 엉뚱하게 고쳐 오는지까지.

만들고, 올린다 — Claude로 웹 · 앱을 만들어 올리는 책30장 중 03장 · 공개 8장은 무료로 읽어요 · 가이드북 전체 보기

3.1 이 장은 손을 쉽니다

2장까지 손을 움직였습니다. 이 장은 실습이 없습니다. 읽기만 하는 장입니다.

지금부터 4주 동안 “AI에게 만들 것을 시키는” 일을 계속할 텐데, 상대가 뭔지 모르고 시키면 계속 헛다리를 짚기 때문입니다.

이 장에서 답할 질문은 셋입니다.

  1. AI라고 부르는 것들이 다 같은 건가?
  2. Claude는 대체 어떤 원리로 답하나?
  3. 왜 “수정해줘” 라고 하면 엉뚱하게 고쳐 오나?

세 번째 질문이 이 책의 핵심과 닿아 있습니다. 짧게 갑니다.


3.2 AI는 한 종류가 아니다

“AI 써봤어요?” 라는 질문은 사실 “탈것 타봤어요?” 만큼 막연합니다. 자전거인지 비행기인지에 따라 완전히 다른 이야기니까요.

지금 우리가 AI라고 부르는 것들은 크게 이렇게 나뉩니다.

종류하는 일예
💬 대화형 (챗봇)질문에 답하고, 글을 쓰고, 요약한다ChatGPT · Claude · Gemini
🎨 이미지 생성글을 받아 그림을 만든다Midjourney · DALL-E · Stable Diffusion
⌨️ 코딩 ⭐코드를 쓰고, 파일을 만들고, 실행한다Claude Code · GitHub Copilot · OpenAI Codex
🎯 특화번역·음성·영상 한 분야에 맞춤DeepL · Whisper · Sora

우리가 쓰는 건 코딩 칸입니다.

여기서 첫 번째 오해가 풀립니다. Claude Code에게 “가게 사진을 그려줘” 라고 해도 안 됩니다. 종류가 다릅니다. 2기 1단계에서 앱 첫 화면에 넣을 사진을 images/ 폴더에 샘플로 미리 넣어 두는 이유가 이것입니다. 사진은 사람이 준비합니다.

다만 코딩 칸은 대화형 칸을 포함합니다. Claude Code는 대화형이 하는 일(글 읽고 글로 답하기)을 다 하면서, 거기에 두 가지가 더해진 것입니다.

대화형 AI(글 → 글)에 파일 접근과 코드 실행을 더하면 Claude CodeClaude Code = 대화형 AI + 파일 접근 + 코드 실행

한 줄로 줄이면 — 일반 챗봇은 “답변”만 합니다. 코딩 AI는 “실행”까지 합니다.


3.3 Claude는 어떤 원리로 답하는가

다음 낱말을 고르는 기계

Claude 같은 대화형 AI의 정식 이름은 이렇습니다.

📖 LLM(Large Language Model, 거대 언어 모델)

엄청난 양의 글을 미리 읽어두고, “이 다음에 올 낱말로 가장 그럴듯한 것” 을 계속 골라 문장을 만들어 내는 프로그램.

거대(Large) — 읽은 글의 양이 어마어마하다 언어(Language) — 다루는 재료가 글이다 모델(Model) — 그렇게 만들어진 프로그램 덩어리

너무 단순해 보이지만 정말 이게 전부입니다.

“오늘 날씨가 참” 다음에 뭐가 올 것 같으세요? “좋네요” 가 떠오르셨다면, 방금 머릿속에서 일어난 일이 LLM이 하는 일과 같습니다. 다만 LLM은 그걸 사람이 평생 읽을 양의 수백만 배를 읽고 나서 합니다.

코드도 글입니다. 웹사이트의 코드도 결국 글자의 나열이라, LLM은 “이 다음에 올 가장 그럴듯한 코드” 를 고르는 방식으로 사이트를 만듭니다.

그래서 생기는 두 가지 성질

이 구조 하나로, 여러분이 겪을 거의 모든 현상이 설명됩니다.

① 아주 그럴듯한 것을 만듭니다

매끄럽게 잇는 게 이 기계의 본업입니다. 그래서 “사이트처럼 보이는 것”, “앱 화면처럼 보이는 것” 을 만드는 데 압도적으로 강합니다. 딸깍 하면 뭔가 나오는 이유입니다.

② 모르는 것도 그럴듯하게 만듭니다 ⚠️

여기가 중요합니다. LLM은 “가장 그럴듯한 다음 낱말” 을 고를 뿐, “이게 사실인가” 를 확인하지 않습니다.

📖 환각(hallucination)

AI가 사실이 아닌 것을 사실인 것처럼 말하는 현상. 거짓말과 다릅니다. 거짓말은 진실을 알면서 속이는 것이지만, AI는 애초에 참·거짓을 구분하지 않습니다. 그럴듯함만 봅니다.

웹과 앱에서는 이런 모습으로 나타납니다. 1단계의 화면 시안에는 예시 데이터가 채워져 나옵니다. 김하나 · 이두리 · 박세라 같은 이름, 그럴듯한 시간표, 그럴듯한 가격. 시안이니까 괜찮습니다. 문제는 그대로 인터넷에 올라갈 때입니다.

💡 틀리는 방식에 규칙이 있습니다

아무렇게나 틀리는 게 아닙니다.

잘 맞히는 것잘 틀리는 것
화면 구조·배치·색 조합구체적인 숫자 — 가격, 영업시간, 전화번호
문장 다듬기·소개글고유명사 — 가게 이름, 주소, 사람 이름
흔한 화면 모양최신 정보 — 요즘 바뀐 규정, 새로 나온 기능
“어떻게 만들지?”“그게 사실이야?”

그래서 사이트를 올리기 전에 볼 곳도 정해져 있습니다. 숫자와 이름을 보세요. 배치가 예쁜지 보는 데 시간 쓰지 마세요.


3.4 AI가 기억하는 양에는 끝이 있다

두 번째로 알아야 할 성질입니다. 그리고 “수정해줘” 가 엉뚱하게 가는 이유의 절반이 여기 있습니다.

AI와 오래 대화하다 보면 이런 일이 생깁니다.

“아까 메뉴는 세 개로 줄이기로 했잖아요.” “죄송합니다. 메뉴를 다섯 개로 늘려 드릴까요?”

치매가 아닙니다. 구조상 당연한 일입니다.

📖 컨텍스트(context, 맥락)

AI가 지금 이 순간 눈앞에 펼쳐놓고 보고 있는 글 전체. 지금까지 나눈 대화 + 읽은 파일 내용이 전부 여기에 쌓입니다.

공책 한 권이라고 생각하세요. 대화가 쌓일수록 공책이 채워집니다. 그리고 공책은 분량이 정해져 있습니다. 다 차면, 앞장부터 찢어냅니다.

앞장이 찢겨 나간 부분이 “아까 정한 그거” 입니다.

이 공책이 얼마나 찼는지 세는 단위를 토큰(token) 이라고 합니다. 글자 수도 낱말 수도 아닌 그 중간쯤입니다. 숫자를 외울 필요는 없습니다. “길어지면 찬다” 는 감각 하나면 충분합니다.

새 대화를 열면 공책도 새것이다

더 중요한 사실이 있습니다. 대화를 새로 열면, AI는 이전 대화를 전혀 모릅니다. 어제 두 시간 동안 같이 정한 것도, 새 대화에서는 백지입니다.

그러면 이런 일이 생깁니다.

월요일에 두 시간 대화하며 이유까지 얘기하고 사이트를 만들었지만, 목요일 새 대화에서 "첫 화면 좀 수정해줘"라고 하면 AI는 월요일의 이유를 모르고 그럴듯한 쪽으로 고친다새 대화의 AI는 지난 대화의 이유를 모른다

AI가 게으르거나 고집을 부리는 게 아닙니다. 3.3절의 LLM과 3.4절의 공책이 만나면 이렇게 될 수밖에 없습니다. 모르면, 그럴듯한 쪽을 고릅니다.

💡 그래서 “만든 사람의 생각” 을 파일에 적어 둔다

공책은 찢기지만 파일은 남습니다. 새 대화를 열어도 Claude는 폴더 안의 파일을 읽을 수 있습니다(2장).

무엇을 만들고 무엇을 안 만들기로 했는지, 왜 이 화면을 골랐는지, 무엇이 왜 바뀌었는지. 이걸 파일로 남겨 두면, 목요일의 “수정해줘” 도 월요일의 생각에 맞춰 고쳐집니다.

2기 1단계가 코드 없이 두 시간 내내 정하고 문서로 남기는 이유가 이것입니다. 그 문서의 이름이 PRD(설계 문서) 이고, 2단계에서 자세히 봅니다.

그래서 이렇게 하세요

상황할 일
대화가 길어져 답이 이상해진다새 대화를 시작하세요. 공책을 새로 꺼내는 겁니다
만들 것이 바뀌었다이어 하지 말고 새 대화
새 대화에서 예전 결정을 잊는다결정을 파일에 적어 두고 “그 파일 먼저 읽어”
매번 같은 말을 반복하게 된다그 말을 파일에 적어 둘 때가 된 것입니다

3.5 정리 — 이 장에서 기억할 세 줄

용어한 줄
LLM다음 낱말을 고르는 기계. 그래서 잘 만들고, 그래서 지어냅니다
환각모르는 걸 그럴듯하게 지어내는 현상. 숫자와 이름을 의심하세요
컨텍스트AI의 공책. 차면 앞장이 찢기고, 새 대화면 백지입니다

그리고 여기서 따라 나오는 실천 두 가지 —

  • 올리기 전에 숫자와 이름은 사람이 본다
  • 남겨야 할 생각은 대화가 아니라 파일에 적는다

다음 장에서는 다시 손을 움직입니다. 웹 챗봇과 Claude Code에게 똑같이 “웹페이지 만들어줘” 를 시켜서, 방금 배운 차이를 눈으로 확인합니다.