랜딩 페이지 디자인

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

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

이 스킬은 두 부분으로 나뉩니다. A파트는 페이지가 무엇을 말하고 어떻게 구성될지 결정합니다. B파트는 절대 타협할 수 없는 시각적 시스템입니다. B를 건드리기 전에 A를 먼저 끝내세요.

범위

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

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

A파트 — 전략 및 구조

A1. 초기 질문

디자인하거나 글을 쓰기 전에 이 정보를 수집하세요. 누락된 정보만 물어보고, 한 번에 하나씩 묻지 말고 한꺼번에 물어보세요.

목적

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

대상 및 컨텍스트

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

증거 및 자산

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

제약 사항

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

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

A2. 페이지 구조

접이식 상단 (필수)

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

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

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

B11의 필수 태그라인 공개 섹션을 페이지 중간 논증 어딘가에 포함시키세요. 일반적으로 히어로 바로 뒤 또는 혜택 뒤에 배치합니다.

A3. 레이아웃 선택

하나를 선택하고 이유를 설명하세요.

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

A4. 전환 규칙

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

다음 단계를 명확하게 만드세요. 하나의 주요 CTA. 접이식 상단에 경쟁 CTA를 절대 배치하지 마세요.

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

구체적으로 쓰세요.

❌ "시간 절약 및 간소화"
✅ "주간 보고 시간을 4시간에서 15분으로 단축"

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

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

A5. 카피라이팅

헤드라인 공식

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

부제목. 한두 문장. 무엇인지, 누구를 위한 것인지 명확히 하세요.

CTA. 동사 더하기 그들이 얻는 것. 절대 "더 알아보기"나 "제출"을 사용하지 마세요. "무료 평가판 시작", "데모 예약", "체크리스트 받기"를 사용하세요.

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

참고: B1의 복사 규칙이 여전히 적용됩니다. 문장 내 하이픈 금지, 고아 단어 금지.

A6. 빌드 순서

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

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

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

A7. SEO 및 AEO

색인 생성 금지 광고 전용 캠페인 페이지나 시간 제약이 강한 제안. noindex를 사용하거나 색인되지 않은 경로 뒤에 유지하세요.

색인 생성 상시 제공 제안과 검색 의도가 약속과 일치하는 페이지. 명확한 제목과 메타 설명, 홈페이지 및 기능 페이지의 내부 링크, FAQ를 일반적인 질문 및 답변 형식으로 추가하세요(AEO용). 적절한 경우 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. 모션 choreography (유체 역학)

기본 전환을 절대 사용하지 마세요. 모든 모션은 사용자 정의 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을 통해 조절되는 단일 스크롤 리스너로 구현하세요. 조절되지 않는 스크롤 리스너를 절대 사용하지 마세요.

B12. 유틸리티 규칙

고정 너비 컨테이너. Tailwind의 max-w-screen-xl을 기본값으로 사용하고, 페이지 전체에 일관되게 적용하세요.

그리드 및 플렉스. grid-cols-3, flex-wrap 등 Tailwind 클래스로 레이아웃을 정의하세요. 인라인 스타일 금지.

이미지 및 미디어. object-fit: cover는 명시적으로 설정하세요. 중요한 이미지에는 loading="lazy"를 추가하되, LCP 이미지(Landing Page Hero)에는 추가하지 마세요.

반응형 디자인. 모바일 우선 중단점: sm:, md:, lg:, xl:, 2xl:. 모든 주요 섹션을 중단점에서 테스트하세요.

접근성. aria-label, role, 키보드 탐색. 포커스 스타일을 제거하지 마세요.

B13. 최종 검토

[] 모든 CTA가 작동하고 목적지가 정확한가?
[] 히어로가 접이식 상단에 바로 표시되는가?
[] 모든 상태(호버, 포커스, 활성, 로딩)가 구현되었는가?
[] Lorem Ipsum이나 가짜 데이터가 없는가?
[] 타이포그래피가 B1 척도를 따르는가?
[] 간격이 B2 토큰만 사용하는가?
[] 모바일 뷰에서 레이아웃이 깨지지 않는가?
[] SEO 태그와 소셜 공유 태그가 있는가?
[] 접근성 검사를 통과했는가?
[] 애니메이션이 거칠거나 느리지 않은가?
[] 페이지가 명확한 다음 단계로 끝나는가?

이 파일은 elayadesign/ai-design-skills(AI 디자인 스킬)의 일부입니다.

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

문서