5. 바이브 코딩 실전 - 2026 AI 실무 플레이북

5.9 PL을 위한 Claude Code 실전 활용 전략

PM이 바이브 코딩으로 프로토타입을 만든다면, PL은 코드 리뷰, 아키텍처 검증, 팀 생산성 향상에 Claude Code를 활용합니다. 개발 경험이 있는 PL이 즉시 적용할 수 있는 실전 패턴을 소개합니다.

PM vs PL — Claude Code 활용 비교

graph TD A[Claude Code 활용] --> B["📝 PM 활용"] A --> C["🔧 PL 활용"] B --> B1["프로토타입 생성\n'랜딩페이지 만들어줘'"] B --> B2["문서 작성 보조\nPRD, 기획서"] B --> B3["데이터 시각화\n차트, 다이어그램"] C --> C1["코드 리뷰 & 품질 검증\n'이 PR의 보안 이슈 점검'"] C --> C2["아키텍처 설계 검증\n'이 구조의 문제점 분석'"] C --> C3["팀 워크플로우 자동화\nCI/CD, 테스트, 문서화"] C --> C4["기술 부채 관리\n'이 코드 리팩토링 계획 세워줘'"] C --> C5["장애 분석 & 디버깅\n'이 에러 로그 분석해줘'"] style A fill:#4a9eff,color:#fff style B fill:#ff9800,color:#fff style C fill:#9c27b0,color:#fff

PL 핵심 활용 패턴 — 코드 리뷰

코드 리뷰는 PL의 가장 시간 소모적인 업무 중 하나입니다. Claude Code를 활용하면 리뷰 품질과 속도를 동시에 높일 수 있습니다.

리뷰 유형	프롬프트 예시	Claude가 확인하는 것
보안 리뷰	"이 코드에서 SQL 인젝션, XSS, 인증 우회 등 보안 취약점을 찾아줘"	OWASP Top 10, 입력 검증, 인증/인가 로직
성능 리뷰	"N+1 쿼리, 메모리 누수, 불필요한 연산 등 성능 이슈를 분석해줘"	DB 쿼리 최적화, 알고리즘 복잡도, 캐싱 기회
아키텍처 리뷰	"이 모듈의 의존성 구조를 분석하고 개선점을 제안해줘"	SOLID 원칙, 순환 의존성, 계층 위반
테스트 리뷰	"이 함수의 엣지 케이스를 찾고 테스트 코드를 작성해줘"	경계값, 에러 케이스, 비동기 처리, 목(mock) 적절성

# PL 코드 리뷰용 CLAUDE.md 예시

## 프로젝트 컨텍스트
- Next.js 14 + TypeScript + Prisma + PostgreSQL
- 팀 규모: 프론트 3명, 백엔드 2명

## 코드 리뷰 규칙
- 보안: 모든 사용자 입력은 서버 사이드에서 검증
- 성능: DB 쿼리는 인덱스 활용 여부 확인 필수
- 테스트: 핵심 비즈니스 로직은 단위 테스트 커버리지 80% 이상
- 에러 처리: try-catch 없는 async 함수는 리뷰 불통과

PL 핵심 활용 패턴 — 아키텍처 의사결정

graph LR A["아키텍처 결정 필요"] --> B["Claude에게\n컨텍스트 제공"] B --> C["대안 비교 요청\n'A 방식 vs B 방식\n장단점 비교'"] C --> D["트레이드오프 분석\n성능/비용/복잡도\n유지보수성"] D --> E["PL이 최종 결정\nAI는 판단 보조"] style A fill:#f44336,color:#fff style E fill:#4caf50,color:#fff

의사결정 상황	프롬프트 예시
기술 스택 선택	"우리 팀 상황(3명, 6개월)에서 모노레포 vs 멀티레포, Next.js vs Remix의 트레이드오프를 분석해줘"
DB 설계	"이 ERD를 보고 정규화 수준, 인덱스 전략, 예상 쿼리 패턴 관점에서 개선점을 제안해줘"
API 설계	"이 REST API 설계를 RESTful 원칙, 버전 관리, 에러 핸들링 관점에서 리뷰해줘"
마이그레이션	"레거시 jQuery 코드를 React로 점진적 마이그레이션하는 전략과 단계별 계획을 세워줘"

PL 핵심 활용 패턴 — 팀 생산성 자동화

graph TD A["PL의 팀 자동화 전략"] --> B["📋 프로젝트 설정"] A --> C["🔄 CI/CD 연동"] A --> D["📚 문서 자동화"] A --> E["🧪 테스트 자동화"] B --> B1["CLAUDE.md에\n팀 컨벤션 정의"] B --> B2["Hooks로\n코드 스타일 자동 검사"] C --> C1["커밋 메시지 표준화\n/commit 스킬 활용"] C --> C2["PR 설명 자동 생성\n/review로 사전 검토"] D --> D1["API 문서 자동 갱신\n코드 변경 시 동기화"] D --> D2["변경 이력 자동 기록\nCHANGELOG 관리"] E --> E1["테스트 코드 자동 생성\n엣지 케이스 포함"] E --> E2["리그레션 테스트\n변경 영향 범위 분석"] style A fill:#4a9eff,color:#fff style B fill:#ff9800,color:#fff style C fill:#9c27b0,color:#fff style D fill:#4caf50,color:#fff style E fill:#f44336,color:#fff

