랜딩 페이지 — 빠르게 전환율 높은 랜딩 페이지 생성
트리거 조건
- 사용자가 "랜딩 페이지 만들어 줘", "홈페이지 생성", "landing page 만들어 줘"라고 말할 때
- 제품을 외부에 공개해야 하지만 아직 공개 페이지가 없는 경우
- 제품을 판매해야 하며 소개 페이지가 필요한 경우
작업 흐름
- 정보 수집: 제품명, 한 줄 설명, 핵심 기능 3개, 목표 사용자, 가격
- 구조 생성: Hero → Problem → Solution → Features → Pricing → FAQ → CTA
- 카피 작성: 사용자痛点(痛点)에 초점을 맞추고, 기능 목록 대신 사용자가 얻는 결과를 작성
- 코드 생성: Next.js + Tailwind + shadcn/ui, 바로 실행 가능
- 전환 확인: 각 화면에 CTA가 있는지 확인, 메인 버튼 색상 대비가 충분한지 확인
출력 규칙
- 완전한
app/page.tsx파일 - 모든 섹션은 단일 파일에 포함 (랜딩 페이지는 컴포넌트 분할 불필요)
- 모바일 우선 (sm: breakpoint)
<meta>SEO 태그 포함
예시
입력:
저는 AI 작성 도우미를 만들었어요. 사용자가 빈 화면 공포증을 극복하도록 도와줍니다. 가격은 $9/월이고, 대상은 프리랜서 작가예요.
출력 카피 구조:
Hero: "더 이상 빈 화면을 쳐다보지 마세요" — [무료 체험 시작]
Problem: 글쓰기 시간의 80%가 "어떻게 시작할지" 고민하는 데 낭비됩니다.
Solution: AI가 첫 문장을 제시하고, 나머지는 사용자가 작성합니다.
Features: 지능형 첫 문장 생성 / 스타일 매칭 / 개요 생성
Pricing: $9/월, 7일 무료 체험, 언제든지 취소 가능
FAQ: ChatGPT와 무엇이 다른가요? 제 글쓰기를 대체하나요?
코드 스니펫:
// Hero Section
export function Hero() {
return (
<section className="flex flex-col items-center py-24 text-center">
<h1 className="text-5xl font-bold tracking-tight max-w-2xl">
더 이상 빈 화면을 쳐다보지 마세요
</h1>
<p className="mt-4 text-xl text-muted-foreground max-w-lg">
AI가 첫 문장을 제시하고, 나머지는 사용자가 작성합니다. 글쓰기 시간의 80%가 시작 부분에서 낭비됩니다 — 저희가 이 문제를 해결합니다.
</p>
<Button size="lg" className="mt-8">7일 무료 체험 시작</Button>
</section>
)
}