카카오

흰 지면에 자체 서체 90px 국문 한 문장, 챕터마다 원색 한 장을 깔고 그 위에 영문 대문자 70px 라벨.

카카오 코퍼레이트 사이트는 흰 지면 위 90px 국문 문장으로 열고, 스크롤이 아주 긴 이야기형 페이지로 이어집니다. 한글을 전부 자체 서체 KakaoBig이 그리고 자간이 전 구간 음수라, 큰 국문 조판의 비율을 가져오기 좋은 사례입니다. 챕터마다 보라·파랑·분홍 같은 원색 배경 한 장을 깔고 그 위에 영문 대문자 라벨을 70px로 얹어, 국문 문장과 영문 라벨을 서체부터 나눕니다. 각진 카드가 없고 그림자도 쓰지 않아, 색면과 둥근 모서리만으로 긴 스크롤을 구획하는 방식을 참고할 수 있습니다.

https://www.kakaocorp.com/page

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

KakaoBig · 400 / 700 / 800display·heading·nav·신형 템플릿 본문, 한글 79.6%

KakaoSmall · 300 / 400 / 700UI·태그·구형 템플릿 본문, 한글 18.5%

Kakao Digit Latin · 700영문 챕터 라벨 전용(대문자 70px)

Apple SD Gothic Neo · 400 / 700폴백(OS 시스템 폰트)

Type Scale공개 스케일표가 없어 실측 순서다(1920 raw 57스타일 중 10단)

display-xl90px · 700 · 1.27

다람쥐 헌 쳇바퀴

display80px · 700 · 1.25

다람쥐 헌 쳇바퀴

chapter70px · 700 · 1

다람쥐 헌 쳇바퀴

h160px · 700 · 1.17

다람쥐 헌 쳇바퀴

page-title53.82px · 700 · 1.23

다람쥐 헌 쳇바퀴

h236px · 700 · 1.44

다람쥐 헌 쳇바퀴

h326px · 700 · 1.31

다람쥐 헌 쳇바퀴

nav17px · 400 · 1.59

다람쥐 헌 쳇바퀴

body16px · 400 · 1.75

다람쥐 헌 쳇바퀴

