실전 프로젝트

프로젝트 개요

이 가이드에서는 실제로 바이브코딩만으로 앱을 완성하는 과정을 보여줍니다. 각 프로젝트마다 사용한 프롬프트를 그대로 공개합니다.

프로젝트 1: 포트폴리오 사이트 (30분)

목표: 비개발자가 개인 포트폴리오를 만들고 배포하기

기술 스택: Next.js + Tailwind CSS + Vercel

CLAUDE.md 작성 (2분)

# CLAUDE.md
 
## 프로젝트
심플한 개인 포트폴리오 웹사이트. 디자이너용.
 
## 스택
Next.js 15, Tailwind CSS, Vercel 배포
 
## 요구사항
- 히어로 섹션 (이름, 한줄 소개, 프로필 이미지)
- 프로젝트 갤러리 (카드형, 이미지 + 설명)
- 소개 섹션 (간단한 자기소개)
- 연락처 섹션 (이메일, GitHub, LinkedIn 링크)
- 다크/라이트 모드 토글
- 완전 반응형 (모바일 우선)
- 한국어 콘텐츠
 
## 디자인
- 미니멀, 화이트 스페이스 많이
- 폰트: 시스템 기본 (Pretendard는 로딩 무거움)
- 색상: 뉴트럴 베이스 + 액센트 1색

프롬프트 로그

프롬프트 1 — 프로젝트 생성 (5분)

Next.js 프로젝트를 초기화하고, Tailwind CSS를 설정해줘.
CLAUDE.md에 적은 포트폴리오 사이트를 만들어줘.
히어로, 프로젝트 갤러리, 소개, 연락처 4개 섹션이 있는 원페이지로.

프롬프트 2 — 프로젝트 데이터 수정 (3분)

프로젝트 카드의 내용을 이렇게 변경해줘:

프로젝트 1: "브랜드 리뉴얼" - UI/UX 디자인, 2024
프로젝트 2: "모바일 앱 디자인" - Figma 프로토타입, 2024
프로젝트 3: "웹사이트 리디자인" - 반응형 웹, 2025

프롬프트 3 — 다크 모드 (3분)

next-themes로 다크 모드를 추가해줘. 헤더 오른쪽에 토글 아이콘을 넣어줘.
시스템 설정 자동 감지도 적용해.

프롬프트 4 — 스타일 조정 (5분)

히어로 섹션의 배경을 그라데이션으로 바꿔줘.
라이트 모드: 흰색→연한 회색, 다크 모드: 진한 회색→검은색.
프로젝트 카드에 hover 시 살짝 올라오는 애니메이션 추가해줘.

프롬프트 5 — 반응형 확인 (2분)

모바일에서 어떻게 보이는지 확인하고, 문제가 있으면 고쳐줘.
특히 프로젝트 카드가 모바일에서 1열로 잘 쌓이는지.

프롬프트 6 — 배포 (5분)

Vercel에 배포할 수 있게 설정해줘.
프로젝트 이름은 "my-portfolio"로.

결과

• 총 프롬프트: 6개
• 직접 작성한 코드: 0줄
• 소요 시간: 약 25분
• 배포 상태: Vercel로 라이브

프로젝트 2: SaaS MVP (2시간)

목표: 아이디어 → 결제 가능한 MVP까지

기술 스택: Next.js + Supabase + Stripe

서비스 컨셉: "Daily Memo" — 매일 하나의 메모를 작성하고, 월별 리포트를 생성하는 서비스

CLAUDE.md 작성 (5분)

# CLAUDE.md
 
## 프로젝트
Daily Memo — 매일 하나의 메모를 작성하는 심플 저널링 SaaS.
 
## 스택
- Next.js 15 (App Router, TypeScript)
- Supabase (Auth + Database)
- Stripe (결제, 월 $5)
- Vercel (배포)
- Tailwind CSS
 
## 페이지 구조
- / — 랜딩 페이지 (비로그인)
- /login — 로그인/회원가입 (Supabase Auth)
- /app — 메인 앱 (오늘의 메모 작성)
- /app/history — 과거 메모 보기 (월별 캘린더)
- /app/settings — 설정 + 구독 관리
- /pricing — 요금제 페이지
 
## 비즈니스 룰
- 무료: 최근 7일 메모만 보기
- Pro ($5/월): 전체 히스토리 + 월간 리포트
- 메모는 하루 1개만 (날짜당 1 레코드)
- 500자 제한
 
