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

제품 설명만으로 전환율이 높은 랜딩 페이지를 생성합니다. 완전한 Next.js/React 컴포넌트를 여러 섹션 변형, 검증된 카피 프레임워크, SEO 최적화, 성능 우선 패턴과 함께 출력합니다. 허구의 텍스트(lorem ipsum)가 아니라 실제 전환을 유도하는 카피를 생성합니다.

목표: LCP < 1s · CLS < 0.1 · FID < 100ms
출력: TSX 컴포넌트 + Tailwind 스타일 + SEO 메타 + 카피 변형

사용 시기

Next.js 또는 React로 마케팅 랜딩 페이지를 생성해야 할 때
전환에 초점을 맞춘 페이지 구조, 섹션 변형, Tailwind 스타일링, SEO 인식 카피가 필요한 작업
제품 설명만으로 완전한 랜딩 페이지 출력을 원하는 경우 (고립된 UI 조각이 아닌)

핵심 기능

5가지 히어로 섹션 변형 (중앙 정렬, 분할, 그라데이션, 비디오 배경, 미니멀)
피처 섹션 (그리드, 교차 배치, 아이콘이 포함된 카드)
가격표 (2-4단계, 기능 목록 및 토글 포함)
FAQ 아코디언 (스키마 마크업 포함)
사용자 후기 (그리드, 캐러셀, 단일 인용문)
CTA 섹션 (배너, 전체 페이지, 인라인)
푸터 (심플, 메가, 미니멀)
4가지 Tailwind 클래스 세트 디자인 스타일

생성 워크플로우

랜딩 페이지 요청 시 다음 단계를 순서대로 따르세요.

입력 수집 — 아래 트리거 형식을 사용하여 제품명, 태그라인, 대상 고객, 고통점, 핵심 혜택, 가격 단계, 디자인 스타일, 카피 프레임워크를 수집합니다. 누락된 필드만 질문하세요.
브랜드 음성 분석 (권장) — 사용자에게 기존 브랜드 콘텐츠(웹사이트 카피, 블로그 게시물, 마케팅 자료)가 있는 경우, 이를 marketing-skill/content-production/scripts/brand_voice_analyzer.py에 전달하여 음성 프로필(격식, 어조, 관점)을 얻습니다. 프로필을 사용하여 디자인 스타일과 카피 프레임워크 선택을 결정합니다:
- 격식 + 전문적 → 엔터프라이즈 스타일, AIDA 프레임워크
- 캐주얼 + 친근함 → 볼드-스타트업 스타일, BAB 프레임워크
- 전문적 + 권위적 → 다크-SaaS 스타일, PAS 프레임워크
- 캐주얼 + 대화형 → 클린-미니멀 스타일, BAB 프레임워크
디자인 스타일 선택 — 사용자의 선택(또는 브랜드 음성 분석에서 추론)을 디자인 스타일 참조의 네 가지 Tailwind 클래스 세트 중 하나에 매핑합니다.
카피 프레임워크 적용 — 컴포넌트를 생성하기 전에 선택한 프레임워크(PAS / AIDA / BAB)를 사용하여 모든 헤드라인과 본문 카피를 작성합니다. 음성 프로필의 격식과 어조를 전체적으로 일치시킵니다.
순서대로 섹션 생성 — 히어로 → 피처 → 가격 → FAQ → 사용자 후기 → CTA → 푸터. 제품과 관련 없는 섹션은 건너뜁니다.
SEO 체크리스트 검증 — 최종 코드를 출력하기 전에 SEO 체크리스트의 모든 항목을 확인합니다. 누락된 부분은 인라인으로 수정합니다.
최종 컴포넌트 출력 — 모든 Tailwind 클래스, SEO 메타, 구조화된 데이터가 포함된 복사-붙여넣기 가능한 TSX 파일을 제공합니다.

스킬 트리거

제품: [이름]
태그라인: [한 문장 가치 제안]
대상 고객: [그들이 누구인지]
핵심 고통점: [해결하는 문제]
핵심 혜택: [주요 결과]
가격 단계: [무료/프로/엔터프라이즈 또는 설명]
디자인 스타일: dark-saas | clean-minimal | bold-startup | enterprise
카피 프레임워크: PAS | AIDA | BAB

디자인 스타일 참조

스타일	배경	강조색	카드	CTA 버튼
Dark SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
Clean Minimal	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
Bold Startup	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
Enterprise	`bg-slate-50 text-slate-900`	`slate-700`	`bg-white border border-slate-200 shadow-sm`	`bg-slate-900 hover:bg-slate-800 text-white`

볼드 스타트업 헤드라인: 모든 <h1>/<h2> 요소에 font-black tracking-tight를 추가합니다.

카피 프레임워크

PAS (문제 → 자극 → 해결책)