ui14px · 400 · 1.5

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	KakaoBig 32,337글리프(79.6%) + KakaoSmall 7,509(18.5%) + KakaoSmall Bold_Proto 572 + KakaoBig ExtraBold_Proto 119 — 전부 자체 서체 self-hosted(t1.kakaocdn.net woff/woff2 16파일). Apple SD Gothic Neo 73글리프(0.18%)는 폴백. 선언 1순위 KakaoSmall·KakaoBig·KakaoDigitLatin과 렌더가 일치
hangulWeights	400 주력 — KakaoBig 28,589 / KakaoSmall 5,455 · 700 — KakaoBig 3,748 / KakaoSmall Bold 558 / KakaoBig ExtraBold 119 · 300 — KakaoSmall 2,054(카카오그룹 페이지 본문 전용)
body	16px 400 lh1.75 ls −0.5px. 신형 롱스크롤 페이지는 KakaoBig 400(page-ai 10,845글리프·service 7,201·sustainability 6,942), 구형 페이지는 KakaoSmall 400(상세 1,062)·300(카카오그룹 2,054). 헤더·푸터 크롬 KakaoSmall 439글리프는 10페이지 동일
sub	18px 400 lh1.77 ls −0.5px KakaoSmall(연혁 본문) · 20px 400 lh1.3 ls −0.5px · 22px 400 lh1.6 KakaoSmall(뉴스 제목 em은 22/400 ls 0)
label	14px 400 lh1.5 ls 0(KakaoSmall 36·KakaoBig 35) · 13px 700 lh1.0 ls −0.5px 태그(8회) · 12px 400 ls −0.2px 캡션(40회) · 12px 700 ls −0.2px 링크(25회) · 15px 400 lh3.07 ls −0.25px 푸터 링크(28회)
mixing	층 분리 — 국문 디스플레이(KakaoBig 90/80/60/53.82, 700)와 영문 챕터 라벨(Kakao Digit Latin 70, 대문자)을 다른 서체로 나눈다. 한 줄 안 국영문 혼용은 KakaoBig 단일: '모든 ‘나’를 위한 Agentic AI' 32/400 em, 'Kanana in 카카오톡' 32/700 h5, '카카오 AI 돛' 32/700. 영문 고유명사(Kanana·ChatGPT·PlayMCP)는 KakaoBig 라틴 785글리프로 그려진다
hangulHeadings	있음 — 홈 히어로 90px/700 KakaoBig 국문 4행 롤링('누구나 일상에서 AI를 경험할 수 있도록'·'말도 안 되게 많아지도록'), 서브 인트로 80px/700 ×4('모든 ‘나’를 위한'·'더 나은 세상을 만드는'·'카카오테크,'·'기술과 사람이 만드는'), 60px/700 ×3('카카오는 지금'·'카카오의 다양한 모습'·'더 나은 세상을 만드는 카카오 서비스'), 53.82px ×2('연혁'·'카카오그룹'). 자간 −3~−1px, lh 1.17~1.27
verdict	국문 히어로·대형 제목 레퍼런스로 유효 — 90/80/60px KakaoBig 700, 음수 자간(−3.3~−1.9%), 행간 1.17~1.27, 80px 행 단위 롤링 구조가 실측된다. 단 서체가 자체 브랜드 서체라 값 이식이 아니라 비율(자간 −2~−3%, lh 1.25, 행 높이 = 글자 0.9배)만 가져올 것. 본문 조판은 템플릿 세대가 섞여 기준이 둘(KakaoBig 400 vs KakaoSmall 300/400)이므로 신형(page-ai) 쪽을 기준으로 삼는다
rendered	KakaoBig ×26005 · KakaoSmall ×8520 · KakaoSmall OTF Bold_Proto ×639 · KakaoBig OTF ExtraBold_Proto ×119 · Apple SD Gothic Neo ×52

영문 · Latin숫자 전용

