Day 3 실습: Vercel v0로 랜딩페이지

실습 시간: 45분
필요 도구: v0.dev (무료 계정)

📚 공식 문서

리소스	링크	설명
v0 공식 사이트	v0.dev	AI 웹사이트 생성기
Documentation	v0 Docs	전체 문서
Quickstart	Quickstart Guide	빠른 시작 가이드
FAQs	FAQs	자주 묻는 질문
What is v0?	Overview	v0 개요

---

v0 시작하기

접속

1. v0.dev 접속
2. GitHub 또는 이메일로 가입
3. 무료 크레딧 제공

---

v0란?

flowchart LR
    I["💬 자연어 입력"] --> V["🤖 v0 AI"]
    V --> C["⚛️ React 코드"]
    C --> P["👀 실시간 미리보기"]
    P --> D["🚀 Vercel 배포"]

• Vercel이 만든 AI 웹 생성 도구
• 자연어 → React 코드 자동 생성
• 실시간 미리보기
• 바로 배포 가능

---

기본 사용법

프롬프트 입력

Create a landing page for a Korean cosmetics brand

결과

• 실시간 미리보기
• React/Tailwind 코드
• 수정 요청 가능

---

실습 1: 제품 랜딩페이지

프롬프트

Create a product landing page for Korean skincare serum:

Hero Section:
- Headline: "Pure Korean Radiance"
- Subtext: "Award-winning serum with 7 natural botanicals"
- CTA button: "Shop Now"
- Product image on right side

Features Section:
- 3 feature cards with icons
- Feature 1: "97% Natural Ingredients"
- Feature 2: "Clinically Proven Results"
- Feature 3: "Eco-Friendly Packaging"

Testimonials:
- 3 customer reviews with ratings
- Profile photos

CTA Section:
- "Try Risk-Free for 30 Days"
- Email signup form

Footer:
- Social links
- Contact info

Style: Clean, premium, modern
Colors: Soft pink (#FFE4E6) and forest green (#1E6250)
Font: Clean sans-serif

---

결과 수정

스타일 변경

Make the design more luxurious with:
- Add subtle animations on scroll
- Use more white space
- Make the CTA button larger and rounded
- Add a subtle gradient background

섹션 추가

Add a new section between Features and Testimonials:
- "Before & After" comparison slider
- 2 customer photos with results

모바일 최적화

Make sure the layout works well on mobile:
- Stack columns vertically
- Larger touch targets
- Readable text sizes

---

실습 2: B2B 랜딩페이지

바이어/유통사 대상

Create a B2B landing page for Korean cosmetics exporter:

Header:
- Logo placeholder
- Navigation: Products, About, Partners, Contact
- Language selector (EN/KR)

Hero:
- Headline: "Your Trusted K-Beauty Partner"
- Subtext: "Premium Korean cosmetics for global distributors"
- CTA: "Request Product Catalog"
- Background: Professional office/warehouse image

Why Choose Us:
- 4 benefit cards:
  - "15+ Years Experience"
  - "200+ Product Lines"
  - "Export to 30 Countries"
  - "OEM/ODM Available"

Product Categories:
- Grid of 6 categories with images:
  - Skincare, Haircare, Makeup
  - Men's Care, Baby Care, Supplements

Certifications:
- Logo badges: ISO, GMP, Halal, BPOM
- Trust indicators

Process:
- 4-step timeline:
  - Inquiry → Sample → Quote → Order

Contact Form:
- Company Name
- Country dropdown
- Product Interest (checkboxes)
- Message
- Submit button

Footer:
- Company info
- Quick links
- Social media

Style: Professional, trustworthy, corporate
Colors: Navy (#1E3A5F) and gold accent (#D4AF37)

---

실습 3: 이벤트/프로모션 페이지

세일 이벤트

Create a promotional landing page for K-Beauty sale event:

Hero:
- Bold headline: "K-BEAUTY WEEK"
- Subtext: "Up to 50% off bestsellers"
- Countdown timer
- Shop Now button

Featured Deals:
- Product grid (6 items)
- Original price crossed out
- Sale price highlighted
- "Add to Cart" buttons

Flash Deals:
- Horizontal scroll of limited items
- Time remaining for each

Newsletter:
- "Get exclusive deals"
- Email input + Subscribe

Style: Vibrant, exciting, urgency
Colors: Coral (#FF6B6B), black, white
Add subtle confetti animation

---

실습 4: 간단한 포트폴리오

개인/회사 소개

Create a minimal portfolio page for export manager:

Hero:
- Name and title
- Professional photo placeholder
- Brief intro text
- "Contact Me" button

About:
- Short bio
- Key achievements (numbers)
- Skills/expertise list

Experience:
- Timeline of career
- Company logos

Services:
- What I offer
- 3-4 service cards

Contact:
- Email
- LinkedIn
- Phone

Style: Minimal, professional
Colors: Black, white, one accent color

---

v0 고급 기능

컴포넌트 재사용

생성된 컴포넌트를 저장하고 다른 프로젝트에서 재사용

코드 복사

React/Next.js 프로젝트에 바로 붙여넣기 가능

// v0에서 생성된 코드 예시
export default function Hero() {
  return (
    <section className="bg-pink-50 py-20">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold">Pure Korean Radiance</h1>
        {/* ... */}
      </div>
    </section>
  );
}

Vercel 배포

1. “Deploy” 버튼 클릭
2. Vercel 계정 연결
3. 무료 URL 생성 (yourpage.vercel.app)

---

공유 방법

옵션

1. v0 링크 공유: 편집 가능한 프로젝트 링크
2. 배포 URL: vercel.app 도메인 라이브 페이지
3. 코드 다운로드: 개발자에게 전달

바이어에게 공유

미팅 전 이메일:

"제품 상세 정보는 아래 페이지에서 확인하실 수 있습니다.
https://your-product.vercel.app

궁금한 점 있으시면 연락 주세요."

---

팁

더 나은 결과를 위해

1. 구체적인 섹션 명시

   • Hero, Features, CTA 등 명확히

2. 색상 코드 지정

   • 브랜드 컬러 직접 입력

3. 레퍼런스 언급

   • “Like Apple website style”
   • “Similar to Notion landing page”

4. 모바일 먼저 고려

   • “Mobile-first design”

---

체크리스트

생성된 랜딩페이지 검토:

□ 핵심 메시지가 5초 내 전달되는가?
□ CTA가 눈에 잘 띄는가?
□ 모바일에서 잘 보이는가?
□ 로딩 속도가 빠른가?
□ 폼이 제대로 작동하는가?
□ 브랜드 톤과 일치하는가?

---

다음 단계

v0로 프로토타입 만든 후:

1. 피드백 수집: 팀/바이어에게 공유
2. 개선: 피드백 반영해 수정
3. 개발자 전달: 코드를 개발팀에 전달
4. 또는 직접 배포: Vercel로 바로 라이브