ralvarez-ai/landing-page-designer

랜딩 페이지 디자이너 (제안 라운드)

랜딩 페이지를 라운드로 제안하는 방법, 각 결정의 근거, 그리고 페이지가 공개되기 전에 반드시 통과해야 하는 검사 항목들입니다. 이 스킬의 상위 단계: website-concept-architect (사이트의 목적 정의). 하위 단계: ui-ux-architect (앱으로 포팅).

0. 작업과 그 외의 것

• 그리기, 리팩터링 금지. 출력물은 <proposals-dir>/<date>/<product>/ 디렉토리 아래의 제안서입니다. 앱의 배포 코드를 건드리지 마십시오. 소유자가 요청하지 않는 한 커밋하거나 푸시하지 마십시오.
• 페이지는 검증 막대(섹션 8)를 통과하고 그 주장이 추적 가능(섹션 2)할 때만 완료된 것으로 간주합니다.
• 라운드 방식으로 작업합니다. 각 라운드는 새로운 방향성을 생성하고, 이전 방향성은 아이디어 라이브러리로 유지하며, 추천과 그 이유로 마무리됩니다.

1. 기준 ("인상적이다"의 의미)

모든 스크린샷을 다음 목록에 따라 평가합니다.

1. 5초. 낯선 사람이 첫 뷰포트만 보고도 제품이 무엇을 하는지, 누구를 위한 것인지, 무엇이 다른지 말할 수 있어야 합니다.
2. 하나의 장치. 페이지는 색상이 아닌 제품 고유의 하나의 장치로 기억됩니다. 좋은 장치는 문자 그대로입니다: 로고 안의 커서를 실제 커서로 사용; 움직이는 실제 숫자; 실제로 이루어지는 두 번의 호출로 표시되는 에이전트-서버 교환; 카피가 말하는 순간 정확히 도착하는 푸시 알림.
3. 구체적, 추상적이지 않음. 모든 주장은 제품 또는 그 코드의 무언가를 가리킵니다.
4. 실제 픽셀이 그림보다 우선. 실행 중인 제품의 잘린 스크린샷이 어떤 그림보다 낫습니다.
5. 트레이드오프를 명시. 카피는 무엇을 하는지, 누구를 위한 것인지, 그리고 무엇을 대가로 받아들이는지 명시합니다 (자체 호스팅: 사용자의 업데이트와 백업; 하나의 공유 서비스: 하나의 추가 종속성; 전달 전용: 정책은 앱에 유지).
6. 금지: 스톡 사진, 보라색 그라데이션, 각각 아이콘이 있는 회색 카드의 벤토 그리드, "10,000개 팀이 신뢰함", 가짜 사용후기, 가짜 지표.

2. 먼저 조사: 출처가 있는 사실

그리기 전에 제품별로 사실 테이블을 구축합니다: 주장, 값, 출처 파일. 마케팅이 아닌 코드를 읽으십시오.

• 찾아볼 곳: README.md, AGENTS.md/CLAUDE.md, 디자인 문서 및 ADR, CHANGELOG.md, 유효성 검사기 및 오류 코드, 도구/엔드포인트 등록, 와이어/프로토 매핑, 워커/재시도 상수, 브랜드 마크 컴포넌트, 테마 토큰 파일, 기존 랜딩 뷰.
• 찾을 가치가 있는 사실: 정확한 도구 이름과 그중 파괴적인 도구의 수; 오류 코드 및 메시지; 상수 (재시도 횟수, 백오프 기본 및 최대값, 폴링 간격, 신뢰 한도); 요청 필드 (문서가 아닌 와이어 매핑에서 개수를 셉니다); 라우트; 실제 빠른 시작 명령어.
• 코드에서 개수와 이름을 확인하십시오. 문서는 표류합니다. 문서화된 "6개 필드"는 코드에서 8개일 수 있습니다. README는 더 이상 존재하지 않는 디렉토리를 가리킬 수 있습니다. 히어로 예제는 서버가 거부하는 단위를 사용할 수 있습니다.
• 플래그 표시, 조용히 수정하지 마십시오. 불일치 사항(캡처의 브랜딩 오래됨, 일치하지 않는 캡처, 문서와 코드 간의 차이)은 NOTES.md에 기록하고, 관련이 있으면 페이지에도 표시합니다.
• 페이지에 예시 데이터를 레이블링합니다 (샘플 항목, ID, 시간, 알림 텍스트). 독자는 노트 없이도 실제 데이터와 샘플을 구분할 수 있어야 합니다.

