클로드 바이브코딩 기초반/바이브코딩 가이드

4부 내 서비스를 완성한다

15장 · 만들고 고치기

요청 → 계획 확인 → 만들기 → 열어서 확인 → 짚어서 수정. 이 사이클을 여러 바퀴 돕니다. 핵심은 '열어서 확인'입니다.

작업장 — 서비스 하나 = 폴더 하나 = 주소 하나

새 서비스는 새 폴더에서 만듭니다. 3부 홈페이지 폴더와 섞지 않습니다. 섞으면 한쪽을 고치다 다른 쪽이 깨집니다. 폴더 이름은 영어 소문자로, 예: quote-calculator. 이 폴더가 그대로 GitHub 저장소가 되고, Vercel 주소가 됩니다. 홈페이지에서 서비스로 가는 버튼은 나중에 한 줄 요청으로 붙입니다.

  1. 3부 작업 폴더 옆에 영어 이름 폴더를 새로 만듭니다
  2. VS Code → 파일 → 폴더 열기로 그 폴더를 엽니다
  3. Claude Code 패널에 "기획.md 파일을 만들고 아래 내용을 넣어줘" + 14장 기획 1장 붙여넣기
  4. 왼쪽 파일 목록에 기획.md가 생겼는지 확인

기획.md에는 원가율 같은 비밀 숫자를 적지 않습니다. 폴더째 공개되기 때문입니다.

바이브코딩 사이클

요청 → 계획 확인 → 만들기 → 열어서 확인 → 짚어서 수정

이 사이클을 여러 바퀴 돕니다. 다시 시키는 건 실패가 아니라 과정입니다. 핵심은 '열어서 확인'입니다.

계획서 먼저 — plan 모드

Claude Code 입력칸 아래 모드 표시를 눌러 Plan을 고르면, Claude가 할 일을 설명하고 내 승인을 기다린 뒤 고칩니다. 계획은 문서로 열려 줄마다 의견을 달 수 있습니다. 만들기 전에 고칩니다. 모드를 안 바꿔도 "바로 만들지 말고 계획 먼저 보여줘" 한 줄이면 됩니다. 계획 확인 1분이 다시 만들기 10분을 아낍니다. 큰 수정·지우는 작업 전엔 꼭.

공식 가이드도 같은 순서를 권합니다. 탐색 → 계획 → 만들기 → 저장. 다만 오타 고치기처럼 한 문장으로 설명되는 작은 수정은 계획 없이 바로 시켜도 됩니다. 계획이 값어치를 하는 건 방법이 불확실하거나 여러 파일을 건드릴 때입니다.

첫 요청 — 기획 1장을 붙여 시킵니다

Claude에게 이렇게 보내세요
@기획.md 를 읽고 이 서비스를 만들어줘.
예) 단가·수량·원가율·할인율을 넣으면
부가세 포함 견적 금액과 남는 돈을 바로 보여주는
계산기를 만들어줘. 폰에서도 보기 좋게.
조건
- 한 페이지 웹 서비스, 로그인·결제·DB는 빼기
- 쉬운 한국어 안내 문구
- 모호한 계산 기준은 만들기 전에 나한테 물어봐
- 바로 만들지 말고 계획 먼저 보여줘

"예)" 세 줄은 견적 계산기 예시입니다. 여러분은 기획 1장의 '요청할 문장'으로 바꿉니다. @기획.md처럼 @ 뒤에 파일 이름을 쓰면 Claude가 그 파일을 먼저 읽습니다. 요청문에 코딩 용어가 하나도 없다는 점을 보세요.

계획을 읽습니다. 어떤 파일을, 어떤 화면으로 만드는지. '꼭 기능' 말고 다른 것이 들어 있으면 지금 뺍니다. "인쇄 기능은 다음에." Claude가 물으면 즉흥으로 답합니다. 계획이 맞으면 "좋아, 그대로 만들어줘." 확인 창이 뜨면 읽고 승인합니다.

확인 — 열어서, 내 진짜 숫자를 넣어 봅니다

"방금 만든 화면을 내 브라우저에서 열어줘"라고 하거나 파일을 더블클릭합니다. 기획 1장의 완성 기준에 적은 실제 사례를 그대로 넣습니다. 브라우저 창을 폰 너비로 좁혀 휴대폰 화면도 봅니다. 어긋난 곳은 메모만 하고, 고치기는 한 번에 하나씩.

볼 것 질문 견적 계산기라면
돌아가나 열리고, 눌리고, 결과가 나오나 숫자를 넣으면 금액이 바로 바뀌나
맞나 내가 아는 답과 같나 1만 원 × 100개, 할인 10% → 부가세 포함 99만 원
쓰겠나 내일 아침의 내가 열겠나 폰에서 한 손으로 입력되나

