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

랜딩 페이지는 홈페이지가 아닙니다. 홈페이지는 여러 의도를 제공합니다. 랜딩 페이지는 하나의 의도를 이깁니다:

하나의 제안 → 하나의 대상 → 하나의 주요 행동.

이 스킬은 두 부분으로 구성됩니다. A부는 페이지가 말할 내용과 구조를 결정합니다. B부는 절대적으로 지켜야 할 시각적 시스템입니다. B를 다루기 전에 A를 먼저 작업하세요.

범위

모든 웹 UI 작업(랜딩 페이지, 마케팅 사이트, 컴포넌트, 대시보드, 프로토타입, 디자인 리뷰)에 적용됩니다. 여기서 규칙이 프레임워크 기본값과 충돌할 경우 이 파일이 우선합니다. 사용자의 명확한 프롬프트가 규칙과 충돌할 경우 사용자가 우선합니다.

함께 사용할 스킬. 새로 구축하는 대신 기존 사이트를 업그레이드하려면 redesign-existing-projects(github.com/elayadesign/redesign-skill)를 사용하세요. 이 스킬은 일반적인 패턴을 진단하고 구체적인 값에 대해서는 이 파일을 따릅니다.

A부 — 전략 및 구조

A1. 인테이크

디자인 또는 글을 작성하기 전에 다음을 수집하세요. 누락된 것만 묻고, 한 번에 하나씩 질문하지 말고 한 번에 모아서 질문하세요.

목적

주요 행동(ONE)은 무엇인가요? (체험판, 데모, 구매, 대기자 명단, 다운로드)
제안은 무엇이며, 정확히 무엇을 제공하나요?
전환으로 간주되는 것은 무엇인가요? (클릭, 가입, 구매)

대상 및 맥락

이상적인 고객 프로필(ICP)은 누구인가요?
그들이 해결하려는 문제는 무엇인가요?
오늘날 전환하지 않는 주요 반론 세 가지
트래픽 소스: 광고, 검색, 소셜, 이메일
방문자가 방문했을 때 이미 알고 있는 것은 무엇인가요?

증거 및 자료

증거 포인트: 로고, 사용후기, 수치, 사례 연구
스크린샷, 데모 비디오, 제품 GIF
보장, 환불 조건, 취소 조건

제약 사항

브랜드 음성: 캐주얼 또는 전문적
디자인 방향: 미니멀 에디토리얼, 장난기 있는 3D, 유리 UI
모바일 우선인가요?

사용자가 답변할 수 없는 경우, 합리적인 가정을 하고 한 줄로 설명한 후 계속 진행하세요. 빌드를 지연시키지 마세요.

A2. 페이지 구조

접이선 위 (필수)

헤드라인, 결과 및 대상
서브헤드라인, 방법을 명확히 하고 구체성 추가
주요 CTA, 명확한 동사 및 제공 사항
하나의 증거 신호, 로고 스트립, 통계 또는 짧은 사용후기
히어로 비주얼, 제품 스크린샷 또는 비디오, 또는 강력한 일러스트레이션

중간 페이지 (주장) 6. 문제에서 해결책으로, 한 섹션 7. 혜택, 3~5개, 결과 중심 8. 작동 방식, 3단계 9. 사회적 증거, 사용후기 또는 사례 연구

하단 (반론 처리) 10. FAQ, 6~12개 질문 11. 위험 제거, 체험판, 언제든지 취소, 보장 12. 최종 CTA, 상단과 동일

B11의 필수 태그라인 공개 섹션을 중간 페이지 논쟁 어딘가(일반적으로 히어로 직후 또는 혜택 후)에 포함하세요.

A3. 레이아웃 선택

하나를 선택하고 이유를 말하세요.

유형	사용 시기
A. 클래식 히어로 + 섹션	제품이 히어로 스크린샷으로 이해될 수 있을 때. 가장 일반적.
B. 롱폼 스토리	교육하고 회의감을 극복해야 할 때.
C. 미니멀 전환 페이지	의도가 높은 트래픽(알려진 사용자에게 이메일) 또는 다운로드나 대기자 명단과 같은 짧은 제안이 있을 때.
D. 비교 페이지	검색 의도에 대안이 포함된 경우("X vs Y", "best for"). 일반적으로 SEO 페이지와 함께 사용됨.

A4. 전환 규칙

메시지를 소스와 일치시키세요. 트래픽이 광고에서 오는 경우 히어로에 광고 헤드라인을 반영하고 동일한 약속과 시각적 톤을 유지하세요.

다음 단계를 명확히 하세요. 하나의 주요 CTA. 접이선 위에 경쟁 CTA를 절대 배치하지 마세요.

혜택을 먼저 작성하세요. 기능은 무엇을 하는지입니다. 혜택은 그것이 그들에게 의미하는 바입니다.

