왓챠

검은 지면 위에 229×321 포스터를 끝없이 깔고, 글자는 그림자가 아니라 385개의 검정 그라디언트가 받쳐 세운다.

완전한 검정 지면 위에서 포스터 카드만으로 화면을 채우는 OTT 사이트입니다. 홈 한 장이 14,489px인데 그중 33개 줄이 전부 같은 규격의 229×321 포스터 그리드여서, 반복으로 밀어붙이는 콘텐츠 목록의 뼈대를 그대로 볼 수 있습니다. 이미지 위에 글자를 세우는 방법이 특히 참고할 만한데, 그림자를 거의 쓰지 않고 투명→검정 세로 그라디언트를 385번 깔아 해결합니다. 국문 히어로는 46.7px/700 한 줄로 서고, 주 액션인 분홍 버튼은 흰 글자와의 대비가 3.77:1이라 접근성 기준에는 못 미칩니다.

https://watcha.com

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard · 400 / 700display·heading·body·ui, 한글 90.2%

Pretendard Medium · 500nav·본문 중간 웨이트, 한글 9.3%

Pretendard SemiBold · 600일부 제목

Apple SD Gothic Neo / Apple Color Emoji / Apple Symbols · 400폴백

Type Scale1440 layout 기준(46

display46.7px · 700 · 1.21

다람쥐 헌 쳇바퀴

h136px · 700 · 1.22

다람쥐 헌 쳇바퀴

h2-modal24px · 700 · 1.15

다람쥐 헌 쳇바퀴

h3-row20px · 700 · 1.3

다람쥐 헌 쳇바퀴

lead18.3px · 400 · 1.45

다람쥐 헌 쳇바퀴

ui16px · 500 · 1.38

다람쥐 헌 쳇바퀴

body15px · 500 · 1.56

다람쥐 헌 쳇바퀴

body-sm14px · 700 · 1.21

다람쥐 헌 쳇바퀴

label13px · 500 · 1.38

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.5

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard (한글 32,463글리프, 90.2%) · Pretendard Medium(3,361, 9.3%) · Pretendard SemiBold(156, 0.4%). 선언 1순위 Pretendard와 실제 렌더가 일치한다
hangulWeights	400 Pretendard 30,470 · 700 Pretendard 1,993 · 500 Medium 3,361 · 600 SemiBold 156. 400이 지면의 85%를 그린다
body	15px/500 lh1.56 자간 0 (포스터 제목·본문) · 16px/500 lh1.38 (nav·버튼)
sub	히어로 부제 18.3px/400 lh1.45 · 콘텐츠 상세 본문 16px
label	행 제목 20px/700 lh1.30 · 메타 13px/500 · 캡션 12px/400
mixing	국영문을 Pretendard 한 서체가 다 그린다(라틴 13,037글리프도 동일). 콘텐츠 제목에 원어 로마자가 섞이는 자리가 많은데('What Does the Fox Say? [완전판]'·'BBC 선정 21세기 최고의 영화 100편') 서체가 갈리지 않아 한 줄로 읽힌다
hangulHeadings	있다 — 홈·브라우즈 히어로 46.7px/700 '일단 살고 보자!'(3페이지 공통)와 스태프메이드 h1 46.7px/700 '지금 담아둘 일드'가 최대이고, 그 아래 20px/700 행 제목이 33회 반복된다. 큰 글자가 국문이다
verdict	국문 히어로 레퍼런스로 유효하다 — 46.7px/700 lh1.21 한 줄이 다크 지면 위에 그라디언트만으로 서 있는 사례다. 단 자간이 0이라 크기별 자간 규칙은 배울 수 없고(25개 중 한 단만 −1%), 이 사이트의 진짜 값은 조판보다 20px/700 행 제목 + 229×321 포스터 그리드를 33번 반복하는 목록 구조에 있다
rendered	Pretendard ×32463 · Pretendard Medium ×3361 · Pretendard SemiBold ×156

영문 · Latin국문과 동일

latinFont	Pretendard 13,659글리프(99.8%) · Apple SD Gothic Neo 21글리프(0.2%) · Apple Color Emoji 7글리프(0.1%) · Apple Symbols 1글리프(0.0%)
latinWeights	실측 페이스 Medium · SemiBold
share	라틴 13,690글리프 / 한글 35,980글리프 — 지면의 27.6%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 46.7px/700 · h1 36px/700 · h2-modal 24px/700 · h3-row 20px/700 · lead 18.3px/400 · ui 16px/500 · body 15px/500 · body-sm 14px/700 · label 13px/500 · caption 12px/400
mixing	국영문 혼용 노드 1,323개(전체 3,707개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 27.6%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.8%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard ×13037 · Pretendard Medium ×586 · Pretendard SemiBold ×36 · Apple SD Gothic Neo ×21 · Apple Color Emoji ×7 · Apple Symbols ×1 · Apple Braille ×1 · Noto Sans Bamum ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	compact
Base unit	4px
Max width	1360px
Section gap	포스터 행 사이 간격이 없다 — 행 높이 391(13열 229×321)·415·480·536이 그대로 붙고 y 좌표가 391~415씩 증가한다. 예외는 히어로 아래 24px과 섹션 패딩 160px(68회)
Header	72px fixed
Grid Poster	13열 229×321 gap 0 (홈 33행 중 대부분) · 11열 274×315 / 274×466 · 12열 228×262 · 6열 229×366(스태프메이드)
Grid Wide	4열 459×344(왓챠파티) · 9열 343×186(인기 추천 장르·태그) · 8열 160×90(로고 스트립)
Grid Hero	1360×595 슬라이드 7장, gap 12 — 옆 슬라이드가 12px 엿보인다
Grid Credit	감독/출연 2열 670×78 gap 20
Card Padding	미측정 (추출기 범위 밖)
Button Padding	0 16 (감상하기·구매하기, 높이 고정) · 11.6667 20 (컬렉션 보기·공유하기) · 14 0 (보고싶어요) · 9 12 (미리 보러 가기)

Border Radius

Role	Value	Preview
xs	2px	16회 · 배지·태그
standard	4px	479회 · 포스터·카드·주 액션 버튼. 압도적 표준값
sm	5px	6회 · 관측만
button	6px	12회 · '보고싶어요' 버튼
button-alt	6.66667px	24회 · '컬렉션 보기'·'공유하기' — 4px을 0.6으로 나눈 값이다
md	8px	7회 · 패널
video	26.6667px	24회 · 예고편 비디오 프레임 (16px / 0.6)
pill	40px	1회 · '미리 보러 가기' 알약 버튼
pill-lg	166.667px	22회 · 긴 알약 (100px / 0.6)
circle	50%	150회 · 아바타·아이콘 버튼 (100% 22회 포함)

Guidelines

지면을 순수 #000000으로 두고 텍스트를 #FFFFFF → #BABAC1 → #84868D 세 단으로 내린다 (팔레트 15,126 / 160 / 1,072회)
이미지 위 글자는 그림자가 아니라 투명→검정 세로 그라디언트로 받친다 (linear-gradient(rgba(0,0,0,0), rgb(0,0,0)) 385회 vs 외부 그림자 7회)
포스터 규격을 넷으로 고정한다 — 229×321(13열)·274×315(11열)·459×344(4열)·343×186(9열), gap은 전부 0
행 제목은 20px/700 하나로 통일하고 그 아래에 그리드를 붙인다 (홈 33회 반복)
국문 히어로는 46.7px/700 lh1.21 한 줄로 짧게 끊는다 ('일단 살고 보자!')
radius는 4px 하나로 민다 (479회, 나머지는 합쳐도 100회 미만)
모션은 cubic-bezier(0.5,0,0.1,1) 0.4s 한 조합으로 통일하고 카드 transform·opacity에만 건다 (각 480회)

Don't

#F82F62 위에 흰 글자를 작게 쓰지 않는다 — 3.77:1로 AA 미달인데 28쌍이 그렇게 쓰여 있다. 큰 글자·아이콘에만 허용
#4F5152를 읽어야 하는 글자에 쓰지 않는다 (2.63:1, AA 미달인데 75쌍)
소수 px(46.6667·26.6667·6.66667·166.667)을 그대로 옮기지 않는다 — 0.6으로 나눈 정수(28·16·4·100)가 원래 값이다
이 사이트에서 자간 규칙을 가져가지 않는다 — 25개 스타일 중 한 단(14px/700 −1%)에만 붙는다
#F7E317·#00C300·#3C1E1E를 브랜드 색으로 오해하지 않는다 — 전부 카카오·라인 로그인 버튼 색이다(dembrandt가 #3C1E1E를 semantic.primary로 잘못 집계했다)
포스터 행 사이에 여백을 넣지 않는다 — 이 사이트의 밀도는 행이 gap 0으로 붙어 있는 데서 나온다
그림자로 카드를 띄우지 않는다 (2종 7회뿐, 전부 오버레이·시트용)