// .claude/settings.json — PL 팀용 Hooks 설정 예시
{
  "hooks": {
    "PreToolUse": [{
      "matcher": "Write|Edit",
      "command": "echo 'TypeScript strict 모드 확인 필요'"
    }],
    "PostToolUse": [{
      "matcher": "Write|Edit",
      "command": "npx eslint --fix $CLAUDE_FILE_PATH 2>/dev/null || true"
    }],
    "SessionStart": [{
      "command": "echo '팀 컨벤션: PR 전 /review 필수 실행'"
    }]
  }
}

PL 장애 대응 — Claude Code로 빠른 디버깅

장애 상황	프롬프트 패턴	기대 결과
에러 로그 분석	"이 에러 스택트레이스를 분석하고 근본 원인과 수정 방법을 알려줘: [에러 붙여넣기]"	원인 분석 + 수정 코드 + 재발 방지 방안
성능 병목 추적	"이 API 엔드포인트가 3초 걸려. 코드를 분석해서 병목 지점을 찾아줘"	N+1 쿼리, 불필요한 루프, 캐싱 부재 등 식별
의존성 충돌	"package.json의 의존성 충돌을 분석하고 안전한 업그레이드 경로를 제안해줘"	충돌 원인 + 호환 버전 조합 + 마이그레이션 가이드
배포 실패	"CI/CD 로그를 분석해줘. 빌드는 성공했는데 배포 후 헬스체크 실패: [로그]"	환경 변수 누락, 포트 설정, 메모리 한도 등 진단

PL의 AI 활용 성숙도 로드맵

graph LR A["Level 1\n개인 생산성"] --> B["Level 2\n팀 프로세스"] B --> C["Level 3\n품질 자동화"] C --> D["Level 4\nAI 네이티브 개발"] A1["코드 생성 보조\n문서 작성\n디버깅 도우미"] --> A B1["CLAUDE.md 팀 공유\nHooks 표준화\n코드 리뷰 자동화"] --> B C1["테스트 자동 생성\nCI/CD 연동\n기술 부채 모니터링"] --> C D1["AI 에이전트 설계\nMCP 서버 구축\nAI 파이프라인 운영"] --> D style A fill:#4caf50,color:#fff style B fill:#ff9800,color:#fff style C fill:#9c27b0,color:#fff style D fill:#f44336,color:#fff

단계	소요 기간	핵심 활동	성과 지표
Level 1: 개인 생산성	1~2주	코드 생성, 문서 작성, 디버깅에 AI 활용 시작	개인 작업 속도 2~3배 향상
Level 2: 팀 프로세스	1~2개월	CLAUDE.md 공유, Hooks 표준화, 코드 리뷰 자동화	팀 코드 리뷰 시간 50% 단축
Level 3: 품질 자동화	2~3개월	테스트 자동 생성, CI/CD 연동, 기술 부채 추적	버그 발생률 30% 감소, 테스트 커버리지 80%+
Level 4: AI 네이티브	3~6개월	AI 에이전트 설계, MCP 서버 구축, AI 파이프라인 운영	AI가 팀의 일상적 업무 파트너로 자리잡음

PL 실습 과제

현재 프로젝트에서 다음을 직접 시도해보세요:

팀 프로젝트의 CLAUDE.md에 코딩 컨벤션과 리뷰 기준을 정의하기
최근 작성한 코드를 Claude에게 "보안 관점에서 리뷰해줘"로 검토 받기
"이 모듈의 의존성 구조를 다이어그램으로 그려줘"로 아키텍처 시각화
Hooks를 설정하여 파일 수정 시 자동 린트 검사 적용하기
"우리 프로젝트에 적합한 AI 활용 전략을 제안해줘"로 로드맵 수립

PL을 위한 핵심 원칙: AI는 의사결정을 대체하지 않고 보조합니다. Claude Code가 제안하는 리뷰 결과, 아키텍처 분석, 코드 수정은 반드시 PL의 경험과 판단을 거쳐 최종 결정해야 합니다. AI의 강점은 "빠른 분석"이고, PL의 강점은 "맥락에 맞는 판단"입니다.

5.10 실전 프로젝트: 웹 게시판 만들기 & MCP 자동 테스트

이 실습에서는 AI 바이브 코딩의 전체 사이클을 경험합니다. 설계 → 구현 → 자동 테스트 → 보고서까지, Claude Code의 스킬(Skill), MCP 서버, 에이전트(Agent)를 종합 활용하여 웹 게시판을 만들고 품질을 검증합니다.

이 실습에서 배우는 것:

스킬(Skill) — /pdca plan, /pdca design으로 설계 문서 자동 생성
에이전트(Agent) — Sub-Agent가 게시판 코드를 병렬로 생성
MCP 서버 — Playwright MCP로 브라우저 자동 테스트
보고서 — 테스트 결과를 정리한 QA 보고서 자동 생성

