카카오뱅크
흰 지면에 검정 800 웨이트 국문 제목을 90·64·48px로 크게 놓고, 색은 상품마다 한 밴드씩만 준다.
카카오뱅크 코퍼레이트 사이트는 흰 지면에 아주 굵은 검정 국문 제목을 크게 놓는, 조판이 곧 화면인 인상입니다. 홈 히어로가 90px, 상품 페이지 제목이 64px로 서고 굵기는 800 한 단으로 고정되며, 그림자도 그라디언트도 쓰지 않습니다. 색은 상품 페이지마다 한두 개의 색 밴드로만 들어오고 브랜드 노랑은 홈에 한 번도 나오지 않습니다. 상품 소개 아홉 페이지가 같은 틀을 반복하므로, 국문 대형 제목과 색 밴드로 상품군을 구분하는 템플릿을 설계할 때 참고하기 좋습니다.
https://www.kakaobank.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Product Band
Typography
Pretendard ExtraBold · 800display·heading (상품 템플릿 64px·48px 제목), 한글 47.5%
Pretendard · 400 / 700body·nav·list (400/700), 한글 36.7%
Pretendard Light · 300light body·label (상품안내 20px/300·준법감시 12px/300)
Pretendard Variable · 400 / 500 / 600 / 700 / 800홈 전용 — 히어로 90/800·섹션 32/700·nav 14/600·본문 16/400
Pretendard SemiBold · 600nav·sub-nav 14px/600
Yoon Gothic 700 · 400공지사항 템플릿 13px/400 본문·스킵 링크 — 한글 2.2%
Type Scale공개 타입 스케일 문서가 없어 실측 단계만 적는다
hero90px · 800 · 1.3
다람쥐 헌 쳇바퀴
product-title64px · 800 · 1.3
다람쥐 헌 쳇바퀴
strip48px · 800 · 1.3
다람쥐 헌 쳇바퀴
section32px · 700 · 1.36
다람쥐 헌 쳇바퀴
faq-title28px · 800 · 1.44
다람쥐 헌 쳇바퀴
card-title20px · 600 · 1.44
다람쥐 헌 쳇바퀴
product-body20px · 400 · 1.5
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
nav14px · 500 · 1.5
다람쥐 헌 쳇바퀴
legal12px · 400 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 계열 14,844/15,178글리프(97.8%) — ExtraBold 7,214(47.5%) · Regular 5,577(36.7%) · Light 1,231(8.1%) · Variable 516(3.4%) · SemiBold 306(2.0%) + Yoon Gothic 700 334(2.2%, 공지 템플릿 13px만). 선언 1순위 '윤고딕'은 홈·상품 9페이지에서 0글리프 |
| hangulWeights | 800 주력(7,250 = ExtraBold 7,214 + Variable 36) · 400(4,862) · 700(1,107) · 300(1,298) · 600(366) · 500(295, 홈만) |
| body | 상품 20px w400(모임·기록·저금통 변형 w300) / 홈 16px w400 lh1.5 ls0 ×22 |
| sub | 홈 16px w500 ls−0.16px ×16 · 18px w500 lh1.5 ls−0.18 ×1 |
| label | nav 14px w600(1차)·w500 ×21(하위) ls0 · 강조 14px w700 lh1.44 ×10 · 준법 표기 12px w400/300 ×3 · 공지 13px w400 |
| mixing | 국문 우선 — 제목 전부 국문(90·64·48·28px), 영문은 'AI'·'ESG'·'IR'·'ATM'·'English' 약어와 '1.60%'·'0원' 숫자 정도. 라틴 527글리프 vs 한글 15,178(3.4%). 한 줄 안 혼용('나의 첫 번째 AI 은행', '하루만 맡겨도 연 1.60%')은 같은 Pretendard 800으로 — 영문 전용 서체 없음 |
| hangulHeadings | 있음, 이 사이트의 핵심 — 홈 히어로 90px/800 2행 '나의 첫 번째 AI 은행 / 카카오뱅크'(1440; 1920에선 120px, 6.25vw) · 상품 제목 64px/800 ×45(2~3행 줄바꿈: '찾아다니지 말아요 / 수수료 0원') · 루프 스트립 48px/800 ×8 · FAQ 28px/800 ×7 · 홈 섹션 32px/700 ×3. 전부 Pretendard 800/700, 자간 −1~−2% |
| verdict | 국문 히어로·대형 제목 레퍼런스로 최상위 유효 — 90/64/48px 세 단의 800 웨이트 국문 조판과 2~3행 줄바꿈 리듬, 색 밴드 위 흰 48px 키워드까지 실측됨. 국문 본문·UI 레퍼런스로는 제한적(홈 16/400 ls0 ×22, 상품 20px lh 미확인). 공지사항 템플릿(윤고딕 13px)은 레거시라 제외 |
| rendered | Pretendard ExtraBold ×5886 · Pretendard ×5758 · Pretendard Light ×811 · Pretendard Variable ×642 · Yoon Gothic 700 ×420 · Pretendard SemiBold ×315 |
영문 · Latin국문과 동일
| latinFont | Pretendard 9,038글리프(97.4%) · Yoon Gothic 700 237글리프(2.6%) |
| latinWeights | 실측 페이스 ExtraBold · Light · SemiBold |
| share | 라틴 9,275글리프 / 한글 13,832글리프 — 지면의 40.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: hero 90px/800 · product-title 64px/800 · strip 48px/800 · section 32px/700 · faq-title 28px/800 · card-title 20px/600 · product-body 20px/400 · body 16px/400 · nav 14px/500 · legal 12px/400 |
| mixing | 국영문 혼용 노드 589개(전체 1,925개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 40.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 97.4%를 그리는 Pretendard가 한글도 97.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Yoon Gothic 700 |
| rendered | Pretendard ExtraBold ×4373 · Pretendard ×4064 · Pretendard Light ×411 · Yoon Gothic 700 ×237 · Pretendard Variable ×163 · Pretendard SemiBold ×27 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 혼합 | |
| Max width | 1360px | |
| Section gap | 패딩으로 구분 — 홈 80/80(섹션 2는 160/80) | |
| Header | 62px relative(홈) / fixed(상품·공지 9페이지) | |
| Product Content Width | 1080(입출금·저금통·기록·세이프박스) / 1072(우리아이) / 1200(정기예금·모임·자유적금) — 템플릿 변형별로 다름 | |
| Grid Home | 서비스 카드 3× 268×440 r16 (캐러셀, 컬럼 판정 1 — 미확인) · 스토리 진행바 4× 88×4 gap 8 · 링크 목록 5×2 672×72 gap 16 | |
| Grid Product | 상품안내 링크 5×2 528~532×80 gap 16 (모임 3×2 584×80, 세이프박스·기록 4×2 524~532×80) · FAQ 카드 3×1 1072×176 gap 0 r10(우리아이) | |
| Grid Strip | 루프 스트립 아이템 18~80개 124~323×53~62 gap 69~82 · 기록통장 160개 251×61 gap 154 r100 | |
| Card Padding | 미확인(카드 내부 패딩 미수집) | |
| Button Padding | 12×24 (더 알아보기, r8 18/600) / 8×16 (스킵 링크, r0 0 4 14/500) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| skip-link | 0 0 4px | 3회 · 스킵 링크 버튼 하단 모서리만 |
| button | 8px | 2회 · CTA '더 알아보기'·input |
| faq-card | 10px | 1회 · raw div ×1; layout 우리아이통장 FAQ 카드 1072×176 r10 ×3 |
| — | 12px | 1회 · 관측만(div) |
| card | 16px | 6회 · 홈 서비스 카드 268×440·기술연구소/AD/인증서 링크 카드 |
| large | 20px | 12회 · group·a·image·div — 홈에서 최다(high) |
| progress | 30px | 8회 · 스토리 진행바 span 88×4 |
| circle | 50% | 10회 · '맨 위로 이동' 원형 버튼·아이콘 div |
| chip | 100px | 160회 · 기록통장 루프 스트립 흰 칩 251×61 (layout 1440) |
Guidelines
Do
- 국문 제목을 800 웨이트로 크게: 홈 90px(6.25vw), 상품 64px ×45, 스트립 48px ×8 — 이 사이트의 위계는 크기와 굵기로만 만든다
- 지면은 #FFFFFF, 텍스트는 #000000 한 색(576회, 21:1). 보조 텍스트 #888888은 캡션·푸터에만(111회)
- 색은 상품마다 밴드 1~3색으로 제한 — 스트립 256~265px 또는 피처 섹션 489~560px 한 면에만 칠하고 나머지 섹션은 흰·#F7F7F7 교대
- 섹션 패딩은 60/80/100/120 네 단으로: 스트립 60, FAQ 80, 피처 100, KV 120/40
- 제목 자간은 −2%(20~40px)·−1%(90px, 16~18px 중간 웨이트)·0(400 본문·14px 이하) 세 단계를 지킨다
- 상품 페이지는 KV → 스트립 → 피처 3~6 → FAQ → 상품안내 목록 → 교차 배너/준법 표기 순서를 유지한다(9페이지 동일, 4,150~5,552px)
- CTA는 검정 #000000 r8 12×24 18/600 하나. 페이지당 CTA 0~1개(히어로·피처 섹션 CTA 0)
- 라운드는 8(버튼)·10(FAQ 카드)·16(카드)·20(다수)·100(칩)만 — 알약 9999 없음
Don't
- 그림자·그라디언트로 띄우지 않는다 (홈 raw 0개, 10페이지 repeated shadow 전부 none)
- #888888을 연회색 지면 위 본문에 쓰지 않는다 (#f9f9f9 위 3.37:1 ×49, #f7f7f7 위 3.31:1 — AA 미달)
- #007AFF를 브랜드 색으로 쓰지 않는다 — swiper 컨트롤 8회뿐이고 #f7f7f7 위 3.75:1 미달
- 브랜드 옐로 #FFE300을 지면·CTA에 깔지 않는다 — 홈 raw 0회, 모임통장 밴드도 #FFE80A 한 섹션(560px)뿐
- 윤고딕을 서체로 지정하지 않는다 — 선언 1순위인데 한글 334글리프(2.2%, 공지 템플릿 13px)만 그렸고 웹폰트 여부 미확인
- 홈 서체 배포(Pretendard Variable woff2)와 상품 템플릿(정적 4웨이트)을 섞지 않는다 — 실측에선 두 갈래지만 재현할 땐 하나로
- 500ms 초과 UI 전환을 넣지 않는다 (최대 0.5s ×1, 주력 0.2~0.4s ease-in-out 59회). 5s progressBar는 자동 재생 표시 전용
- 헤더를 홈처럼 투명 relative로 두고 상품 페이지에 쓰지 않는다 — 상품·공지 9페이지는 전부 fixed #FFFFFF 62px