구체적으로 작성하세요.

❌ "시간을 절약하고 간소화하세요"
✅ "주간 보고 시간을 4시간에서 15분으로 줄이세요"

위험을 줄이세요. 최소 하나를 선택하세요: 무료 체험판, 무료 플랜, 신용카드 불필요, 언제든지 취소, 환불 보장.

반론을 각주가 아닌 섹션으로 처리하세요. 마찰이 높은 제안의 경우 FAQ를 더 앞으로 옮기세요. 주장을 뒷받침하는 증거를 바로 옆에 배치하세요.

A5. 카피라이팅

헤드라인 공식

"{결과} {고통} 없이"
"{대상}를 위한 {카테고리}"
"{시간} 안에 {결과}를 제공하세요"

서브헤드라인. 한두 문장. 그것이 무엇이고 누구를 위한 것인지 명확히 하세요.

CTA. 동사 + 제공 사항. 절대 "더 알아보기" 또는 "제출"을 사용하지 마세요. "무료 체험판 시작", "데모 예약", "체크리스트 받기"를 사용하세요.

혜택 글머리 기호. 혜택을 굵게 표시하고 증거 또는 세부 사항을 작성하세요. 예: 더 빠른 반복 — 한 번의 클릭으로 세 가지 레이아웃 변형을 생성하세요.

참고: B1의 카피 규칙은 여전히 적용됩니다. 문장 내 하이픈 없음, 외톨이 단어 없음.

A6. 빌드 순서

섹션별로 다음 순서대로 작업하세요:

히어로
혜택
작동 방식
증거
FAQ
최종 CTA

각 반복에서 전체 페이지를 다시 빌드하지 마세요. 섹션별로 작업하면 제어가 유지되고 diff를 검토할 수 있습니다.

A7. SEO 및 AEO

인덱싱 금지 광고 전용 캠페인 페이지 또는 시간 제한이 엄격한 제안. noindex를 사용하거나 인덱싱되지 않은 경로 뒤에 유지하세요.

인덱싱 에버그린 제안 및 검색 의도가 약속과 일치하는 페이지. 명확한 제목과 메타 설명, 홈페이지 및 기능 페이지의 내부 링크, AEO를 위한 일반적인 질문과 답변 형식의 FAQ를 추가하세요. 적절한 경우 FAQ 스키마를 추가하세요.

A8. 함정

접이선 위에 너무 많은 CTA
모호한 가치 제안: "간소화", "최적화"
결과 없이 많은 기능 목록
증거가 하단에 묻힘
가독성을 해치는 모바일 레이아웃
명확한 다음 단계 없음

B부 — 시각적 시스템

모든 시각적 값은 임의로 생성되는 대신 이러한 규칙을 통해 결정되어야 합니다.

B1. 타이포그래피

글꼴

사용: Geist, Manrope, Geist Mono, Poppins.

사용 금지: Inter, Roboto, Arial, Open Sans, Helvetica.

인터페이스 어디에서도 이탤릭체를 사용하지 마세요.

사이트당 하나의 서체. 프롬프트에서 명시적으로 요청하지 않는 한 두 개의 글꼴을 쌍으로 사용하지 마세요. Geist Mono는 코드, 데이터 또는 모노스페이스가 기능적으로 필요한 숫자 UI에만 기본 글꼴과 함께 허용됩니다.

울트라 볼드 가중치(900 / black)는 사용하지 마세요. 세미볼드 또는 볼드로 제한하세요.

카피 규칙

텍스트에 하이픈 없음. 본문, 제목 또는 레이블에 -를 사용하지 마세요. 대신 구문을 다시 작성하세요.

외톨이 단어 없음. 마지막 줄에 단일 단어가 혼자 남아 있으면 안 됩니다. 제목에는 text-wrap: balance를, 본문에는 text-wrap: pretty를 적용하세요.

타입 스케일

항상 글꼴 크기를 Tailwind의 기본 타입 스케일로 조정하세요. text-[19px], font-size: 22px 또는 1.4rem을 포함한 임의의 값을 그대로 두지 마세요.

기존 크기가 정확히 단계에 맞지 않는 경우, 크기와 쌍을 이루는 줄 높이를 모두 고려하여 가장 가까운 아래 단계로 스냅하세요.

클래스	크기	줄 높이
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

감사에서 스케일 스냅을 독립적으로 설정된 사용자 정의 줄 높이와 결합하지 마세요. 트래킹과 줄 높이는 일치하는 단계가 이미 제공하는 값 내에서만 조정될 수 있으므로 두 규칙이 서로 충돌하지 않습니다.

버튼 타입

메인 버튼: text-base(16px), 세미볼드.
더 작은 헤더 버튼: text-sm(14px), 세미볼드.

