← 템플릿 목록
마케팅초급🌍 Superhuman 모델

사전 예약 랜딩 페이지

출시 전 대기자 이메일 수집 → 얼리버드 → 정식 오픈. 수요 검증과 초기 팬 확보를 동시에. 가장 빠른 수익화 검증 도구.

🌍 해외 실제 검증 사례

Superhuman / Linear

창업자: 다수 Product Hunt #1 제품

대기자 수만 명 → 선택적 초대

Claude Code · Cursor · ChatGPT 에 붙여넣기

# 사전 예약 랜딩 페이지 MVP 만들기

## 프로젝트 개요
서비스 출시 전 대기자 이메일을 모으고 수요를 검증하는 랜딩 페이지.
참고 모델: Superhuman, Linear — 수만 명 대기자로 화제성 + 수요 검증

## 기술스택
- Next.js 14 (App Router) + TypeScript
- Supabase (DB)
- Tailwind CSS + shadcn/ui
- Resend API (환영 이메일)
- 한국어 UI

## 필수 기능

### 1. 히어로 섹션
- 강력한 헤드라인 (문제 → 해결 구조)
- 서비스 핵심 가치 3가지 (아이콘 + 설명)
- 얼리버드 혜택 강조 ("선착순 100명 50% 할인")
- 현재 대기자 수 실시간 표시

### 2. 이메일 등록 폼
- 이름 + 이메일 입력
- 등록 완료 시:
  - "N번째로 등록하셨습니다!" 표시
  - 환영 이메일 자동 발송 (Resend)
  - 고유 추천 링크 생성

### 3. 추천인 시스템
- 등록 후 공유 링크 표시 (카카오, 트위터, 링크 복사)
- 추천인이 친구 등록 시 → 대기 순위 상승
- "내 현재 순위: N번째" 조회 기능

### 4. 카운트다운 / 긴박감 요소
- "얼리버드 마감까지 D-N" 카운트다운
- 최근 등록자 알림 토스트 ("서울에서 누군가가 방금 등록했어요")

### 5. 관리자 (/admin)
- 전체 대기자 목록 (이름, 이메일, 등록일, 추천수, 순위)
- CSV 다운로드
- 전체 발송 이메일 (오픈 알림용)

## DB 스키마
```sql
waitlist: id, name, email, referral_code(unique),
referred_by, referral_count, position, created_at
```

💡 사용 방법

  1. ① 위 프롬프트를 복사하세요
  2. Claude Code · Cursor (한국어) 또는 Lovable · Bolt · v0 (영어)에 붙여넣기
  3. [업종] 부분을 내 업종으로 교체하세요
  4. ④ 실행하면 강력한 MVP 완성!
수강 상담 카톡하기