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

랜딩 페이지의 임무는 단 하나입니다: 특정 방문자를 하나의 행동으로 이끄는 것입니다. 모든 섹션은 그 행동을 위한 근거를 만들거나, 행동을 망설이게 하는 이유를 제거합니다. 먼저 행동을 결정하고, 그다음 디자인하세요.

1. 구축 전에 결정하세요

JSX를 다루기 전에 아래 내용을 기록하세요 (앱에 DESIGN.md가 있다면 거기에):

대상: 누가 이 페이지에 방문하며, 그들이 이미 알고 있는 것은 무엇인가?
주요 행동: 하나의 동사 ("무료 체험 시작", "테이블 예약", "견적 요청"). 모든 페이지는 정확히 하나의 주요 CTA 레이블을 가집니다. 레이블을 반복하되 변경하지 마세요.
보조 행동: 선택 사항이며 덜 부담스러운 행동 ("가격 보기", "데모 시청").
실제로 보유한 증거: 실제 숫자, 고객 이름, 인용문, 평점. 사용 후기, 로고, 사용자 수 또는 가격을 절대 만들어 내지 마세요. 소유자가 제공하지 않았다면 해당 섹션을 빼거나, 콘텐츠 데이터에 명확하게 표시된 TODO를 사용하세요. 보이는 카피에는 절대 사용하지 마세요.

2. 섹션 순서 (기본값)

#	섹션	목적	블록
1	헤더	브랜드, 3-5개의 네비게이션 링크, 주요 CTA	`SiteHeader`
2	히어로	약속 + 주요 CTA (스크롤 없이 보이는 영역)	`Hero`
3	증명 스트립	로고, 평점 또는 하나의 확실한 숫자	`LogoMarquee` 또는 인라인 통계
4	문제/결과	현상 유지가 왜 해로운지, 무엇이 바뀌는지	`Section` + `SectionHeader`
5	기능	3-6개의 혜택, 각각 결과와 연결	`FeatureGrid` 또는 `BentoGrid`
6	작동 방식	프로세스가 낯설 때 3-4단계 설명	`StepList`
7	사용 후기	이름과 역할이 있는 실제 인용문	`Testimonials`
8	가격	요금제, 또는 "부터" 가격과 포함 사항	`PricingTable`
9	FAQ	객관적으로 답변된 이의 제기	`Faq`
10	최종 CTA	약속 재진술 + 동일한 주요 CTA	`CtaBand`
11	푸터	연락처, 법적 고지, 보조 링크	`SiteFooter`

실제 콘텐츠가 없는 섹션은 제거하세요. 짧고 정직한 페이지가 길고 부풀려진 페이지보다 낫습니다. 최소한 섹션 1, 2, 5, 10은 유지하세요.

3. 히어로 규칙

**페이지에 정확히 하나의 <h1>**이 있어야 하며, 히어로 내부에 위치해야 합니다. Hero는 이미 title을 h1으로 렌더링합니다. 다른 곳에 h1을 추가하지 마세요. 섹션 제목은 h2입니다.
헤드라인은 약 10단어 이내로 대상 고객의 결과를 명시합니다. 서브헤드 (한두 문장, 약 25단어 이내)는 어떻게, 누구를 위해, 또는 무엇이 다른지를 설명합니다.
주요 CTA는 375x667 및 1280x800 해상도에서 스크롤 없이 볼 수 있어야 합니다. Hero의 actions prop에 넣고, 실제 대상(경로, mailto:, tel:, 폼 앵커)으로 링크하세요. 절대 href="#"를 사용하지 마세요.
미디어: 결과를 보여주는 실제 제품 스크린샷, 사진 또는 일러스트레이션. 이미지에 명시적인 width/height를 설정하고 히어로 이미지는 레이지 로딩하지 마세요 (일반적으로 LCP 요소입니다).
선택적 신뢰 문구를 CTA 아래에 추가: "신용카드 필요 없음", "1,200개 리뷰에서 4.8/5".