3. 브랜드 및 패밀리

• 각 제품은 고유한 마크와 악센트를 유지합니다. 컴포넌트에서 실제 마크 경로를, 토큰 파일(두 테마 모두)에서 실제 토큰(배경, 텍스트, 음영, 악센트, 악센트 텍스트, 의미론적 색상)을 복사합니다.
• 글꼴: 제품 자체의 것만 사용하고, fonts/에 woff2로 복사합니다. 타입 보이스를 선택하기 전에 검사하십시오:

  python -c "from fontTools.ttLib import TTFont; t=TTFont('inter-latin.woff2'); print([(a.axisTag,a.minValue,a.maxValue) for a in t['fvar'].axes])"
  

  전체 무게 범위로 선언된 가변 글꼴은 하나의 제품에 헤어라인 숫자를, 다른 제품에 키네틱 헤비 웨이트를 제공할 수 있으며, 새 글꼴이 필요하지 않습니다.
• 조직 브랜드 키트는 패밀리이지 템플릿이 아닙니다. 작은 공유 세부 사항(킥커 마크, currentColor의 푸터 크레딧)에 사용하고, 제품의 정체성으로 사용하지 마십시오.
• 패밀리 레이어: 간격, 타입 및 모션 토큰, 헤더, 버튼, 킥커, 섹션 레일, 필름 컨트롤, 복사 버튼, 푸터 및 모션 키트를 포함하는 하나의 공유 파일입니다. 제품은 색상, 타입 보이스 및 구성을 재정의합니다. 여러 페이지는 뚜렷한 개성을 가진 형제처럼 읽혀야 합니다.

4. 제품별 아트 디렉션

레이아웃 전에 개성을 결정하고, 그것이 타입, 그리드, 색상 무게 및 속도를 주도하게 하십시오. 작동했던 예시:

개성	타입 보이스	구성 및 속도
차분하고 편집적 (금융)	가벼운 무게의 거대한 히어로 피규어와 표 형식 숫자; 원장 라인용 모노	넉넉한 여백, 비대칭 그리드, 나이트 밴드, 하나의 전체 너비 실제 캡처
시끄럽고 키네틱 (피트니스)	블랙 무게, 좁은 네거티브 트래킹, 큰 숫자	전체 너비 악센트 밴드와 티커, 단단한 규칙, 시끄럽고 조용한 섹션 교대
기술적이고 정확함 (아이덴티티)	모노 콜아웃, 큰 모노 숫자	헤어라인 그리드 그라운드, 번호가 매겨진 그림과 캡션, 주석이 달린 다이어그램
간결하고 리드미컬 (알림)	거대한 모노 상태 단어	반복되는 모티브로서의 시간 눈금자, 네거티브 스페이스, 고정된 섹션