## DB 스키마
- users: Supabase Auth 사용
- memos: id, user_id, content (text), created_date (date), created_at
- subscriptions: id, user_id, stripe_customer_id, status, current_period_end

핵심 프롬프트 하이라이트

데이터베이스 설계 (10분)

CLAUDE.md의 DB 스키마대로 Supabase SQL을 작성해줘.
RLS 정책도 함께 만들어줘 — 사용자는 본인 메모만 CRUD 가능.

인증 구현 (15분)

Supabase Auth로 이메일/비밀번호 로그인을 구현해줘.
로그인 페이지, 미들웨어(인증 필요 페이지 보호), 로그아웃 기능.

메인 앱 UI (20분)

오늘의 메모 작성 페이지를 만들어줘.
- 상단: 오늘 날짜 표시
- 중앙: 텍스트 에디터 (500자 제한, 남은 글자 수 표시)
- 하단: 저장 버튼
- 이미 오늘 메모가 있으면 편집 모드로 로드

결제 연동 (25분)

Stripe 결제를 연동해줘.
1. /pricing 페이지에 무료/Pro 비교 카드
2. "Pro 시작하기" 클릭 → Stripe Checkout으로 리다이렉트
3. 결제 성공 → webhook으로 subscriptions 테이블 업데이트
4. Pro 사용자만 전체 히스토리 접근 가능

배포 준비 (15분)

Vercel 배포를 위한 환경변수 목록을 정리해줘.
또한 Stripe webhook 엔드포인트 URL 설정 가이드도 알려줘.

타임라인

0:00 ~ 0:05  CLAUDE.md 작성
0:05 ~ 0:15  DB 스키마 + RLS
0:15 ~ 0:30  인증 (로그인/회원가입)
0:30 ~ 0:50  메인 앱 (메모 작성/편집)
0:50 ~ 1:10  히스토리 페이지 (캘린더)
1:10 ~ 1:35  결제 연동 (Stripe)
1:35 ~ 1:50  랜딩 페이지 + 요금제 페이지
1:50 ~ 2:00  배포 + 최종 테스트

통계

프로젝트 3: 크롬 확장 프로그램 (1시간)

목표: 탭 관리 생산성 도구 만들기

기술 스택: Manifest V3 + TypeScript + React

기능: 열려있는 탭을 그룹별로 정리하고, 나중에 복원할 수 있는 "탭 세이버"

CLAUDE.md 작성 (3분)

# CLAUDE.md
 
## 프로젝트
Tab Saver — 크롬 탭을 그룹으로 저장하고 복원하는 확장 프로그램.
 
## 스택
- Manifest V3, TypeScript, React
- Chrome Storage API (로컬 저장)
- Vite (빌드)
 
## 기능
- 현재 열린 탭 목록 표시
- 선택한 탭들을 이름 붙여 그룹 저장
- 저장된 그룹 목록 표시
- 그룹 클릭 시 모든 탭 복원
- 그룹 삭제
 
## 구조
- src/popup/ — 팝업 UI (React)
- src/background/ — 서비스 워커
- public/manifest.json

핵심 프롬프트

크롬 확장 프로그램 프로젝트를 초기화해줘.
Vite + React + TypeScript로 설정하고, Manifest V3 형식으로.

팝업 UI를 만들어줘:
- 상단: 현재 열린 탭 목록 (체크박스로 선택)
- 중간: 그룹 이름 입력 + "저장" 버튼
- 하단: 저장된 그룹 목록 (클릭 시 복원, X로 삭제)

Chrome Storage API를 사용해서 그룹 데이터를 로컬에 저장하고 불러오는 로직을 구현해줘.
chrome.tabs API로 현재 탭 목록을 가져오고, 저장된 탭을 복원하는 기능도.

Chrome Web Store에 올릴 수 있게 빌드 설정하고,
필요한 아이콘 (16x16, 48x48, 128x128)을 간단한 디자인으로 만들어줘.

통계

공통 교훈

바이브코딩 성공의 패턴

1. CLAUDE.md가 절반이다 — 시간 투자 대비 효과가 가장 큰 곳
2. 작게 시작하고 반복 — 한번에 완벽하려고 하지 말 것
3. 검토 시간을 확보 — "동작하니까 끝"이 아니라, 보안/품질 체크 필수
4. 프롬프트를 구체적으로 — 모호한 지시 = 모호한 결과
5. 막히면 새 세션 — AI와 씨름하는 것보다 처음부터 다시가 빠름

프로젝트별 바이브코딩 적합도