랜딩 페이지
이 스킬은 단순히 예쁜 페이지가 아니라, 전환되는 랜딩 페이지를 만듭니다. 입증된 섹션 순서와 실제 카피, 프로덕션 준비가 완료된 코드를 결합합니다.
비유: 랜딩 페이지는 잠들지 않는 세일즈맨입니다. 좋은 세일즈맨은 순서를 따릅니다 — 주의를 끌고, 고통을 짚어내고, 해결책을 보여주고, 효과를 입증하고, 판매를 요청합니다. 아래 섹션 구조가 그 대본입니다.
워크플로우
1단계 — 최대 3개의 질문 (그 이상은 안 됨)
- 무엇을 판매하거나 제공하고 있나요? (제품, 서비스, SaaS, 컨설팅)
- 이상적인 고객은 누구인가요? (아바타 — 구체적으로)
- 방문자가 취하기를 원하는 가장 중요한 단일 행동은 무엇인가요? (구매, 상담 예약, 가입, 대기자 명단 등록)
메시지에 이미 이 질문들에 대한 답변이 포함되어 있다면, 건너뛰십시오.
2단계 — 섹션 구조 만들기 (입증된 심리적 순서)
- 히어로 — 명확한 가치 제안 + 주요 CTA. 방문자가 5초 안에 이것이 무엇인지, 왜 중요한지 이해해야 합니다.
- 문제 — 고객의 고통을 자극합니다. 문제를 해결하지 않을 때의 대가를 느끼게 만드세요.
- 솔루션 — 제품/서비스가 그 고통을 어떻게 해결하는지 보여줍니다.
- 기능 — 3-6개의 핵심 항목을 사양이 아닌 혜택으로 작성합니다("X 프레임워크로 제작" 대신 "주말 안에 출시").
- 사회적 증거 — 사용 후기, 로고, 숫자, 결과.
- 가격 — 해당되는 경우, 명확한 티어와 강조된 하나의 옵션.
- FAQ — 판매를 막는 주요 반론을 미리 차단합니다.
- 최종 CTA — 가치를 재진술하고 주요 행동을 반복합니다.
3단계 — 시각적 시스템을 위해 ui-design 활성화
컴포넌트를 작성하기 전에 ui-design 스킬에 디자인 시스템(스타일, 팔레트, 타이포그래피, 간격, 다크 모드) 생성을 위임합니다. 여기서 시각적 선택을 직접 만들어내지 마십시오.
위임: 디자인 시스템 자체는 가용성에 따라 소싱됩니다 — ui-ux-pro-max가 설치되어 있으면 시스템을 생성하게 하고(선택적으로 taste-skill로 다듬을 수 있음); 둘 다 설치되지 않은 경우 ui-design에 내장된 원칙으로 대체합니다. 랜딩 페이지는 어느 쪽이든 작동합니다. 오리지널 스킬이 있으면 더 세련될 뿐입니다. 누락된 종속성 때문에 막히지 마십시오.
4단계 — 코드뿐만 아니라 카피 생성
이 스킬은 모든 섹션에 대한 기본 카피 — 헤드라인, 서브헤드, 본문, CTA 레이블 — 를 제공 대상과 아바타에 맞춰 작성합니다. 코드만 있고 카피가 없으면 반쪽짜리 랜딩 페이지입니다.
5단계 — 스택 및 선택적 애드온
기본 스택: React + Vite + Tailwind. 빌드 전에 페이지에 필요한 항목을 물어보십시오:
- 애니메이션 → Framer Motion
- 폼 → React Hook Form
- 분석 → 제공 업체 (예: Plausible, GA, PostHog)
사용자가 원할 때만 추가하고, 기본적으로 포함하여 비대해지지 않도록 하십시오.
6단계 — 출력
프로토타입이 아닌 바로 사용 가능한 컴포넌트를 제공합니다 — 각 섹션은 실제 컴포넌트로, 디자인 토큰에 연결되고, 생성된 카피가 배치되며, 관련된 경우(예: 폼) 빈 상태/로딩 상태/오류 상태가 처리되어야 합니다.