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

• ▸✅ 포트폴리오용 토이 프로젝트 1주일 완성 로드맵
• ▸✅ AI 가 만든 코드의 PR / README 작성
• ▸✅ 토큰 사용량 측정 + 절약 포인트

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

목표: 회사 소개·SaaS 랜딩 페이지 1 시간 안에.

도구: v0 + Cursor + Vercel

1 시간 계획:

v0 프롬프트 예시:

SaaS 랜딩 페이지 hero 섹션:
- 헤드라인 + 서브 텍스트
- CTA 버튼 (Get Started, Watch Demo)
- 배경: gradient + animated grid
- 다크 모드 기본
- shadcn/ui 컴포넌트 사용

핵심 패턴:

• ▸shadcn/ui — 디자인 시스템 일관
• ▸Next.js Image — 이미지 최적화
• ▸Framer Motion — 가벼운 애니메이션
• ▸Resend·Loops — 이메일 폼

> 💡 완벽한 디자인 추구 X. 동작하는 MVP 가 목표.

목표: REST API + DB + 인증 한 시리즈로.

스택: Next.js 14 API Routes / Drizzle ORM / Postgres (Neon) / JWT

2 시간 계획:

Claude Code 프롬프트 예시:

@CLAUDE.md 의 기술 스택 따라:
1. drizzle schema: posts (id·title·body·userId·createdAt)
2. /api/posts:
   - GET (list with pagination)
   - POST (auth required, zod 검증)
   - PUT /:id (저자만)
   - DELETE /:id (저자만)
3. 각 메서드에 vitest 테스트 (성공·인증실패·권한실패)
4. CI 에서 자동 실행

핵심 학습:

• ▸API 계약 (input/output 명시)
• ▸인증 vs 인가
• ▸에러 처리·HTTP status
• ▸Production-ready 보안 (rate limit·input 검증)

목표: 회사 문서 기반 RAG 챗봇.

스택: Next.js + Anthropic API + Postgres + pgvector + Vercel AI SDK

3 시간 계획:

RAG 핵심 코드 흐름:

// 1. 청킹 (langchain·llamaindex)
const chunks = await splitter.splitDocuments(docs);

// 2. 임베딩
const vectors = await Promise.all(
  chunks.map(c => openai.embeddings.create({
    input: c.pageContent,
    model: 'text-embedding-3-small'
  }))
);

// 3. pgvector 저장
await db.insert(documents).values(/* ... */);

// 4. 검색 (질문 임베딩 → cosine similarity)
const results = await db.execute(sql`
  SELECT * FROM documents
  ORDER BY embedding <-> ${queryEmbedding}
  LIMIT 5
`);

// 5. Claude 에 컨텍스트 + 질문
const stream = await anthropic.messages.stream({
  model: 'claude-sonnet-4-6',
  messages: [{
    role: 'user',
    content: `근거:
${results}

질문: ${userQuestion}`
  }],
});

프로덕션 고려사항:

• ▸청킹 전략 (의미 단위·고정 크기·sliding window)
• ▸캐싱 (Redis)
• ▸Rate limiting
• ▸로깅 (질문·근거·답변)
• ▸평가 (RAGAS·정확도 메트릭)

1. AI 도구 활용 경험

• ▸"어떤 도구 쓰나? 왜 그 도구?"
• ▸"AI 가 생성한 코드 어떻게 검증하나?"
• ▸"Cursor·Claude Code·Copilot 차이 설명"

2. 프롬프트 엔지니어링

• ▸"한 프롬프트로 잘 안 나오면 어떻게 개선?"
• ▸"Chain-of-thought 사용 경험"
• ▸"프롬프트는 어떻게 버전 관리?"

3. LLM 한계 이해

• ▸"할루시네이션 만난 사례·대응?"
• ▸"왜 LLM 이 생각 하지 않나?"
• ▸"컨텍스트 윈도우 부족 시 전략?"

4. RAG · 에이전트

• ▸"RAG 와 fine-tuning 차이"
• ▸"벡터DB 선택 기준 (Pinecone vs pgvector)"
• ▸"MCP 가 LSP 같다는 게 무슨 뜻?"

5. 윤리·보안

• ▸"AI 가 만든 코드의 IP 문제"
• ▸"사내 코드 외부 LLM 에 보내도 되나?"
• ▸"AI 가 보안 취약점을 만들면 책임은?"

좋은 답변 패턴:

• ▸✅ 실제 사용 경험 (구체적 도구·프로젝트)
• ▸✅ 트레이드오프 인식 (어떤 상황에 적합·부적합)
• ▸✅ 검증 능력 강조 (테스트·코드 리뷰)
• ▸❌ "AI 가 다 해줘서 편해요" (검증 책임 약함)
• ▸❌ "전혀 안 써요" (트렌드 무지)

> 💡 핵심 메시지: AI 가 만든 코드도 내 책임. 방향·검증·아키텍처는 사람.

면접관이 물을 그 질문

> "이 PR 의 코드, AI 가 다 짠 거 아니에요?"

당황하지 마세요. 모든 면접관이 묻습니다. 답변 준비 가 합격을 결정.

❌ 나쁜 답

> "네, AI 가 짰어요. 저는 프롬프트만 썼습니다."

→ "그럼 당신이 한 게 무엇인가요?" 후속 질문에 막힘. 불합격 위험.

> "AI 안 썼습니다. 다 제가 직접..."

→ git log 보면 짧은 시간에 큰 변경 — 거짓말 들통. 즉시 불합격.

✅ 좋은 답 — 3 박자

