랜딩 페이지 디자인

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

랜딩 페이지의 임무는 단 하나입니다: 특정 낯선 사람이 이것이 무엇인지 이해하고, 믿고, 다음 단계를 밟게 하는 것입니다. 독특한 아이디어로 주목을 끌고, 명확한 사실로 이를 유지합니다. AI 모델은 두 가지 반대 방향으로 실수하는 경향이 있습니다. 대부분은 상호 교환 가능한 페이지를 만듭니다: 모호한 헤드라인, 세 개의 아이콘 카드, 가짜 사용 후기, 로고 벽 등 현재 유행하는 스타일로 말이죠. 이를 피하라고 하면 "AI 특유의 느낌"을 쫓거나 한 세트의 유행하는 장치를 다른 세트로 바꿉니다. 두 문제에 대한 해결책은 동일합니다: 주제에서 시작해 구체적이고 진실된 말을 하고, 오직 이 제품만이 가질 수 있는 하나의 아이디어를 페이지에 부여하세요.

interface-guidelines의 계층화된 원칙을 적용하세요 (모두가 사용할 수 있어야 함 > 진실을 말해야 함 > 의미를 명확히 전달해야 함 > 답이 먼저 와야 함 > 실수해도 회복 가능해야 함 > 안정적으로 유지되어야 함 > 가능한 것이 보여야 함 > 관례를 따라야 함 > 세련되어야 함). 해당 스킬이 설치되어 있다면 먼저 SKILL.md를 읽으세요.

브리핑

레이아웃을 그리기 전에 20줄 이내로 다음 질문에 답하세요. 사용자가 부재 중이면 가정을 명시하고 계속 진행하세요.

• 누가, 어디서, 무엇을 알고 도착하는가? 광고 클릭, 문제에 대한 검색, 친구의 링크, 투자자. 그들의 사전 지식에 따라 첫 화면이 얼마나 많은 것을 설명해야 하는지 결정됩니다.
• 하나의 다음 단계와 그 비용: 이메일, 카드, 전화, 다운로드. 페이지의 다른 모든 것은 이에 부차적입니다.
• 주장: 무엇이며, 누구를 위한 것이며, 무엇이 바뀌는지에 대한 한 문장. 이걸 쓸 수 없다면 페이지 디자인은 준비되지 않은 것입니다.
• 가진 증거: 실제 고객, 허가받은 인용문, 출처와 날짜가 있는 숫자, 데모, 무료 티어. 존재하는 것을 나열하세요. 증거가 없으면 채우지 말고 '갭(gap)'으로 표시하세요.
• 가격: 공개, 시작 가격, 대표 사례, 또는 진정으로 알 수 없음.
• 브랜드 상태: brand-identity 출력물(토큰, 로고, 타이포그래피, 음성)이 존재합니까? 아니라면 먼저 실행하거나, 임시 방향으로 작업하고 그렇게 말하세요.
• 주제의 실제 자료: 제품, 사용자 및 그 세계가 실제로 어떻게 보이는지 ("아트 디렉션" 섹션 참조).
• 에이전트 리더: 어시스턴트가 이 제품을 비교하고, 가격을 인용하거나, 누군가를 가입시키나요? 예라고 가정하세요.
• 제약 조건: 스택, CMS, 성능 예산, 언어, 법적 문제 (규제 대상 주장, 가격 관련 법률, 동의).

아트 디렉션

이 계열은 특정 모양을 강요하지 않습니다. 대담함, 이상함, 조용함, 최대주의 모두 허용됩니다. 필요한 것은 모양이 이 주제에 대한 결정에서 비롯되어야 하며, 바닥(가독성, 속도, 조작성)을 온전히 남겨두어야 한다는 것입니다. 코드를 작성하기 전에 이 단계를 글로 먼저 수행하세요. references/art-direction.md에 방법과 작업 예시가 있습니다.