• 기본 스켈레톤 (눈썹, h1, 리드, 두 개의 버튼, 신뢰 목록, 글로우)은 의도적으로 변경하지 않는 한 사용하지 마십시오. 모든 제품이 하나의 스켈레톤을 공유하는 라운드는 실패한 것입니다.
• 긴 페이지는 영화처럼 속도를 조절하십시오: 조용한 섹션, 시끄러운 섹션, 하나의 전체 너비 순간, 어두운 밴드, 배경 변경. 균일한 간격은 이어 붙인 것처럼 읽힙니다.
• 390px을 의도적으로 디자인하십시오: 휴대폰용 캡처를 직접 크롭하고, 축소 대신 재배치(스택, 사이드 버스)되는 다이어그램, 접힌 부분 위의 필름 콘텐츠.
• 연락처 시트 확인: 모든 제품의 첫 번째 뷰포트를 나란히 렌더링합니다(두 테마 모두, 1440 및 390). 동일함과 패밀리 간의 차이를 찾으십시오.

5. 히어로 필름

제품당 하나의 안무된 시퀀스로, 4~8초 안에 제품을 설명하고 정적 최종 상태로 안정화됩니다.

• 최종 상태는 일반 HTML입니다. JS가 꺼져 있고 Reduced Motion이 활성화되면 즉시 표시됩니다. 필름은 이를 향해만 애니메이션됩니다(시작 상태를 위한 reset() 단계, [ms, fn(instant)] 단계, end() 정리).
• 뷰당 한 번 재생되며, 절대 반복되지 않습니다. 탭이 숨겨지면 일시 중지됩니다. 보이는 Pause/Replay 컨트롤이 있습니다(WCAG 2.2.2). 필름 내 입력은 필름 타임라인에 의해 구동되므로 Pause가 필름도 함께 정지시킵니다.
• 시퀀스의 진실을 말하십시오. 실제 동작을 줄거리로 사용하십시오: 요청 → 실제 오류로 거부 → 재전송 → 저장됨; 세 개의 복사본 → 하나; 대기열 → 폴링 → 전송. 데이터가 지원하지 않는 하이라이트를 가짜로 만들지 마십시오.
• 공유 요소 이동 (히어로 피규어로 날아드는 합계, 하나의 데이터베이스로 날아드는 테이블)은 공개 목록 대신 하나의 장면을 만듭니다.
• 접근 가능한 텍스트: 보이는 타이핑 레이어는 aria-hidden입니다. 전체 문장은 한 번 .sr 스팬 안에 있습니다.

6. 모션 규칙

• 게이트: 콘텐츠는 기본적으로 보입니다. 헤드 스크립트는 prefers-reduced-motion이 허용할 때만 html.anim을 추가합니다. 모든 숨기기 또는 애니메이션 규칙은 .anim 아래에 있습니다.
• 일회성 공개(IntersectionObserver, 1로 끝남)에서만 불투명도를 사용합니다. 스크롤 연결 효과(animation-timeline: view()/scroll(), 스티키 스크러빙)는 변형, clip-path 또는 스트로크만 애니메이션합니다. 반투명 텍스트 상태는 axe에서 대비를 실패합니다.
• 허용됨: 정적 폴백이 있는 CSS 스크롤 기반 애니메이션, 테마 전환용 View Transitions(토글에서 원형 와이프), CSS linear() 스프링, 가변 무게 애니메이션, 모션이 꺼져 있을 때 최종 텍스트를 쓰는 카운트 업.
• 자동으로 움직이는 콘텐츠(티커, 자동 재생)에는 일시 중지 컨트롤이 필요하며 호버/포커스 시 일시 중지되어야 합니다.
• 레이아웃 시프트를 측정하고 카운터와 타이핑된 텍스트를 위해 공간을 확보하십시오.

7. 캡처

• 실행 중인 제품에서만, 절대 목업이 아닙니다. 데모 데이터를 결정론적으로 시드하여 캡처 간에 숫자가 일치하도록 하거나(또는 그렇지 않다고 페이지에 명시), 그렇게 하십시오.
• 의도적으로 크롭 (포인트당 하나의 패널), 두 테마 모두, 2배, 별도의 휴대폰 크롭.
• 오래된 브랜딩을 크롭하고 플래그를 표시하십시오. 페이지의 UI 언어와 다를 때 캡션에 명시하십시오.
• height:auto, 의미 있는 alt, 그리고 캡처의 좌표 공간에 위치한 마커(측정 필요, 마커는 떠다님)가 있는 라이트/다크 <img> 쌍으로 구현하십시오.
• 빌드가 차단된 경우(비공개 패키지, 누락된 토큰), 그렇게 명시하고, 그려진 데이터를 예시로 레이블링하고, 정확한 차단 해제 목록을 작성하십시오.

