이메일 캡처 랜딩 페이지 — Wireframe + TSX 프로토타입¶
모든 채널 A(인스타 / 카톡 / 에브리타임 / 디스코드 / 네이버 카페)의 단일 도착 페이지. 한 가지 일만 한다: 이메일 캡처 → 챌린지 진입 약속. URL 예시:
dedu.ai/challenge(또는 6/6 시즌 캠페인 슬러그dedu.ai/6mo)
0. 페이지의 단일 목적¶
학생/학부모가 "한 줄에 무슨 서비스인지 이해" + "30초 안에 이메일 입력 완료"
다른 모든 요소(데모 영상, 후기, 차별점 카드)는 이메일 입력 결정의 망설임을 줄이기 위한 보조. 페이지 한 번 스크롤 안에서 결정 가능해야 함.
1. Wireframe (텍스트 박스)¶
┌────────────────────────────────────────────────────────────┐
│ [디에듀 로고] [인스타 @디에듀] │
├────────────────────────────────────────────────────────────┤
│ │
│ 답지 보고 푼 그 문제, │
│ 또 틀린 적 있어? │
│ │
│ 디에듀 AI는 답을 안 알려줘. │
│ 대화로 사고 과정만 같이 만들어. │
│ │
│ ┌──────────────────────────┐ │
│ │ [60초 데모 영상 placeholder] │ ← autoplay, 음소거 시작 │
│ │ ▶ │ │
│ └──────────────────────────┘ │
│ │
│ 📧 [ 이메일 주소 입력 ] │
│ 🎓 [ 학년 ▼ (중1~고3, 재수) ] │
│ │
│ ┌────────────────────────────────────────────┐ │
│ │ 6모 D-14 사고력 챌린지 무료 참가 → │ │
│ └────────────────────────────────────────────┘ │
│ │
│ ✓ 6/6부터 14일간 매일 11시 챌린지 1문제 │
│ ✓ AI 대화 풀이 무료 / 카드 없이 진행 │
│ ✓ 14일 완주 시 '나만의 사고력 리포트' 메일 발송 │
│ │
├──────────────── ↓ 한 번 스크롤만 더 ──────────────────────────┤
│ │
│ ColdChat / 콴다랑 뭐가 달라? │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 즉답 회피 │ │ 사고 유도 │ │ 직접 답 선택 │ │
│ │ │ │ │ │ │ │
│ │ 답을 묻기 │ │ AI 질문이 │ │ AI는 답을 │ │
│ │ 전에 사고 │ │ 학생 사고 │ │ 골라주지 X │ │
│ │ 과정부터 │ │ 깊이 만듦 │ │ 학생이 결정 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ [Social proof — 인증 학생 수 / 챌린지 진행 후기 슬라이드] │
│ │
├────────────────────────────────────────────────────────────┤
│ Privacy: 입력 이메일은 챌린지 + 리포트 발송 외 사용 X. │
│ 학원/광고 X. 언제든 수신 거부 가능. │
│ © 2026 디에듀 · 문의 hello@dedu.ai · 인스타 @디에듀 │
└────────────────────────────────────────────────────────────┘
2. 카피 (확정 텍스트)¶
| 영역 | 카피 |
|---|---|
| 메인 헤드라인 | 답지 보고 푼 그 문제, 또 틀린 적 있어? |
| 서브 헤드라인 | 디에듀 AI는 답을 안 알려줘. 대화로 사고 과정만 같이 만들어. |
| Form CTA | 6모 D-14 사고력 챌린지 무료 참가 → |
| 폼 안내 1 | ✓ 6/6부터 14일간 매일 11시 챌린지 1문제 |
| 폼 안내 2 | ✓ AI 대화 풀이 무료 / 카드 없이 진행 |
| 폼 안내 3 | ✓ 14일 완주 시 '나만의 사고력 리포트' 메일 발송 |
| 차별점 헤더 | ColdChat / 콴다랑 뭐가 달라? |
| 차별점 1 | 즉답 회피 — 답을 묻기 전에 사고 과정부터 |
| 차별점 2 | 사고 유도 — AI 질문이 학생 사고 깊이 만듦 |
| 차별점 3 | 직접 답 선택 — AI는 답을 골라주지 X, 학생이 결정 |
| Privacy | 입력 이메일은 챌린지 + 리포트 발송 외 사용 X. 학원/광고 X. 언제든 수신 거부 가능. |
3. TSX 컴포넌트 프로토타입 (Next.js 15 App Router)¶
통합 시 mvp-front
src/app/(marketing)/challenge/page.tsx같은 경로 권장. 본 파일은 단독 카피/구조 시안일 뿐 실제 mvp-front에 통합은 별도 task.
// src/app/(marketing)/challenge/page.tsx
'use client';
import { useState } from 'react';
const GRADES = ['중1', '중2', '중3', '고1', '고2', '고3', '재수'] as const;
type Grade = typeof GRADES[number];
export default function ChallengeLanding() {
const [email, setEmail] = useState('');
const [grade, setGrade] = useState<Grade | ''>('');
const [submitting, setSubmitting] = useState(false);
const [done, setDone] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!email || !grade) return;
setSubmitting(true);
// TODO: 실제 엔드포인트로 교체 — 백엔드 측 마케팅 이메일 캡처 API 추가 필요
await fetch('/api/marketing/challenge-signup', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email,
grade,
utm: typeof window !== 'undefined' ? window.location.search : '',
}),
});
setSubmitting(false);
setDone(true);
}
if (done) {
return (
<main className="mx-auto max-w-xl px-6 py-24 text-center">
<h1 className="text-3xl font-black">신청 완료!</h1>
<p className="mt-4 text-neutral-600">
첫 챌린지는 6월 6일 오전 11시에 발송됩니다.
<br />
인스타 @디에듀에서도 만나요.
</p>
</main>
);
}
return (
<main className="mx-auto max-w-2xl px-6 py-12">
<header className="flex items-center justify-between">
<span className="text-lg font-bold">디에듀</span>
<a
href="https://instagram.com/디에듀"
className="text-sm text-neutral-500"
>
@디에듀
</a>
</header>
<section className="mt-16">
<h1 className="text-4xl font-black leading-tight md:text-5xl">
답지 보고 푼 그 문제,
<br />
또 틀린 적 있어?
</h1>
<p className="mt-6 text-lg text-neutral-700">
디에듀 AI는 답을 안 알려줘.
<br />
대화로 사고 과정만 같이 만들어.
</p>
<div className="mt-10 aspect-video w-full overflow-hidden rounded-2xl bg-neutral-100">
{/* 60초 데모 영상 placeholder. 실제 자산 확보 후 video src 교체 */}
<div className="flex h-full items-center justify-center text-neutral-400">
▶ 60초 데모 (placeholder)
</div>
</div>
<form onSubmit={handleSubmit} className="mt-10 space-y-4">
<input
type="email"
required
placeholder="이메일 주소"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full rounded-xl border border-neutral-300 px-4 py-3 text-base"
/>
<select
required
value={grade}
onChange={(e) => setGrade(e.target.value as Grade)}
className="w-full rounded-xl border border-neutral-300 px-4 py-3 text-base"
>
<option value="">학년 선택</option>
{GRADES.map((g) => (
<option key={g} value={g}>
{g}
</option>
))}
</select>
<button
type="submit"
disabled={submitting}
className="w-full rounded-xl bg-black px-4 py-4 text-base font-bold text-white disabled:opacity-50"
>
{submitting ? '신청 중...' : '6모 D-14 사고력 챌린지 무료 참가 →'}
</button>
</form>
<ul className="mt-6 space-y-1 text-sm text-neutral-600">
<li>✓ 6/6부터 14일간 매일 11시 챌린지 1문제</li>
<li>✓ AI 대화 풀이 무료 / 카드 없이 진행</li>
<li>✓ 14일 완주 시 '나만의 사고력 리포트' 메일 발송</li>
</ul>
</section>
<section className="mt-24">
<h2 className="text-xl font-bold">ChatGPT / 콴다랑 뭐가 달라?</h2>
<div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-3">
{[
{ title: '즉답 회피', desc: '답을 묻기 전에 사고 과정부터' },
{ title: '사고 유도', desc: 'AI 질문이 학생 사고 깊이 만듦' },
{ title: '직접 답 선택', desc: 'AI는 답을 골라주지 않아, 학생이 결정' },
].map((card) => (
<div
key={card.title}
className="rounded-2xl border border-neutral-200 p-5"
>
<div className="text-base font-bold">{card.title}</div>
<p className="mt-2 text-sm text-neutral-600">{card.desc}</p>
</div>
))}
</div>
</section>
<footer className="mt-24 border-t border-neutral-200 pt-6 text-xs text-neutral-500">
<p>
입력 이메일은 챌린지 + 리포트 발송 외 사용하지 않습니다. 학원/광고 발송 없음. 언제든 수신 거부 가능.
</p>
<p className="mt-2">© 2026 디에듀 · hello@dedu.ai · @디에듀</p>
</footer>
</main>
);
}
4. 백엔드 의존성 (mvp-back 측 신규 작업)¶
이 랜딩 페이지가 동작하려면 백엔드에 마케팅 이메일 캡처 엔드포인트가 하나 필요. 작은 작업.
POST /api/marketing/challenge-signup- request body:
{ email, grade, utm } - 저장 테이블:
marketing_signup (id, email, grade, utm_source, utm_medium, utm_campaign, created_at) - 응답: 200 OK, 중복 이메일은 idempotent (last_seen_at만 갱신)
- 후속 hook: 다음 챌린지 발송 큐에 자동 등록
⚠️ 위 엔드포인트는 본 task 범위 외. 별도 task로 분리 — Phase 1 출시 전 (~6/5)까지 ready 필요.
5. UTM 트래킹 (채널별 효과 측정)¶
각 채널에 다른 UTM 쿼리 붙여서 GA4 + 자체 분석:
| 채널 | URL |
|---|---|
| 인스타 릴스 (오가닉) | dedu.ai/challenge?utm_source=instagram&utm_medium=organic&utm_campaign=6mo |
| 인스타 광고 | dedu.ai/challenge?utm_source=instagram&utm_medium=paid&utm_campaign=6mo |
| 카톡 오픈채팅 | dedu.ai/challenge?utm_source=kakao&utm_medium=openchat&utm_campaign=6mo |
| 에브리타임 | dedu.ai/challenge?utm_source=everytime&utm_medium=organic&utm_campaign=6mo |
| 네이버 카페 | dedu.ai/challenge?utm_source=naver&utm_medium=cafe&utm_campaign=6mo |
| 유튜브 댓글 | dedu.ai/challenge?utm_source=youtube&utm_medium=comment&utm_campaign=6mo |
bit.ly 또는 자체 단축 URL 도메인으로 깔끔하게.
6. 테스트 체크리스트 (런칭 전)¶
- 모바일 뷰포트 (375px) 가로 스크롤 없음
- 이메일 입력 → 학년 미선택 시 폼 제출 차단
- 제출 후 done 상태 화면 정상 표시
- UTM 파라미터 백엔드까지 전달 확인
- 60초 데모 영상 autoplay + 음소거 + 모바일 정책 통과
- privacy 텍스트 footer 정확히 노출
- Lighthouse Performance 90+
- OG 메타 태그 (카톡 공유 시 미리보기) 작동