1. 주제의 자료 수집 [J]. 제품과 그 세계에서 구체적인 명사 10~20개를 나열하세요: 다루는 객체, 사용자가 만드는 것, 장소, 인공물, 소리, 질감, 도메인 자체의 시각적 언어 (조석표, 레시피 카드, 회로 트레이스, 배송 라벨). 일반적인 단어("속도", "혁신", "매끄러움")는 제외합니다.
2. 컨셉 찾기 [J]. 그 자료를 페이지 아이디어로 바꾸는 한 문장: "페이지는 제품 자체의 출력물이다", "필드 가이드", "당신의 배포를 위한 출발 안내판". 교체 테스트를 적용하세요: 경쟁사가 이 컨셉을 그대로 사용할 수 있다면 다시 쓰세요.
3. 기억에 남는 한 가지 요소 선택 [J]. 하나의 요소가 컨셉을 담당하고 대담함 예산을 받습니다: 실제 제품 순간을 크게 보여주는 것, 작동하는 데모, 브랜드의 타이포그래피적 제스처, 다룰 수 있는 물체, 이 회사만이 찍을 수 있는 사진. 그 외 모든 것은 읽기를 돕습니다. 다섯 개의 시그니처 요소가 있는 페이지는 시그니처가 하나도 없는 것입니다.
4. 구성 [J]. 각 화면의 읽기 경로를 결정하세요: 눈이 처음, 둘째, 셋째로 어디에 떨어지며, 어떤 크기와 대비가 이를 만드는지. 그리드를 설정한 다음, 의도적으로 한 번 깨세요. 폰 화면 구성은 데스크톱을 축소한 것이 아닌 독자적인 레이아웃으로 디자인하세요.
5. 두세 가지 방향을 각각 몇 줄씩 피칭하세요 (컨셉, 시그니처 요소, 브랜드 토큰 사용 방법, 위험 요소), 하나를 선택하고 이유를 말하세요. 방향은 팔레트가 아닌 아이디어에서 달라야 합니다.

브랜드 경계. 색상, 타이포그래피, 로고, 음성, 토큰은 brand-identity(의 tokens.css 또는 tokens.json)에서 가져옵니다. 아트 디렉션은 이 페이지가 어떻게 이것들을 사용할지 결정합니다: 크기, 크롭, 밀도, 리듬, 이미지, 모션. 새로운 브랜드 색상을 추가하거나, 로고를 다시 그리거나, 한 페이지를 위해 타이포그래피를 바꾸지 마세요. 페이지에 브랜드가 부족한 것(일러스트레이션 스타일, 사진 방향)이 있다면 브랜드 갭으로 기록하고 브랜드 소유자에게 제안하세요.

취향은 증거가 아닙니다. 그라데이션, 눈썹, 특정 폰트를 제거한다고 페이지가 더 좋아지지는 않습니다: 취향 스킬(taste-skill) 자체의 블라인드 테스트에서는 탐지 실패가 전혀 없었음에도 불구하고 스킬 없이 16라운드 중 4승에 그쳤으며, 모델 심사위원들은 계속해서 템플릿 장치로 가득 찬 더 화려한 페이지를 선호했습니다 [E, 모델 심사위원 전용]. 따라서 방향은 금지된 장치 목록이 아닌 교체 테스트와 독자의 과업으로 판단하세요.

규칙

메시지

• 첫 화면은 낯선 사람이 이해할 수 있는 말로 '무엇인지, 누구를 위한 것인지, 다음 단계가 무엇인지'를 명시합니다 [E]. 방문자는 처음 10~20초 내에 떠날지 결정하며(Liu, White, Dumais 2010, NN/g 인용), 첫 화면 전체는 약 57%의 시청 시간을 받습니다(NN/g 2018, n=120). 재치 있는 문장이 앞설 수 있지만, 평범한 설명 문장이 바로 옆에 있어야 합니다.
• h1은 주장이지 브랜드 이름이나 인사가 아닙니다 [S]. 이는 스크린 리더와 에이전트를 위한 페이지의 개요 루트입니다(WCAG 2.4.6).
• 구체적이 홍보보다 낫습니다 [E]. 간결하고, 스캔 가능하며, 객관적인 카피는 홍보성 카피보다 사용성에서 124% 더 나은 결과를 보였습니다(Nielsen 1997, n=51; 오래된 연구지만 방향성은 유효). "워크플로우를 강화하세요"가 아니라 "타임시트에서 송장을 보냅니다"라고 말하세요.
• 모든 섹션은 하나의 주장을 하고 증거를 보여줍니다. 증거가 없는 섹션은 삭제하세요 [J]. 페이지를 디자인하기 전에 주장 목록으로 먼저 작성하세요(취향 스킬에서 빌린 아이디어).
• 제품 자체를 보여주세요 [J]: 실제 스크린, 실제 출력물, 실제 사진. "생산성"의 추상화된 그림은 아무 말도 하지 않으며, 발명된 UI는 제품을 잘못 표현합니다.
• 사람들은 스크롤하므로, 가짜 바닥(false floor)을 피하세요 [P]. 첫 화면 아래로 주의는 떨어지지만 사라지지는 않습니다(NN/g 2018). 전체 너비 히어로 영역이 완전해 보이면 뒤의 모든 것을 숨깁니다.

증거와 정직함