H1: 그들이 처한 고통스러운 상태
부제: 해결하지 않으면 어떻게 되는가
CTA: 당신이 제공하는 것
예시 — H1: "팀이 수동 보고에 하루 3시간 낭비하고 있습니다" / 부제: "스프레드시트에 보내는 매 시간은 딜을 성사시키지 못하는 시간입니다. 경쟁사는 이미 자동화했습니다." / CTA: "10분 만에 보고서 자동화하기 →"

AIDA (주의 → 관심 → 욕구 → 행동)

H1: 대담한 주목을 끄는 문장 → 부제: 흥미로운 사실 또는 혜택 → 피처: 욕구를 구축하는 증거 포인트 → CTA: 명확한 행동

BAB (이전 → 이후 → 연결)

H1: "[이전 상태] → [이후 상태]" → 부제: "[제품]이 어떻게 격차를 메우는지" → 피처: 작동 방식 (연결 고리)

대표 컴포넌트: 히어로 (중앙 그라데이션 — Dark SaaS)

이 구조를 모든 히어로 변형의 템플릿으로 사용합니다. 분할, 비디오 배경, 미니멀 변형에 따라 레이아웃 클래스, 그라데이션 방향, 이미지 배치를 변경합니다.

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          현재 공개 베타 중
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          더 빠르게 배포하고.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            덜 망가뜨리세요.
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          사용자가 발견하기 전에 오류를 잡아내는 배포 플랫폼.
          설정 불필요. 즉시 롤백. 실시간 모니터링.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            무료 체험 시작
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            작동 방식 보기 →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">신용카드 불필요 · 14일 무료 체험</p>
      </div>
    </section>
  )
}

기타 섹션 패턴

피처 섹션 (교차 배치)

{ title, description, image, badge }가 포함된 features 배열을 매핑합니다. i % 2 === 1 ? "lg:flex-row-reverse" : ""로 레이아웃 방향을 전환합니다. 명시적인 width/height와 rounded-2xl shadow-xl이 있는 <Image>를 사용합니다. <section className="py-24">와 max-w-6xl 컨테이너로 감쌉니다.

가격표

{ name, price, description, features[], cta, highlighted }가 포함된 plans 배열을 매핑합니다. 강조 표시된 플랜은 border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20을, 다른 플랜은 border border-gray-800 bg-gray-900을 사용합니다. 가격이 null이면 "Custom"으로 렌더링합니다. 피처 행당 <Check> 아이콘을 사용합니다. 레이아웃: grid gap-8 lg:grid-cols-3.

FAQ (스키마 마크업 포함)

섹션 내에 <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />를 통해 FAQPage JSON-LD를 주입합니다. { q, a }가 포함된 FAQ를 type="single" collapsible 속성의 shadcn <Accordion>에 매핑합니다. 컨테이너: max-w-3xl.

사용자 후기, CTA, 푸터

사용자 후기: 그리드(grid-cols-1 md:grid-cols-3) 또는 아바타, 이름, 역할, 인용문이 포함된 단일 인용문 히어로 블록.
CTA 배너: 헤드라인, 부제목, 두 개의 버튼(기본 + 고스트)이 있는 전체 너비 섹션. 바로 아래에 신뢰 신호(환불 보장, 로고 스트립)를 추가합니다.
푸터: 로고 + 탐색 열 + 소셜 링크 + 법적 정보. border-t border-gray-800 구분선을 사용합니다.

SEO 체크리스트

검증 단계: 최종 코드를 출력하기 전에 위의 모든 체크리스트 항목이 충족되었는지 확인합니다. 누락된 부분은 인라인으로 수정하고 항목을 건너뛰지 마세요.

성능 목표

지표	목표	기술
LCP	< 1s	히어로 이미지 사전 로드, Next/Image에 `priority` 사용
CLS	< 0.1	모든 이미지에 명시적 width/height 설정
FID/INP	< 100ms	중요하지 않은 JS 지연 로드, `loading="lazy"` 사용
TTFB	< 200ms	랜딩 페이지에 ISR 또는 정적 생성 사용
번들	< 100KB JS	`@next/bundle-analyzer`로 감사

일반적인 함정

히어로 이미지가 사전 로드되지 않음 — 첫 번째 <Image>에 priority 속성 추가
모바일 중단점 누락 — 항상 sm: 접두사를 사용하여 모바일 우선 설계
CTA 카피가 너무 모호함 — "자세히 알아보기"보다 "시작하기", "가입하기"보다 "무료 체험 시작"
가격 페이지에 신뢰 신호 없음 — CTA 근처에 환불 보장 및 사용자 후기 추가
모바일에서 스크롤 없이 볼 수 있는 CTA 없음 — 375px 뷰포트에서 버튼이 스크롤 없이 보이도록 보장

랜딩 페이지 생성기