latinFont	KakaoBig 20,521글리프(83.6%) · KakaoSmall 3,185글리프(13.0%) · Kakao Digit Latin 497글리프(2.0%) · KakaoSmall OTF Bold_Proto 223글리프(0.9%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 24,542글리프 / 한글 35,335글리프 — 지면의 41.0%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 KakaoBig를 쓰는 단: display-xl 90px/700 · display 80px/700 · h1 60px/700 · page-title 53.82px/700 · h2 36px/700 · h3 26px/700 · nav 17px/400 · body 16px/400
mixing	국영문 혼용 노드 822개(전체 2,360개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Kakao Digit Latin 숫자 전용(2.0% · 최상단 디스플레이 독점)
verdict	영문 전용 서체가 있다 — Kakao Digit Latin 라틴 2.0% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 70px)
sharedWithKorean	국문과 같은 서체: KakaoBig · KakaoSmall · KakaoSmall OTF Bold_Proto · Apple SD Gothic Neo
rendered	KakaoBig ×20521 · KakaoSmall ×3185 · Kakao Digit Latin ×497 · KakaoSmall OTF Bold_Proto ×223 · Apple SD Gothic Neo ×113 · Lucida Grande ×2 · Zapf Dingbats ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1316px
Section gap	챕터 콘텐츠 열 pad 98/180(ai·service·tech 15섹션)
Header	72px fixed
Grid Home	히어로 4행 1316×80 → 풀블리드 패널 4×1440×828 → 아코디언 4열 180×828 gap 0 → 카드 4열 288×299 gap 0
Grid Subsidiary	3열 612×517/481 gap 72 (612×2+72=1296) · 상단 5사 2열 same-y(652·1181·1662)
Grid Service Icons	126×126 ×33 gap 56 r20 (하단 배너, 99 img)
Grid Detail	추천 콘텐츠 3열 408×502 gap 36 (408×3+36×2=1296)
Card Padding	서비스 챕터 카드 728×728 / 728×939 · 연혁 행 290~358 높이
Button Padding	알약 CTA 7 13 8 30(아이콘 좌) / 다크 태그 7 8 8 / 블랙 버튼 14×24·16×24 / 아웃라인 9 10 10 16 / 칩 9×16

Border Radius

Role	Value	Preview
tooltip	4px	4회 · presentation/tooltip
—	8px	3회 · span, 관측만
list	12px	46회 · ul 컨테이너
tag	16px	35회 · 다크 태그·옐로 CTA 알약(13/700, h≈32)
search	18px	28회 · 검색 컨트롤 button/a
standard	20px	131회 · 뱃지·해시태그 칩·아웃라인 알약·서비스 아이콘 126×126
button	24px	50회 · 다운로드 버튼 114×48(service-all)·푸터 알약
button-lg	26px / 30px	4회 · 블랙 버튼 '전체 서비스 보러가기' r26 ×2 · '목록 보기' r30 · 검색 인풋 r30
card	40px	5회 · div/card
circle	50%	32회 · 자동 재생 시작 버튼·culture 원형 7×1302
badge-pill	150px	6회 · 카드 뱃지 13.33/700 border 1px #c4c4c4
pill	999px	54회 · nav 메뉴 button/a (OmD corporate-nav h37 pad 4 16 6과 일치)

Guidelines

국문 히어로는 KakaoBig 700, 90px ls −3px lh1.27(홈) / 80px ls −2px lh1.25(서브 인트로)로 3~4행 좌정렬. 행 높이 80px 단위로 쌓고 한 행씩 교체한다
자간은 전 구간 음수 — 큰 글자일수록 더 조인다(90px −3 · 26px −1 · 16px −0.5 · 12px −0.2). 양수 자간은 0건
챕터는 원색 한 장(#7357FF·#2D82FF·#FF287D·#FF9D00·#FEE500…) + 70px 영문 대문자 라벨(Kakao Digit Latin) + 728px 흰 콘텐츠 열(pad 98/180)로 연다
잉크는 #333333(6,832회)이 기본, #000000은 강조·블랙 버튼, #666666은 설명. 대비는 12.63/21/5.74:1
컨트롤은 전부 둥글게 — 태그 r16, 칩·뱃지 r20(131회), 버튼 r24~30, nav r999. 각진 버튼은 '본문 바로가기'(접근성) 외 없다
깊이는 선으로만 — 0 0 1px #333(68회)·1px #111 아웃라인(30회)·2px #fff 태그 보더(11회). box-shadow 0
브랜드 옐로 #FAE100은 주 CTA 배경 한 곳(2회)에만, 검정 텍스트+2px 검정 보더와 짝
본문 16px lh1.75 ls −0.5px, 콘텐츠 폭 1316(홈)/1296(서브)/728(챕터 열)/816(상세)

Don't

box-shadow·gradient를 쓰지 않는다 (raw shadows 0 · gradients 0)
#888888을 본문에 쓰지 않는다 (3.54:1 AA 미달 ×413, 푸터 메타 전용). #A1A1A1(2.58:1 ×13)도 텍스트 금지
챕터 라벨에 한글을 쓰지 않는다 — 70px Kakao Digit Latin은 라틴 480글리프 전용 서체, 한글 17글리프뿐
옐로를 면으로 넓게 깔지 않는다 — #FAE100은 팔레트 count 2, 챕터 배경 노랑은 별도 값 #FEE500 2회
양수 자간·자간 0의 대형 제목을 만들지 않는다 (60px 한 스타일만 ls 없음, 나머지 디스플레이는 전부 음수)
KakaoBig·KakaoSmall은 자체 서체다(self-hosted 16파일, 재배포권 미확인) — 다른 프로젝트에 이식하지 말고 크기·자간·행간 비율만 가져온다
구형 템플릿의 KakaoSmall 300 본문(카카오그룹 2,054글리프)을 기준으로 삼지 않는다 — 신형 페이지 본문은 KakaoBig 400
짧은 페이지를 만들지 않는다 — 랜딩은 12,420~31,409px, 인트로 섹션만 3,840~7,040px 스크롤 핀