• 진짜 증거만 사용하세요 [S]. 가짜 또는 AI 생성 리뷰와 사용 후기는 미국에서 불법이며(FTC 16 CFR Part 465, 2024), 보증은 실제 경험을 반영해야 합니다(FTC Endorsement Guides, 16 CFR Part 255). 로고는 허가를 받은 실제 고객의 경우만 사용하세요.
• 증거가 없으면 표시하세요 [J]. {{quote: 고객, 이름, 역할}}과 같은 보이는 플레이스홀더를 사용하고 인계 시 목록에 포함시키세요. 절대 설득력 있는 가짜로 갭을 채우지 마세요.
• 숫자는 출처와 날짜를 명시합니다 [J]. "12,000 팀"은 "2026년 3월 기준"이 필요합니다. 아무도 확인할 수 없는 숫자는 기껏해야 장식입니다.
• 인위적인 긴박감을 만들지 마세요 [E]. 가짜 카운트다운과 거짓 희소성은 대규모로 발견된 기만적인 패턴 중 하나였으며(Mathur et al. 2019), 또한 에이전트를 오도합니다: 6개의 웹 에이전트가 평균 41%의 확률로 다크 패턴에 속았습니다(Ersoy et al. 2025, preprint).

가격 책정

• 가격을 표시하세요 [P]. 가격이 없으면 구매자를 경쟁사로 몰고 갑니다(Nielsen 2002). 가격이 실제로 변동되는 경우, 해당 가격의 대표 사례를 보여주세요(Nielsen 2006).
• 가격은 텍스트입니다: 금액, 통화, 기간, 포함 사항. 절대 이미지 안에만 넣지 마세요 [J]. 요금제 비교는 실제 <table>이며 기능은 단어로 표시됩니다.
• 구매자가 지불할 총액을 명시하세요, 필수 수수료를 포함하여 [S]. 미국 법률은 실시간 이벤트 티켓과 단기 숙박에 대해 이를 요구합니다(FTC Rule on Unfair or Deceptive Fees, 2025); 다른 곳에서는 정직한 관행입니다. EU 할인 주장은 이전 30일 동안의 최저 가격을 표시해야 합니다(Directive 98/6/EC, Art. 6a).
• 결제 토글은 상태와 기본값을 표시합니다 [J]. 연간 요금제가 기본으로 표시되는 경우, 숫자 옆에 "연간 청구"라고 말하세요.

다음 단계

• 하나의 기본 행동, 결정 지점에서 반복되며, 무슨 일이 일어날지 라벨링됩니다 [J]: "카드 없이 14일 무료 체험 시작", "대기자 명단에 가입하세요". 보조 행동은 보조처럼 보입니다.
• 대기자 명단 및 가입 양식은 최소한만 요구하고 다음에 올 일을 말합니다 [J]: 무엇을 받는지, 언제, 얼마나 자주 이메일을 보낼지. 동의 상자는 체크되지 않은 상태로 시작합니다. 더 긴 흐름은 form-design에 넘기세요.
• 성공은 토스트가 아닌 상태입니다 [J]. 제출 후, 양식을 발생한 일과 예상되는 일로 대체하세요.

속도와 견고함

• Google Core Web Vitals를 75번째 백분위수에서 충족하세요: LCP 2.5초, INP 200ms, CLS 0.1 [S]. 이는 인간 인식의 임계값이 아닌 달성 가능성에 의해 부분적으로 설정된 목표입니다. 더 빠른 모바일 페이지는 Google이 의뢰한 연구(Deloitte 2020)에서 더 높은 리테일 전환율과 상관관계를 보였습니다 [E, 상관 관계].
• 히어로는 일반적으로 LCP 요소입니다 [S]: 실제 <img> 태그에 width, height, fetchpriority="high"를 사용하고, 절대 레이지 로딩하지 않으며, 스크립트를 기다리는 CSS 배경이 아닙니다(web.dev).
• 콘텐츠는 JavaScript와 모션 없이도 볼 수 있어야 합니다 [J]. 스크롤 리빌은 보이는 상태에서 시작하여 지원될 때만 애니메이션을 적용합니다; prefers-reduced-motion이 설정된 경우 아무것도 숨기지 않습니다. 그렇지 않으면 에이전트와 스크린샷은 빈 화면을 보게 됩니다.
• 자동 진행 캐러셀은 사용하지 마세요 [P]. 회전하는 히어로는 테스트에서 사용자로부터 제안을 숨겼으며(Nielsen 2013), 5초 이상의 모션은 일시 정지 컨트롤이 필요합니다(WCAG 2.2.2).

AI 에이전트 리더