셋 중 '맞나'가 왕입니다. 예쁘고 틀린 것보다 못생기고 맞는 것이 낫습니다. 검증은 Claude가 대신 못 하는 일입니다. 내 업무 상식과 맞는지는 나만 압니다.

v1이 돌아가면 — 고치기 전에 먼저 공개합니다

주소와 GitHub 저장소를 일찍 확보해 두면 마음이 편합니다. 공개한 뒤 고치는 흐름은 12장과 같습니다. 새 폴더라서 GitHub 저장소와 Vercel 프로젝트는 새로 하나씩 만듭니다. 모르는 단계는 "한 단계씩 안내하고, 다음 단계 전에 내 확인을 받아줘". 올리기 전 30초: 고객 이름·전화번호·원가 같은 비밀이 화면·파일에 없나?

수정 요청 — 현상 + 기대

나쁜 예 좋은 예
"뭔가 이상해" "1만 원 × 100개, 할인 10%면 99만 원이어야 하는데 100만 원이 나와"
"전부 다시 만들어줘" "계산은 그대로 두고, 결과 글자만 두 배로 키워줘"
"더 좋게 해줘" "입력칸 위에 '수량을 넣으세요' 안내 문구를 달아줘"
(한 번에 다섯 가지 요청) (하나 고치고 → 확인하고 → 다음)

좋은 예에는 전부 '기대하는 결과'가 들어 있습니다. 현상 + 기대.

기능 추가는 "꼭 → 있으면 좋음" 순서로 하나씩

'꼭' 기능이 전부 '맞나'를 통과한 뒤에 새 기능을 붙입니다. 추가할 땐 지킬 것을 먼저 말합니다. "기존 계산은 건드리지 말고." 고장 난 채로 새 기능을 쌓지 않습니다. 오류부터 잡습니다. 기능 하나 붙일 때마다 다시 열어 확인합니다. 두 개를 섞어 시키면 무엇이 무엇을 망가뜨렸는지 찾을 수 없습니다.

Claude에게 이렇게 보내세요
새 기능을 하나 추가하고 싶어.
추가할 것: 결과 금액 옆에 "복사" 버튼
누르면: 견적 내용이 카톡에 붙여넣기 좋은 문장으로 복사
지킬 것
- 지금 계산 방식과 화면 배치는 건드리지 마
- 폰에서도 손가락으로 누르기 쉬운 크기
바꿀 파일과 방법을 먼저 짧게 설명하고,
내가 좋다고 하면 진행해줘.

추가할 것 · 누르면 · 지킬 것 — 세 줄 틀만 기억하면 됩니다.

세이브 포인트 — GitHub 저장 기록 활용하기

되돌리기는 지워지는 작업입니다. 마지막 버튼은 사람이 누릅니다.

오류 대응 세 가지 — 이 순서로

상황 방법 말하는 법
빨간 에러 메시지가 떴다 전부 복사해 붙여넣기 (요약 금지) "이 에러가 났어. 원인을 쉽게 설명하고 고쳐줘"
에러는 없는데 화면·결과가 이상하다 화면 캡처해서 붙여넣기 "화면이 이래. ○○를 기대했는데 △△로 나와"
같은 문제를 세 번 고쳐도 또 난다 다른 방법으로 다시 "요구사항은 그대로, 다른 방법으로 다시 만들어줘"

캡처와 함께 한 줄: 무엇을 했더니 → 무엇이 나왔고 → 원래 무엇을 기대했나. 휴대폰에서만 이상하면 폰 화면을 캡처해 PC로 보내 붙여넣습니다.

API 키 = 비밀번호 — 서비스 화면에 넣지 않습니다

API 키는 다른 회사 기능(AI·지도·문자)을 쓰는 열쇠입니다. 새면 요금이 청구될 수 있습니다. 웹페이지에 넣은 키는 주소를 아는 누구나 들여다볼 수 있고, GitHub에 올라간 키도 마찬가지입니다. 채팅·캡처에도 붙여넣지 않습니다. 그래서 v1은 키가 필요 없는 기능만 만듭니다. Claude가 "API 키를 넣어 주세요"라고 하면 멈추고 "키 없이 되는 방법으로" 요청합니다.

막힐 때 대처표 — 5분 넘게 혼자 씨름 금지

증상 먼저 해볼 것 그래도 안 되면
Claude Code 패널이 안 열린다 VS Code 재시작 → 다시 로그인 10장 설치 다시 확인
만든 화면이 하얗게 비어 있다 화면 캡처 + "빈 화면이 나와" "다른 방법으로 다시 만들어줘"
GitHub에 올리기가 실패한다 에러 전체 복사 → Claude에게 로그인 상태 확인
주소에서 옛 화면이 보인다 잠시 뒤 새로고침 Vercel 화면 캡처 → Claude에게
고칠수록 더 이상해진다 마지막으로 잘 되던 상태로 되돌리기 새 대화에서 @기획.md부터 다시

이 장의 결과물