Loading...
Back to TemplatesSocial & Matching
Social & Matching
UI Skeleton
나란히 사전 등록 명단
감각과 속도가 다른 사람들이 서로를 만나는 자리. 2027년 3월에 엽니다.
0.0/0 ratings
S
Authored by Sogorox LabsTags
#PWA#ui-skeleton#template
0Downloads
23Views
1
Select a Plan
Select a plan on the left to review order details and complete your purchase on the right.
Selected
Free
$0
Free to use. Footer credit link required.
Free to use. Footer credit link required.
Community support
2
Order Summary
Selected Item
Free
$0
Free to use. Footer credit link required.
Subtotal$0
Total$0
Free During Beta · Attribution Required
Footer credit preview
Built with Sogorox
This link will appear in your site footer. Remove with Pro license.
Readme
나란히
특정 커뮤니티를 겨냥한 데이팅 앱의 사전 등록(Waitlist) 랜딩 한 장. 이메일만 받는 회신란과, 초대가 순번을 얼마나 당기는지 숫자로 보여 주는 순번 예보가 들어 있습니다.
Quick Start
index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 —
Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.
서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는
http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.
Folder Structure
soc-01-niche-dating-landing/
├── 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/tokens.css 의 CSS 변수만 바꾸면 전체 색이 따라옵니다.
styles/theme.css 상단 §1 에 이 템플릿의 팔레트와 대비 실측표가 있습니다.
색을 바꿀 때는 그 표의 수치를 다시 재세요 — 본문 4.5:1, 큰 글자 3:1 이 기준입니다.
Fonts
assets/fonts/fonts.css 에서 바꿉니다. 서체 파일은 전부 이 폴더에 들어 있고
외부 CDN 을 호출하지 않습니다.
Unique design
styles/theme.css 가 이 템플릿의 개성입니다. 레이아웃 골격 · 형태 · 밀도 ·
시그니처 인터랙션이 모두 여기 있고, 파일 안에 왜 그 값인지가 주석으로
적혀 있습니다.
Pages
| 쪽 | 용도 |
|---|---|
index.html | 표지 · 이야기 · 세 걸음 · 순번 예보 · 후기 · FAQ · 하단 회신란 |
pages/community.html | 누구를 위한 앱인가 — 여덟 자리와 운영 원칙 |
pages/safety.html | 받는 것과 받지 않는 것 — 처리 항목 표 12행 + 메일 발송 원칙 |
pages/faq.html | 자주 묻는 것 열 가지 |
pages/legal/privacy.html | 개인정보 처리 방침 (요약 + 제1조~제9조) |
pages/legal/terms.html | 이용 조건 (요약 + 제1조~제8조) |
pages/system/404.html | 없는 주소 |
pages/system/offline.html | 연결이 끊겼을 때 (서비스 워커가 띄웁니다) |
pages/system/thank-you.html | 이름을 올린 뒤 |
Browser Support
Chrome · Edge · Safari · Firefox 최신 2개 버전.
이 템플릿이 실제로 쓰는 것:
- CSS
@layer(tokens → base → components → sections → theme 순서 고정) - CSS 논리 속성 (
inline-size·border-block-start·padding-inline) - CSS
counter()— 표지의 번호 붙은 세 줄 color-mix()— 공용 토큰의 파생 상태값에만 (styles/tokens.css)- 네이티브
<details>/<summary>— FAQ. 자바스크립트 없이 열립니다 IntersectionObserver— 진입 모션. 없으면 모션 없이 그대로 보입니다- Service Worker +
manifest.webmanifest— 오프라인 열람
쓰지 않는 것: <dialog> · 컨테이너 쿼리 · animation-timeline · 번들러 · 외부 자바스크립트
색 모드: light-only. 이 지면은 인쇄물(개업 예고 엽서)의 재현이라 다크 모드를
넣지 않았습니다. OS 가 다크를 요구해도 지면색이 유지됩니다 (styles/theme.css §1).
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 를 보세요.
이 압축 파일에 함께 들어온 것
템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.
| 파일 | 내용 |
|---|---|
LICENSE.md | pro 에디션 이용 약관 — 재배포·재판매 범위가 여기 있습니다 |
CREDITS.md | 서체와 이미지의 출처·라이선스 |
CHANGELOG.md | 이 템플릿의 변경 이력 |
.cursorrules | AI 편집기(Cursor · Claude Code · Cline)가 읽는 편집 규칙 — 디자인 토큰만 쓰기, BEM 이름, WCAG 2.2 AA 기준을 어시스턴트가 따릅니다 |
.provenance.json | 빌드 출처와 지문 (저작권 증빙용. 지워도 템플릿은 그대로 동작합니다) |
assets/preview.webp | 맨 위의 첫 화면 캡처 |
이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.