• 어시스턴트가 인용할 사실은 페이지에 텍스트로 있어야 합니다: 무엇인지, 가격, 요금제 한도, 플랫폼, 체험 조건, 연락처 [J]. 에이전트는 정확히 이것들로 제품을 비교합니다.
• 구조화된 데이터와 메타 태그는 보이는 페이지를 반영하고 아무것도 추가하지 않습니다 [S]: title, meta description, Open Graph, JSON-LD (Organization, SoftwareApplication 또는 Product)는 페이지에 표시된 것과 동일한 가격과 이름을 사용합니다. 붙인 마크업은 테스트에서 에이전트를 돕지 못했습니다(Affora, interface-guidelines 참조).
• AI 에이전트에게 보내는 텍스트, 숨겨졌거나 보이거나, 사용하지 마세요 [J]. 이는 프롬프트 인젝션으로 읽히며, 숨겨진 텍스트는 스팸 신호입니다.

빌드 순서

1. 브리핑, 그 다음 주장 및 증거 목록, 갭을 위한 플레이스홀더 포함.
2. 아트 디렉션: 주제 자료, 컨셉, 한 가지 요소, 두세 가지 피치, 선택.
3. 텍스트 와이어프레임: 순서대로 섹션, 각각 주장, 증거 및 행동 포함.
4. 실제 카피가 포함된 시맨틱 HTML: 하나의 h1, 랜드마크, 주장을 개요하는 제목, 가격 테이블, 라벨이 있는 양식.
5. brand-identity의 브랜드 토큰, 그 다음 레이아웃 및 시그니처 요소.
6. 상태: 양식 유효성 검사, 성공, 실패, 매진 또는 마감된 대기자 명단, JavaScript 없음, 모션 감소.
7. 성능 예산 내의 이미지, 폰트 및 스크립트.
8. 확인, 최대 두 번 수정, 인계.

확인

• node <interface-guidelines>/scripts/audit.mjs <dist|url> --out audit-output, 그 다음 모든 세 가지 너비, 라이트/다크 모드 각각에서 모든 스크린샷을 살펴보세요.
• 첫 화면 테스트: 첫 화면 스크린샷만 누군가에게(또는 맥락 없는 새로운 에이전트에게) 보여주고, 이것이 무엇인지, 누구를 위한 것인지, 다음에 무엇을 해야 하는지 물어보세요. 잘못된 답변은 아무리 보기 좋아도 메시지가 실패한 것입니다.
• 교체 테스트: 제품 이름을 경쟁사 이름으로 바꾸세요. 페이지가 여전히 작동한다면 컨셉과 카피가 일반적인 것입니다.
• 에이전트 테스트: 접근성 스냅샷만으로 각 요금제의 가격과 한도를 읽고, 가입 절차를 완료할 수 있는지 확인하세요. JSON-LD와 비교하세요.
• 속도: 스로틀링된 모바일 프로필에서 Lighthouse 또는 PageSpeed Insights; 실제 필드 데이터(CrUX)는 페이지가 라이브인 경우.
• 견고함: JavaScript를 비활성화하고 prefers-reduced-motion: reduce로 로드하세요. 중요한 것이 빠져서는 안 됩니다.
• 증거 감사: 모든 인용문, 로고, 숫자, 평점을 출처로 추적하거나 표시된 플레이스홀더로 보여주세요.

함정

• 발명된 사용 후기, 고객이 아닌 회사의 로고 벽, 조작된 사용자 수 또는 평점.
• 어떤 제품에도 사용될 수 있는 헤드라인("일의 미래를 구축하세요"), 실제 설명은 세 화면 아래에 있는 경우.
• 주제에서 결정하는 대신 "AI 특유의 느낌"을 쫓거나 금지하는 것. 새로운 유행하는 대체재 목록은 그 자체로 다음 틸(tell)입니다.
• 장식 할당량: 모든 곳에 모션, 모든 섹션에 그림, 각 섹션마다 다른 레이아웃.
• 스크롤 애니메이션이 실행될 때까지 숨겨진 히어로 카피 또는 CTA; 그때까지 대비에 실패하는 저투명도 "리빌" 텍스트.
• 이미지에만 있는 가격, 또는 규모에 대한 표시 없이 "문의하기".
• 한 페이지를 위해 브랜드 색상을 재정의하거나 brand-identity 토큰 대신 로고를 다시 그리는 경우.
• 연간/월간 가격을 조용히 보여주는 가격 토글.
• 페이지에 숨겨진 AI 어시스턴트 명령.

참고 자료

파일	언제 읽을까요
references/art-direction.md	항상, 모양을 선택하기 전에: 방법, 작업 예시, 구성, 브랜드 토큰 사용, 방향 판단
references/structure-and-copy.md	페이지 작성 시: 페이지 유형별 섹션 패턴, 헤드라인, 증거, 가격 페이지, 대기자 명단, 양식
references/performance-and-agents.md	구축 및 배포 시: Core Web Vitals, 이미지, 폰트, 모션, 메타데이터, 구조화된 데이터, JS 없음
references/sources.md	숫자를 인용하기 전에, 또는 누군가 규칙이 왜 존재하는지 물을 때