8. 하드 요구 사항 및 검증 막대

모든 페이지:

• 자체 포함된 HTML, 인라인 CSS 및 SVG, CDN 없음, 제품의 글꼴만 사용; 캡처 제외 200KB 미만.
• data-theme을 통한 라이트 및 다크 테마 전환(저장된 선호도, 시스템 기본값).
• 랜드마크, 하나의 h1, 간격 없는 제목 순서, 스킵 링크, focus-visible, 44px 대상, forced-colors 폴백.

검사(누군가에게 보여주기 전에 모두 통과해야 함):

1. verify.js: axe-core(wcag2a/2aa/21aa/22aa + 베스트 프랙티스)를 390x844 및 1440x800 × 라이트/다크 × 모션/축소 = 8회 실행, 위반 제로. 모션 모드에서는 공개가 실행되도록 먼저 전체 페이지를 스크롤하십시오. 또한: 가로 스크롤 없음; 이미지 차단 시에도 읽기 가능; JS 꺼져도 읽기 가능.
2. HTML 파서 검사로 삼켜진 텍스트 확인: 텍스트 내의 원시 <token> 또는 <no-reply@…>는 태그가 되며 axe는 알려주지 않습니다. <로 이스케이프하십시오.
3. 스모크 테스트 페이지당: 1440 및 390에서 모든 컨트롤을 클릭하고, pageerror 시 실패, 대화형 종료 상태(대화상자 열림, 적용 후)에서 axe 재실행.
4. 스크린샷: 안정화된 필름 및 축소 모션, 두 테마, 두 너비. 이를 살펴보고 엄격한 아트 디렉터로서 최소 두 번 반복하십시오.
5. 다루지 않는 것을 명시하십시오: 스크린 리더, Safari/Firefox, 실제 기기, 5초 주장의 사용자 테스트.

9. 함정 (각 항목은 시간 소모)

• CSS 특이성: 이미지용 테마 전환 규칙은 컴포넌트 규칙을 이겨야 합니다(.crop img 대신 img.sl).
• 숨겨진 요소 측정은 0을 반환합니다(렌즈, 줌): 표시한 다음 측정하십시오.
• 불투명도로 흐려진 비활성 단계는 대비에 실패합니다: 대신 테두리/배경으로 강조하십시오.
• role="list"는 listitem 자식이 필요합니다. 섹션 제목은 h1에서 h3로 건너뛰지 않아야 합니다.
• 글로우/메쉬 배경은 전체 너비, 마스크 및 body{overflow-x:clip}가 필요합니다.
• 그리드 셀의 나눌 수 없는 <code>는 390에서 가로 스크롤을 유발합니다. 스크롤 가능한 pre는 scrollable-region-focusable을 실패합니다(tabindex="0", role="region" 및 고유 레이블을 제공하거나 pre-wrap 사용).
• 일반 클래스 이름은 공유 및 제품 CSS 간에 충돌합니다(.tl, .copy): 패밀리 클래스를 네임스페이스하십시오.
• cqw는 조상 컨테이너에 대해 확인되며, 요소 자체에 대해 확인되지 않습니다.
• 표시 텍스트와 다른 aria-label은 label-in-name을 위반합니다: 추가 컨텍스트를 .sr 스팬에 넣으십시오.
• f 접두사가 없는 Python 템플릿 문자열은 {label}를 접근 가능한 이름으로 누출합니다: 출력을 grep하십시오.
• loading="lazy" 이미지는 전체 페이지 스크린샷에서 누락됩니다. 결함이 아닙니다.
• 추출로 조립된 페이지는 어셈블러가 다시 실행될 때까지 소스가 변경되어도 업데이트되지 않습니다.