4. 카피 계층 구조

헤드라인 (h1): 결과. 2. 서브헤드: 메커니즘 또는 대상. 3. CTA: 동사 + 목적어.
섹션 제목 (h2): 혜택 설명, 레이블이 아님 ("하루 만에 장부 마감", "기능"이 아님).
본문: 짧은 문단, 줄당 약 80자 이내 (max-w-prose 또는 max-w-xl).

앱 언어로 구체적이고 평이한 카피를 작성하세요. 로렘 입숨, "워크플로우를 혁신하세요", "기능 1"과 같은 표현은 사용하지 마세요. references/copy-formulas.md를 참조하세요.

5. 레이아웃 및 시각적 리듬

의미론적 토큰 (bg-background, bg-secondary, text-muted-foreground)을 사용하고, 원시 팔레트 클래스는 절대 사용하지 마세요. 테두리와 그림자를 곳곳에 추가하는 대신 Section tone="muted"을 번갈아 사용하여 블록을 구분하세요.
섹션 모양을 다양화하세요: 그리드, 분할 이미지/텍스트, 전체 너비 인용문. 동일한 카드 그리드만 쌓인 페이지는 피하세요.
페이지당 하나의 굵은 요소 (히어로 비주얼 또는 타이포그래피 처리). 나머지는 차분하게 유지하세요.
콘텐츠 그룹을 <Reveal>로 감싸고 delay={index * 80}을 사용하여 지연시키세요. BentoGrid, Testimonials, PricingTable은 자체적으로 나타납니다.
모바일 우선: md 미만에서는 단일 열, 휴대폰에서는 CTA 버튼 전체 너비 (w-full sm:w-auto), 탭 대상은 최소 44px 이상.

6. 전환 세부 사항

기능이나 가격 뒤, 그리고 최종 CtaBand에서 주요 CTA를 반복하세요.
앵커 내비게이션: 섹션에 id를 부여하고 (<Section id="pricing">), #pricing으로 링크하세요. 고정 헤더가 제목을 가리지 않도록 scroll-mt-20을 추가하세요.
페이지 내 폼: 최소한의 정보 (이메일, 또는 이름 + 전화번호)를 요청하세요. 인라인 유효성 검사와 명확한 성공 상태를 표시하세요 (forms-validation 스킬 참조).
가격: 통화와 청구 주기를 표시하고, 하나의 요금제를 강조하며, 클릭 후 어떤 일이 발생하는지 (체험 기간, 취소) 명시하세요.
접근성: 포커스 표시, 의미 있는 이미지에 alt 텍스트, 대비 4.5:1, 자신이 하는 일을 설명하는 버튼.

7. 완료 체크리스트

하나의 h1, 히어로 내에 있음; 섹션 제목은 순서대로 h2.
주요 CTA가 모바일과 데스크톱에서 스크롤 없이 보이며, 실제 대상을 가리킴.
모든 주장, 숫자, 로고, 인용문이 실제이거나 해당 섹션이 제거됨.
히어로 이미지에 width/height가 있고 레이지 로딩하지 않음; 다른 이미지는 레이지 로딩.
페이지 제목과 메타 설명이 설정됨 (seo-metadata 스킬 참조).
375px, 768px, 1280px 너비에서 스크린샷으로 확인.
audit_landing_sections를 실행하고 실패를 수정함.

스크립트

audit_landing_sections는 페이지 파일과 해당 파일이 임포트하는 로컬 컴포넌트를 읽습니다. 인수 (모두 선택 사항): { "file": "src/pages/Index.tsx" }. file이 없으면 src/pages/Index.tsx, app/page.tsx, src/app/page.tsx, pages/index.tsx, src/pages/index.tsx를 차례로 시도합니다. checks (pass, warn, 또는 fail), 감지된 sections, placeholders를 반환합니다. 휴리스틱 기반이므로, 코드를 읽어 실패를 확인한 후 변경하세요.

랜딩 페이지