프리미엄 랜딩 페이지 빌더
당신은 시니어 디자이너의 평가를 통과하는 랜딩 페이지를 구축합니다. 기준은 '작동하고 예쁘다'가 아닙니다. 기준은 진정으로 신경 쓰는 제품 팀이 만든 페이지와 구분할 수 없는 수준입니다.
이 파일은 방법론입니다: 다른 모든 규칙을 무효화하는 규칙, 프로세스의 11개 게이트, 그리고 최종 결과물입니다. 각 게이트의 기술적 세부 사항은 references/에 있습니다. 순서대로 진행하세요.
이 스킬 사용 방법
게이트가 요청하는 것만 로드하세요. 아래 각 게이트는 읽기 줄로 끝나며, 해당 시점의 참조 파일을 가리킵니다. 모든 참조를 한 번에 열지 마세요. 총 4,000줄에 가까우며, 각 단계에 중요한 내용은 한두 개 파일에 담겨 있습니다.
번호는 모든 파일에서 동일합니다. 텍스트가 "10.4 참조" 또는 "12.7절"이라고 말하면, 이 파일 끝의 맵에서 해당 섹션을 포함하는 참조 파일을 찾으세요. 섹션 0, 1, 3, 19는 여기에 있으며, 나머지는 references/에 있습니다.
스크립트가 무거운 검증을 수행합니다. 다시 작성하는 대신 실행하세요:
| 스크립트 | 용도 | 필요 환경 |
|---|---|---|
scripts/contraste.py | 적용 전 토큰의 대비 쌍 측정 (게이트 4) | Python 3.8+ |
scripts/checar-texto.py | 슬롭 방지 검토, 버튼 및 텍스트 리듬 (게이트 2 및 10) | Python 3.8+ |
scripts/auditar-responsivo.mjs | 320px에서 1920px까지 너비별, 200% 확대 및 축소 모션 감사 (게이트 9) | Node 18+ 및 Playwright |
경로는 이 스킬 폴더를 기준으로 한 상대 경로입니다. 환경에서 스크립트 실행이 불가능한 경우 (예: Playwright용 브라우저 없음), 사용자에게 어떤 검증이 누락되었는지 알리고 사용자가 자신의 머신에서 실행할 정확한 명령어를 제공하세요. 실행되지 않은 검증을 절대 선언하지 마세요.
코드 예제는 순수 HTML, CSS, JavaScript로 제공됩니다. React, Next.js, Astro, Tailwind, Webflow 또는 다른 빌더에서는 토큰 이름, 상태 및 규칙을 유지하며 변환하세요.
0. 단 한 픽셀도 그리기 전에
어기면 다른 모든 규칙을 무효화하는 네 가지 규칙:
- 브리핑이 완료되지 않으면 단 한 픽셀도 없음 (게이트 1). 재작업의 대부분은 무엇을 그리고 있는지 알기 전에 그리기 시작하는 데서 비롯됩니다.
- 시각적 인상에 의한 값은 없음. 타이포그래피, 색상, 간격, 지속 시간의 모든 측정값은 토큰, 측정 또는 테이블에서 비롯됩니다. 절대 "괜찮아 보인다"에서 비롯되지 않습니다.
- 요청된 것만 하고, 그 이상은 하지 마세요. 더 나은 아이디어가 있다면 요청된 것을 구현하고 아이디어는 별도로 제안하세요. 임의로 적용한 추가 효과는 재작업이 보장됩니다.
- 다른 프로젝트의 아이덴티티를 절대 재사용하지 마세요. 각 페이지는 프로젝트의 브랜드에서 탄생합니다. 예시에서 팔레트, 타이포그래피 또는 시각적 시그니처를 복사하는 것은 섹션 1에서 금지하는 정확히 일반적인 페이지를 만드는 것입니다.
0.1 방법론과 아이덴티티의 차이
이것이 이 문서에서 가장 중요한 구분입니다. 방법론은 변하지 않습니다. 아이덴티티는 모든 프로젝트에서 변합니다.
| 불변: 항상 사용 | 변수: 프로젝트에서 수집 |
|---|---|
| 11개 게이트 프로세스 | 팔레트와 각 색상의 역할 |
| 토큰 구조, 즉 이름들 | 토큰의 값들 |
clamp()와 rem 단위를 사용한 유동적 스케일 | 타이포그래피 패밀리와 스케일 비율 |
8px 기준 그리드, minmax(0,1fr) 그룹화 규칙 | 컨테이너 너비와 밀도 |
| 최대 두 개의 토큰으로 제한된 계층적 그림자 | 그림자의 색조와 강도 |
| 동작 어휘: 하나의 곡선, 두 개의 범위 | 동작 강도와 호버 시그니처 |
| 고유 시각 자료, 절대 스톡 자료 사용 금지 | 브랜드에 맞는 재료 기법 |
| WCAG 2.2 AA 접근성 및 섹션 12와 16의 QA | 없음. 협상 불가 |
| 섹션 1의 슬롭 방지 규칙 | 없음. 협상 불가 |
이 문서의 모든 구체적인 값은 예시 입력일 뿐, 복사할 표준이 아닙니다. 예시는 이미 검증된 실제 프로젝트에서 가져온 것이며, 기대되는 엄격함의 수준을 보여주기 위한 것이지, 재현해야 할 외관이 아닙니다. 패션 브랜드, 은행, 게임 스튜디오는 동일한 필드를 완전히 다른 값으로 채우고 동일한 품질 수준에 도달합니다.
이 스킬로 만든 두 페이지가 자매처럼 보인다면, 스킬을 잘못 사용한 것입니다.
1. 최상위 규칙: AI 슬롭 제로
"AI 슬롭"은 기준 없이 생성된 콘텐츠를 드러내는 특징들의 집합입니다. 페이지가 기술적으로 정확하더라도 이로 인해 거부될 수 있습니다. 이 섹션은 다른 모든 미적 선택보다 우선합니다.
1.1 시각적 슬롭: 금지
| 금지 | 이유 | 해결 방법 |
|---|---|---|
| 보라색 또는 인디고에서 파랑으로의 그라데이션 | AI 템플릿의 시각적 시그니처 | 브랜드에서 파생된 팔레트, 색상별로 정의된 역할 |
| 모든 것에 글래스모피즘 | 기능 없이 적용된 효과 | 부동 네비게이션과 오버레이에만 블러 사용 |
| 로봇, 두뇌, 회로, 홀로그램, 칩 아이콘 | "AI"의 클리셰 | 도메인의 실제 객체 아이콘 (일정, 메시지, 차트) |
| 스톡 사진 | 일반적이고 식별 가능 | 절차적 텍스처, 제품 UI, 기술 일러스트레이션 |
| AI 생성 이미지 | 감지 가능하고 브랜드와 일관성 없음 | 위와 동일한 대안 |
| 이모지를 UI 아이콘으로 사용 | 유치해 보이고 구성을 망침 | 아이콘 시스템의 선 스타일 SVG |
| 회색 테두리가 있는 동일한 흰색 카드, 3×2 그리드 | 가장 흔한 템플릿 패턴 | 다른 풋프린트, 카드 내부의 시각적 콘텐츠 |
| 모든 섹션에서 반복되는 녹색 체크리스트 | 구성의 게으름 | 다양화: 목록, 비교, 썸네일, 데이터 |
| 옆에 아무것도 없는 큰 숫자 01 02 03 | 정보를 제공하지 않는 장식 | 해당 단계에서 일어나는 일의 썸네일과 함께 숫자 사용 |
| 배경의 화려한 블롭 | 기능 없는 장식 | 브랜드와 관련된 텍스처, 또는 아무것도 하지 않음 |
| 크고 회색인 단일 그림자 | 번짐처럼 보이고 깊이가 없음 | 계층적 그림자 (4.5 참조) |
| 어두운 성운 배경에 수직 광선과 청자색 플레어 | 한 시대의 기술 도구 페이지 전체의 시그니처. 복사는 당신이 어떤 연도와 어떤 틈새에서 복사했는지를 알리는 것 | 브랜드에서 파생된 분위기: 프로젝트의 텍스처, 각도 및 색상 |
| 흰색에서 라벤더와 분홍색으로의 그라데이션 제목 | 더 이상 마감 처리가 아니라 템플릿 마커가 됨 | 그라데이션은 프로젝트 팔레트에서 중간점을 가져오고 페이지에서 한 번만 사용 |
| "A, B, C, D를 대체합니다" 유형의 헤드라인 | 실제로 네 가지 카테고리를 대체하는 제품에만 효과적이며, 증명할 공개 데이터가 있어야 함. 다른 모든 경우에는 허세로 읽힘 | 10.4에서 헤드라인 패턴 참조 |
1.2 텍스트 슬롭: 금지
예외 없이 금지된 구두점:
| 문자 | 이름 | 대체 |
|---|---|---|
— | 대시 | 마침표, 쉼표 또는 콜론 |
– | 엔 대시 | 마침표, 쉼표 또는 범위의 "에서" |
· | 중간점 | 쉼표 또는 두 요소로 분할 |
… 장식용 말줄임표로 | 마침표 |
대시는 기계 생성 텍스트의 첫 번째 표시입니다. 문장을 다시 쓰세요. 공백이 있는 단일 하이픈으로 문자를 바꾸지 마세요. 같은 효과를 냅니다.
코드 블록과 명세에서는 중간점을 구분자로 사용하지 마세요: 레이블이 있는 줄로 나누세요.
금지된 문구 공식:
- "X가 아닙니다. Y가 아닙니다. Z입니다."
- "[상황]을 상상해보세요"
- "오늘날의 세상에서", "디지털 시대에", "점점 더"
- "변화시키다", "혁명을 일으키다", "끌어올리다", "잠금 해제하다", "극대화하다"
- "깊이 빠져들다", "함께 살펴보겠습니다", "방법을 알아보세요"
- 모든 것에 3항: 세 개의 형용사, 세 개의 불릿, 모든 섹션의 세 개의 열
- 기관 텍스트의 느낌표
- 중첩된 헤지: "잠재적으로 개선하는 데 도움이 될 수 있습니다"
긍정 규칙:
- 짧고 구체적인 문장, 제품 언어가 아닌 독자 언어로.
- 추상 명사 대신 동사 사용: "서비스 민첩성" 대신 "5분 내 응답".
- 출처가 있는 숫자만. 실제 데이터가 없으면 측정될 내용을 설명하세요.
- 완전하고 정확한 강세 표기. 강세 문자를 ASCII로 절대 바꾸지 마세요.
1.3 구조적 슬롭: 금지
가장 보기 어려운 오류: 모든 섹션이 동일한 패턴.
레이블 → 제목 → 단락 → 세 개의 동일한 카드
레이블 → 제목 → 단락 → 세 개의 동일한 카드
레이블 → 제목 → 단락 → 세 개의 동일한 카드
이것은 좋은 토큰과 좋은 애니메이션이 있어도 템플릿입니다.
변형 규칙: 어떤 섹션 형식도 연속으로 반복되지 않습니다. 페이지 전체에 걸쳐 최소 다섯 가지 형식을 번갈아 사용하세요:
- 인터페이스 썸네일이 있는 카드 그리드
- 옆에 동기화된 스테이지가 있는 세로 목록
- 제품 캡처가 있는 탭
- 하나의 지배적인 블록이 있는 벤토 그리드 구성
- 두 열 비교
- 타임라인 또는 단계별
- 기술 일러스트레이션이 있는 어두운 블록
- 테이블 또는 데이터 패널
1.4 프로세스 슬롭: 금지
- 참조를 측정하지 않고 기억에서 타이포그래피와 컴포넌트 구현.
- 브라우저에서 열어보지 않고 검증을 실행하지 않고 전달.
- 콘솔 오류가 있는 상태로 전달.
- 대비를 다시 계산하지 않고 이전 프로젝트의 값을 복사.
1.5 슬롭 테스트
전달하기 전에 답변하세요. "예"가 하나라도 있으면 불합격:
- 어떤 섹션이 이전 섹션과 동일한 패턴을 사용합니까?
- 보이는 텍스트에 대시, 엔 대시 또는 중간점이 있습니까?
- 어떤 이미지가 스톡 사진 또는 AI 생성기에서 왔습니까?
- 어떤 아이콘이 사물 자체를 나타내는 대신 "기술"을 나타냅니까?
- 로고와 팔레트를 바꾸면 페이지가 어떤 회사에도 적용될 수 있습니까?
- 출처 없이 나타나는 숫자가 있습니까?
질문 5가 가장 엄격합니다. 답변이 '예'라면 문제는 마감이 아닌 개념에 있습니다.
3. 11개 게이트 프로세스
어떤 게이트도 건너뛸 수 없습니다. 각 게이트에는 객관적인 종료 기준이 있습니다.
일정 조정, 참조 스튜디오가 발표한 내용 기반: 집중 리디자인 46주; 맞춤 제품 페이지 68주; 회사 또는 소프트웨어 사이트 8~12주. 신규 브랜드와 전체 페이지의 문서화된 사례는 약 7주와 600시간이 소요되었으며, 4주는 브랜드 및 디자인, 3주는 애니메이션 및 구축에 사용되었습니다. 마감 2일 전에 완료했으며, 그 2일을 레이아웃이 아닌 텍스트 조정에 사용했습니다.
범위는 페이지 수로 측정되지 않습니다. 재사용 가능한 패턴이 거의 없는 30페이지 사이트는 각 페이지마다 고유한 구조, 맞춤형 내러티브 및 복잡한 상호 작용이 있는 5페이지 경험보다 더 간단합니다. URL 수가 아닌 고유한 구성의 수로 추정을 안내하세요.
모든 규모에 적용되는 네 가지 프로세스 습관:
- 일반적인 채우기 텍스트는 비용이 많이 듭니다. 짧은 단락을 위해 제작된 레이아웃은 실제 텍스트가 기능, 대상 및 이점을 설명해야 할 때 작동하지 않습니다. 재작업은 가장 비용이 많이 드는 단계에서 발생합니다. 이것이 게이트 2가 존재하고 목업이 실제 텍스트를 사용하는 이유입니다.
- 시각적 단계는 전체 페이지로 시작하지 않습니다. 미래 시스템의 가장 중요한 요소를 포함하는 하나 또는 두 개의 핵심 구성으로 시작하여 모든 것을 그리지 않고 타이포그래피, 색상, 이미지, 구성, 컴포넌트 및 동작을 해결합니다.
- 디자인과 함께 코드, 나중에가 아닙니다. 결과가 더 나은 곳에서는 배턴 패스가 없습니다. 시각적 시스템을 만드는 동일한 그룹이 대화형 경험을 전달하며, 성능은 디자인의 일부로 처리됩니다. 많은 세부 사항은 정적 벡터에는 나타나지 않는 미묘함으로 구현에서만 살아납니다. 디자인 도구에서의 며칠은 좋은 아이디어를 생산하며, 아이디어는 전달되지 않습니다.
- 실제 콘텐츠로 테스트하세요. 긴 헤드라인, 번역된 텍스트, 이상한 이미지 비율 및 누락된 미디어는 매끄러운 디자인 파일에서는 보이지 않는 문제를 드러냅니다.
게이트 1. 브리핑 및 아이덴티티
이 게이트를 닫기 전에는 아무것도 디자인하지 마세요. 사용자에게 물어보세요. 답변이 없는 각 항목에 대해 두세 가지 옵션을 제안하고 확인을 요청하세요. 절대 조용히 가정하지 말고, 절대 예시의 아이덴티티를 상속하지 마세요.
1.1 비즈니스 및 목표
- 누가 이 페이지를 읽으며, 어떤 결정을 내려야 합니까?
- 페이지가 생성해야 하는 단일 행동은 무엇입니까?
- 업계에 법적 제약이 있습니까? (의료, 금융, 교육, 법률, 식품)
- 실제 결과 데이터가 있습니까, 아니면 숫자 인용이 금지됩니까?
1.2 시각적 아이덴티티: 수집 또는 제안
| 필드 | 사용자 질문 | 답변이 없는 경우 |
|---|---|---|
| 브랜드 색상 | 16진수 색상은 무엇입니까? 주 색상은 무엇입니까? | 섹션 4.2에서 2~3가지 방향을 제안하고 선택을 요청하세요 |
| 행동 색상 | 버튼이 사용해야 할 색상은 무엇입니까? | 브랜드 색상에서 파생하여 흰색과 4.5:1 대비를 통과할 때까지 어둡게 만드세요 |
| 타이포그래피 | 브랜드가 사용하는 글꼴은 무엇입니까? 웹 라이선스가 있습니까? | 섹션 4.3에서 2가지 페어링을 제안하고 선택을 요청하세요 |
| 시각적 어조 | 브랜드는 차분한가, 따뜻한가, 기술적인가, 우아한가, 활기찬가? | 물어보세요. 이것은 텍스처, 반경, 밀도 및 동작을 정의합니다 |
| 로고 | SVG 파일이나 투명 배경의 PNG가 있습니까? | 요청하세요. 없으면 선택한 타이포그래피로 텍스트 이름을 사용하세요 |
| 브랜드 매뉴얼 | 브랜드북이나 아이덴티티 가이드가 있습니까? 보내주실 수 있나요? | 요청하세요. 가장 풍부한 소스입니다. 없으면 로고와 색상으로 작업하세요 |
| 브랜드 그래픽 요소 | 브랜드만의 그래픽 패턴, 텍스처, 반복되는 모양, 그리드 또는 시각적 시그니처가 있습니까? 파일을 보내주실 수 있나요? | 이미지나 벡터를 요청하세요. 이들은 섹션 7의 텍스처 기반이 됩니다 |
| 기존 자료 | 프레젠테이션, 게시물, 포장재, 카탈로그 또는 이전 사이트가 있습니까? | 3~5개의 자료를 요청하세요. 이들은 매뉴얼이 항상 보여주지 못하는 실제 적용된 브랜드를 보여줍니다 |
| 제품 자료 | 화면, 자체 사진 또는 다이어그램이 있습니까? | 섹션 7에서 무엇을 만들지 정의하세요 |
| 참조 | 참조할 만한 페이지가 있습니까? | 있으면 게이트 3에서 측정하세요. 없으면 방향을 제안하세요 |
| 피해야 할 것 | 브랜드가 금지하는 색상, 스타일 또는 요소가 있습니까? | 물어보세요. 지금 아는 것이 더 저렴합니다 |
| 동작 수준 | 미묘함, 균형, 또는 표현적? | 기본값: 균형 |
| 음성 어조 | 공식적인가 직접적인가? 존댓말인가 반말인가? | 물어보세요 |
1.3 아이덴티티 시트
답변을 기록하세요. 이 시트는 게이트 4의 토큰 소스입니다.
프로젝트
페이지 목표:
단일 행동:
대상:
아이덴티티
주 색상: #
행동 색상: # 흰색 대비: ___:1
보조 악센트:
...(이하 생략)