전체 워크플로우

graph LR A["1단계\n설계"] --> B["2단계\n구현"] B --> C["3단계\nMCP 테스트"] C --> D["4단계\n보고서"] A1["Skill\n/pdca plan\n/pdca design"] --> A B1["Agent\nSub-Agent\n바이브 코딩"] --> B C1["MCP 서버\nPlaywright\n자동 화면 테스트"] --> C D1["Agent\nreport-generator\n결과 정리"] --> D style A fill:#4a9eff,color:#fff style B fill:#ff9800,color:#fff style C fill:#9c27b0,color:#fff style D fill:#4caf50,color:#fff

Step 1: 게시판 설계 — 스킬(Skill) 활용

코드를 바로 작성하지 않고, 먼저 AI에게 설계 문서를 만들게 합니다. 이것이 "계획 먼저, 실행 나중" 원칙입니다.

프롬프트: 게시판 요구사항 정의

다음 요구사항으로 간단한 웹 게시판을 설계해줘.

기능 요구사항:
- 글 목록 보기 (제목, 작성자, 날짜)
- 새 글 작성 (제목, 작성자, 내용 입력 폼)
- 글 상세 보기 (내용 전체 표시)
- 글 삭제 기능
- 데이터는 localStorage에 저장 (서버 없이 동작)

디자인 요구사항:
- 모던하고 깔끔한 UI
- 반응형 (모바일 대응)
- 다크모드 지원

기술 스택:
- HTML + CSS + JavaScript 단일 파일
- 외부 라이브러리 없이 순수 구현

Claude Code에서 PDCA 스킬을 사용하면 더 체계적인 설계 문서를 얻을 수 있습니다:

스킬 명령어	역할	생성되는 문서
`/pdca plan board`	계획 수립	기능 목록, 우선순위, 구현 전략이 담긴 Plan 문서
`/pdca design board`	상세 설계	데이터 구조, 화면 구성, 상태 관리가 담긴 Design 문서

PM 포인트: 스킬을 사용하면 매번 긴 프롬프트를 작성하지 않아도 됩니다. /pdca plan 한 줄이면 AI가 표준 양식에 맞춰 체계적인 계획서를 자동으로 만들어줍니다. 이것이 스킬의 핵심 가치입니다.

Step 2: 게시판 구현 — 바이브 코딩 & 에이전트

설계가 끝나면 AI에게 구현을 요청합니다. 복잡한 작업은 Sub-Agent가 자동으로 분담합니다.

프롬프트: 게시판 구현 요청

위 설계대로 웹 게시판을 board.html 파일로 만들어줘.

구현 요구사항:
1. 글 목록 → 글 작성 → 글 상세 화면 전환은 JavaScript로 처리
2. localStorage로 글 데이터 CRUD 구현
3. 각 글에는 고유 ID(timestamp), 제목, 작성자, 내용, 작성일 포함
4. 글 목록은 최신순 정렬
5. 삭제 시 확인 다이얼로그 표시
6. 빈 필드 검증 (제목, 작성자 필수)
7. 반응형 + 다크모드 지원

HTML + CSS + JS를 한 파일에 작성해줘.

graph TD A["사용자 요청\n'게시판 만들어줘'"] --> B[Claude Code\nMain Agent] B --> C{"작업 분석"} C --> D["HTML 구조 생성\n헤더, 목록, 폼, 상세"] C --> E["CSS 스타일링\n반응형 + 다크모드"] C --> F["JavaScript 로직\nCRUD + 라우팅"] D --> G["board.html\n통합 완성"] E --> G F --> G style A fill:#4a9eff,color:#fff style B fill:#ff9800,color:#fff style G fill:#4caf50,color:#fff

게시판 핵심 데이터 구조

AI가 생성할 게시판의 데이터 구조를 미리 이해하면, 결과를 검증하기 쉽습니다.

// localStorage에 저장되는 글 데이터 구조
const post = {
  id: 1712345678901,        // 타임스탬프 기반 고유 ID
  title: "첫 번째 게시글",    // 제목 (필수)
  author: "홍길동",          // 작성자 (필수)
  content: "게시판 테스트입니다.", // 내용
  createdAt: "2026-04-09"    // 작성일
};

// 전체 글 목록은 배열로 저장
localStorage.setItem('posts', JSON.stringify([post1, post2, ...]));

Step 3: MCP Playwright 자동 테스트 — MCP 서버 활용

MCP(Model Context Protocol)의 진가가 발휘되는 단계입니다. Playwright MCP 서버를 연결하면, Claude Code가 직접 브라우저를 열어 게시판을 테스트할 수 있습니다.

MCP Playwright 설정 방법

// .claude/settings.json — Playwright MCP 서버 등록
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-playwright"]
    }
  }
}

사전 준비: Playwright MCP를 사용하려면 Node.js가 설치되어 있어야 합니다. npx 명령어가 작동하는지 먼저 확인하세요.

자동 테스트 시나리오

MCP Playwright가 설정되면, 자연어로 테스트를 요청할 수 있습니다:

프롬프트: 게시판 자동 테스트 요청

board.html을 브라우저에서 열고 다음 시나리오를 테스트해줘:

테스트 1: 글 작성 테스트
- "새 글 작성" 버튼 클릭
- 제목: "테스트 게시글", 작성자: "테스터", 내용: "자동 테스트 내용"
- 등록 버튼 클릭
- 글 목록에 "테스트 게시글"이 표시되는지 확인
- 스크린샷 캡처

테스트 2: 빈 필드 검증 테스트
- "새 글 작성" 버튼 클릭
- 제목을 비운 채 등록 버튼 클릭
- 검증 오류 메시지가 표시되는지 확인
- 스크린샷 캡처

테스트 3: 글 상세 보기 테스트
- 목록에서 "테스트 게시글" 클릭
- 제목, 작성자, 내용이 모두 표시되는지 확인
- 스크린샷 캡처

테스트 4: 글 삭제 테스트
- 상세 화면에서 "삭제" 버튼 클릭
- 확인 다이얼로그에서 "확인" 클릭
- 글 목록에서 해당 글이 사라졌는지 확인
- 스크린샷 캡처

테스트 5: 반응형 테스트
- 뷰포트를 375x667(모바일)로 변경
- 레이아웃이 깨지지 않는지 확인
- 스크린샷 캡처

각 테스트마다 PASS/FAIL 결과와 스크린샷을 남겨줘.

MCP Playwright가 실행하는 동작

테스트 단계	Playwright 동작	검증 항목
페이지 열기	`browser_navigate({url})`	페이지 로드 성공 여부
요소 클릭	`browser_click({selector})`	버튼/링크 정상 동작
텍스트 입력	`browser_type({selector, text})`	폼 입력 정상 처리
요소 확인	`browser_snapshot()`	예상 텍스트/요소 존재 여부
스크린샷	`browser_take_screenshot()`	시각적 결과 증거 보존
뷰포트 변경	`browser_resize({width, height})`	반응형 레이아웃 검증

MCP의 핵심 가치: 테스트 코드를 직접 작성할 필요 없이 자연어로 테스트 시나리오만 설명하면, Claude Code가 MCP Playwright를 통해 실제 브라우저를 조작하고 결과를 확인합니다. 이것이 "비개발자도 QA를 할 수 있는" MCP의 힘입니다.

Step 4: 테스트 결과 보고서 — 에이전트 활용

테스트가 완료되면 AI에게 결과를 정리한 보고서를 요청합니다.

프롬프트: 테스트 보고서 작성 요청

위 테스트 결과를 바탕으로 QA 보고서를 작성해줘.

보고서에 포함할 내용:
1. 테스트 개요 (대상, 일시, 환경)
2. 테스트 결과 요약 (전체 PASS/FAIL 수)
3. 각 테스트별 상세 결과 (시나리오, 기대결과, 실제결과, 판정)
4. 발견된 이슈 목록 (있는 경우)
5. 개선 권고사항
6. 스크린샷 참조

마크다운 테이블 형식으로 깔끔하게 정리해줘.

테스트 보고서 예시

# QA 테스트 보고서 — 웹 게시판

## 1. 테스트 개요
| 항목       | 내용                          |
|-----------|-------------------------------|
| 대상       | board.html (웹 게시판)         |
| 일시       | 2026-04-09                    |
| 테스트 도구 | MCP Playwright                |
| 테스트 환경 | Chrome (Headless), 1280x720   |

## 2. 테스트 결과 요약
| 구분    | 건수 |
|--------|------|
| PASS   | 4    |
| FAIL   | 1    |
| 합계   | 5    |
| 성공률 | 80%  |

## 3. 상세 결과
| # | 시나리오      | 기대 결과              | 실제 결과         | 판정 |
|---|-------------|----------------------|------------------|------|
| 1 | 글 작성      | 목록에 글 표시          | 정상 표시         | PASS |
| 2 | 빈 필드 검증  | 오류 메시지 표시        | 오류 메시지 표시   | PASS |
| 3 | 글 상세 보기  | 전체 내용 표시          | 정상 표시         | PASS |
| 4 | 글 삭제      | 목록에서 제거           | 정상 제거         | PASS |
| 5 | 반응형(375px)| 레이아웃 정상           | 버튼 잘림 발생     | FAIL |

## 4. 발견된 이슈
- [FAIL] 모바일(375px)에서 "새 글 작성" 버튼 텍스트가 잘림
  - 원인: 버튼 width 고정값 사용
  - 권고: width: auto; padding으로 변경

스킬 / MCP / 에이전트 활용 총정리

