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

제품 설명을 바탕으로 높은 전환율의 랜딩 페이지를 생성합니다. 여러 섹션 변형, 입증된 카피 프레임워크, SEO 최적화 및 성능 우선 패턴을 갖춘 완전한 Next.js/React 컴포넌트를 출력합니다. 단순한 더미 텍스트가 아닌, 실제 전환을 유도하는 카피입니다.

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

사용 시기

Next.js 또는 React로 마케팅 랜딩 페이지를 생성해야 할 때
작업에 전환 중심 페이지 구조, 섹션 변형, Tailwind 스타일링 또는 SEO 인지 카피가 포함될 때
제품 설명으로부터 개별 UI 조각이 아닌 완전한 랜딩 페이지 출력을 원할 때

핵심 기능

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

생성 워크플로우

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

입력 수집 — 아래 트리거 형식을 사용하여 제품명, 태그라인, 대상 고객, 문제점, 주요 이점, 가격 단계, 디자인 스타일 및 카피 프레임워크를 수집합니다. 누락된 필드만 물어보세요.
브랜드 보이스 분석 (권장) — 사용자에게 기존 브랜드 콘텐츠(웹사이트 카피, 블로그 게시물, 마케팅 자료)가 있다면 marketing-skill/content-production/scripts/brand_voice_analyzer.py를 실행하여 보이스 프로필(격식, 톤, 관점)을 얻습니다. 이 프로필을 사용하여 디자인 스타일과 카피 프레임워크 선택을 안내합니다:
- formal + professional → enterprise 스타일, AIDA 프레임워크
- casual + friendly → bold-startup 스타일, BAB 프레임워크
- professional + authoritative → dark-saas 스타일, PAS 프레임워크
- casual + conversational → clean-minimal 스타일, BAB 프레임워크
디자인 스타일 선택 — 사용자의 선택(또는 브랜드 보이스 분석에서 추론)을 디자인 스타일 참조의 네 가지 Tailwind 클래스 세트 중 하나에 매핑합니다.
카피 프레임워크 적용 — 컴포넌트를 생성하기 전에 선택한 프레임워크(PAS / AIDA / BAB)를 사용하여 모든 헤드라인과 본문 카피를 작성합니다. 전체적으로 보이스 프로필의 격식과 톤을 일치시킵니다.
섹션 순서대로 생성 — 히어로 → 기능 → 가격 → FAQ → 사용후기 → CTA → 푸터. 제품과 관련 없는 섹션은 건너뜁니다.
SEO 체크리스트 검증 — 최종 코드를 출력하기 전에 SEO 체크리스트의 모든 항목을 확인합니다. 누락된 부분을 즉시 수정합니다.
최종 컴포넌트 출력 — 모든 Tailwind 클래스, SEO 메타 및 구조화된 데이터가 포함된 복사-붙여넣기 준비가 된 완전한 TSX 파일을 제공합니다.

이 스킬 트리거

Product: [제품명]
Tagline: [한 문장 가치 제안]
Target audience: [대상 고객]
Key pain point: [해결하는 주요 문제]
Key benefit: [주요 결과]
Pricing tiers: [무료/프로/엔터프라이즈 또는 설명]
Design style: dark-saas | clean-minimal | bold-startup | enterprise
Copy framework: 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`

Bold Startup 제목: 모든 <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>를 사용합니다. max-w-6xl 컨테이너와 함께 <section className="py-24">로 감쌉니다.

가격표

{ 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 prop 추가
모바일 중단점 누락 — 항상 sm: 접두사로 모바일 우선 디자인
CTA 카피가 너무 모호함 — "더 알아보기"보다 "시작하기", "가입하기"보다 "무료 체험 시작"이 더 좋음
가격 페이지에 신뢰 신호 없음 — CTA 근처에 환불 보장 및 사용후기 추가
모바일에서 첫 화면에 CTA 없음 — 375px 뷰포트에서 스크롤 없이 버튼이 보이도록 보장

제한 사항

이 스킬은 작업이 위에서 설명한 범위와 명확하게 일치할 때만 사용하세요.
출력물을 환경별 검증, 테스트 또는 전문가 검토의 대체물로 취급하지 마십시오.
필요한 입력, 권한, 안전 경계 또는 성공 기준이 누락된 경우 중단하고 명확히 요청하세요.

랜딩 페이지 생성기