1. 솔직하게 + 검증 강조

> "네, Cursor 와 Claude Code 를 적극 활용했습니다. 코드 생성 은 AI 가 빠르게 해줬지만,
>
> 1. 검증 은 제가 직접 했습니다 — Vitest 로 단위 테스트 80% coverage, Playwright 로 E2E 작성.
> 2. 트레이드오프 결정 도 제 몫이었어요 — 예를 들어 Drizzle vs Prisma 선택할 때 Drizzle 의 더 작은 번들 + TS 추론 정확도를 우선시했습니다.
> 3. 아키텍처 결정 — 처음엔 AI 가 REST API 를 제안했지만, 실시간 알림 요구사항 때문에 WebSocket + SSE 하이브리드 로 변경했습니다."

→ 면접관 머리에 "이 사람은 AI 를 통제할 줄 안다" 로 분류.

2. AI 가 못 한 것 명시

> "AI 가 처음 생성한 코드에서 발견한 문제 3가지:
>
> 1. N+1 쿼리 — User → Orders → Items 조회 시. Drizzle with 로 한 번에 JOIN.
> 2. Race condition — 동시 결제 시 잔액 음수. PostgreSQL row-level lock 추가.
> 3. XSS 취약점 — dangerouslySetInnerHTML 그대로 사용. DOMPurify 도입."

→ 문제 발견 능력 입증. AI 보다 사람의 판단 우월.

3. 재현 가능한 워크플로우

> "재현 가능하도록 CLAUDE.md 와 spec.md 를 git 에 포함시켰습니다. 새 팀원이 와도 같은 컨텍스트로 AI 와 협업 가능합니다.
>
> 또 프롬프트 자체를 버전 관리 합니다 — prompts/ 폴더에 자주 쓰는 프롬프트 템플릿 저장."

→ 팀 협업 + 재현성 강조. 협업 가능한 사람의 마인드.

면접 실전 Q&A — 모범 답안

Q1: 할루시네이션 만난 사례?

> "v0 가 존재하지 않는 shadcn 컴포넌트 (<Slider3D>) 를 사용했습니다. 공식 docs 와 대조하다가 발견했고, 이후로는 프롬프트에 사용 가능한 컴포넌트명을 명시 합니다.
>
> 또 Claude 가 npm install zod-extras 를 추천했는데 npm view 로 존재하지 않음 확인. 실제로는 zod 의 superRefine 으로 대체 가능했습니다."

Q2: 컨텍스트 부족 시 전략?

> "1) 가장 먼저 CLAUDE.md 에 누락된 부분 추가
> 2) 그래도 부족하면 관련 파일 명시 해서 prompt 에 첨부 (@src/auth.ts)
> 3) 진짜 큰 작업이면 Spec 먼저 작성해서 후속 대화 컨텍스트 절약"

Q3: SPEC-Driven vs Vibe 언제 무엇?

> "1시간 안에 끝나는 프로토타입 은 Vibe.
> 다인 협업·결제·인증처럼 위험한 영역 은 SPEC.
>
> 판단 기준: 나중에 누군가 이 코드 디버깅할 때 spec 이 있어야 빨라질까? → YES 면 SPEC."

Q4: AI 가 만든 코드의 보안·IP?

> "1) 보안: AI 가 만든 SQL·인증 코드는 반드시 OWASP Top 10 체크. parameterized query·bcrypt·HTTPS 강제.
>
> 2) IP: 회사 코드를 외부 LLM 에 보내는 건 법적 문제. Copilot Business 또는 사내 LLM 사용 권장.
>
> 3) 라이센스: 학습 데이터의 GPL 코드 우연 복제 위험. 핵심 알고리즘은 직접 작성 또는 허가된 라이브러리 사용."

한 번 정리

• ▸AI 사용 솔직하게 인정
• ▸검증·결정·아키텍처 가 본인 역할 강조
• ▸AI 가 못 한 것 구체적으로 제시
• ▸CLAUDE.md·spec.md git 포함 — 재현성

[1시간 프로젝트] 랜딩 페이지 — 토큰 절약 포인트

핵심: v0 → Cursor 흐름이 가장 효율.

⚠️ 하지 마세요: "이 랜딩 페이지를 다른 디자인으로 다시 만들어줘" — 전체 재작성 = 토큰 폭탄

[2시간 프로젝트] CRUD API — 토큰 절약 포인트

핵심: spec.md 먼저, 그 다음 엔드포인트 하나씩.

⚠️ 하지 마세요: "전체 CRUD API 다 만들어줘" — 한 번에 출력하면 5000+ 토큰 게다가 각 엔드포인트 검증 어려움

[3시간 프로젝트] RAG 챗봇 — 토큰 절약 포인트

핵심: 가장 복잡 → Spec-Kit 활용 + 단계별 검증 필수.

⚠️ 하지 마세요: "RAG 챗봇 처음부터 끝까지 다 만들어줘" — spec 없이 시작하면 재작성 5번. 진짜 토큰 폭탄.

한 번 정리

3 프로젝트 모두 공통 원칙:
1. 단계 분리 — 한 번에 모든 거 X
2. 파일·범위 명시 — "@auth.ts 의 X 함수만"
3. spec 먼저 — 큰 프로젝트일수록 효과 ↑
4. 검증 자주 — git commit + 테스트

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"이 토이 프로젝트를 포트폴리오용 PR 로 정리해줘 (README + 데모 GIF + 회고)"
• ▸"이 작업의 토큰 사용량 분석 + 절약 포인트 알려줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.