Waitlist Page Skill - 대기자 페이지 스킬

대기자 페이지 스킬

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

작업 흐름

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

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

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

2. 입력에서 토큰 매핑 — 템플릿의 각 플레이스홀더(예: {{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())을 엄격히 따라야 합니다. ;, {}, <, >, 주석(/*), @, url(, 또는 외부 참조를 포함하는 입력은 CSS 인젝션을 방지하기 위해 강력히 거부하세요. #으로 감싸거나 추가 따옴표를 붙이지 마십시오. 예: rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. 있는 그대로 :root CSS 변수에 삽입하세요. --success는 DESIGN.md에 있으면 그 값을 도출하고, 그렇지 않으면 허용된 폴백 #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이 올바른 형식인지 검증하세요.
3. 토큰 매핑 규칙 확인 — 모든 색상 토큰은 이제 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}} (로고 이니셜용 대비 텍스트 색상)
4. 반응형 레이아웃 — 템플릿에는 모바일 우선 크기 조정이 포함되어 있습니다.
   • 375px: 폼이 단일 열로 쌓이고, 로고가 40px로 축소되며, 장식이 압축되고 가로 스크롤이 없습니다.
   • 768px: 편안한 2열 여백.
   • 1440px+: 넉넉한 공백이 있는 중앙 정렬 레이아웃.
   • 모든 텍스트가 읽기 쉬운 상태로 유지되고, 이메일 입력 및 버튼이 375×667 및 390×844에서 완전히 표시되는지(잘리지 않는지) 확인하세요.

검증: 내보내기 전 강화된 품질 게이트 실행

5. 품질 체크리스트 실행 — 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 게이트가 실패하면 사용자에게 문의하거나 토큰 매핑을 수정하고 다시 시도하세요.
6. P1 게이트 확인 (품질 제출을 위해 권장):
   • 제출 버튼의 호버 및 활성 상태
   • 명확한 피드백이 있는 폼 검증
   • 티커 애니메이션이 prefers-reduced-motion: reduce를 존중함
   • 모든 상호작용 요소에 가시적인 포커스 스타일이 있음 (input:focus에 outline 포함)
   • 탭/엔터 키보드 지원
   • 본문 텍스트(≥4.5:1) 및 버튼 레이블(≥4.5:1)에 대한 WCAG AA 대비
   • 로고 alt/aria-label 존재; 티커에 aria-hidden="true" 설정
   • <html lang=""> 설정됨

출력

7. 깔끔한 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, 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 체크리스트 게이트를 다시 실행하십시오. 반복 작업에서 검증을 건너뛰지 마십시오.