Communitygithub.com

랜딩 페이지

한 명의 방문자, 하나의 약속, 실제 증거, 하나의 콜 투 액션, 접근 가능한 단일 HTML 파일, 그리고 출시 후 확인할 수 있는 지표(방문자 수, 가입자 수, 소스별 전환율)를 사용하여 제안에 대한 수요를 테스트하는 랜딩 페이지를 작성하고 구축합니다. 창업자가 랜딩 페이지, 대기자 명단, 사전 주문 페이지를 원하거나 아이디어를 온라인에서 테스트하려 할 때 사용합니다.

랜딩 페이지란 무엇인가요?

이 스킬은 스타트업 창업자가 아이디어나 제품에 대한 수요를 최소한의 리소스로 검증할 수 있도록 단일 파일 HTML 랜딩 페이지를 제작하는 방법을 안내합니다. 핵심 원칙은 ‘한 명의 방문자, 하나의 약속, 하나의 액션’으로, 방문자가 페이지를 보고 5초 안에 무엇을 위한 것인지 알 수 있도록 명확한 헤드라인과 단일 콜 투 액션(CTA)에 집중합니다. 실제 증거(인용문, 숫자, 로고)를 사용하고, 제품이 아직 존재하지 않을 경우 ‘대기자 명단 가입’이나 ‘사전 주문’과 같은 솔직한 표현을 사용하도록 권장합니다. 또한, 출시 전에 트래픽 계획과 성공 기준을 수립하고, 출시 후 소스별 전환율 등의 데이터를 분석하여 다음 단계를 결정하는 전체 실험 설계 과정을 포함합니다. 이 스킬은 Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 활용할 수 있으며, 접근성(웹 접근성 지침 준수)과 개인정보 보호(GDPR 준수)를 강조합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teodstr/garage/tree/HEAD/skills/landing-page

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

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

랜딩 페이지는 종종 스타트업의 첫 번째 실제 실험입니다. 낯선 사람이 이메일을 남기지 않으면, 그들이 비용을 지불할 가능성은 낮습니다. 이 스킬은 페이지를 작성하고, 단일 HTML 파일로 빌드하며, 다음에 어떤 일이 일어날지를 결정하는 숫자를 설정합니다.

사용 시기

  • 제품을 만들기 전에 수요를 테스트하려는 경우(연기 테스트, smoke test), 대기자 명단을 수집하려는 경우, 또는 사전 주문을 받으려는 경우.
  • brand-identity 이후에 이름과 색상이 존재하는 경우, 그러나 일반 페이지도 작동합니다.
  • 전체 웹사이트나 검색 엔진 전략에는 적합하지 않습니다.

입력

  1. 대상 방문자, 문제, 약속 및 실제 증거(인용문, 숫자, 허가를 받은 로고).
  2. 원하는 단일 액션: 이메일, 사전 주문, 데모 요청.
  3. 브랜드 요소(있는 경우) 및 양식 데이터가 전송될 위치.

방법

  1. 한 페이지, 한 명의 방문자, 하나의 액션. 대상 방문자를 선택하고 단일 콜 투 액션을 선택하세요. 페이지에서 멀어지게 하는 링크는 제거하세요.
  2. 페이지 상단을 먼저 작성하세요: 방문자에게 결과를 알리는 헤드라인(기술이 아닌), 방법을 설명하는 한 줄, 콜 투 액션, 그리고 제품 또는 결과의 이미지. 테스트: 낯선 사람이 5초 안에 그것이 무엇이고 누구를 위한 것인지 이해할 수 있어야 합니다.
  3. 그런 다음 나머지: 고객의 말로 표현된 문제(customer-interviews에서), 세 단계로 설명하는 작동 방식, 실제 증거, 주요 반론(가격, 신뢰, 시간)에 대한 답변, 짧은 FAQ, 그리고 다시 한 번 콜 투 액션.
  4. 정직하게 유지하세요: 제품이 아직 존재하지 않으면 "대기자 명단 가입" 또는 "사전 주문, 배송 예정일: ..."이라고 말하세요. 사용후기, 카운터 또는 희소성을 절대 조작하지 마세요. 사전 주문의 경우 배송 날짜와 환불 조건을 명시하세요.
  5. 하나의 HTML 파일로 빌드하세요: 의미론적 제목, 이미지의 대체 텍스트, 읽기 쉬운 대비, 휴대폰에서 작동. 양식은 창업자가 선택한 서비스(양식 도구, 뉴스레터 도구 또는 스프레드시트)로 전송되며, 짧은 개인정보 보호 고지는 이메일이 어떻게 사용될지 설명합니다(유럽 연합의 GDPR).
  6. 테스트를 계획하세요: 방문자가 어디에서 올지(페이지만큼 중요함), 몇 명인지, 미리 결정된 목표 전환율, 그리고 기간. 최대 두 개의 헤드라인을 테스트하세요.
  7. 결과를 읽으세요: 소스별 방문자 및 전환율, 사람들이 한 질문, 그리고 출시 전에 설정한 기준에 따른 결정.

출력

### 페이지 계획
방문자: … | 약속: … | 콜 투 액션: … | …일 이내에 …명의 방문자 중 …%가 성공하면

### 카피
헤드라인: … | 아래 줄: … | 버튼: …
섹션: 문제, 작동 방식, 증거, 반론, FAQ

### HTML
<접근 가능한 파일 하나, 구성할 양식 주소, 포함된 개인정보 보호 고지>

품질 기준

  • 헤드라인은 특정 방문자에 대한 결과를 명시하며, 페이지에는 하나의 주요 콜 투 액션이 있습니다.
  • 페이지의 모든 주장, 사용후기 및 숫자는 실제입니다. 희소성이나 사회적 증거를 조작하지 않습니다.
  • 페이지는 접근 가능하고, 휴대폰에서 작동하며, 수집된 데이터가 어떻게 사용되는지 설명합니다.
  • 트래픽 계획과 성공 기준은 출시 전에 작성됩니다.
  • 사용자 언어로 작성되며, 아래 용어를 사용합니다.

용어

EnglishFrançaisEspañol한국어
Landing pagePage d'atterrissage (landing page)Página de aterrizaje (landing page)랜딩 페이지
Call to action (CTA)Appel à l'actionLlamada a la acción콜 투 액션 (CTA)
Above the foldHaut de page, partie visible sans défilerPrimera pantalla첫 화면 (스크롤 없이 보이는 부분)
Conversion rateTaux de conversionTasa de conversión전환율
WaitlistListe d'attenteLista de espera대기자 명단
A/B testTest A/BPrueba A/BA/B 테스트

출처

  • Krug, S. (2014). Don't Make Me Think, Revisited (3rd ed.). New Riders.
  • Ries, E. (2011). The Lean Startup. Crown Business.
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