Part 8. 실전 프로젝트

PRD부터 배포까지

이론은 끝났다. 이제 두 개의 앱을 직접 만들면서 바이브 코딩을 체험한다.

1. 실전 1: TO-DO 앱 (PRD 한 장으로 끝내는 작은 프로젝트)

2. 실전 2: 냉장고 사진 → 레시피 추천 앱 (외부 AI API 연동)

3. 부록 1: Vercel로 웹 배포

4. 부록 2: Supabase로 DB 연동

#실전 1. TO-DO 앱 만들기

#Step 1. PRD 작성

먼저 PRD.md 파일에 무엇을 만들지 정리한다.

# 제품 이름: 미니 TO-DO 앱

## 1. 목적
- 매일 해야 할 일을 간단히 기록하고 완료 여부를 체크

## 2. 핵심 기능
- 할 일 추가 (텍스트 입력)
- 할 일 완료 체크 (체크박스)
- 할 일 삭제 (휴지통 버튼)
- 완료/미완료 필터링

## 3. 기술 스택
- HTML + CSS + Vanilla JavaScript
- 데이터 저장: localStorage

## 4. 화면 구성
- 상단: 입력창 + "추가" 버튼
- 중단: 할 일 리스트
- 하단: "전체 / 진행중 / 완료" 필터 탭

#Step 2. 프롬프트로 변환하기

Claude Code에게 다음과 같이 요청한다:

@PRD.md를 읽고, 이 명세대로 단일 HTML 파일로 TO-DO 앱을 만들어줘.
스타일은 모던하고 깔끔하게, 다크모드도 토글로 지원해줘.

📱 완성될 화면 모형

#Step 3. 협업 루프 돌리기

처음에 받은 결과가 완벽하지 않을 수 있다. Part 7의 협업 루프를 적용한다.

좋아. 다음 수정:
1. 완료 항목은 회색으로 줄을 긋고 투명도 50%로
2. 빈 상태일 때 "할 일이 없습니다 ✨" 메시지 표시
3. localStorage 저장 시 timestamp도 함께 저장

#실전 2. 냉장고 사진 → 레시피 추천 앱

냉장고 안 사진을 업로드하면 AI가 식재료를 인식하고 만들 수 있는 요리를 추천하는 앱.

#전체 데이터 흐름

#Step 1. PRD 분할 작성

복잡한 앱은 PRD를 단계별로 쪼개서 작성한다.

#Step 2. OpenRouter API 사용

OpenRouter란

"수백 개의 LLM을 단일 API로 호출할 수 있게 해주는 통합 서비스"

ChatGPT, Claude, Gemini, Gemma 등 다양한 모델을 하나의 API 키와 동일한 호출 방식으로 사용할 수 있다.

#추천 무료 모델

#Step 3. 환경 변수 설정

.env 파일을 만들고 다음 내용을 추가한다.

OPENROUTER_API_KEY=sk-or-v1-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1

#✅ 안전 체크리스트

• .env 파일을 만들 때 동시에 .gitignore에 .env 추가

• API 키는 코드에 절대 하드코딩하지 않기 (반드시 환경변수)

• 공개 저장소에 push하기 전 git status로 .env 포함 여부 확인

• 이미 노출된 API 키는 즉시 발급사 콘솔에서 폐기·재발급

• OpenRouter 등에서 사용량 한도(spending limit) 미리 설정

#부록 1. 웹 배포 — Vercel

Vercel이란

"GitHub와 연결만 하면 자동으로 빌드·배포해주는 무료 호스팅 서비스"

#배포 절차 (5단계)

flowchart LR
    A["1️⃣ GitHub<br/>push"] --> B["2️⃣ Vercel<br/>가입"]
    B --> C["3️⃣ Import<br/>Project"]
    C --> D["4️⃣ 환경 변수<br/>등록"]
    D --> E["5️⃣ Deploy<br/>클릭"]
    style A fill:#e3f2fd
    style B fill:#fff3e0
    style C fill:#f3e5f5
    style D fill:#fce4ec
    style E fill:#e8f5e9

이후 GitHub에 push할 때마다 자동으로 재배포된다.

#부록 2. DB 연동 — Supabase

Supabase란

"PostgreSQL 기반의 오픈소스 BaaS. 인증·DB·스토리지·실시간 동기화까지 한 번에 제공"

#Supabase로 할 수 있는 것

#예시: 할 일 테이블 + Row Level Security

-- 할 일 테이블
CREATE TABLE todos (
    id BIGSERIAL PRIMARY KEY,
    user_id UUID REFERENCES auth.users,
    title TEXT NOT NULL,
    completed BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Row Level Security: 자신의 데이터만 보기
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own todos"
    ON todos FOR SELECT
    USING (auth.uid() = user_id);

#마치며 — 직접 만들어볼 시간

여기까지 8개 파트를 거쳐 AI의 역사 → 작동 원리 → 활용 → 실전까지 모두 봤다.

감사합니다.

— DSA · 2026