바이브 코딩 - 정적 페이지 제작

실습 시간: 1.5시간 필요 도구: v0 (Vercel), Claude, GitHub (선택) 산출물: 실제 배포된 랜딩페이지 또는 포트폴리오

📚 학습 전 준비 5장. 자동화에서 Vibe Coding 개념과 실습: PRD/TDD 작성을 먼저 학습하세요. 이 실습은 PRD를 실제 웹페이지로 구현하는 전체 과정입니다.

📚 공식 문서

도구	공식 문서	주요 기능
v0 by Vercel	v0.dev · Docs	AI 웹페이지 생성 (무료 tier 있음)
Claude	Claude.ai	코드 생성, 디버깅
Vercel	Vercel Docs	무료 호스팅, 즉시 배포

바이브 코딩이란?

전통적 코딩 vs 바이브 코딩

단계	전통적 코딩	바이브 코딩
기획	개발자가 이해할 스펙 작성	PRD 작성 (누구나 가능)
설계	아키텍처 설계	AI에게 요청
코딩	한 줄씩 코드 작성	AI가 생성
디버깅	에러 찾아 수정	AI에게 에러 전달
배포	서버 설정, 배포 스크립트	클릭 한 번

핵심: 코딩 능력 대신 기획력과 검증력으로 웹페이지 제작

왜 정적 페이지부터?

flowchart LR
    A["📄 정적 페이지<br/>(HTML/CSS/JS)"] --> B["⚡ 동적 페이지<br/>(DB 연동)"]
    B --> C["🔧 웹 앱<br/>(복잡한 로직)"]

    A -.->|"이 실습"| A

정적 페이지의 장점

학습 곡선 낮음
배포 쉬움 (무료)
충분히 실용적 (랜딩페이지, 포트폴리오 등)

Part 1: 레벨별 학습 로드맵 (5분)

3단계 학습 구조

레벨	내용	목표	시간
Level 1	제공된 PRD로 페이지 생성	워크플로우 익히기	30분
Level 2	PRD 수정해서 페이지 변형	응용력 키우기	30분
Level 3	새 PRD로 자기 페이지	실전 프로젝트	30분

Part 2: Level 1 - 따라하기 (30분)

목표: 제공된 PRD로 랜딩페이지 만들고 배포하기

프로젝트: 프리랜서 디자이너 포트폴리오

Step 1: PRD 작성 (5분)

아래 PRD를 복사하세요:

# 프리랜서 디자이너 포트폴리오 웹사이트 PRD

## 1. 개요

- 프로젝트명: 김디자인 포트폴리오
- 목적: 잠재 클라이언트에게 작업물 소개 및 연락 유도

## 2. 페이지 구성

1. Hero Section
   - 이름, 직업, 간단한 소개 (1-2줄)
   - CTA 버튼: "포트폴리오 보기", "연락하기"

2. About Section
   - 경력 (3년)
   - 전문 분야 (브랜딩, UI/UX, 일러스트)
   - 간단한 소개

3. Portfolio Section
   - 작업물 3개 (이미지 + 제목 + 설명)
   - 그리드 레이아웃

4. Contact Section
   - 이메일, 인스타그램, 링크
   - 간단한 문의 양식

## 3. 디자인 요구사항

- 스타일: 미니멀, 모던
- 색상: 화이트 베이스, 블랙 텍스트, 포인트 컬러 (파스텔 핑크)
- 폰트: 깔끔한 산세리프
- 반응형: 모바일 대응 필수

## 4. 기술 요구사항

- 정적 페이지 (HTML/CSS/JavaScript)
- 애니메이션: 스크롤 시 부드러운 효과
- 빠른 로딩 속도

## 5. 제외 사항

- 백엔드 불필요
- CMS 불필요
- 실제 이메일 발송 기능 (추후 연동 가능)

Step 2: v0에서 페이지 생성 (10분)

1. v0 접속 및 로그인

v0.dev 접속
GitHub 계정으로 로그인 (무료)

2. PRD 입력

v0의 프롬프트 입력창에:

다음 PRD를 기반으로 프리랜서 디자이너 포트폴리오 웹사이트를 만들어주세요:

[위 PRD 전체 복사]

요구사항:
- 단일 페이지 (스크롤)
- 모던하고 미니멀한 디자인
- 화이트 베이스, 파스텔 핑크 포인트
- 반응형 레이아웃
- 부드러운 스크롤 애니메이션

실제 사용 가능한 수준의 코드를 생성해주세요.

3. 결과 확인

v0이 3가지 디자인 옵션을 제시합니다:

각 옵션 미리보기
마음에 드는 것 선택
“Open in Sandbox” 클릭

Step 3: 코드 커스터마이징 (10분)

v0 Sandbox에서 수정:

수정 1: 텍스트 변경

Hero Section의 이름과 소개를 다음으로 변경해주세요:
- 이름: 김디자인
- 소개: 브랜드에 생명을 불어넣는 디자이너

수정 2: 색상 조정