graph TD subgraph Skills["스킬 (Skill)"] S1["/pdca plan\n계획 문서 생성"] S2["/pdca design\n설계 문서 생성"] S3["/commit\n코드 저장"] end subgraph MCP["MCP 서버"] M1["Playwright\n브라우저 자동 테스트"] M2["Gmail MCP\n보고서 메일 발송"] end subgraph Agents["에이전트 (Agent)"] A1["Sub-Agent\n코드 병렬 생성"] A2["gap-detector\n설계-구현 일치 검증"] A3["report-generator\n보고서 자동 생성"] end S1 --> |"설계"| A1 A1 --> |"구현 완료"| M1 M1 --> |"테스트 결과"| A3 A2 --> |"품질 검증"| A3 style Skills fill:#e8f4fd,stroke:#4a9eff style MCP fill:#f3e5f5,stroke:#9c27b0 style Agents fill:#fff8e1,stroke:#ff9800

구분	도구	이 실습에서의 역할	핵심 가치
스킬	`/pdca plan` `/pdca design`	게시판 설계 문서 자동 생성	반복 작업을 한 줄 명령으로 자동화
MCP	Playwright MCP	브라우저에서 게시판 자동 테스트	AI가 외부 도구(브라우저)를 직접 조작
에이전트	Sub-Agent, report-generator	코드 생성 분담, 보고서 작성	복잡한 작업을 분할하여 병렬 처리

응용 과제: 나만의 게시판 확장하기

기본 게시판이 완성되면 다음 기능을 추가해보세요. 각 기능은 바이브 코딩 한 줄 프롬프트로 구현 가능합니다.

난이도	확장 기능	프롬프트 예시	활용 도구
초급	글 수정 기능	"글 상세 화면에 수정 버튼을 추가하고, 클릭하면 편집 폼으로 전환해줘"	바이브 코딩
초급	검색 기능	"글 목록 상단에 검색창을 추가하고, 제목+내용에서 키워드 검색되게 해줘"	바이브 코딩
중급	카테고리 분류	"글 작성 시 카테고리(공지/일반/질문)를 선택하고, 목록에서 필터링 해줘"	바이브 코딩 + MCP 테스트
중급	페이지네이션	"글이 10개 이상이면 페이지 나누기를 적용해줘. 하단에 페이지 번호 표시"	바이브 코딩 + MCP 테스트
고급	댓글 기능	"각 글에 댓글을 달 수 있게 해줘. 댓글도 localStorage에 저장"	스킬(/pdca design) + 바이브 코딩 + MCP 테스트 + 보고서

심화 1: Sub-Agent로 병렬 개발하기

게시판처럼 여러 화면이 필요한 프로젝트는 Sub-Agent를 직접 생성하여 작업을 분담할 수 있습니다. 마치 팀장이 팀원에게 업무를 배분하는 것과 같습니다.

graph TD A["PM/PL 사용자"] -->|"게시판을 Sub-Agent로\n나눠서 만들어줘"| B["Main Agent\n(팀장 역할)"] B -->|"작업 분배"| C["Sub-Agent 1\nHTML 구조 담당"] B -->|"작업 분배"| D["Sub-Agent 2\nCSS 스타일 담당"] B -->|"작업 분배"| E["Sub-Agent 3\nJS 로직 담당"] B -->|"작업 분배"| F["Sub-Agent 4\n테스트 시나리오 작성"] C --> G["결과 취합 & 통합"] D --> G E --> G F --> G G --> H["board.html 완성\n+ 테스트 준비 완료"] style A fill:#4a9eff,color:#fff style B fill:#ff9800,color:#fff style G fill:#9c27b0,color:#fff style H fill:#4caf50,color:#fff

프롬프트: Sub-Agent 병렬 개발 요청

게시판을 Sub-Agent를 활용해서 병렬로 만들어줘.

Sub-Agent 1 — HTML 구조:
- 글 목록, 작성 폼, 상세 보기 3개 화면의 HTML 마크업
- 시맨틱 태그 사용 (header, main, article, form)

Sub-Agent 2 — CSS 디자인:
- 반응형 레이아웃 (모바일/태블릿/데스크톱)
- 다크모드 CSS 변수 시스템
- 카드 스타일, 폼 스타일, 버튼 스타일

Sub-Agent 3 — JavaScript 로직:
- localStorage CRUD (생성, 읽기, 수정, 삭제)
- 화면 전환 라우팅 (SPA 방식)
- 폼 검증 및 에러 처리

Sub-Agent 4 — 테스트 시나리오:
- 각 CRUD 기능의 테스트 케이스 작성
- 엣지 케이스 (빈 입력, 특수문자, 긴 텍스트) 포함

각 Sub-Agent의 결과를 board.html 하나로 통합해줘.

Sub-Agent	담당 영역	병렬 실행	소요 시간 (예상)
Agent 1	HTML 구조 설계	독립 실행	~30초
Agent 2	CSS 스타일링	독립 실행	~30초
Agent 3	JavaScript 로직	독립 실행	~45초
Agent 4	테스트 시나리오	독립 실행	~20초
Main Agent	결과 통합 + 검증	취합 후 실행	~15초

Sub-Agent의 핵심 원리: 순차 실행하면 ~2분 40초 걸릴 작업이, Sub-Agent 병렬 실행으로 ~1분에 완료됩니다. 4명의 팀원이 동시에 각자 맡은 부분을 개발하는 것과 같은 원리입니다. Claude Code는 작업의 복잡도를 분석하여 자동으로 Sub-Agent를 생성하기도 하지만, 위 프롬프트처럼 직접 분배를 지시하면 더 정확한 결과를 얻을 수 있습니다.