10. 프로세스

1. 읽기 브리프/핸드오프, 제품 코드 및 문서; 사실 테이블과 플래그 구축(섹션 2).
2. 브랜드 인벤토리: 마크 경로, 토큰, 글꼴(축), 기존 캡처 및 문제점.
3. 방향성 라운드: 제품당 3개의 작고 다른 방향성, 각각 하나의 장치를 중심으로 구축. 아이디어 라이브러리로 유지.
4. 소유자 피드백 → 최상의 아이디어를 긴 페이지로 결합(섹션 레일, FAQ, 복사 버튼이 있는 실제 빠른 시작, "수락하는 것" 블록).
5. 천장 높이기: 먼저 공유 패밀리 레이어, 그 다음 제품당 하나의 아트 디렉션 페이지와 히어로 필름. 독립 제품은 병렬로 구축 가능(제품당 하나의 에이전트, 패밀리 레이어 읽기 전용, 제안 사항은 보고되어 한 번 적용된 후 모든 페이지가 재구축 및 재검증됨).
6. 함께 검토: 연락처 시트, 패밀리 레이어의 일관성 수정, 전체 재검증.
7. 전달: 제품당 NOTES.md (개념, 실제 vs 샘플, 플래그, 검증 테이블); 다음 세션을 위한 HANDOFF.md (목표, 결정, 플래그, 약점, 다음 아이디어); 글꼴과 캡처가 인라인된 보기 전용 독립형 미리보기; 제품당 하나의 추천과 그 이유가 포함된 짧은 요약.

11. 파일 및 도구

<proposals-dir>/<date>/
  HANDOFF.md                  다음 세션을 위한 브리프
  <product>/direction-N.html  페이지; NOTES.md; fonts/; shots/
  _tools/verify.js            axe x8, 오버플로우, 이미지 차단, JS 꺼짐
  _tools/family.py            공유 셸, 토큰, 모션 키트 (필름, 카운트, 타입, onView)
  _tools/build_<product>.py   제품당 하나의 생성기
  _tools/settled.js           필름 안정화 후 스크린샷
  _tools/standalone.py        글꼴 및 캡처가 인라인된 보기 전용 복사본
  _tools/smoke_<product>.js   상호 작용 스모크 테스트

생성기는 생성된 세션의 하드 코딩된 경로를 전달합니다. 실행하기 전에 sys.path와 출력 경로를 수정하십시오. verify.js는 형제 verify/node_modules에 설치된 [email protected]을 기대합니다.

12. 페이지를 보여주기 전 체크리스트

• 첫 번째 뷰포트가 5초 테스트를 통과합니다. 하나의 장치가 거기에 보입니다.
• 모든 숫자와 이름이 파일로 추적됩니다. 샘플 데이터가 페이지에 레이블링됩니다. 플래그는 NOTES.md에 있습니다.
• 트레이드오프가 명확하게 명시되고 시각적 가중치가 부여됩니다.
• 히어로 필름이 안정화됩니다. 최종 상태는 기본 HTML입니다. Pause/Replay가 작동합니다. 축소 모션 및 JS 꺼짐이 정상적으로 읽힙니다.
• 스크롤 연결 효과는 변형/clip/스트로크만 사용합니다. 공개는 일회성입니다.
• 390px가 디자인되었습니다(자체 크롭, 재배치된 다이어그램), 단순히 쌓인 것이 아닙니다.
• verify.js ALL CLEAN (8회 실행), 파서 검사 깔끔, 스모크 테스트 깔끔, 200KB 미만.
• 두 테마, 두 너비의 스크린샷을 보고, 본 내용 때문에 무언가를 변경했습니다.