사용 가이드로 건너뛰기
Landing Page Design작성자 elayadesign

Landing Page Design 스킬.

페이지의 논리와 비주얼 규칙을 하나의 목표 전환에 맞춰 연결합니다.

  • 랜딩 페이지
  • 카피라이팅
  • 웹 디자인
소스 검토 · Landing Page DesignSKILL.md
작업 랜딩 페이지 산출물 • 페이지 개요, 히어로 카피, 장점, 워크플로, FAQ 초안. • 적절한 경우 제목과 설명을 포함한 index/noindex 권장안. • 선택한 레이아웃과 비주얼 규칙을 사용한 섹션별 구현. 시작하기 전에 단일 애플리케이션 런타임은 필요하지 않습니다. 구현 예시는 Tailwind 값, IntersectionObserver, 선택적 모션 도구를 참조합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시가 아님

01 기능 소개

하나의 행동을 중심으로 랜딩 페이지 만들기

오퍼, 카피, 구조, SEO 처리 방식을 계획한 뒤, 프로젝트에 맞는 범위에서 소스의 상세한 비주얼 규칙을 적용합니다.

소스 기반 워크플로실행 벤치마크가 아님

작업 방식

Landing Page Design는 하나의 오퍼, 하나의 타깃, 하나의 주요 행동에서 출발합니다. 전반부에서는 전환 목표, 이의 사항, 유입 맥락, 근거, 제약을 수집하고, 제작 전에 섹션 순서와 카피를 제안합니다. 후반부에서는 타이포그래피, 간격, 모서리 반경, 히어로, 아이콘, 모션, 컴포넌트 상태에 대한 상세한 비주얼 시스템을 규정합니다.

이 스킬은 중립적인 체크리스트라기보다 주관이 매우 강합니다. 글꼴과 간격 선택이 제한되어 있고, 태그라인 공개 섹션이 필수이며, 특정 애니메이션 규칙을 따릅니다. 이러한 선택은 기존 브랜드 시스템이나 접근성 요구 사항과 충돌할 수 있으며, 이를 조용히 덮어써서는 안 됩니다. 높은 전환율이라는 표현은 의도일 뿐, 전환 개선이 측정되었다는 근거는 아닙니다.

예상 산출물

  • 페이지 개요, 히어로 카피, 장점, 워크플로, FAQ 초안.
  • 적절한 경우 제목과 설명을 포함한 index/noindex 권장안.
  • 선택한 레이아웃과 비주얼 규칙을 사용한 섹션별 구현.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    오퍼 명확히 하기

    타깃, 행동, 이의 사항, 유입 경로, 실제 근거 자료를 한 번의 인테이크로 수집합니다.

  2. 02
    논리 선택하기

    클래식 히어로, 롱폼 스토리, 미니멀 전환 페이지, 비교 구조 중 하나를 고르고 그 이유를 설명합니다.

  3. 03
    만들기 전에 초안 작성

    구현 전에 개요, 카피, SEO 처리 방식, 레이아웃 권장안을 작성합니다.

  4. 04
    섹션별로 제작하고 검토

    상태, 링크, 시맨틱, 메타데이터, 브랜드 제약을 확인하며 페이지를 순서대로 진행합니다.

02 활용 상황

사용 시점

단일 애플리케이션 런타임은 필요하지 않습니다. 구현 예시는 Tailwind 값, IntersectionObserver, 선택적 모션 도구를 참조합니다.

적합한 경우

  • 단일 오퍼 캠페인방문자가 명확히 정의된 다음 단계 하나를 밟아야 할 때 유용합니다.
  • 전략에서 구현까지카피와 이의 사항 대응을 구체적인 레이아웃과 상태 결정에 연결합니다.

