카카오모빌리티
흰 지면에 검정 잉크 하나, 100px 영문 소문자 제목 아래로 30px 국문 제목이 200px 빈 블록을 사이에 두고 내려간다.
카카오모빌리티 사이트는 색을 거의 쓰지 않는 무채색 지면으로, 넓은 여백이 인상을 만듭니다. 여백을 컴포넌트가 아니라 아무것도 들어 있지 않은 빈 블록으로 만드는 점이 특징이라, 200px짜리 빈 섹션이 페이지 곳곳에 끼어 있습니다. 100px 대형 제목 자리는 영문 소문자가 차지하고 국문은 30px 섹션 제목이 주력이어서, 국문 히어로 레퍼런스로는 약합니다. 대신 자간을 한 곳도 선언하지 않고 작은 글자일수록 행간을 크게 벌리는 국문 본문 조판은 그대로 참고할 만합니다.
https://www.kakaomobility.comColor Palette
Primary
Label
Line
Background
Static
Accent
Typography
KakaoBig · 400 / 700 / 800display·heading·body·ui — 한글 74.6%
Arial · 400선언 2순위 폴백 (실질 미사용)
Apple SD Gothic Neo · 400OS 폴백 (0.23%)
Type Scale공개 DS 문서가 없어 단 이름은 referoid가 붙였다
display-hero100px · 800 · 1.28
다람쥐 헌 쳇바퀴
display-title100px · 700 · 1.1
다람쥐 헌 쳇바퀴
h240px · 800 · 1.4
다람쥐 헌 쳇바퀴
h330px · 800 · 1.53
다람쥐 헌 쳇바퀴
h422px · 800 · 1.55
다람쥐 헌 쳇바퀴
lead22px · 400 · 1.55
다람쥐 헌 쳇바퀴
body-strong16px · 700 · 1.88
다람쥐 헌 쳇바퀴
body16px · 400 · 1.88
다람쥐 헌 쳇바퀴
nav14px · 400 · 2.14
다람쥐 헌 쳇바퀴
caption12px · 400 · 2.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | KakaoBig 계열 자체 서체 — 한글 21,159글리프 중 KakaoBig 15,777(74.6%) · KakaoBig ExtraBold 2,829(13.4%) · KakaoBig Bold 2,496(11.8%). 선언 1순위와 실제가 일치한다 |
| hangulWeights | 400 KakaoBig 15,777 · 700 KakaoBig Bold 2,278 · 800 KakaoBig ExtraBold 2,826. 400이 74.6%로 본문을 지배하고 800은 제목 전용 |
| body | 16px w400 lh1.88 자간 0 (16px 스타일 50회). 링크·목록은 같은 16px에 lh1.00 40회 |
| sub | 22px w400 lh1.55 리드 문장 · 22px w800 lh1.55 카드 제목(1440에서 18회) |
| label | 14px w400 lh2.14 GNB·푸터(27회) · 12px w400 lh2.50 고지(9회) |
| mixing | 선언은 'KakaoBig, Arial' 2단이지만 라틴도 KakaoBig가 1,663글리프를 그려 국영문이 한 서체로 붙는다. Arial이 실제로 그린 한글은 2글리프, OS 폴백 Apple SD Gothic Neo는 49글리프(0.23%)뿐이라 Mac/Windows 렌더 차이가 사실상 없다. 다만 raw는 22px/400 ×8, 16px/400 ×10 스타일을 여전히 Arial로 집계한다 — 선언 목록과 실제 렌더가 갈리는 지점 |
| hangulHeadings | 있다. 다만 100px 제목 5개 중 국문은 '개인정보 처리방침' 히어로 1건뿐이고(100px/700 lh1.10), 나머지 4개는 영문이다(we move life 100/800 · customer support · Newsroom · Kakao Mobility story). 국문 제목의 실질 상한은 40px/800 2회이며 반복 단은 30px/800 37회 · 22px/800 18회다 |
| verdict | 국문 대형 히어로 레퍼런스로는 약하다 — 100px 자리를 영문 소문자가 차지하고 국문은 30px 섹션 제목이 주력이다. 반대로 '자체 서체 단일 운용 + 자간 0 + 크기 반비례 행간(12px 2.50 → 100px 1.10)'의 국문 본문 조판 레퍼런스로는 유효하다. 국문 100px 조판 한 사례가 필요하면 개인정보 처리방침 히어로 1건을 인용할 수 있다 |
| rendered | KakaoBig ×21564 · KakaoBig ExtraBold ×3926 · KakaoBig Bold ×3036 · Apple SD Gothic Neo ×58 · Arial ×1 |
영문 · Latin국문과 동일
| latinFont | KakaoBig 8,592글리프(99.8%) · .SF NS 11글리프(0.1%) · Euphemia UCAS 3글리프(0.0%) · Lucida Grande 3글리프(0.0%) |
| latinWeights | 실측 페이스 Bold · ExtraBold |
| share | 라틴 8,611글리프 / 한글 28,585글리프 — 지면의 23.2%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 KakaoBig를 쓰는 단: display-hero 100px/800 · display-title 100px/700 · h2 40px/800 · h3 30px/800 · h4 22px/800 · lead 22px/400 · body-strong 16px/700 · body 16px/400 · nav 14px/400 · caption 12px/400 |
| mixing | 국영문 혼용 노드 608개(전체 1,807개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 23.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.8%를 그리는 KakaoBig가 한글도 99.8% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: KakaoBig · Arial · Apple SD Gothic Neo |
| rendered | KakaoBig ×6967 · KakaoBig Bold ×813 · KakaoBig ExtraBold ×812 · .SF NS ×11 · Euphemia UCAS ×3 · Lucida Grande ×3 · Arial ×1 · Apple SD Gothic Neo ×1 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | dembrandt | |
| Max width | 1296px | |
| Section gap | 빈 섹션 블록으로 만든다 — 200px 25회 | |
| Header | 100px fixed | |
| Content Widths | 1296 (홈·고객지원·개인정보·서비스 2종·story·vision 7페이지) · 1120 (뉴스룸) · 1080 (뉴스룸 상세·together 상세) | |
| Grid News | 뉴스 행 1120×248 3개 (홈·뉴스룸 하이라이트 공통) | |
| Grid Cards | story 3열 432×598 거터 0 · story 3열 452×100 · 파트너 4열 265×86 거터 10 · 개인정보 문의 4행 506×90 · vision 776×60·776×120 | |
| Card Padding | 상세 페이지 제목 블록만 padding-bottom 60px, 나머지 섹션 패딩은 0 — 여백을 빈 블록으로 뺐기 때문 | |
| Button Padding | 26px 0 (대형 아웃라인) · 26px 36px (다크 아웃라인) · 9px 0 9px 20px (상담톡) · 0 6px (스킵 링크) | |
| Breakpoints | 1650px · 1200px · 1080px · 1079px | |
| Doc Heights | vision 3030 · newsroom-detail 3748 · customer-support 4416 · home 5815 · newsroom 6090 · story 6235 · service-kakaot 6762 · privacy-policy 6775 · service-business 7244 · together-detail 7464 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| flat | 0px | 4회 · 버튼 4종 전부 — 이 사이트의 기본값 |
| small | 4px | 5회 · span 인라인 요소 |
| standard | 8px | 63회 · ul 목록 컨테이너 — 그림자 0 4px 16px 63회와 같은 개수 |
| circle | 50% | 16회 · div 원형 요소(아이콘·인디케이터 추정, 미확인) |
Guidelines
Do
- 국문 본문은 16px/400 lh1.88, 자간 0으로 둔다. 이 사이트는 100px 제목까지 letterSpacing 선언이 0회다
- 작은 글자일수록 행간을 벌린다 — 12px lh2.50 · 14px lh2.14 · 16px lh1.88 · 30px lh1.53 · 100px lh1.10
- 섹션 사이 여백은 200px(25회)·80px(14회) 빈 블록으로 만든다. 피처 행 336px 사이에는 80px
- 국문 제목은 30px/800(37회)을 주력으로, 카드·소제목은 22px/800(18회)으로 내린다
- 콘텐츠 폭은 1296을 기본으로, 기사 목록 1120·기사 본문 1080으로 좁힌다
- 버튼은 채우지 말고 1px 보더 + radius 0으로 만든다(관측 버튼 4종 전부 radius 0px)
- 링크 hover는 색만 0.1s ease로 바꾼다 — #666666·#808080 → #000000 (interactiveDeltas 10건 전부 color-shift)
Don't
- #808080을 흰 지면 위 텍스트로 쓰지 않는다 — 3.95:1로 AA 미달이며 미달 쌍 122회가 여기 몰려 있다
- #FFCD00을 흰 지면 위 글자색으로 쓰지 않는다 (1.5:1, 5쌍). 검정 위에서만 13.98:1로 살아난다
- 그라디언트를 쓰지 않는다 (10페이지 0개)
- 라운드를 남발하지 않는다 — 8px 63회·50% 16회·4px 5회가 전부이고 버튼·카드·칩은 radius 0
- 상호작용에 1.2s를 쓰지 않는다. 1.2s 254회는 진입 연출이고 링크 전환은 0.1s(65회)·0.2s(18회)다
- 컬러 배경 섹션을 만들지 않는다 — 134섹션 bg가 전부 rgb(255,255,255)이고 검정 면은 푸터 457px뿐
- 100px 자리에 국문 카피를 기대하지 않는다 — 5개 중 4개가 영문이고 국문은 개인정보 처리방침 1건뿐
