웨이브 Wavve
#1B1B1B 한 겹 위에 496px 캐러셀 행 스무 개, 가장 큰 글자가 24px인 목록 지면.
웨이브는 어두운 지면(#1B1B1B) 위에 콘텐츠 행을 496px 간격으로 스무 개 쌓아 올린 OTT 홈입니다. 눈에 띄는 특징은 큰 글씨가 아예 없다는 점으로, 세 페이지를 통틀어 가장 큰 텍스트가 24px이고 제목 자리는 전부 캐러셀 행의 이름표가 차지합니다. 그래서 국문 히어로나 대형 제목을 참고할 자료로는 맞지 않고, 다크 지면에서 포스터·배너·목록을 어떤 간격과 위계로 쌓는지, 요금(이용권) 표와 긴 고지 문구를 어떻게 정리하는지를 볼 때 참고하기 좋습니다. 다만 이 사이트는 문서 자체가 스크롤하지 않고 body가 스크롤 컨테이너인 앱 셸 구조라, 페이지 길이를 재는 방식이 일반 웹사이트와 다릅니다.
https://www.wavve.comColor Palette
Primary
Label
Fill
Background
Static
Accent
Typography
Noto Sans KR Regular · 400heading·body·ui·caption — 한글 97.0%, 라틴·숫자도 동일
Noto Sans KR Bold · 700강조 — 이용권 상품명·표 헤더·배지
Apple SD Gothic Neo · 400폴백 잔재
Type Scalepx 기준은 1440(layout + 직접 재측정)이고 count는 raw(1920) typography
section-title24px · 400 · 1.5
다람쥐 헌 쳇바퀴
product-name24px · 700 · 1.5
다람쥐 헌 쳇바퀴
price24px · 400 · 1.5
다람쥐 헌 쳇바퀴
sub-title20px · 700 · 1.4
다람쥐 헌 쳇바퀴
nav18px · 400 · 4.11
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.43
다람쥐 헌 쳇바퀴
footer-link13.3333px · 400 · 2.4
다람쥐 헌 쳇바퀴
legal12px · 400 · 0.92
다람쥐 헌 쳇바퀴
badge12px · 700 · 1.83
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR Regular / Bold — 자체 호스팅 웹폰트(noto-sans-kr-regular-5dd802f9.woff2 · noto-sans-kr-bold-4c71a7ae.woff2, CDP isCustomFont=true). 한글 6,853글리프 중 Regular 97.0%(6,645) · Bold 3.0%(208) |
| hangulWeights | 400 주력 6,633글리프 · 700 보조 197글리프. medium(500) woff2가 font URL 목록에 있으나 3페이지에서 로드되지 않았고(@font-face 4페이스 중 2페이스만 로드) 500 웨이트로 렌더된 한글은 0글리프다 |
| body | 16px/400 lh 24px(1.50) 자간 normal — 이용권 페이지 48회. 웨이브온에서는 같은 16px/400에 자간 −0.3px(−1.9%)이 16회 붙는다 |
| sub | 14px/400 lh 20px(1.43). 이용권 고지 본문은 자간 −0.5px(−3.6%) 61회, 같은 크기의 다른 줄은 normal 13회로 갈린다 |
| label | 13.3333px/400 lh 32px(푸터 링크·셀렉트 6회) · 12px/400 lh 11px(0.92, 사업자 정보 12회) · 12px/700 lh 1.83(배지 4회) |
| mixing | 한 서체가 국문·영문·숫자를 모두 그린다. 혼용 노드 220개를 전부 프로브해(mixedProbed 220/220) 갈라 보면 라틴도 Noto Sans KR Regular 3,374 · Bold 65글리프이고 Apple SD Gothic Neo 7글리프만 폴백 잔재다. 별도 영문 서체가 없으므로 ‘LIVE’·‘TOP 20’ 같은 라틴 조각이 국문과 같은 획 굵기·같은 높이로 붙는다 |
| hangulHeadings | **없다.** 1440 실측 3페이지 최대 텍스트가 24px이다 — 홈 캐러셀 행 제목 24px/400 lh36 자간 normal 20개, 이용권 상품명 24px/700 lh36 3개, 페이지 h1(‘이용권’·‘웨이브온 이용권’)도 24px/400이다. 40px 이상 국문 제목이 한 곳도 없고 히어로 배너에는 텍스트 자체가 18자뿐이다. raw(1920)의 36px/700 1회는 텍스트가 비어 있는 요소라 제목이 아니다 |
| verdict | 국문 히어로·대형 제목 레퍼런스로 부적합(최대 24px). 다크 지면 목록형 국문 UI 조판(24/400 행 제목 + 16/400 lh1.50 본문 + 14/400 lh1.43 고지)과 OTT 레이아웃 골격 레퍼런스로 유효하다. 자간은 페이지마다 갈리므로 규칙으로 옮기지 말 것 |
| rendered | Noto Sans KR Regular ×6645 · Noto Sans KR Bold ×208 |
영문 · Latin국문과 동일
| latinFont | Noto Sans KR 3,439글리프(99.8%) · Apple SD Gothic Neo 7글리프(0.2%) |
| latinWeights | 실측 페이스 Regular · Bold |
| share | 라틴 3,446글리프 / 한글 6,853글리프 — 지면의 33.5%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: section-title 24px/400 · product-name 24px/700 · price 24px/400 · sub-title 20px/700 · nav 18px/400 · body 16px/400 · caption 14px/400 · footer-link 13.3333px/400 · legal 12px/400 · badge 12px/700 |
| mixing | 국영문 혼용 노드 220개(전체 587개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 33.5%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.8%를 그리는 Noto Sans KR가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR |
| rendered | Noto Sans KR Regular ×3374 · Noto Sans KR Bold ×65 · Apple SD Gothic Neo ×7 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 4px | |
| Max width | 1240px | |
| Section gap | 홈 캐러셀 행은 496px 등간격 20개(y 942 → 11,807, 피치 496). 이용권 페이지는 섹션 하단 여백 20·40·80px, 상단 36·40px | |
| Header | 74px sticky | |
| Grid Hero | 히어로 배너 8×1240×508, gap 20, radius 12, bg #252525 (Swiper) | |
| Grid Poster | 포스터 18열 216×360(3:5), gap 10, radius 0 — 홈 y8382 섹션 | |
| Grid Brand Tile | 브랜드 타일 13열 166×83, gap 14, radius 0 — 홈 y778 밴드(class animation-box-catalog) | |
| Grid Chips | 요일 칩 7×52×52, gap 10, radius 12, bg rgba(255,255,255,.05) | |
| Grid Voucher | 이용권 표 8행 1240×91(table.voucher-table.combine-type.cols-4) · 혜택 목록 4행 579×20 · 고지 목록 5·16·4·17행 1240×20 | |
| Card Padding | 웨이브온 상품 행 3×567×61 | |
| Button Padding | 12×40(모든 이용권 보기) · 12×14(요일 칩) · 8×16(자세히 보기) · 0×16(가격 태그) · 0×8(배지) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| badge | 4px | 26회 · 배지·가격 태그 |
| small | 8px | 4회 · 포스터 위 보조 버튼(자세히 보기)·섹션 |
| standard | 12px | 81회 · 히어로 배너 카드·요일 칩·보조 버튼 — 사이트 표준 |
| large | 16px | 3회 · 큰 이미지 |
| — | 20px | 1회 · 관측만 |
| pill | 100px | 3회 · 결제·안내 CTA(상품 구매 바로가기 #1351F9 · 웨이브온 더 알아보기 #5E5E5E) |
Guidelines
Do
- 지면은 #1B1B1B 한 색으로 두고 층은 밝기 한 칸으로만 가른다 — 지면 #1B1B1B → 카드·타이틀 밴드 #252525 → 버튼 #2F2F2F (그림자 1종 4회, 그라디언트 0종)
- 텍스트는 #FFFFFF(17.22:1) → #BBBBBB(8.97:1) → #A5A5A5(6.99:1, 최다 1,274회) 3단으로 내린다
- 콘텐츠 폭 1240을 3페이지 전부에 고정하고(후보 1240이 16·78·14회로 압도) 헤더 74px sticky를 지면과 같은 색으로 둔다
- 목록형 홈은 496px 등간격 행으로 쌓는다 — 24px/400 제목 한 줄 + 216×360 포스터 gap 10
- radius는 12px 표준(81회), 배지만 4px(26회), 결제 CTA만 알약 100px(3회)로 셋만 쓴다
- 채도는 두 색으로 제한한다 — 배지 #3887FF(22회), 구매 CTA 배경 #1351F9(2회, #fff 5.88:1 AA 통과)
- 요금제는 카드가 아니라 HTML `<table>`로 짠다(voucher-table cols-4, 8행 1240×91) — 4열 비교가 표 구조와 맞는다
- 모션은 두 조합만 쓴다 — 미디어 0.15s linear(20회), 히어로 0.5s ease-in-out(12회)
Don't
- 국문 대형 제목을 만들지 않는다 — 3페이지 1440 실측 최대 텍스트가 24px이고 40px 이상 국문 제목이 0개다. 국문 히어로 조판 레퍼런스로 쓰지 말 것
- #0000EE를 색으로 베끼지 않는다 — 브랜드 색이 아니라 스타일이 지정되지 않은 `<a>` 400개(홈 1440 실측)에 남은 브라우저 기본 링크색이다. 팔레트 2위(505회)·wcag 1.83:1이며 dembrandt는 이것을 semantic.primary·accent로 잘못 집계했다
- #717171을 본문에 쓰지 않는다 — 3.53:1로 AA 미달인데 푸터에서 72쌍 쓰인다
- 12px 텍스트에 lh 11px(0.92)을 주지 않는다 — 푸터 사업자 정보 12회가 글자 크기보다 좁은 행간으로 붙어 있다
- 자간을 페이지마다 다르게 두지 않는다 — 홈은 전부 normal인데 이용권 고지 14px은 −0.5px(−3.6%) 61회, 웨이브온 본문 16px은 −0.3px(−1.9%) 16회다. 같은 14/400 안에서도 −0.5px 61회와 normal 13회가 공존한다
- 그림자로 층을 만들지 않는다 — box-shadow는 rgba(0,0,0,.2) 0 1px 2px 한 종 4회뿐이고 그라디언트는 0종이다
- 자사 서체를 선언만 하고 쓰지 않는 상태를 따라하지 않는다 — wavve-pado-regular-8216a05b.woff2가 font URL 7개에 들어 있지만 3페이지 어디에도 렌더되지 않았고(@font-face 4페이스 중 2페이스만 로드), 한글은 전량 Noto Sans KR이다
- 제목을 span으로 두지 않는다 — 홈 캐러셀 행 제목 20개가 전부 span이고 페이지의 h1은 본문 제목과 같은 24px/400이다
