랜딩 페이지: 30분 만에 만들기

목적:
1. 가치 제안 명확히
2. 이메일·결제 수집
3. 광고 ROI 측정


→ 디자인 완벽 X
→ 명확한 메시지 + CTA

[Carrd] $19/year
- 가장 빠름 (10분)
- 단일 페이지
- 디자인 제한
- 검증 단계 적합

[Framer] 무료 + Pro $5/mo
- 디자인 자유
- 애니메이션 강력
- 노코드

[Webflow] $14~$36/mo
- 풀 사이트
- CMS 통합
- B2B 적합

[Next.js + shadcn] 무료
- 코드 자유도 100%
- v0.dev로 빠른 빌드
- 본인 도메인 신뢰 (개발자 대상)


→ 검증: Carrd 또는 Framer
→ 출시 후: Next.js 전환

1. Hero
- 1줄 가치 제안
- 부제 (구체적)
- CTA 버튼
- 시각 요소 (이미지·비디오)

2. Social Proof
- 사용자 수 (없으면 "Join the waitlist")
- 로고 (없으면 generic)

3. Problem
- "이런 적 있나요?"
- 사용자 공감

4. Solution
- 핵심 기능 3가지
- 각 기능 = 1 베네핏

5. How it Works
- 3단계 시각화
- 각 단계 = 1 스크린샷

6. Pricing
- 명확한 plan 1~3개
- "무료 / Pro / Enterprise"

7. FAQ
- 자주 묻는 질문 5~10개

8. Final CTA
- 다시 한 번 강조
- 이메일 입력

1. v0.dev 접속
2. 프롬프트:
   "Landing page for AI English speaking app for Korean professionals.
    Hero section with bold headline, 3 features, pricing, email signup."

3. 결과 확인 → 수정
4. "Add a testimonials section"
5. 코드 export → Next.js 프로젝트

10분 만에 완성된 랜딩

pnpm dlx shadcn-ui@latest init
pnpm dlx shadcn-ui@latest add button input card

# 또는 v0 → shadcn 자동 사용

// app/page.tsx
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export default function Landing() {
  return (
    <main>
      {/* Hero */}
      <section className="text-center py-24">
        <h1 className="text-5xl font-bold tracking-tight">
          한국 직장인을 위한
          <br />
          <span className="text-indigo-600">AI 영어 회화</span>
        </h1>
        <p className="mt-6 text-xl text-muted-foreground">
          하루 10분, 음성으로 — 학원보다 효과적
        </p>
        <div className="mt-8 flex gap-2 max-w-md mx-auto">
          <Input placeholder="이메일" type="email" />
          <Button>Early Access</Button>
        </div>
      </section>

      {/* Features */}
      <section className="grid md:grid-cols-3 gap-8 py-16">
        {[
          { icon: '🎙️', title: '음성 회화', desc: '실시간 AI와 대화' },
          { icon: '🇰🇷', title: '한국어 설명', desc: '필요할 때 한국어로' },
          { icon: '💼', title: '직장 시나리오', desc: '회의·이메일·발표' },
        ].map(f => (
          <div key={f.title} className="text-center">
            <div className="text-4xl mb-4">{f.icon}</div>
            <h3 className="text-xl font-bold">{f.title}</h3>
            <p className="text-muted-foreground mt-2">{f.desc}</p>
          </div>
        ))}
      </section>

      {/* Pricing */}
      <section className="py-16">
        <h2 className="text-3xl font-bold text-center mb-12">가격</h2>
        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {[
            { name: 'Free', price: '$0', features: ['5분/일', '기본 시나리오'] },
            { name: 'Pro', price: '$19/mo', features: ['무제한', '모든 시나리오', '음성 무제한'], featured: true },
          ].map(p => (
            <div key={p.name} className={`p-8 border rounded-lg ${p.featured ? 'border-indigo-500 ring-2 ring-indigo-500' : ''}`}>
              <h3 className="text-2xl font-bold">{p.name}</h3>
              <div className="text-4xl font-bold mt-4">{p.price}</div>
              <ul className="mt-6 space-y-2">
                {p.features.map(f => <li key={f}>✓ {f}</li>)}
              </ul>
              <Button className="w-full mt-6">시작하기</Button>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

Hero Headline:
❌ "AI 도구"
✅ "[타겟]을 위한 [구체적 가치]"

예:
- "한국 직장인을 위한 AI 영어 회화"
- "프리랜서를 위한 인보이스 자동화"
- "스타트업을 위한 콜드콜 AI"


Subheadline:
- 메커니즘 설명
- "하루 10분, 음성으로 — 학원보다 효과"


CTA 버튼:
❌ "Submit" / "회원가입"
✅ "Early Access 받기" / "무료 시작"

[Vercel Edge Functions]
사용자 50/50 분할
- Headline A: "한국 직장인을 위한 AI 영어"
- Headline B: "10분 만에 영어 자신감 회복"

→ 1주일 후 CVR 비교
→ 1.5x 차이 가능