포인트 컬러를 파스텔 핑크에서 파스텔 블루(#A8DADC)로 변경해주세요.

수정 3: 이미지 placeholder

Portfolio Section의 이미지를 placeholder 이미지로 교체해주세요.
(https://via.placeholder.com/600x400 사용)

각 수정 요청 후 “Regenerate” 클릭하면 v0이 코드를 자동 수정합니다.

Step 4: 배포 (5분)

방법 1: v0에서 직접 배포 (가장 쉬움)

v0 Sandbox에서 “Deploy” 버튼 클릭
Vercel에 자동 연동
프로젝트 이름 입력
“Deploy” 클릭
배포 완료! URL 받기

예: https://your-project.vercel.app

방법 2: 코드 다운로드 후 배포 (선택)

“Download Code” 클릭
GitHub에 업로드
Vercel과 GitHub 연동
자동 배포

✓ Level 1 체크 포인트

□ PRD를 v0에 입력함
□ 3가지 디자인 옵션 중 선택함
□ 최소 2가지 수정 요청을 함
□ 배포에 성공하고 URL을 받음
□ 실제 URL을 브라우저에서 확인함

배운 것

PRD → 코드 생성 워크플로우
v0의 디자인 옵션 선택 방법
자연어로 코드 수정 요청
Vercel 무료 배포 방법

Part 3: Level 2 - 응용하기 (30분)

목표: PRD를 수정해서 다른 유형의 페이지 만들기

이제 포트폴리오 → 서비스 랜딩페이지로 변경해보세요.

변경 포인트 1: 페이지 목적 변경

원래 PRD:

목적: 잠재 클라이언트에게 작업물 소개

수정:

목적: SaaS 제품 소개 및 베타 신청 유도

변경 포인트 2: 섹션 구성 변경

원래: Hero - About - Portfolio - Contact

수정: Hero - Features - Pricing - CTA

새 PRD:

## 2. 페이지 구성

1. Hero Section
   - 제품명: "TaskFlow"
   - 슬로건: "팀 협업을 10배 빠르게"
   - CTA: "무료로 시작하기"

2. Features Section
   - 3가지 주요 기능
   - 아이콘 + 제목 + 설명

3. Pricing Section
   - 2가지 플랜 (Free, Pro)
   - 기능 비교 테이블

4. CTA Section
   - 이메일 입력 양식
   - "베타 신청하기" 버튼

변경 포인트 3: 디자인 톤 변경

원래:

스타일: 미니멀, 모던
색상: 화이트 베이스, 파스텔 핑크

수정:

스타일: 프로페셔널, 테크
색상: 다크 베이스, 그라디언트 (퍼플→블루)
폰트: 모던한 산세리프, 굵은 헤더

AI와 함께 PRD 전환

Claude나 ChatGPT에게:

다음 포트폴리오 PRD를 SaaS 랜딩페이지 PRD로 변경해주세요:

[Level 1의 PRD 복사]

변경 사항:
1. 목적: 포트폴리오 → 제품 소개 (TaskFlow, 팀 협업 도구)
2. 섹션: About/Portfolio → Features/Pricing
3. 디자인: 미니멀 화이트 → 다크 테크 스타일

새 PRD를 작성해주세요.

v0에서 재생성

AI가 만든 새 PRD를 v0에 입력하고:

디자인 생성
수정 요청
재배포

✓ Level 2 체크 포인트

□ 포트폴리오 PRD를 랜딩페이지 PRD로 전환함
□ AI에게 PRD 변환을 요청함
□ 새 PRD로 v0에서 페이지 생성함
□ 디자인 톤이 완전히 달라진 것을 확인함
□ 새 페이지를 배포함

Part 4: Level 3 - 새로 만들기 (30분)

목표: 자신이 필요한 페이지를 처음부터 설계하고 제작하기

프로젝트 아이디어

아래 중 선택하거나 자신만의 아이디어:

아이디어 1: 이벤트 랜딩페이지

세미나, 웨비나, 모임 홍보
일시, 장소, 연사, 신청 양식

아이디어 2: 소규모 비즈니스 홈페이지

카페, 스튜디오, 상점 소개
메뉴/서비스, 위치, 영업시간

아이디어 3: 개인 브랜딩 페이지

전문가, 강연자, 작가 소개
약력, 저서, 강연 이력, 연락처

아이디어 4: 제품 상세 페이지

단일 제품/서비스 집중 소개
기능, 후기, 가격, 구매 링크

Step 1: PRD 작성 (15분)

실습: PRD/TDD 작성에서 배운 템플릿 사용:

# [프로젝트명] PRD

## 1. 개요

- 프로젝트명:
- 목적:
- 타겟 사용자:

## 2. 페이지 구성

(섹션별로 상세 설명)

## 3. 디자인 요구사항

- 스타일:
- 색상:
- 폰트:
- 반응형:

## 4. 주요 기능

(인터랙션, 애니메이션 등)

## 5. 제외 사항

(이번에 구현하지 않을 것)

AI와 함께 작성:

다음 아이디어로 웹 페이지 PRD를 작성하고 싶습니다:

[아이디어 설명]

대상: [누구를 위한 페이지인가]
목적: [무엇을 달성하려는가]

v0에 입력할 구체적인 PRD를 작성해주세요.
디자인 스타일, 색상, 레이아웃까지 포함해서.

Step 2: v0에서 생성 (10분)

AI가 작성한 PRD를 v0에 입력
3가지 옵션 중 선택
수정 요청 (최소 3가지)
만족할 때까지 반복

Step 3: Claude로 고급 기능 추가 (5분)

v0의 코드를 Claude에 복사하고:

다음 코드에 기능을 추가하고 싶습니다:

[v0에서 생성된 코드 복사]

추가할 기능:
1. 스크롤 시 헤더가 sticky되고 투명도 변경
2. 섹션에 진입하면 fade-in 애니메이션
3. CTA 버튼에 호버 효과

수정된 전체 코드를 주세요.

Claude가 수정한 코드를 v0 Sandbox에 다시 붙여넣기.

Step 4: 배포 및 공유 (Optional)

Vercel에 배포
커스텀 도메인 연결 (선택)
URL을 포트폴리오나 SNS에 공유

✓ Level 3 체크 포인트

□ 자신의 아이디어를 PRD로 작성함
□ v0에서 페이지를 생성함
□ Claude로 고급 기능을 추가함
□ 배포에 성공함
□ 실무나 개인 브랜딩에 실제 사용 가능한 수준

Part 5: 디버깅 & 개선

일반적인 문제와 해결

문제 1: 레이아웃이 모바일에서 깨짐

해결:

현재 코드가 모바일에서 레이아웃이 깨집니다.
반응형 디자인을 개선해주세요.
특히 768px 이하에서 정상 작동하도록.

문제 2: 이미지가 안 보임

해결:

이미지가 로드되지 않습니다.
placeholder 이미지 (https://via.placeholder.com)로 대체해주세요.

문제 3: 색상이 마음에 안 듦

해결:

현재 색상 스킴을 다음으로 변경해주세요:
- Primary: #3B82F6 (파란색)
- Secondary: #10B981 (초록색)
- Background: #F9FAFB (연한 회색)

모든 버튼, 링크, 강조 부분에 적용해주세요.

v0 vs Claude 선택 가이드

상황	추천 도구	이유
처음 페이지 생성	v0	시각적 옵션 제공
세부 코드 수정	Claude	더 정교한 제어
디자인 전체 변경	v0	처음부터 재생성
특정 기능 추가	Claude	코드 레벨 조작
빠른 프로토타입	v0	즉시 시각화

핵심 정리

3단계 학습 복습

레벨	프로젝트	목표
Level 1	포트폴리오 (제공된 PRD)	워크플로우
Level 2	랜딩페이지 (PRD 수정)	응용력
Level 3	자기 프로젝트	실전 적용

바이브 코딩 워크플로우

flowchart LR
    A["📝 PRD<br/>작성"] --> B["🎨 v0<br/>생성"]
    B --> C["✏️ 수정<br/>요청"]
    C --> D["🔧 Claude<br/>고급 기능"]
    D --> E["🚀 Vercel<br/>배포"]
    C -.->|"만족 안 함"| B
    D -.->|"버그"| C

실무 적용 체크리스트

□ PRD 작성 능력이 생겼는가?
□ v0에서 원하는 디자인을 뽑아낼 수 있는가?
□ 자연어로 정확한 수정 요청을 할 수 있는가?
□ Claude로 고급 기능을 추가할 수 있는가?
□ 배포하고 URL을 공유할 수 있는가?

다음 단계

더 배우기

1. 동적 기능 추가

문의 양식 → Google Forms 연동
Newsletter → Mailchimp 연동
Analytics → Google Analytics 추가

2. 디자인 고급

Tailwind CSS 학습
애니메이션 라이브러리 (Framer Motion)
아이콘 라이브러리 (Lucide, Hero Icons)

3. 다른 프로젝트 유형

블로그 (Next.js + Markdown)
E-commerce (Shopify template)
Dashboard (차트 라이브러리)

실전 프로젝트 아이디어

즉시 적용 (1시간):

개인 명함 웹사이트
팀 소개 페이지
이벤트 신청 페이지

단기 프로젝트 (3-5시간):

서비스 랜딩페이지 + 베타 신청
소규모 비즈니스 홈페이지
온라인 포트폴리오

장기 프로젝트 (1-2주):

다국어 지원 웹사이트
인터랙티브 포트폴리오
CMS 연동 블로그

이제 뭘 만들어볼까?

축하합니다! 🎉

이제 코딩 없이 웹페이지를 만들고 배포할 수 있습니다.

기억하세요

완벽한 코드보다 작동하는 제품이 먼저
PRD가 명확하면 AI가 90%를 해결
막히면 AI에게 에러를 보여주고 해결

이 스킬은 사이드 프로젝트, 프로토타입, 실제 비즈니스까지 모든 웹 개발의 시작점입니다.

지금 당장 자신의 아이디어를 웹으로 만들어보세요!