웨이팅리스트 페이지 스킬

출시 전 페이지는 미래 사용자와의 첫 악수입니다. 이 스킬은 집중되고 정직한 진입점을 구축합니다: 브랜드 아이덴티티, 만들고 있는 것, 그리고 얼리 리스트에 참여할 수 있는 하나의 명확한 경로. 인위적인 희소성, 가짜 카운트다운, 부풀리기 전술은 없습니다. 진정한 관심을 담은 깔끔한 모바일 우선 그릇일 뿐입니다.

워크플로우

사전 준비: 강화된 템플릿과 브랜드 기반 로드

브랜드 아이덴티티 로드 — DESIGN.md를 읽어 색상 시스템, 폰트 페어링, 공간 규칙을 파악합니다. 이것이 기반입니다. 웨이팅리스트 페이지는 그것이 대표하는 브랜드와의 일관성에 따라 성패가 갈립니다. DESIGN.md가 없으면 진행 전에 사용자에게 제공을 요청하세요.
재사용 가능한 템플릿 읽고 복사 — assets/template.html을 읽습니다. 이 템플릿은 모든 출력물의 견고한 시드입니다. index.html로 복사하여 베이스로 사용하세요. HTML을 처음부터 작성하거나 이 구조에서 벗어나지 마십시오. 템플릿에는 필요한 모든 레이아웃, 폼 구조, 장식, 포커스 스타일, 접근성 스캐폴딩이 내장되어 있습니다.

단계: 검증 및 이스케이프를 포함한 토큰 교체

