출시 예정 · 대기자 등록 캠페인 랜딩

제작 과정

한 줄 요약

출시 전 제품의 대기자를 모으는 캠페인 랜딩 히어로, 이메일 등록(성공 상태 전환), 출시 카운트다운 스트립, 기능 3장, 소셜 프루프를 한 화면에 담은 다크 풀페이지입니다.

이럴 때 필요해요

아직 출시 전인데 관심 있는 사용자의 이메일을 미리 확보하고 기대감을 만들고 싶을 때(웨이트리스트/티저).

어떻게 동작하나

히어로에 라이브 배지그라데이션 헤드라인으로 시선을 잡습니다.
이메일 폼 제출 시 형식 검증 성공 카드로 전환(데모는 mock, 실제 전송 없음).
카운트다운 스트립소셜 프루프(대기 인원)로 행동을 부추깁니다.

놓치기 쉬운 것

입력 검증성공/실패 피드백이 없으면 신뢰가 떨어짐 성공 상태를 명확히 전환.
임베드/긴 페이지는 루트에 data-demo-embed-fixed로 고정 높이를 줘야 잘림이 없음.
소셜 프루프 숫자는 과장 금지 실제 값과 연결.

이런 곳에 써요

신규 제품앱 사전 등록 페이지
베타 초대 / 출시 티저

import type { Metadata } from "next"; import { WaitlistLanding } from "./-components/WaitlistLanding"; export const metadata: Metadata = { title: "출시 예정 · 대기자 등록 랜딩 (데모)", description: "‘Coming Soon’ 캠페인 랜딩 — 히어로 + 이메일 대기자 등록(성공 상태 전환) + 출시 카운트다운 스트립 + 기능 3-up + 소셜 프루프. 다크 테마 풀페이지.", robots: { index: false, follow: false }, }; export default function Page() { return <WaitlistLanding />; }