AI 바이브 코딩 실험

배경

"바이브 코딩"이라는 용어가 등장했습니다. AI와 대화하며 코드를 생성하고, 전체 프로젝트를 프롬프트만으로 구축하는 새로운 개발 방식입니다. 과연 AI 코딩 도구만으로 실제 운영 가능한 웹사이트를 만들 수 있을까? 직접 실험해보기로 했습니다.

도전 과제

프롬프트 설계의 어려움

AI에게 "블로그를 만들어줘"라고 하면 기본적인 것은 나오지만, 디테일이 부족합니다. CLAUDE.md 설정, 커스텀 스킬, Git 훅 연동까지 체계적으로 구성해야 AI가 일관된 코드를 생성할 수 있었습니다.

품질 관리

AI가 생성한 코드는 동작하지만, 항상 최적은 아닙니다. 사용하지 않는 import, 불필요한 re-render, 접근성 누락 등을 지속적으로 검수하고 수정해야 했습니다. 빌드 에러 없이 배포 가능한 수준을 유지하는 것이 핵심이었습니다.

학습 곡선 기록

바이브 코딩의 진짜 가치를 증명하려면, 과정 자체를 기록해야 했습니다. 어떤 프롬프트가 효과적이었는지, 어떤 실수가 반복되었는지, AI와의 협업에서 무엇을 배웠는지 블로그 포스트로 남기기로 했습니다.

해결 방법

체계적인 AI 협업 환경

프로젝트 루트
├── CLAUDE.md          # AI에게 프로젝트 규칙 전달
├── .claude/
│   ├── skills/        # 작업별 전문 스킬 파일
│   │   ├── A-blog-writer.md
│   │   ├── B-feature-dev.md
│   │   └── ...
│   └── settings.json  # 권한 + 환경 설정

CLAUDE.md에 프로젝트의 기술 스택, 코딩 규칙, 디자인 시스템 변수를 상세히 정의했습니다. AI는 이 문서를 매 세션 시작 시 읽고, 일관된 코드를 생성합니다.

스킬 기반 워크플로우

각 작업 유형(블로그 작성, 기능 개발, 3D 작업 등)에 맞는 스킬 파일을 만들어 AI의 역할을 구체화했습니다.

스킬	역할	트리거
Blog Writer	마크다운 포스트 작성	blog, post, article
Feature Dev	컴포넌트/페이지 개발	feature, component
3D Specialist	Three.js/R3F 작업	3d, r3f, threejs
Design System	CSS/Tailwind 스타일링	style, css, dark mode

품질 게이트

모든 AI 생성 코드는 다음 검증을 통과해야 합니다:

npm run build — exit 0 (빌드 성공)
npx tsc --noEmit — 타입 에러 0개
사용하지 않는 import/변수 제거
CSS 레이아웃 회귀 확인

결과

White Place 전체 사이트 AI 협업으로 구축
3D 히어로 씬 프롬프트 대화로 생성
13편 블로그 포스트 AI 작성 + 인간 편집
12종 미니게임 Playground 섹션 완성
7개 보안 실습 Dark Place Labs 구축

배운 점

바이브 코딩은 "코드를 안 써도 된다"가 아니라, "코드를 더 빨리, 더 많이 쓸 수 있다"입니다. AI는 보일러플레이트와 반복 작업을 획기적으로 줄여주지만, 아키텍처 결정과 품질 관리는 여전히 인간의 영역입니다.

가장 중요한 발견은 컨텍스트 문서(CLAUDE.md)의 위력입니다. AI에게 프로젝트의 규칙과 패턴을 한 번 잘 정의해두면, 이후 모든 세션에서 일관된 코드 품질을 유지할 수 있습니다. 이것이 바이브 코딩과 단순한 "AI에게 물어보기"의 차이입니다.

앞으로는 CLAUDE.md 설정과 스킬 시스템을 오픈소스 가이드로 정리해, 다른 개발자들도 이 워크플로우를 쉽게 도입할 수 있도록 할 계획입니다.