개념 정리 — 바이브코딩 세계
민지가 웹사이트를 만들어가는 시나리오로 바이브코딩 개념을 설명해요.
점선 단어에 마우스를 올리면 툴팁이 나오고, 자세한 설명은 링크로 연결돼요.
프롤로그. 이 시나리오가 만들어진 사연
나는 바이브코딩을 처음 배우는 비개발자야. 바이브코딩을 하면서 만나게 되는 주요 개념들을 설명하는 페이지를 만들어줘. 딱딱한 용어 설명 말고, 비개발자인 민지가 일상 기록 웹사이트를 처음 만들어가는 시나리오 형식으로.
지금 이 페이지가 그 결과예요. 이 프롬프트를 어떻게 뽑았는지는 마지막에서 볼 수 있어요.
Plan — 계획하기
장면 1. 아이디어 잡기
일상 기록 웹사이트 만들고 싶어. 어떤 방향으로 갈지 나한테 인터뷰 먼저 해줘.
Claude가 질문을 던지고 민지가 답해요. 몇 번 주고받고 나서—
지금까지 나눈 대화로 회의록 만들어줘.
회의록 만들었어요. 방향이 정리됐으니 다음 단계로 가볼까요?
막연하게 시키면 막연한 결과가 나와요. AI가 먼저 물어보게 하는 게 인터뷰 방식이에요. → 부록 B. 프롬프트 잘 쓰는 법
장면 2. 계획 세우기
일단 간단하게 MVP만 먼저 만들어보고 싶어. MVP 기준으로 PRD 작성해줘.
MVP는 핵심 기능만 담은 첫 번째 버전이에요. PRD는 그걸 구체화한 기획서고요. 작성할게요.
이거 바탕으로 계획서 만들어줘. 바로 작업하지 말고 Plan mode로 계획만 먼저 보여줘.
(Plan mode) 이렇게 진행할 예정이에요. ① 기본 레이아웃 ② 날짜별 글 목록 ③ 글 작성 페이지. 진행할까요?
계획서가 나왔어요. 3번 기능이 마음에 안 들어요.
3번은 별론데, 이 방향으로 바꿔줘.
수정했어요. 이대로 진행할까요?
응, 진행해줘.
Do — 실행하기
장면 3. 오픈소스 찾기
달력 기능이 필요한데 처음부터 만들긴 복잡해요.
이 계획에 맞는 오픈소스 레포 찾아봐줘.
astro-calendar-widget 추천드려요. npm에서 바로 설치할 수 있어요.
민지가 찾아봤는데 없어요.
이거 없던데? 인터넷에서 직접 찾아봐.
이게 환각이에요 — AI가 없는 정보를 자신 있게 말하는 것. 중요한 건 직접 확인하거나 "인터넷에서 찾아봐"라고 시키면 돼요.
Claude가 검색해서 몇 가지를 가져왔어요. 민지가 하나를 골랐어요.
장면 4. 레포 가져오기
이 레포 내 컴퓨터로 가져오고 싶어. 어떻게 해?
두 단계예요. GitHub에서 Fork 버튼 눌러서 내 계정으로 복사하고, 터미널에서 clone으로 내려받으면 돼요.
레포를 가져왔어요. 파일 탐색기에 README.md가 보여요 — 레포 설명서예요. 마크다운 형식으로 쓰여 있어요. → 부록 A. 마크다운이란
이 레포 구조 분석해서 쉽게 설명해줘. 아까 내 계획에 맞춰서 어떻게 활용할지도 알려줘.
→ 포크 · 클론 · 마크다운 · 라이선스 용어 정리
장면 5. 커밋하기
작업이 어느 정도 됐어요. 지금 상태를 저장해둬요.
지금까지 한 거 저장해줘. "기본 레이아웃 완성"으로.
커밋했어요. 이 시점으로 언제든 돌아올 수 있어요.
이게 커밋이에요 — 작업 중간중간 "여기까지 완성" 저장 포인트를 찍어두는 것. Git이 이걸 관리해줘요.
Check — 점검하기
장면 6. 로컬에서 확인
로컬 서버 띄워서 확인할 수 있게 해줘.
(로컬 서버 실행) 브라우저에서 http://localhost:4321 열어보세요.
민지가 브라우저를 열었어요. 잘 나와요. 그런데 계획서랑 비교해보니 빠진 게 있어요.
계획서 2번 항목이 아직 안 된 것 같아. 맞아?
맞아요. 날짜별 필터링 기능이 빠져 있어요. 지금 추가할까요?
응, 추가해줘.
추가했어요. 확인해봐요.
장면 7. 오류 수정
근데 버튼 색깔도 좀 바꿔봐.
바꿨어요.
화면이 하얗게 됐어요. 오류 메시지를 붙여넣고, 스크린샷도 찍어서 보냈는데 그래도 안 고쳐져요. → 스크린샷 찍는 법
확인 끝났어. 서버 꺼줘.
(서버 종료) 껐어요.
장면 8. 안 되면 되돌리기
그냥 아까 커밋한 데로 되돌려줘. 어디서 어디로 돌아가는지 먼저 보여줘.
a3f9b12 (현재) 버튼 색 변경 e7c4d01 기본 레이아웃 완성 2b8a3f5 프로젝트 초기 설정
어느 시점으로 돌아갈까요?
"기본 레이아웃 완성"으로 돌아가줘.
e7c4d01 시점으로 돌아갔어요. 화면 확인해봐요.
원래대로 돌아왔어요. 이게 Git이에요 — 저장하고, 되돌리고, 실험하는 도구. → 부록 I. Git으로 버전 관리하는 법
Act — 마무리하기
장면 9. 배포하기
점검이 끝났어요.
이제 인터넷에 올려줘.
커밋하고 푸시할게요.
푸시됐어요. Vercel 대시보드에 뭔가 돌아가기 시작했어요.
GitHub에 올라간 걸 Vercel이 감지해서 빌드 중이에요. 1~2분 후 자동 배포돼요.
초록불이 떴어요. ✓ Ready. 이제 누구나 이 주소로 볼 수 있어요.
- 로컬 작업
- 커밋 — 저장 포인트
- 푸시 — 내 컴퓨터 → GitHub
- 빌드 — Vercel이 소스를 웹사이트 파일로 변환
- 배포 — 인터넷에 공개 (자동)
장면 10. 작업 마무리 루틴
배포가 끝났어요. 민지는 이번 작업을 정리하고, 다음엔 더 편하게 하고 싶어요.
지금까지 대화한 거 바탕으로 dev log 작성해줘. 결정된 것들, 막혔던 것들 중심으로.
dev log 작성했어요. 결정사항, 막혔던 것, 다음 할 일로 정리했어요.
이번 작업하면서 반복되거나 귀찮았던 거 있으면 자동화 제안해줘. CLAUDE.md나 스킬로 만들 수 있는 것 위주로.
세 가지 제안이에요.
- dev log 자동 작성 — 매 작업 끝에 결정사항 정리 (CLAUDE.md 지침으로)
- 일간 회고 — 매일 반복되는 대화 패턴 (스킬로)
- 커밋 메시지 — 한국어로 한 줄 요약 (CLAUDE.md 지침으로)
1번이랑 3번은 CLAUDE.md에 넣어줘. 2번은 스킬로 만들어줘.
CLAUDE.md 만들었어요.
# 민지의 CLAUDE.md ## 나에 대해 - 비개발자야. 어려운 용어는 쉽게 설명해줘. - 반말로 해줘. ## 작업 규칙 - 파일 삭제는 내가 명시적으로 요청할 때만. - 디자인 바꿀 땐 하나씩 확인받으면서 해줘. ## 기록 - 작업 끝나면 항상 dev log 업데이트해줘. - 커밋 메시지는 한국어로, 작업 내용 한 줄 요약으로.
CLAUDE.md는 AI한테 "나는 이렇게 일해줘"를 써두는 파일이에요. 매번 설명 안 해도 돼요. → 부록 C. CLAUDE.md 잘 쓰는 법
일간 회고 스킬도 만들어줘. /daily 커맨드로.
스킬 만들었어요. /daily 치면 바로 실행돼요.
스킬은 반복되는 작업을 짧은 커맨드로 호출할 수 있게 만든 것. 다른 사람이 만들어둔 스킬 묶음을 받아서 쓸 수도 있어요. → bkit 설치 · 부록 D. 나만의 스킬 만들기
장면 11. 사례글 쓰기
배포까지 끝났어요. 이 과정을 사례글로 남겨요.
지금까지 작업한 과정이랑 배운 것들을 사례글로 써줘. dev log 참고해서. 쓰기 전에 나한테 인터뷰 먼저 해줘.
몇 가지 물어볼게요. 이번 작업에서 가장 힘들었던 게 뭐예요?
민지가 답해요. 몇 번 주고받고 나서—
이걸 바탕으로 사례글 써줘.
dev log 보니까 버튼 색 변경 오류 롤백 경험이 인상적인 포인트네요. 이걸 중심으로 써볼게요.
사례글이 나왔어요. 이게 PDCA 한 사이클이에요 — 계획하고, 실행하고, 점검하고, 마무리하는 것. 다음 작업은 이 사이클을 다시 돌리면 돼요.
에필로그. 이 페이지를 직접 만들어보기
여기까지 봤다면, 이런 페이지를 다른 주제로도 직접 만들 수 있어요. 비결은 이 페이지 자체를 Claude한테 예시로 주는 거예요.
이 페이지(주소 또는 내용)를 예시로 첨부할게. 이걸 만든 프롬프트를 리버스 엔지니어링으로 뽑아줘. 다른 주제로도 똑같은 형식과 완성도로 만들 수 있는 재사용 프롬프트로. 만들 때 필요하면 나한테 인터뷰도 하게 해줘.
이 페이지를 뜯어보니 핵심이 이래요. ① 예시를 첨부해 형식을 그대로 따르게 하기(Few-shot) ② 시나리오 대화 형식 ③ 장면을 잘게 쪼개기 ④ 설명은 최소화하고 툴팁·링크로 ⑤ 중간에 막히는 장면 넣기. 재사용 프롬프트로 만들면 이렇게 돼요.
[이 페이지의 주소나 내용을 예시로 첨부]
위 페이지는 어떤 주제의 핵심 개념을 시나리오 대화로 익히게 만든 거야.
나는 이것과 같은 형식·완성도로 [새 주제] 학습 페이지를 만들고 싶어.
너는 [새 주제] 전문가이자 위 페이지를 만든 사람이야.
위 페이지의 구조·톤·설명 밀도·툴팁 사용 방식을 그대로 따라줘.
나는 [새 주제]를 잘 몰라. 그러니 이건 네가 정해줘:
- 초보자가 이 주제로 보통 뭘 하게 되는지, 어떤 순서로 진행되는지
- 흔히 막히거나 실수하는 지점
- 꼭 익혀야 할 핵심 개념들
만들기 전에 필요하면 나한테 인터뷰해줘.
(개념 목록을 먼저 보여주면 내가 보고 빼거나 추가할게.)
형식:
- 가상의 초보자 주인공과 도우미의 실제 대화 위주
- 줄글 설명 최소화, 꼭 필요한 것만 대화 직후 한 줄
- 한 장면에 새 개념은 최대 2개
- 단순 용어는 툴팁, 더 자세한 건 링크로
- 한 장면 = 하나의 행동으로 잘게 쪼갤 것
- 중간에 막히거나 실수하는 장면을 최소 하나
- 맨 끝에 장면별 개념 요약 테이블이게 리버스 엔지니어링이에요 — 완성된 결과물을 보고 거꾸로 "어떻게 만들었지?"를 뽑아내는 것. 잘 만든 결과물 하나만 있으면, 그걸 예시로 주고 다른 주제에도 똑같이 써먹을 수 있어요.