심화 2: Gap 분석 — 설계와 구현의 차이 검증

설계 문서대로 구현이 되었는지 자동으로 검증하는 것이 Gap 분석입니다. "계획은 세웠는데, 실제로 다 만들어졌나?" 를 AI가 확인해주는 것입니다.

graph LR A["설계 문서\n(Plan/Design)"] --> C{"Gap 분석\n에이전트"} B["구현 코드\n(board.html)"] --> C C -->|"일치"| D["PASS\n설계대로 구현됨"] C -->|"불일치"| E["GAP 발견\n누락/차이 목록"] E --> F["자동 수정 요청\n(pdca-iterator)"] F --> B style C fill:#9c27b0,color:#fff style D fill:#4caf50,color:#fff style E fill:#f44336,color:#fff style F fill:#ff9800,color:#fff

프롬프트: Gap 분석 요청

설계 문서와 실제 구현을 비교해서 Gap 분석해줘.

분석 항목:
1. 기능 완성도 — 설계서의 모든 기능이 구현되었는지
2. 데이터 구조 일치 — 설계한 필드가 모두 존재하는지
3. UI 구성 — 설계한 화면이 모두 만들어졌는지
4. 검증 로직 — 필수 입력 검증이 동작하는지
5. 반응형/다크모드 — 디자인 요구사항 충족 여부

각 항목마다 Match/Gap 판정과 Match Rate(%)를 알려줘.

Gap 분석 결과 예시

분석 항목	설계 요구사항	구현 상태	판정
글 목록 보기	제목, 작성자, 날짜 표시	제목, 작성자, 날짜 모두 표시	Match
글 작성	제목, 작성자, 내용 입력 폼	3개 필드 폼 구현 완료	Match
글 삭제	확인 다이얼로그 후 삭제	confirm() 다이얼로그 구현	Match
빈 필드 검증	제목, 작성자 필수	제목만 검증, 작성자 검증 누락	Gap
다크모드	토글 버튼 + CSS 변수	토글 버튼 + CSS 변수 구현	Match

Match Rate: 80% (4/5 항목 일치) — Gap이 발견되면 Claude Code에게 "작성자 필드 검증을 추가해줘"로 수정 요청 후, 다시 Gap 분석을 실행하여 90% 이상이 될 때까지 반복합니다. 이것이 PDCA(Plan-Do-Check-Act) 사이클의 핵심입니다.

Claude Code의 PDCA 스킬을 사용하면 이 과정을 자동화할 수 있습니다:

스킬/에이전트	명령어	역할
Gap 분석	`/pdca analyze board`	설계-구현 일치율을 자동 계산하고 누락 항목 목록 생성
자동 개선	`/pdca iterate board`	Gap이 90% 미만이면 자동으로 수정 → 재분석 반복 (최대 5회)
완료 보고서	`/pdca report board`	전체 PDCA 사이클 결과를 종합 보고서로 생성

심화 3: 테스트 보고서 DOCX 파일 생성

테스트 결과를 마크다운이 아닌 공식 문서(DOCX)로 만들면, 팀 공유나 고객 보고에 바로 사용할 수 있습니다.

프롬프트: DOCX 보고서 생성 요청

위 QA 테스트 결과와 Gap 분석 결과를 합쳐서
공식 테스트 보고서를 DOCX 파일로 만들어줘.

파일명: board-qa-report.docx

보고서 구성:
1. 표지 (프로젝트명, 작성일, 작성자, 버전)
2. 목차
3. 테스트 개요 (목적, 범위, 환경, 도구)
4. 테스트 결과 요약 (PASS/FAIL 통계 표)
5. 상세 테스트 결과 (시나리오별 표)
6. Gap 분석 결과 (설계-구현 일치율 표)
7. 발견 이슈 및 조치 내역
8. 스크린샷 첨부 (테스트 증적)
9. 결론 및 개선 권고

테이블은 깔끔한 격자 스타일로,
헤더에는 회사 로고 대신 프로젝트명을 넣어줘.

DOCX 생성 방법 비교

방법	프롬프트	장점	적합한 상황
방법 1: 직접 생성	"DOCX 파일로 보고서 만들어줘"	한 번에 완성된 파일 생성	Node.js 환경에서 `docx` 라이브러리 사용 가능 시
방법 2: HTML → 변환	"보고서를 HTML로 만들고 인쇄용 스타일 적용해줘"	브라우저에서 바로 확인 + PDF/DOCX 저장 가능	추가 설치 없이 바로 사용하고 싶을 때
방법 3: 마크다운 → Pandoc	"마크다운으로 작성 후 pandoc으로 DOCX 변환해줘"	깔끔한 변환 품질, 템플릿 지원	Pandoc이 설치된 환경

// 방법 1: Node.js docx 라이브러리로 DOCX 직접 생성 (Claude Code가 자동 작성)
const { Document, Packer, Paragraph, Table, TableRow, TableCell } = require('docx');

