C
바이브 코딩/입문/Lesson 03

바이브 코딩 기초 — 프롬프트·페어·컨텍스트·토큰

45분·theory
이 챕터
1/3

바이브 코딩 기초 — 프롬프트·페어·컨텍스트·토큰

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ✅ 바이브 코딩 = AI 페어 프로그래밍
  • ✅ CLAUDE.md / .cursorrules 작성으로 토큰 절약
  • ✅ 할루시네이션 대응 체크리스트 5가지

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

바이브 코딩이란 — AI 페어 프로그래밍

한 줄: 바이브 코딩 = AI 와 함께 코드를 만드는 방식. 코드는 결과물, 인간은 의도·검증·아키텍처.

3 역할 모델:

역할사람AI
방향✅ 무엇·왜 결정
구현△ 핵심·복잡한 부분✅ 반복·보일러플레이트
검증✅ 동작·보안·성능△ 1차 검토
결정✅ 트레이드오프

언제 AI 가 잘하는가:

  • ✅ 보일러플레이트 (REST API CRUD·테스트 케이스)
  • ✅ 변환·리팩토링 (TS↔JS·class↔hook)
  • ✅ 문서·주석·CHANGELOG 작성
  • ✅ 에러 메시지 해석·디버깅 가설

언제 AI 가 못하는가:

  • ❌ 도메인 모르는 비즈니스 로직
  • ❌ 대규모 아키텍처 결정
  • ❌ 성능·보안 평가 (가설은 OK, 검증은 사람)
  • ❌ 의도와 다른 그럴듯한 코드 생성 (할루시네이션)

> 💡 Iron Law: AI 가 만든 코드도 내 책임. 코드 리뷰 능력이 더 중요해짐.

토큰 절약 — *돈·시간·정확도* 모두 영향

토큰이 뭐냐 — 다시 정리

토큰 = AI 가 글을 보는 단위. 영어 단어 1개 ≈ 1.3 토큰, 한국어 글자 1개 ≈ 1-2 토큰. AI 응답마다 입력 토큰 + 출력 토큰 모두 카운팅 + 과금됩니다.

출력 토큰이 5배 비싸다

모델입력 ($/M 토큰)출력 ($/M 토큰)비율
Claude Haiku 4.5$1$55배
Claude Sonnet 4$3$155배
GPT-4o$2.5$104배

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 작성:

markdown
# 프로젝트 가이드

## 스택
- Next.js 15 (App Router)
- TypeScript strict mode
- Tailwind CSS + shadcn/ui
- Drizzle ORM + PostgreSQL

## 코딩 컨벤션
- 컴포넌트: function 선언 (arrow 금지)
- import 순서: 외부 → 내부 → 상대
- 한국어 주석 권장

## 금지 패턴
- var 사용 금지 (const/let)
- any 타입 금지
- 테스트 없는 새 함수 금지
- "TODO" 주석 남기지 않기 (이슈로)

이 파일을 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):

원칙의미
Context배경·기술 스택·제약"Next.js 14·TypeScript·Tailwind. PostgreSQL 사용"
RoleAI 의 역할·관점"백엔드 개발자 입장에서"
Intent무엇·왜"사용자 인증 API. JWT + refresh token"
Specifics정확한 입출력·예외"이메일 형식 검증·중복 체크·bcrypt 12 cost"
Preferences코드 스타일·테스트"함수형·타입 명시·Vitest 테스트 포함"

나쁜 프롬프트 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 이 한 번에 볼 수 있는 텍스트 양 (토큰 단위).

모델별 컨텍스트:

모델컨텍스트의미
GPT-3.516K짧은 대화
GPT-4o128K중간 코드베이스
Claude Sonnet 4200K → 1M작은 프로젝트 전체
Claude Opus 41M (확장 시)대규모 코드베이스
Gemini 2.52M책 한 권

1 토큰 ≈ 영어 0.75 단어 ≈ 한국어 1-2자. 코드 1000줄 = 약 4-8K 토큰.

토큰 경제 4 원칙:

원칙의미
입력 < 출력출력 토큰이 5배 비쌈 (Anthropic 기준)
캐시 활용같은 컨텍스트 반복 → prompt caching 으로 90% 절약
압축긴 코드는 관련 부분만 발췌. 전체 코드베이스 X
요약 누적긴 대화는 요약본 으로 컨텍스트 절약

가격 비교 (2025) (1M 입력 + 1M 출력):

모델입력 ($/M)출력 ($/M)합계
Haiku 4.5$1$5$6
Sonnet 4$3$15$18
Opus 4$15$75$90
GPT-4o$2.5$10$12.5

> 💡 빠른·싼: 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 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

바이브 코딩 기초 — 프롬프트·페어·컨텍스트·토큰 - 바이브 코딩