Pre-launch 대기자(Waitlist) 모집 랜딩

Pre-launch 대기자(Waitlist) 모집 랜딩

다음 달에 남는 돈을 먼저 보는 도구를 만들면서, 만들기 전에 쓸 사람을 먼저 모으는 지면입니다. 화면의 신청자 수 · 접수 원장 · 초대 일정은 모두 예시 데이터이며 실존 서비스가 아닙니다.

Quick Start

index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 — Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.

서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는 http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.

Folder Structure

sol-01-prelaunch-waitlist/
├── index.html              첫 화면
├── pages/                  나머지 모든 쪽
├── styles/                 tokens · base · components · sections · theme (순서 고정)
├── scripts/                main.js + logic/(순수 계산 · DOM 을 모른다)
├── assets/                 images · icons · fonts · data
├── contract/               백엔드 이관 계약 — 스키마 · 엔드포인트 · 컴포넌트 매핑
├── manifest.webmanifest    PWA
└── sw.js                   오프라인 캐시

Customize

Brand colors

styles/theme.css §1 의 CSS 변수만 바꾸면 전체 색이 따라옵니다 (styles/tokens.css 는 공용 기본값이고 theme.css 가 그 위에서 이깁니다). styles/theme.css 상단 §1 에 이 템플릿의 팔레트와 대비 실측표가 있습니다. 색을 바꿀 때는 그 표의 수치를 다시 재세요 — 본문 4.5:1, 큰 글자 3:1 이 기준입니다.

Fonts

assets/fonts/fonts.css 에서 바꿉니다. 서체 파일은 전부 이 폴더에 들어 있고 외부 CDN 을 호출하지 않습니다. 세 서체가 역할별로 갈려 있습니다 — 표제는 Sora, 본문 라틴은 Inter, 숫자는 Space Grotesk 입니다. 숫자 서체는 unicode-range 로 숫자·자릿점·콜론만 담당하므로 한글 라벨의 자간을 건드리지 않습니다. 자릿수를 세로로 견주는 표에서 그 분리가 값을 세웁니다. 한글은 기기의 시스템 고딕으로 그립니다 — 그 사유는 파일 머리말에 적혀 있습니다.

Unique design

styles/theme.css 가 이 템플릿의 개성입니다. 레이아웃 골격 · 형태 · 밀도 · 시그니처 인터랙션이 모두 여기 있고, 파일 안에 왜 그 값인지가 주석으로 적혀 있습니다.

Pages

Browser Support

Chrome · Edge · Safari · Firefox 최신 2개 버전.

이 템플릿이 의존하는 것 — 아래는 실제로 코드에서 쓰는 것만 적었습니다.

쓰지 않는 것 — <dialog> · popover · 컨테이너 쿼리(@container) · animation-timeline · color-mix() · :has() 는 저작 코드에 한 줄도 없습니다. (styles/tokens.css 와 styles/components.css 의 공용 부분에 color-mix() 와 popover 규칙이 남아 있지만 이 지면의 마크업이 그 선택자를 쓰지 않습니다.)

색 모드: dark-only. 이 지면은 라이트 모드를 갖지 않습니다 — 어두운 바탕이 이 화면의 전제입니다. OS 를 라이트로 두어도 지면색이 바뀌지 않고, 테마 토글 버튼도 없습니다.

JavaScript 를 끄면 접수 전 상태의 접수증(접수 번호 「미발급」 · 내 차수 「신청 후 표시」 · 초대 일시)과 접수 원장 12주, 차수 세 줄, 추천 환산표, 진행 순서가 전부 그대로 읽힙니다. 빈 칸도 0 도 남지 않습니다. 사라지는 것은 접수 번호 발급 · 초 단위 남은 시간 · 차수를 골라 다시 계산하는 것 · 추천 링크 발급뿐입니다.

Accessibility

• 색 대비 — 본문 4.5:1 이상, 큰 글자 3:1 이상 (실측)
• 터치 타깃 44×44px 이상, 인접 컨트롤은 간격까지 포함해 판정
• 키보드 — Tab 순서, 본문 건너뛰기 링크
• prefers-reduced-motion · prefers-reduced-transparency · prefers-reduced-data 대응
• 모든 이미지에 alt 와 명시적 width/height (레이아웃 이동 0)

Credits / License

서체와 이미지의 출처·라이선스는 CREDITS.md, 템플릿 자체의 이용 범위는 LICENSE.md 를 보세요.

이 압축 파일에 함께 들어온 것

템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.

이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.

Built with Sogorox Factory