고전환율 랜딩 페이지 생성하기

실제 페이지를 제공하세요: 작동하는 TSX 컴포넌트, 실제 카피 구조, 측정된 성능. 리포지토리의 기존 프레임워크, 스타일 및 컴포넌트 규칙을 따르고, 이미 있는 종속성만 사용하세요. (안전 후크가 설치를 차단하므로) 새 종속성은 절대 설치하지 않습니다. 스택이 정해지지 않은 그린필드 부트스트랩의 경우 기본적으로 Next.js + Tailwind를 사용할 수 있습니다. 다른 경우, 페이지에 누락된 종속성이 정말로 필요하다면 mark_ticket_blocked를 호출하여 이름을 명시하세요.

목표 (Core Web Vitals "좋음", 필드 p75 기준): LCP ≤ 2.5초, INP ≤ 200ms, CLS ≤ 0.1. 또한 WCAG 2.2 AA 충족: 텍스트 대비 ≥ 4.5:1, 가시적인 포커스 링, 레이블이 지정된 입력, 키보드로 작동 가능한 페이지.

카피 프레임워크 (페이지당 하나 선택)

프레임워크	구조	최적 대상
PAS	문제 → 자극 → 해결책	문제 인식 트래픽
AIDA	주의 → 관심 → 욕구 → 행동	콜드 트래픽, 새로운 카테고리
BAB	이전 → 이후 → 연결	결과/변환 오퍼

템플릿과 다섯 가지 반대 의견 FAQ는 references/copy-frameworks.md에 있습니다. copywriting 스킬은 헤드라인과 CTA 제작을 다룹니다.

섹션 청사진

히어로: 결과를 제시하는 헤드라인 (≤ ~10단어), 방법을 설명하는 한 문장의 서브헤드, 하나의 기본 CTA, 그리고 증거 신호 (숫자, 로고 또는 평점). 캐러셀 없음.
문제: 현상 유지의 비용을 고객의 언어로 설명.
해결책 / 혜택: 3-6개의 혜택, 각각 한 줄 설명과 선택적 시각 자료.
사회적 증명: 이름, 역할, 회사 및 결과가 포함된 사용 후기; 로고.
가격 (해당하는 경우): 2-4개 등급, 추천 등급 강조.
FAQ: 다섯 가지 반대 의견. 네이티브 <details>/<summary> 또는 접근 가능한 아코디언 사용. FAQPage 마크업은 Google이 더 이상 FAQ 리치 결과를 표시하지 않으므로 선택 사항입니다.
푸터 CTA: 최소한의 마찰로 기본 행동 반복 (예: 이메일만).

단계

입력 수집. 제품명, 대상, 주요 문제점, 주요 결과, 기본 CTA 및 그 대상, 사용 가능한 증거, 스타일 방향. 티켓, BRAND.md/토큰 및 기존 페이지를 먼저 읽으세요. 감독이 없을 때는 묻지 말고: 있는 것을 사용하고 복사본의 빈칸은 [TODO: …]로 표시하세요. 사용 후기, 로고, 고객 수 또는 평점을 절대 조작하지 마세요.
프레임워크 선택 트래픽 소스와 인지 수준에 따라. 레이아웃보다 카피를 먼저 작성하세요. 다섯 개의 헤드라인을 초안으로 작성하고 가장 명확한 것을 선택하세요.
섹션 구축 리포지토리의 컴포넌트 디렉토리에 별도의 컴포넌트로 작성하세요. 카피는 props 또는 content 객체에 넣고 JSX 전체에 흩뜨리지 마세요. 페이지를 대부분 서버 렌더링으로 유지하고, 상호작용이 필요한 클라이언트 컴포넌트만 사용하세요.
SEO 메타데이터. 고유한 <title>, 메타 설명, canonical, Open Graph 및 Twitter 태그, 하나의 <h1>을 설정하세요. Next.js App Router에서는 metadata export를 사용하세요.
성능.
- 히어로/LCP 이미지를 fetchpriority="high"로 eagerly 로드하세요. Next.js 16+에서는 <Image preload> (또는 loading="eager" + fetchPriority="high")를 사용하세요; priority는 Next.js ≤ 15 형식이며 16에서 폐지되었습니다. 절대 지연 로드하지 마세요.
- 접힌 부분 아래 이미지는 지연 로드하세요.
- 모든 이미지에 명시적인 width/height와 AVIF/WebP를 설정하세요.
- 글꼴은 font-display: swap (또는 next/font)을 사용하고 필요한 굵기만 포함하세요.
- 접힌 부분 위에는 타사 스크립트가 없어야 합니다.
폼 (리드 캡처). 올바른 type과 autocomplete가 있는 레이블 입력, 인라인 유효성 검사, 사용자가 입력한 내용을 유지하는 오류 요약을 사용하세요. 성공 상태를 표시하고, 이중 제출을 방지하며, 티켓에 명명된 실제 엔드포인트로 POST하세요.
검증. 각 검사를 실행하고 기록하세요:
- 타입 검사 (npx --no -- tsc --noEmit, 다운로드 대신 실패) 및 리포지토리의 린트;
- 리포지토리의 빌드 스크립트 (예: npm run build);
- 페이지를 렌더링하고 h1, 기본 CTA href 및 폼의 성공/오류 상태를 확인하는 컴포넌트 테스트;
- Lighthouse (모바일) 실험실 검사로 LCP, CLS, TBT 및 접근성 점수를 기록하되, 이미 설치된 경우에만 (npx --no -- lighthouse);
- 375px, 768px 및 1440px에서 오버플로 및 접힌 부분 위 CTA에 대한 뷰포트 검사, 리포지토리에 브라우저 테스트 러너가 있는 경우 사용하세요.
검사를 실행하기 위해 도구를 설치하거나 가져오지 마세요. 실행하지 못한 검사는 실행했다고 주장하지 말고 증거에 이름을 기재하세요.

완료 조건

페이지가 빌드, 타입 검사 및 컴포넌트 테스트를 통과합니다.
히어로가 결과를 명시하고 기본 CTA가 375px 및 1440px에서 접힌 부분 위에 있습니다 (뷰포트 테스트로 확인 또는 미확인으로 표시).
Lighthouse 또는 axe를 사용할 수 있는 경우, 실험실 실행에서 모바일 기준 LCP ≤ 2.5초, CLS ≤ 0.1, 자동화된 접근성 위반이 없음을 보여줍니다. 그렇지 않으면 증거에서 이를 측정하지 않았다고 명시합니다.
조작된 증거가 없습니다. 모든 빈칸은 [TODO]로 표시되고 보고서에 나열됩니다.

안티 패턴

지연 로드된 히어로 이미지, 또는 크기가 지정되지 않은 미디어나 늦은 글꼴로 인한 레이아웃 시프트.
여러 개의 동등한 가중치 CTA, 또는 유료 캠페인 페이지의 전체 사이트 내비게이션.
로렘 입숨 또는 일반적인 필러 카피가 빌드에 남아 있는 경우. 유일하게 허용되는 플레이스홀더는 보고서에 나열된 명시적 [TODO: …] 빈칸입니다.
히어로 영역의 캐러셀 및 자동 재생 비디오.

랜딩 페이지 생성기