B2. 간격

이 값만 사용하세요. 그 사이 또는 외부의 값은 사용하지 마세요.

토큰	값
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

메인 버튼: 8px 수직 패딩, 12px 수평 패딩.

B3. 모서리 둥글기

Tailwind의 반경 값만 사용하세요.

중첩 반경 공식. 한 모양이 다른 모양 안에 있고 그 사이의 간격이 32px 미만인 경우:

내부 반경 = 외부 반경 − 간격

결과가 2보다 큰 경우에만 적용하세요. 그 이하에서는 내부 모양을 정사각형으로 두거나 변경하지 마세요.

예: rounded-2xl(16px) 외부 카드에 8px 내부 패딩이 있으면 내부 요소에 8px 반경(rounded-lg)이 제공됩니다.

B4. 테두리 및 배경

카드의 한쪽에만 테두리를 적용하지 마세요. 테두리는 전체를 둘러싸거나 전혀 없어야 합니다.
배경에 그라데이션을 사용하지 마세요. 배경은 단색입니다.

다크 모드 배경색

이것만 사용하세요:

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. 히어로 섹션

제목 색상

다크 테마: 제목 텍스트에 왼쪽에서 오른쪽 그라데이션, #FFFFFF → #9B9B9B.
라이트 테마: 제목 텍스트에 왼쪽에서 오른쪽 그라데이션, #000000 → #666666.

그라데이션이 사용되는 유일한 곳이며, 텍스트에만 사용되고 배경에는 절대 사용되지 않습니다.

레이아웃

제목과 서브제목 모두 최대 너비 680px를 갖습니다.
제목 사본을 읽고 의미 있는 지점에 줄 바꿈을 삽입하세요.
문구를 어색하게 자르거나 문장을 읽기 어렵게 만드는 방식으로 줄을 끊지 마세요. 생각이 끊어지는 부분에서 끊으세요.

B6. 아이콘

사용: Phosphor, Solar 또는 Iconamoon.

사용 금지: Material Icons, Material Symbols.

B7. 모션 안무 (유체 역학)

기본 전환을 사용하지 마세요. 모든 모션은 사용자 정의 3차 베지어 곡선을 통해 실제 세계의 질량과 스프링 물리학을 시뮬레이션합니다.

transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

유체 아일랜드 내비게이션

닫힌 상태. 내비게이션 바는 상단에서 분리된 떠 있는 유리 알약 형태입니다: mt-6, mx-auto, w-max, rounded-full.

햄버거 모프. 클릭 시 햄버거 라인이 rotate-45 및 -rotate-45(절대 위치 사용)를 사용하여 유체하게 회전하고 X자로 변환됩니다. 절대 단순히 사라져서는 안 됩니다.

모달 확장. 메뉴가 강력한 유리 효과와 함께 전체 화면 오버레이로 열립니다: backdrop-blur-3xl bg-black/80 또는 bg-white/80.

지연 마스크 공개. 확장된 상태 내부의 내비게이션 링크가 보이지 않는 상자에서 페이드인 및 슬라이드 업됩니다. translate-y-12 opacity-0에서 translate-y-0 opacity-100으로 해결되며, 항목당 delay-100, delay-150, delay-200 등으로 지연됩니다.

스크롤 보간

요소가 로드 시 정적으로 나타나지 않습니다. 뷰포트에 진입할 때 부드럽고 무거운 페이드 업을 실행합니다:

translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

800ms 이상에 걸쳐.

JavaScript 기반 공개의 경우 IntersectionObserver 또는 Framer Motion의 whileInView를 사용하세요. 절대 window.addEventListener('scroll')를 사용하지 마세요 — 지속적인 리플로우를 유발하고 모바일 성능을 저하시킵니다.

B8. 콘텐츠 현실성

절대 채우기용 콘텐츠를 제공하지 마세요. 다음은 페이지가 생성되었지 만들어지지 않았음을 나타내는 신호입니다.

Lorem Ipsum 없음. 실제 초안 사본을 작성하세요.
"홍길동" 없음. 다양하고 현실적인 이름을 사용하세요.
"Acme Corp", "Nexus" 또는 "SmartFlow" 와 같은 자리 표시자 브랜드 없음. 상황에 맞고 믿을 수 있는 이름을 고안하세요.
99.99%, 50%, $100.00 과 같은 둥근 가짜 숫자 없음. 유기적인 데이터 사용: 47.2%, $99.00, +1 (312) 847-1928.
AI 클리셰 없음. 절대 "향상", "원활한", "발산", "차세대", "게임 체인저", "심층 분석", "태피스트리" 또는 "~의 세계에서".
모든 것에 제목 대문자 사용 금지, 문장 첫 글자만 대문자 사용.
능동태. "변경 사항을 저장할 수 없습니다", "실수가 있었습니다"가 아님.
성공 메시지에 느낌표 없음, 오류에 "어이쿠!" 없음. 직접적으로: "연결에 실패했습니다. 다시 시도해 주세요."
사람당 고유한 아바타, 블로그 게시물 날짜는 다양하게.