const doc = new Document({
  sections: [{
    properties: {},
    children: [
      new Paragraph({ text: "QA 테스트 보고서 — 웹 게시판", heading: "Title" }),
      new Paragraph({ text: "작성일: 2026-04-09 | 도구: MCP Playwright" }),
      // ... 테이블, 본문 자동 생성
    ]
  }]
});

// DOCX 파일 저장
Packer.toBuffer(doc).then(buffer => {
  fs.writeFileSync("board-qa-report.docx", buffer);
});

# 방법 3: Pandoc으로 마크다운 → DOCX 변환
pandoc board-qa-report.md -o board-qa-report.docx \
  --reference-doc=template.docx \
  --toc \
  --highlight-style=tango

PM 팁: Claude Code에게 "보고서를 DOCX로 만들어줘"라고 요청하면, 현재 환경에서 가능한 최적의 방법을 자동으로 선택합니다. Node.js 프로젝트라면 docx 라이브러리를, 없다면 HTML 보고서 + 인쇄용 CSS를 제안합니다. 어떤 방법을 쓸지 고민할 필요 없이 "만들어줘"라고 하면 됩니다.

기존 개발 방식 vs AI 바이브 코딩 — 생산성 비교

동일한 "웹 게시판" 프로젝트를 기존 방식과 AI 바이브 코딩으로 각각 진행했을 때, 생산성 차이를 비교합니다.

단계	기존 개발 방식	소요 시간	AI 바이브 코딩	소요 시간	단축률
요구사항 정의	PM이 수동으로 문서 작성, 회의 2~3회	4~8시간	`/pdca plan` 스킬로 자동 생성 + 검토	10~20분	95%
설계	개발자가 ERD, 화면설계서, API 설계 작성	8~16시간	`/pdca design` 스킬로 자동 생성	15~30분	96%
HTML/CSS 구현	퍼블리셔/프론트엔드 개발자가 코딩	8~16시간	바이브 코딩 + Sub-Agent 병렬 생성	5~15분	97%
JavaScript 로직	프론트엔드 개발자가 CRUD 구현	8~16시간	자연어로 기능 설명 → 자동 구현	10~20분	96%
테스트 코드 작성	QA가 테스트 케이스 + 셀레니움 스크립트 작성	8~16시간	MCP Playwright로 자연어 테스트	10~15분	97%
테스트 실행	QA가 수동 클릭 테스트 + 기록	2~4시간	MCP가 브라우저 자동 조작 + 스크린샷	2~5분	97%
Gap 분석	PM/PL이 설계서와 결과물 수동 대조	2~4시간	`/pdca analyze` 자동 비교	1~3분	98%
보고서 작성	QA/PM이 워드로 수동 작성	2~4시간	에이전트가 DOCX 자동 생성	2~5분	97%

graph LR subgraph Traditional["기존 방식"] T1["설계\n1~2일"] --> T2["구현\n2~4일"] T2 --> T3["테스트\n1~2일"] T3 --> T4["보고서\n0.5일"] end subgraph AI["AI 바이브 코딩"] A1["설계\n20분"] --> A2["구현\n15분"] A2 --> A3["테스트\n15분"] A3 --> A4["보고서\n5분"] end style Traditional fill:#ffebee,stroke:#f44336 style AI fill:#e8f5e9,stroke:#4caf50

비교 항목	기존 개발 방식	AI 바이브 코딩
총 소요 시간	5~10일 (풀타임 기준)	1~2시간
필요 인력	PM 1명 + 개발자 1~2명 + QA 1명	PM/PL 1명 (비개발자 가능)
필요 기술 지식	HTML, CSS, JS, 테스트 프레임워크	자연어로 설명하는 능력
품질 검증	수동 테스트 + 육안 확인	MCP 자동 테스트 + Gap 분석 + 스크린샷
문서화	별도 작업 필요	개발 과정에서 자동 생성
반복 수정 비용	수정할 때마다 코딩 + 재테스트	"이 부분 수정해줘" 한 마디 → 자동 반영

주의: AI 바이브 코딩의 한계

프로토타입/MVP에 최적 — 이 비교는 간단한 게시판(프로토타입) 수준입니다. 대규모 상용 서비스는 여전히 전문 개발이 필요합니다.
검증은 필수 — AI가 만든 코드는 반드시 사람이 최종 확인해야 합니다. Gap 분석과 MCP 테스트가 그 역할을 합니다.
복잡한 비즈니스 로직 — 결제, 인증 등 보안이 중요한 기능은 전문 개발자와 협업하세요.

전체 실습 플로우 — 최종 정리

graph TD A["1. 설계\n/pdca plan + /pdca design"] --> B["2. Sub-Agent 병렬 구현\n4개 에이전트가 동시 개발"] B --> C["3. MCP Playwright 테스트\n5개 시나리오 자동 실행"] C --> D["4. Gap 분석\n/pdca analyze\n설계-구현 일치율 확인"] D --> E{"Match Rate\n≥ 90%?"} E -->|"No"| F["자동 수정\n/pdca iterate"] F --> C E -->|"Yes"| G["5. 보고서 DOCX 생성\n에이전트 + docx 라이브러리"] G --> H["완료\n설계 → 구현 → 테스트 → 검증 → 보고서"] style A fill:#4a9eff,color:#fff style B fill:#ff9800,color:#fff style C fill:#9c27b0,color:#fff style D fill:#f44336,color:#fff style G fill:#4caf50,color:#fff style H fill:#2196f3,color:#fff