확인할 한계

  • 전환 보장 없음소스는 디자인과 카피 규칙을 제공할 뿐, 여러분의 오퍼에 대한 실험 결과를 제공하지 않습니다.
  • 브랜드 규칙과 충돌할 수 있음규정된 글꼴, 그라데이션, 모션, 카피 대소문자 표기는 기존 제품에 모두 적용되는 요구 사항이 아닙니다.
  • 근거는 실제여야 함구체적으로 보이는 통계, 고객 이름, 보증을 사실적 근거인 것처럼 지어내서는 안 됩니다.

준비할 입력 자료

  • 오퍼와 전환방문자가 무엇을 받는지, 어떤 행동을 성공으로 볼지 명시하세요.
  • 타깃과 이의 사항방문자 맥락, 유입 경로, 망설이는 실제 이유를 제공하세요.
  • 근거와 브랜드 제약승인된 스크린샷, 후기, 데이터, 약관, 디자인 시스템 요구 사항을 제공하세요.

03 핵심 결정

핵심 결정

  1. 장식보다 구조 먼저

    비주얼 규칙보다 페이지의 논리를 먼저 정하므로, 설득 역할이 없는 섹션을 다듬는 위험을 줄입니다.

  2. 트래픽 의도가 중요함

    짧고 의도가 높은 다운로드 페이지는 교육용 검색 랜딩 페이지와 다른 논리가 필요합니다.

  3. 기본값 검토

    소스의 구체성은 강한 비주얼 가정이 프로젝트에 맞을 때만 유용합니다.

04 예시 브리프

집중형 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소의 최신 설치 방법을 사용하고 스킬 폴더 전체를 포함하세요. 이 소스는 디자인 규칙 모음이지 호스팅형 페이지 빌더가 아닙니다.

업스트림 소스 파일
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

단일 애플리케이션 런타임은 필요하지 않습니다. 구현 예시는 Tailwind 값, IntersectionObserver, 선택적 모션 도구를 참조합니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약을 상황에 맞게 조정하세요.

예시 브리프
landing-page-design를 사용해 디자인 검토 제품의 상시 운영 페이지를 계획하세요. 타깃은 소규모 에이전시이며 목표 행동은 데모 요청입니다. 제공된 스크린샷과 검증된 근거만 사용하세요. 코딩 전에 개요, 히어로 카피, 이의 사항 중심 FAQ, SEO 권장안, 레이아웃 선택안을 제시하세요. 기존 브랜드 토큰과 모션 감소 요구 사항을 유지하세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 히어로부터 마지막 CTA까지 하나의 주요 행동이 일관됩니다.
  • 모든 사실적 근거는 제공된 증거에서 나옵니다.
  • 비주얼 규칙이 기존 브랜드 및 접근성 요구 사항과 조율되어 있습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 해당 스킬이 번들로 포함되어 있거나, 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 변경될 수 있습니다.

소스 소유자
elayadesign
라이선스
MIT
검토한 스냅샷
2026-10-07 · 1c1e97cb9878
편집 소스 요약
오퍼, 카피, 구조, SEO 처리 방식을 계획한 뒤, 프로젝트에 맞는 범위에서 소스의 상세한 비주얼 규칙을 적용합니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 요약입니다. 저장소 스타는 특정 시점의 인기 지표일 뿐, 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

홈페이지 전용으로만 설계되었나요?

아니요. 핵심 차이는 랜딩 페이지가 하나의 오퍼와 의도를 다루는 반면, 홈페이지는 여러 타깃이나 목표를 다룬다는 점입니다.

기존 사이트에서도 모든 권장 사항을 따라야 하나요?

아니요. 스킬의 범위에도 사용자의 명시적 지시가 인정되어 있으며, 기존 브랜드나 접근성 요구 사항은 조용히 덮어쓰기보다 충돌을 해결해야 합니다.

FAQ를 추가하면 검색 노출이 보장되나요?

아니요. 유용한 질문과 답변 콘텐츠와 적절한 메타데이터를 권장하지만, 색인과 검색 성과는 별개의 결과입니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md