6장, 실전 데모 & 코드 리뷰

 

이제 도구와 환경이 준비되었으니, 바이브 코딩이 실제로 어떻게 작동하는지 눈으로 확인할 차례입니다. 이 장에서는 두 가지 데모 프로젝트를 15분 만에 완성해 보고, 이어서 자주 발생하는 실패 사례를 분석하며 효과적인 코드 리뷰 요령을 살펴봅니다. 코딩 경험이 전혀 없는 분도 따라할 수 있도록 단계마다 상세한 설명과 스크린샷 대신 프롬프트 + 기대 결과를 나란히 제시하니, 그대로 복사해 IDE에 붙여 보기만 해도 작동 원리를 체험할 수 있습니다.

6.1 To‑Do 앱 15분 챌린지

6.1.1 목표

Vite + React + Tailwind를 사용해 다크모드 지원 To‑Do 웹앱을 15분 안에 실행 화면까지 띄우는 것이 목표입니다.

6.1.2 준비 명령

# 새 폴더 만들고 진입
mkdir vibe-todo && cd vibe-todo

# Vite 템플릿으로 프로젝트 생성 (JavaScript + React)
npm create vite@latest . -- --template react

# 의존성 설치
npm i

# TailwindCSS 설정
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tip: 위 명령은 AI에게 대신 입력하도록 프롬프트에 적어 주어도 됩니다. 터미널 액세스가 가능한 LLM 플러그인(예: Replit AI Shell)을 쓰는 경우 아주 유용합니다.

6.1.3 생성 프롬프트

# 역할: 시니어 프론트엔드 개발자
# 목표: src/
#  - App.jsx에 Tailwind 레이아웃과 다크모드 토글 포함
#  - zustand로 상태 관리
#  - 입력 필드 + 추가 버튼 + 완료 체크박스 + 리스트 표시
#  - storage.js에 localStorage 영속화 헬퍼 함수 구현
# 테스트: npm run dev 로 브라우저에 "Hello Vite" 대신 To‑Do UI가 나타나야 함
# 요구사항을 만족하는 파일을 모두 생성·수정해 줘

프롬프트를 Copilot Chat 또는 Cursor에 입력하고

Accept All

하면 즉시 여러 파일이 생성·수정됩니다. 변경 내역을 확인한 뒤 npm run dev를 실행하면 다음과 같은 결과를 볼 수 있습니다.

예상 화면	확인 포인트
✓ 할 일 입력   ✓ 라이트/다크 토글	상태 변화가 즉시 UI에 반영되는가? 새로고침 후에도 리스트가 남아있는가? (localStorage) 다크모드 전환 시 Tailwind class가 올바르게 적용되는가?

6.1.4 5분 코드 리뷰 체크리스트

1. 명명 규칙 – 변수·컴포넌트명이 의미를 드러내는가?
2. 하드코딩 – 색상, 키 등 매직값이 상수화되어 있는가?
3. 불필요 렌더 – zustand selector를 사용해 렌더 횟수를 줄였는가?
4. 접근성 – 버튼 aria-label, 입력 aria-describedby가 있는가?

6.2 API 백엔드 스캐폴딩

이번에는 FastAPI를 사용해 보겠습니다. 바이브 코딩을 통해 모델 정의 → CRUD 엔드포인트 → DB 연결을 한 번에 생성합니다.

6.2.1 프로젝트 생성

mkdir vibe-api && cd vibe-api
python -m venv venv && source venv/bin/activate
pip install fastapi uvicorn[standard] sqlalchemy alembic

6.2.2 생성 프롬프트

# 역할: 시니어 백엔드 개발자
# 목표: FastAPI + SQLAlchemy To‑Do REST API
# 요구사항:
#  1. Todo 모델(id:int, title:str, done:bool, created_at:datetime)
#  2. sqlite DB, Alembic 마이그레이션 파일 포함
#  3. CRUD 라우트: /todos (GET, POST), /todos/{id} (GET, PUT, DELETE)
#  4. Pydantic 스키마 분리 (TodoCreate, TodoRead, TodoUpdate)
#  5. 테스트 코드(test_main.py)에서 모든 엔드포인트 호출 예시 포함
#  6. "uvicorn main:app --reload" 실행 안내 주석 추가

AI가 main.py, database.py, models.py, schemas.py, crud.py, test_main.py, alembic 디렉터리를 한 번에 만들어 줍니다. Accept All 후 alembic upgrade head → uvicorn main:app --reload를 실행하면 Swagger UI가 자동으로 생성되어 테스트를 즉시 수행할 수 있습니다.

6.2.3 문제 해결 포인트

• 모델 필드 누락 – AI가 done 필드를 빠뜨리는 경우가 빈번합니다. 프롬프트에 테스트 섹션을 명시하면 개선됩니다.
• 관계형 구조 – Todo와 User 같은 관계 모델은 첫 프롬프트에서 relationship 키워드를 강조하세요.
• Type 오류 – Pydantic v2로 생성된 모델이 FastAPI v0.110과 맞지 않을 때 버전을 명시(예: fastapi==0.111.0)하면 해결됩니다.

6.3 실패 사례 분석 & 교훈

아래는 커뮤니티에서 자주 보고된 실패 패턴과, 이를 예방하거나 빠르게 복구하는 교훈입니다.

실패 패턴	발생 원인	대응 전략
빌드 불가 (의존성 충돌)	AI가 동일 기능을 위한 서로 다른 라이브러리를 중복 설치	npm dedupe, pipdeptree로 중복 확인 후 불필요 패키지 제거
무한 루프 프롬프트	“추가해 줘” 반복 → 파일 크기 증가 → LLM 컨텍스트 한계 초과	모듈 단위(예: services/*)로 새 프롬프트 시작, 컨텍스트 리셋
테스트 통과 못함	AI가 테스트 코드를 최신 구현과 싱크하지 않음	PR 단계에 자동 테스트 실행 배포 차단, 실패 시 “테스트를 통과하도록 수정” 프롬프트 추가
보안 취약점 삽입	AI가 Stack Overflow 코드 스니펫을 그대로 차용	SCA(Software Composition Analysis) + SAST 도구로 파이프라인에 실패 알림

코드 리뷰 팁 3가지

1. Diff 뷰어에서 AI 변경량 필터링 – Copilot이 수정한 라인만 ai‑generated 라벨로 하이라이트하면 집중력이 높아집니다.
2. “왜” 질문 – 동작 확인이 아닌 “이 구현을 선택한 이유”를 AI에게 묻고, 설명이 부실하면 재프롬프트로 대체안을 요청합니다.
3. 테스트 우선 – 언어·프레임워크마다 공식 예제 테스트를 복사해 두고, AI에게 우선 통과하도록 요구하면 품질이 빠르게 상향됩니다.

6.4 정리 & 다음 단계

15분 챌린지와 백엔드 스캐폴딩을 통해 “아이디어 ↔ 실행” 간격이 얼마나 짧아지는지 직접 체감했을 것입니다. 또한 실패 사례를 살펴보며 자동화 점검과 코드 리뷰 질문 기법이 얼마나 중요한지도 이해했을 것입니다. 다음 7장에서는 팀 환경에서 바이브 코딩을 도입할 때 발생하는 협업·권한·문서화 이슈를 해결하는 전략을 다룹니다.