종합 실습 과제

다음 단계를 따라 웹 게시판 프로젝트를 완성해보세요:

설계: Claude Code에게 게시판 요구사항을 설명하고 설계 문서 받기
구현: Sub-Agent를 활용하여 HTML/CSS/JS를 병렬로 생성
확인: 브라우저에서 직접 열어 기본 동작 확인
자동 테스트: MCP Playwright로 5가지 시나리오 자동 테스트 실행
Gap 분석: /pdca analyze로 설계-구현 일치율 확인 (90% 이상 목표)
수정: Gap이 있으면 /pdca iterate로 자동 수정 반복
보고서: 테스트 + Gap 분석 결과를 DOCX 보고서로 생성
응용: 검색, 카테고리 등 1가지 이상 기능 확장

핵심 요약: 이 실습은 바이브 코딩의 "만들기"에서 한 단계 나아가 "검증하기"와 "보고하기"까지 다룹니다. Sub-Agent로 병렬 개발하고, MCP로 테스트하고, Gap 분석으로 품질을 확인하고, DOCX로 공식 보고서를 만드는 이 흐름이 AI 네이티브 개발의 실전 패턴입니다. 기존 방식 대비 90% 이상의 시간 단축이 가능하며, PM/PL이 이 패턴을 이해하면 개발팀과 더 깊이 있는 협업이 가능해집니다.

MCP 생태계 심화 — 아키텍처와 주요 서버

MCP(Model Context Protocol)는 AI가 외부 세계와 소통하는 표준 프로토콜입니다. USB가 다양한 장치를 하나의 규격으로 연결하듯, MCP는 AI를 다양한 도구/데이터에 연결합니다.

MCP 3계층 아키텍처

graph TD subgraph Host["🖥️ MCP 호스트 (Claude Code, Cursor 등)"] H1["사용자 인터페이스"] end subgraph Client["🔌 MCP 클라이언트"] C1["프로토콜 처리"] C2["요청/응답 관리"] end subgraph Servers["⚙️ MCP 서버들"] S1["Playwright\n브라우저 자동화"] S2["GitHub\n코드 저장소"] S3["Slack\n메시지/채널"] S4["PostgreSQL\n데이터베이스"] S5["Gmail\n이메일"] S6["Jira\n프로젝트 관리"] end H1 --> C1 C1 --> S1 C1 --> S2 C1 --> S3 C2 --> S4 C2 --> S5 C2 --> S6 style H1 fill:#4a9eff,color:#fff style C1 fill:#9c27b0,color:#fff style C2 fill:#9c27b0,color:#fff

알아야 할 주요 MCP 서버

MCP 서버	기능	PM 활용 시나리오	난이도
Playwright	브라우저 자동 조작/테스트	QA 자동화, 스크린샷 기반 검수	쉬움
GitHub	PR 생성, 이슈 관리, 코드 검색	개발 진행 상황 자동 모니터링	쉬움
Slack	메시지 전송, 채널 관리	일일 보고서 자동 공유	쉬움
Google Calendar	일정 조회/생성/수정	회의 일정 자동 관리	쉬움
PostgreSQL	DB 조회/분석	데이터 기반 의사결정	중간
Jira	이슈 생성/수정/검색	백로그 관리 자동화	중간
Gmail	이메일 검색/발송/정리	고객 피드백 수집 자동화	쉬움

MCP vs 기존 API 연동 비교

항목	기존 API 연동	MCP 연동
설정 방식	서비스별 개별 코드 작성	설정 파일 한 줄로 연결
개발 필요	API 클라이언트 직접 구현	MCP 서버 설치만 하면 즉시 사용
표준화	서비스마다 다른 인터페이스	하나의 프로토콜로 통일
AI 통합	별도 연동 로직 필요	AI가 자연어로 직접 호출
비개발자 사용	불가능	자연어 명령으로 가능

PM의 MCP 도입 판단 기준

graph TD A["MCP 도입 검토"] --> B{"반복적인\n수동 작업이\n있는가?"} B -->|예| C{"해당 서비스의\nMCP 서버가\n존재하는가?"} B -->|아니오| D["MCP 불필요\n기존 방식 유지"] C -->|예| E["MCP 도입 추천\n설정 후 즉시 활용"] C -->|아니오| F{"커스텀 MCP\n서버 개발\n가치가 있는가?"} F -->|예| G["개발팀에\nMCP 서버 개발 요청"] F -->|아니오| H["기존 API 연동\n또는 수동 처리"] style A fill:#4a9eff,color:#fff style E fill:#4caf50,color:#fff style D fill:#ff9800,color:#fff

← 이전 5. 바이브 코딩 실전 다음 →