랜딩 페이지

랜딩 페이지은(는) 무엇을 하나요?

아름답고 반응형인 랜딩 페이지를 몇 분 만에 구축하세요.

사용 시기

• 새 제품이나 기능 출시
• 마케팅 또는 프로모션 페이지 제작
• 포트폴리오 또는 개인 사이트 구축
• 가입 또는 대기자 명단 페이지 만들기
• 제품 컨셉을 빠르게 프로토타이핑

작동 방식

1. 페이지 섹션

모든 효과적인 랜딩 페이지는 다음 구조를 따릅니다:

┌─────────────────────────────┐
│  네비게이션 (로고 + 링크)    │
├─────────────────────────────┤
│  히어로 (헤드라인 + CTA)    │
├─────────────────────────────┤
│  사회적 증명 / 로고          │
├─────────────────────────────┤
│  기능 (3-4개 카드)          │
├─────────────────────────────┤
│  사용 방법 (3단계)          │
├─────────────────────────────┤
│  사용 후기                   │
├─────────────────────────────┤
│  가격 (선택 사항)            │
├─────────────────────────────┤
│  CTA (주요 행동 반복)       │
├─────────────────────────────┤
│  푸터                        │
└─────────────────────────────┘

2. 히어로 섹션

히어로는 페이지의 성패를 좌우합니다. 간결하게 유지하세요:

function Hero() {
  return (
    <section className="py-20 px-6 text-center">
      {/* 배지 */}
      <div className="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700 mb-6">
        현재 공개 베타 중
      </div>

      {/* 헤드라인 — 하나의 명확한 가치 제안 */}
      <h1 className="text-5xl font-bold tracking-tight text-gray-900 max-w-3xl mx-auto">
        AI로 제품 출시를 <span className="text-blue-600">10배 더 빠르게</span>
      </h1>

      {/* 서브 헤드라인 — 헤드라인 뒷받침 */}
      <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto">
        반복 작업 작성을 중단하세요. AI가 반복적인 작업을 처리하는 동안
        당신은 중요한 일에 집중하세요.
      </p>

      {/* CTA — 하나의 주요 행동 */}
      <div className="mt-10 flex gap-4 justify-center">
        <a href="#" className="px-8 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">
          무료로 시작하기
        </a>
        <a href="#" className="px-8 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50">
          데모 보기
        </a>
      </div>
    </section>
  )
}

3. 기능 카드

const features = [
  { icon: '⚡', title: '번개처럼 빠른', description: '몇 분이 아닌 몇 초 만에 배포' },
  { icon: '🔒', title: '기본 보안', description: '내장된 엔터프라이즈급 보안' },
  { icon: '📊', title: '분석', description: '데이터에 대한 실시간 인사이트' },
]

function Features() {
  return (
    <section className="py-20 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-center mb-12">필요한 모든 것</h2>
      <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        {features.map(f => (
          <div key={f.title} className="bg-white p-6 rounded-xl shadow-sm">
            <div className="text-3xl mb-4">{f.icon}</div>
            <h3 className="text-lg font-semibold mb-2">{f.title}</h3>
            <p className="text-gray-600">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

4. 디자인 원칙

• 섹션당 하나의 CTA — 선택지로 압도하지 마세요
• 여백은 친구입니다 — 넉넉한 패딩 사용 (py-20, gap-8)
• 텍스트 최대 너비 — 텍스트가 전체 너비로 늘어나지 않도록 (max-w-3xl)
• 시각적 계층 구조 — 더 큰 것이 더 중요하며, font-bold는 아껴서 사용
• 모바일 우선 — 모바일용으로 디자인하고, md: 및 lg: 중단점으로 향상
• 빠른 로딩 — next/image 사용, JS 최소화, 무거운 라이브러리 피하기

5. 빠른 설정

# 가장 빠른 방법: Next.js + Tailwind
npx create-next-app@latest landing --typescript --tailwind --app
cd landing
npm run dev

품질 체크리스트

• 모바일에서 잘 보이는지 확인 (375px 너비에서 확인)
• 히어로 헤드라인이 명확하고 간결한지 (< 10단어)
• 접힌 부분 위에 명확한 CTA가 하나 있는지
• 페이지 로딩 시간이 2초 미만인지
• 모든 링크와 버튼이 작동하는지
• 파비콘과 메타 태그가 설정되었는지

예시

> AI 작문 도구용 랜딩 페이지를 구축하세요
> 모바일 앱용 이메일 가입 대기자 명단 페이지를 만드세요
> 프로젝트 쇼케이스가 포함된 포트폴리오 랜딩 페이지를 구축하세요