바이브 코딩 기초 — 프롬프트·페어·컨텍스트·토큰
바이브 코딩 기초 — 프롬프트·페어·컨텍스트·토큰
🎯 이 lesson 을 읽고 나면
이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.
- ▸✅ 바이브 코딩 = AI 페어 프로그래밍
- ▸✅ CLAUDE.md / .cursorrules 작성으로 토큰 절약
- ▸✅ 할루시네이션 대응 체크리스트 5가지
학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.
바이브 코딩이란 — AI 페어 프로그래밍
한 줄: 바이브 코딩 = AI 와 함께 코드를 만드는 방식. 코드는 결과물, 인간은 의도·검증·아키텍처.
3 역할 모델:
언제 AI 가 잘하는가:
- ▸✅ 보일러플레이트 (REST API CRUD·테스트 케이스)
- ▸✅ 변환·리팩토링 (TS↔JS·class↔hook)
- ▸✅ 문서·주석·CHANGELOG 작성
- ▸✅ 에러 메시지 해석·디버깅 가설
언제 AI 가 못하는가:
- ▸❌ 도메인 모르는 비즈니스 로직
- ▸❌ 대규모 아키텍처 결정
- ▸❌ 성능·보안 평가 (가설은 OK, 검증은 사람)
- ▸❌ 의도와 다른 그럴듯한 코드 생성 (할루시네이션)
> 💡 Iron Law: AI 가 만든 코드도 내 책임. 코드 리뷰 능력이 더 중요해짐.
토큰 절약 — *돈·시간·정확도* 모두 영향
토큰이 뭐냐 — 다시 정리
토큰 = AI 가 글을 보는 단위. 영어 단어 1개 ≈ 1.3 토큰, 한국어 글자 1개 ≈ 1-2 토큰. AI 응답마다 입력 토큰 + 출력 토큰 모두 카운팅 + 과금됩니다.
출력 토큰이 5배 비싸다
→ AI 가 길게 답할수록 비용 폭증. 질문이 모호 하면 → AI 가 안전하게 모든 가능성 다 설명 → 출력 토큰 폭발.
❌ 나쁜 vs ✅ 좋은 프롬프트 — 토큰 차이
예 1: 코드 수정
❌ 나쁜 (예상 출력 2000 토큰):
> "이 코드 좀 봐줘"
→ AI 가 전체 코드를 다시 작성 해서 보여주려 함. 건드리지 않아도 될 부분 도 다 출력.
✅ 좋은 (예상 출력 100 토큰):
> "auth.ts 47줄의 타입 에러만 수정. 다른 코드는 건드리지 마. 변경 사항만 보여줘."
→ AI 가 그 한 줄만 응답. 출력 토큰 20배 절약.
예 2: 기능 추가
❌ 나쁜 (예상 출력 3000 토큰):
> "로그인 기능 만들어줘"
→ AI 가 모든 옵션 (OAuth·JWT·세션·비번 해싱·이메일 인증 등) 다 설명하고 풀 구현.
✅ 좋은 (예상 출력 800 토큰):
> "@CLAUDE.md 스택 기준. POST /api/auth/login.
> 입력: zod schema (email, password).
> 처리: bcrypt 비교 → JWT access 15분 + refresh 7일.
> 응답: httpOnly cookie.
> Vitest 테스트 포함."
→ AI 가 명시된 요구사항만 정확히 구현.
CLAUDE.md / .cursorrules — 반복 컨텍스트 절약
매 대화마다 "Next.js 14·TypeScript·Tailwind 쓰고 있어" 라고 반복 안 해도 됩니다.
프로젝트 루트에 CLAUDE.md 또는 .cursorrules 작성:
이 파일을 AI 가 매번 자동으로 읽고 응답에 반영. 반복 설명 0번.
토큰 절약 7가지 실전 팁
1. 파일 명시: "전체 봐줘" X → "src/auth.ts 만"
2. 변경 범위 제한: "이 부분만 수정"
3. 결과 형식 명시: "diff 만 보여줘"·"코드만, 설명 X"
4. CLAUDE.md 활용: 반복 컨텍스트 한 번에
5. prompt caching: 같은 시스템 프롬프트는 캐시 활용 (Anthropic 90% 할인)
6. 작은 모델 먼저: Haiku 시도 → 부족하면 Sonnet
7. 컨텍스트 정리: 긴 대화는 요약본만 다음 대화에
한 번 정리
- ▸모호한 프롬프트 = 토큰 폭탄
- ▸구체적인 프롬프트 = AI 가 짧고 정확 하게 응답
- ▸CLAUDE.md 가 모든 토큰 절약의 시작
할루시네이션 — *AI 가 모른다고 안 한다*
핵심 한 줄
LLM 은 모르는 걸 솔직히 말하지 않습니다. 가장 그럴듯한 답 을 지어냅니다. 함수명·라이브러리 버전·API 응답 모두 가짜 가능.
왜 그러나 — 확률 예측 메커니즘
LLM 은 "다음에 올 가장 가능성 높은 토큰" 을 예측합니다. 진짜 모름 이라는 개념이 없어요. "그럴듯하면 그게 답" 이라는 식.
예: "React 의 useSnapshot 훅이 뭐야?"
- ▸사실: 그런 훅 없음 (Valtio 라이브러리에는 있음)
- ▸AI: "React 의 useSnapshot 은 컴포넌트 상태 스냅샷을 저장하는 훅입니다. 사용법은..."
- ▸→ 자신감 있게 거짓말
만났을 때 체크리스트
✅ 1. 함수·라이브러리 존재 확인
- ▸공식 문서에서 grep 또는 Ctrl+F 로 함수명 검색
- ▸
npm view <pkg>또는pip show <pkg>로 버전 확인 - ▸링크 클릭 — AI 가 준 URL 이 404 면 가짜
✅ 2. 실제 실행
- ▸받은 코드를 바로 실행해보기
- ▸TypeScript 면 컴파일 에러 확인
- ▸런타임 에러는 진실 폭로
✅ 3. AI 에게 재확인 요청
> "이 함수가 정말 존재하나? 공식 문서 링크 줘."
대부분 AI 가 "확인 결과 존재하지 않습니다" 로 자수.
✅ 4. 의심스러우면 다른 모델 에 교차 검증
- ▸Claude → GPT 에 같은 질문
- ▸답이 다르면 둘 중 하나가 거짓
✅ 5. 버전 명시
> ❌ "Next.js 에서..." → AI 가 어떤 버전인지 추측
> ✅ "Next.js 15 App Router 에서..." → 명확한 컨텍스트
자주 지어내는 항목 TOP 5
1. 존재하지 않는 npm 패키지 (react-magic-form 같은 그럴듯한 이름)
2. 잘못된 import 경로 (from 'next/legacy' 같은 미존재)
3. 존재하지 않는 옵션 ({ strictMode: 'super-strict' } 같은)
4. API 응답 필드 (response.data.user.premiumLevel 같이 없는 필드)
5. 버전별 차이 혼동 (Tailwind v3 옵션을 v4 라고 함)
실제 사례 — 면접에서 자주 듣는 답
> Q: "AI 할루시네이션 경험?"
>
> A: "v0 로 만든 코드에서 존재하지 않는 shadcn/ui 컴포넌트 (Slider3D) 를 사용했습니다. 공식 docs 와 대조해서 발견했고, 이후부터는 프롬프트에 사용 가능한 컴포넌트명을 명시 합니다.
>
> 또 Claude 가 npm install zod-extras 라는 존재하지 않는 패키지 를 자신있게 추천했습니다. npm view 로 확인 후 실제 zod 의 superRefine 으로 대체했습니다."
한 번 정리
- ▸AI 는 모르면 지어냄 (확률 메커니즘 한계)
- ▸공식 docs · 실제 실행 · 다른 모델 교차 로 검증
- ▸버전·정확한 이름 명시해서 추측 여지 줄이기
프롬프트 엔지니어링 5원칙
좋은 프롬프트의 5 요소 (CRISP):
나쁜 프롬프트 vs 좋은 프롬프트:
❌ "로그인 API 만들어줘"
✅ "Next.js 14 App Router·TypeScript·Drizzle ORM 환경.
POST /api/auth/login 엔드포인트:
- ▸입력:
{email: string, password: string}(zod 검증) - ▸처리: users 테이블 조회 → bcrypt.compare → JWT(15분) + refresh(7일) 발급
- ▸응답: 성공 200 + httpOnly 쿠키, 실패 401
- ▸Vitest 테스트도 함께 (성공·실패·잘못된 입력 케이스)"
추가 기법:
- ▸One-shot example: "이런 형식으로 응답해줘: [예시]"
- ▸Chain-of-thought: "단계별로 설명한 후 코드 작성"
- ▸Reasoning: "이 접근의 트레이드오프 먼저 분석 후 결정"
- ▸Constraint: "외부 라이브러리 X · 50줄 이내"
- ▸Verification: "코드 작성 후 직접 실행해보고 결과 알려줘"
> 💡 프롬프트는 코드. PR 처럼 버전 관리하면 좋음 (Cursor Rules·CLAUDE.md).
컨텍스트 윈도우 + 토큰 경제
컨텍스트 윈도우 = LLM 이 한 번에 볼 수 있는 텍스트 양 (토큰 단위).
모델별 컨텍스트:
1 토큰 ≈ 영어 0.75 단어 ≈ 한국어 1-2자. 코드 1000줄 = 약 4-8K 토큰.
토큰 경제 4 원칙:
가격 비교 (2025) (1M 입력 + 1M 출력):
> 💡 빠른·싼: Haiku → 균형: Sonnet → 품질: Opus. 분업이 정답.
LLM 작동 원리 — 왜 알아야 하나
한 줄: LLM 은 다음 토큰 확률 예측. 생각 하는 게 아니라 가장 그럴듯한 답을 생성.
4 가지 기본기:
1. 할루시네이션 — 모른다고 말하기보다 그럴듯하게 지어냄
- 함수 존재 확인 (./docs/api.md grep)·문서 링크 검증·실제 실행 테스트
2. 컨텍스트 길이의 한계 — 1M 토큰이라도 후반부 정보 우선
- 중요한 정보는 프롬프트 끝에 배치
3. 확률적 응답 — 같은 질문도 다른 답
- 일관성 필요 시 temperature=0 + seed 고정
4. 훈련 데이터 cutoff — Claude Opus 4.7 = 2026-01 cutoff
- 최신 정보는 웹 검색 필요 (WebSearch 도구·perplexity)
LLM 의 강점·약점:
> 💡 LLM 은 빠르고 똑똑하지만 감독이 필요한 도구.
🤖 AI 에게 이렇게 요청해보세요
이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.
- ▸"이 막연한 프롬프트를 범위·컨텍스트·제약· 출력 형식 4요소로 다시 써줘"
- ▸"이 프롬프트가 hallucination 가능성 높은데 evidence 요구를 추가해줘"
왜 이게 토큰을 줄이나
개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.