입력에서 토큰 매핑 — 템플릿의 각 플레이스홀더(예: {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}})에 대해 아래 교체 규칙을 따르세요:
- 텍스트 토큰 ({{PRODUCT_NAME}}, {{TAGLINE}}): HTML 텍스트 노드나 속성 값에 삽입하기 전에 <, >, &, ", '를 HTML 이스케이프 처리합니다.
- HTML 토큰 ({{LOGO_MARK}}): 텍스트 이니셜을 사용하는 경우 기본적으로 HTML 이스케이프 처리합니다. 인라인 SVG를 사용하는 경우, 허용 목록을 사용하여 엄격히 살균해야 합니다: <script> 태그, 이벤트 핸들러(on*), <foreignObject>, 외부 참조(href, xlink:href, url()), 그리고 허용되지 않은 모든 속성/요소를 삽입 전에 제거합니다. SVG를 안전하게 살균할 수 없는 경우, 이스케이프된 텍스트 이니셜로 폴백합니다. 가공되지 않은, 살균되지 않은 임의의 HTML을 절대 방출하지 마십시오. SVG가 컨테이너 내에서 깔끔하게 크기 조정되도록 하십시오.
- 색상 표현 토큰 ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, {{DECO_EXPRESSION}}, {{STRIPE_EXPRESSION}}, {{SUCCESS_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{BTN_LABEL_EXPRESSION}}, {{TICKER_BG_EXPRESSION}}, {{TICKER_FG_EXPRESSION}}, {{DECO_STROKE_EXPRESSION}}, {{LOGO_SHADOW_EXPRESSION}}, {{LOGO_FG_EXPRESSION}}): 명시적인 색상 문법(#hex, rgb/rgba, hsl/hsla, oklch, 또는 로컬 변수만 사용하는 color-mix())을 엄격히 준수해야 합니다. CSS 주입을 방지하기 위해 ;, {}, <, >, 주석(/*), @, url(, 외부 참조가 포함된 입력은 엄격히 거부합니다. #으로 감싸거나 추가 따옴표를 붙이지 마십시오. 예시: rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. :root CSS 변수에 그대로 삽입합니다. DESIGN.md에 --success가 있으면 해당 값을 사용하고, 그렇지 않으면 허용된 폴백 #2D6A4F만 사용합니다.
- 폰트 이름 토큰 ({{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}): CSS font-family 값으로, 공백이 포함된 경우 이미 따옴표가 처리되어 있습니다(예: 'DM Sans', Syne). --font-display 및 --font-body 선언에 그대로 삽입하며, 추가 따옴표를 붙이지 마십시오.
- 폰트 URL 토큰 ({{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}): Google Fonts URL의 경우 공백을 +로 인코딩해야 합니다(예: DM+Sans, IBM+Plex+Serif). 삽입 전에 URL 형식이 올바른지 확인하십시오.
토큰 매핑 규칙 확인 — 모든 색상 토큰은 이제 CSS 변수에 있습니다:
- --bg = {{BG_EXPRESSION}} (예: #FDE8DF)
- --fg = {{FG_EXPRESSION}} (예: #1A1410)
- --accent = {{ACCENT_EXPRESSION}} (브랜드 배지)
- --deco = {{DECO_EXPRESSION}} (장식 기본)
- --deco-stripe = {{STRIPE_EXPRESSION}} (강조 줄무늬)
- --input-border = {{BORDER_EXPRESSION}} (불투명도가 포함된 전체 CSS 표현식)
- --success = {{SUCCESS_EXPRESSION}} 또는 #2D6A4F 폴백
- --btn-label = {{BTN_LABEL_EXPRESSION}} (버튼 텍스트 색상, 대비용)
- --ticker-bg = {{TICKER_BG_EXPRESSION}} (애니메이션 티커 배경)
- --ticker-fg = {{TICKER_FG_EXPRESSION}} (애니메이션 티커 텍스트)
- --deco-stroke = {{DECO_STROKE_EXPRESSION}} (SVG 획, 일반적으로 12~15% 불투명도로 음소거됨)
- --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (로고 컨테이너 그림자, 미묘한 전경 음영)
- --logo-fg = {{LOGO_FG_EXPRESSION}} (로고 이니셜용 대비 텍스트 색상)
반응형 레이아웃 — 템플릿은 모바일 우선 크기 조정을 포함합니다:
- 375px: 폼이 단일 열로 쌓이고, 로고가 40px로 축소되며, 장식이 압축되고, 가로 스크롤이 없습니다.
- 768px: 편안한 2열 여유 공간.
- 1440px+: 넉넉한 공백이 있는 중앙 정렬 레이아웃.
- 모든 텍스트가 읽기 쉬운지, 이메일 입력과 버튼이 375×667 및 390×844에서 완전히 보이는지(잘리지 않음) 확인합니다.

검증: 방출 전 강화된 품질 관문 실행

품질 체크리스트 실행 — references/checklist.md를 읽습니다. 방출 전에 모든 P0 관문을 검증합니다:
- 정확히 하나의 CTA(이메일 폼)
- 카운트다운 타이머, 가짜 사회적 증명, 이모지 없음
- 375px에서 가로 스크롤 없음
- 이메일 입력은 type="email" 및 required; 이름(성)에는 required 없음
- 폼은 novalidate를 사용하지 않음; JS는 checkValidity() 가드 사용
- 성공 메시지에 role="status" 또는 aria-live="polite"
- 모든 색상은 DESIGN.md 또는 허용된 폴백에서 가져옴; 발명된 hex 값 없음
- 모든 사용자 텍스트는 HTML 이스케이프 처리됨; 색상 토큰은 엄격한 문법을 준수; 폰트는 URL 인코딩됨
- P0를 통과하거나 방출하지 마십시오. P0 관문이 하나라도 실패하면 사용자에게 문의하거나 토큰 매핑을 수정하고 다시 시도하십시오.
품질 제출을 위한 P1 관문 확인(권장):
- 제출 버튼의 호버 및 활성 상태
- 명확한 피드백이 있는 폼 유효성 검사
- 티커 애니메이션이 prefers-reduced-motion: reduce를 존중
- 모든 상호작용 요소에 보이는 포커스 스타일 있음 (input:focus는 outline 포함)
- Tab/Enter 키보드 지원
- 본문 텍스트(≥4.5:1) 및 버튼 레이블(≥4.5:1)에 대한 WCAG AA 대비
- 로고 alt/aria-label 존재; 티커에 aria-hidden="true"
- <html lang=""> 설정

출력

깔끔한 HTML 방출 — 단일 파일, CSS 인라인, 그래픽은 SVG. 상호작용 요소에 data-od-id (헤드라인, 폼, 로고, 티커, 그리드 등)를 표시하여 에이전트가 파싱 없이 커스터마이즈할 수 있도록 합니다.

품질 관문

이 스킬은 규정 준수를 보장하기 위해 강화된 템플릿 기반 워크플로우를 적용합니다. 이 실행 경로를 따라야 하며, 템플릿에서 벗어나면 출력이 무효화됩니다.

필수 템플릿 기반 실행:

assets/template.html을 베이스로 읽습니다; HTML을 처음부터 작성하지 마십시오.
index.html로 복사하고 {{PLACEHOLDER}} 토큰만 검증/이스케이프된 값으로 교체합니다.
방출 전에 references/checklist.md의 모든 P0 관문을 실행합니다; 실패하면 수정하고 재검증합니다.

P0 관문 (반드시 통과):

단일 CTA: 이메일 폼이 유일한 상호작용 요소입니다. 탐색, 보조 버튼, 소셜 링크가 없습니다.
로고 위치: 왼쪽 상단에 고정, DESIGN.md의 강조 색상과 일치, 모바일에서 축소(50px → 40px).
색상 일관성: 모든 색상은 DESIGN.md 팔레트에서 가져옵니다. 허용된 유일한 하드코딩 예외: --success의 #2D6A4F.
안티 패턴 금지: 카운트다운 타이머, 가짜 사회적 증명, 이모지 아이콘, 로렘 입숨 없음.
콘텐츠 무결성: 헤드라인과 카피는 product_name 및 tagline 입력에 직접 연결됩니다—채우기용 카피 없음.
모바일 적합성: 375px에서 가로 스크롤 없음. 이메일 입력과 제출 버튼이 375×667 및 390×844에서 완전히 보입니다(잘리지 않음). 세로 오버플로는 스크롤 가능하며, 숨겨지지 않습니다.
타이포그래피 규율: 표시 + 본문 폰트만 사용(2폰트 규칙). 섹션 전체에 걸쳐 일관된 크기.
폼 구조: 두 개의 필드(이름(성) 선택 사항, 이메일 필수), checkValidity() 가드, role="status"가 있는 성공 메시지.
토큰 이스케이프: 모든 사용자 제공 텍스트는 HTML 이스케이프 처리됨; 색상 토큰은 엄격한 문법을 준수하며 안전하지 않은 문자(;, {}, <, >, /*, @, url()를 포함하지 않음; 폰트 이름은 URL 인코딩됨; {{LOGO_MARK}}는 이스케이프된 텍스트 이니셜 또는 엄격히 살균된 인라인 SVG(스크립트, 이벤트 핸들러, foreignObject, 외부 href 없음)입니다.

P1 관문 (품질 제출을 위해 통과 권장):

히어로 섹션이 시각적으로 구별되고 접힌 부분 위에 있습니다.
이메일 제출 버튼에 호버 및 활성 상태가 있습니다.
폼 유효성 검사가 명확한 피드백을 제공합니다.
모든 모바일 뷰포트에서 페이지 스크롤 가능(잘리지 않음); 스크롤 없이 CTA 보임.
prefers-reduced-motion: reduce에서 티커 애니메이션이 일시 중지/제거됩니다.
모든 상호작용 요소에 보이는 포커스 스타일(아웃라인, outline:none만으로는 안 됨)이 있습니다.
키보드: Tab이 각 폼 필드에 도달; Enter가 제출.
WCAG AA 대비: 본문 텍스트 ≥4.5:1, 버튼 레이블 ≥4.5:1.
로고 alt/aria-label 존재; 티커에 aria-hidden="true".
<html lang="">이 올바른 언어 코드로 설정됩니다.

장식 제한:

하단 영역은 방해 없이 강화합니다. 불투명도, 미묘한 획, 음소거된 애니메이션.
뷰포트 높이의 20%를 초과하는 그라데이션 없음.
코일, 줄무늬, 그리드 또는 티커는 모두 DESIGN.md의 색상만 사용합니다.

출력

references/checklist.md의 모든 P0 관문을 통과한 후에만 방출합니다.

태그 사이에 아티팩트를 방출합니다:

<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>

아티팩트 위에 한 줄의 설명; 아래에는 아무것도 없음.

방출 후: 사용자가 변경을 요청하면 index.html을 제자리에서 업데이트하고 다음 버전을 방출하기 전에 P0 체크리스트 관문을 다시 실행하십시오. 반복 시 검증을 건너뛰지 마십시오.

웨이팅리스트 페이지