B9. 상태

모든 대화형 요소는 전체 상태 세트와 함께 제공됩니다:

호버 — 배경 이동, 약간의 크기 조정 또는 이동
활성 — 물리적 피드백을 위한 scale(0.98) 또는 translateY(1px)
포커스 — 보이는 포커스 링. 접근성 요구 사항, 선택 사항이 아님.
로딩 — 실제 레이아웃 모양의 스켈레톤 로더, 원형 스피너가 아님
비어 있음 — 구성된 "시작하기" 보기, 빈 패널이 아님
오류 — 인라인 및 구체적. 절대 window.alert() 사용 금지.

데드 링크 없음. #을 가리키는 버튼은 연결되거나 시각적으로 비활성화되어야 합니다. 현재 페이지는 내비게이션에 표시되어야 합니다.

B10. 출시 요구 사항

잊어버리면 페이지가 미완성처럼 보이게 하는 것들:

바닥글의 개인정보 보호정책 및 이용약관 링크
맞춤형 브랜드 404 페이지
이메일 형식 및 필수 필드에 대한 클라이언트 측 양식 유효성 검사
키보드 사용자를 위한 콘텐츠 건너뛰기 링크
해당 관할권에서 요구하는 경우 쿠키 동의
브랜드 파비콘
<title>, 메타 설명, og:image 및 소셜 공유 태그
모든 의미 있는 이미지에 대한 대체 텍스트
시맨틱 HTML: <nav>, <main>, <article>, <aside>, <section>
모든 페이지에서 돌아갈 방법

B11. 태그라인 공개 섹션 (필수)

모든 랜딩 페이지에는 히어로와 별개로 핵심 혜택 또는 태그라인을 명시하는 하나의 큰 텍스트 섹션이 포함됩니다. 히어로 바로 아래에 쌓이지 않고 페이지 아래쪽에 자체적인 순간으로 위치합니다.

카피

최소 두 줄의 텍스트.
A5의 음성으로 작성된 혜택 설명 또는 태그라인, 일반적인 섹션 제목이 아님.

타이포그래피

줄 수에 따라 text-4xl에서 text-6xl 크기, B1 타입 스케일을 따릅니다.
히어로와 같이 최대 너비가 제한되어 B5당 의미 있는 지점에서 줄이 끊어집니다.

애니메이션

텍스트는 미묘하고 음소거된 톤(테마의 기본 텍스트 색상 대비 약 25~35% 불투명도)으로 시작합니다.
섹션이 뷰포트로 스크롤될 때 각 단어가 읽기 순서대로 음소거된 톤에서 전체 텍스트 색상으로 개별적으로 전환됩니다.
단어가 트리거 라인을 교차할 때 한 번에 하나씩 활성화되며, 전체 블록이 한 번에 전환되지 않습니다. 전환은 B7의 사용자 정의 이징 곡선을 사용하며, 절대 선형 페이드가 아닙니다.
단어당 IntersectionObserver 또는 requestAnimationFrame을 통해 제한된 단일 스크롤 리스너로 구현하세요. 절대 제한되지 않은 scroll 이벤트 리스너를 사용하지 마세요.

B12. 구현 메모

기본값을 덮어쓰세요. Tailwind나 부트스트랩의 기본 타이포그래피 및 간격 값을 가져와서는 안 됩니다. 이 파일의 값을 스타일 시스템에 명시적으로 적용하세요.

주장을 강조하는 시각 자료. 스크린샷, 다이어그램 및 아이콘은 페이지의 논증을 지원해야 하며 장식으로만 존재해서는 안 됩니다. 모든 시각 자료에는 서명이 있습니다.

사용자 정의 구성 요소 내에서도 규칙을 적용하세요. 사전 구축된 UI 라이브러리 또는 사용자 정의 구성 요소를 사용하는 경우에도 B1~B11의 값을 적용하세요. 이 파일은 라이브러리 기본값보다 우선합니다.

지역화. 페이지의 언어가 영어가 아닌 경우에도 B1의 타이포그래피 규칙이 적용됩니다. 현지 글꼴이 지정된 경우에만 대체하세요.

이 스킬은 사용자에게 완전히 제어된 방식으로 고전환율 랜딩 페이지를 제공하는 데 최적화되어 있습니다. 항상 A부(의도)부터 시작하고 B부(시각적 일관성)로 마무리하세요.

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

문서