KB금융그룹
자체 서체 두 벌로 얇게 쓴 국문, 색 대신 1px 표 선으로 짜인 지주회사 지면.
KB금융그룹은 자체 서체 두 벌(본문용 KBFG Text · 제목용 KBFG Display)로만 조판한 금융지주 사이트입니다. 폴드는 1440×900 영상 두 편 위에 50px 국문 히어로로 열지만, 지면 대부분은 공시·주가·지배구조 같은 표와 목록이라 1px 회색 선이 2천 번 넘게 쓰입니다. 한글 절반 이상이 weight 300으로 그려져 국내 핀테크 사이트들의 굵은 국문과는 정반대의 인상을 줍니다. 브랜드 노랑이 13번밖에 안 나오는 거의 무채색 지면이라, IR·거버넌스처럼 정보량 많은 기업 사이트를 설계할 때 참고하기 좋습니다.
https://www.kbfg.com/kor/index.jspColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
KBFG Text · 300 / 500 / 700본문·UI·목록·표 전 구간, 한글 100%
KBFG Display · 300 / 500 / 700히어로 디스플레이(국문·영문 공용)
Noto Sans JP · 300일본어 폴백
Geneva · 400라틴 폴백
Type Scaleraw 1920 스타일 20종 중 자간이 지정된 단은 하나도 없다 — 전부 normal(0)이다
display50px · 500 · 1.2
Handgloves 123
display-sub28px · 300 · 1.3
Handgloves 123
h236px · 700 · 1.67
Handgloves 123
wordmark36px · 500 · 1.39
Handgloves 123
lead26px · 700 · 1.54
Handgloves 123
card-title22px · 700 · 1.36
Handgloves 123
ui18px · 500 · 2.22
Handgloves 123
base16px · 500 · 1.3
Handgloves 123
body-light16px · 300 · 1.75
Handgloves 123
caption14px · 300 · 1.43
Handgloves 123
국문 · Korean
| hangulFont | KBFG Text 100% (16,880글리프 — Light 8,982 = 53.2% · Medium 7,596 = 45.0% · Bold 302 = 1.8%). 히어로 4행 92글리프만 KBFG Display(Medium 34 · Light 58)가 그린다 — 사이트 fonts.json은 이 92글리프를 라틴으로 잘못 집계했고, 1440 CDP 노드 단위 측정(2026-09-10)으로 국문임을 확인했다 |
| hangulWeights | 300 Light 8,597 + Medium 2,042 · 500 Medium 5,095 · 700 Medium 459 + Light 385. 400·600이 없다 — 자체 서체 파일이 Light·Medium·Bold 세 벌이기 때문이다. 300이 최다라 국문 지면이 얇게 읽힌다 |
| body | 16px/300 lh1.75 자간 0(문서 본문 15회) · 16px/500 lh1.30(표·링크 28회) |
| sub | 히어로 부제 28px/300 lh1.3 KBFG Display Light 2행 — 제목보다 부제가 더 얇다 |
| label | GNB 18px/500 lh2.22 · 표 머리행 16px/700 lh3.06 · 주석 14px/300 lh1.43 |
| mixing | 국영문을 자체 서체 두 벌이 함께 맡는다. 한 줄 안 혼용은 브랜드명·약어가 라틴으로 섞이는 형태다 — 'KB금융그룹'·'KB금융, 국내 최대 아트페어 Kiaf SEOUL 2026'·'FTSE4Good'. 표기 자체가 국영문 혼용이라 별도 영문 레이어가 없다 |
| hangulHeadings | 있다. 최대 50px/500 KBFG Display Medium '세상을 바꾸는 금융, KB금융그룹' / '금융을 넘어 미래를 만듭니다.'(홈 y657·692, 영상 위). 그다음이 36px/700 서브 페이지 제목 8곳, 28px/300 히어로 부제, 26px/700 리드 3곳이다. 폴드 안 국문 최대가 그대로 사이트 최대다 |
| verdict | 국문 히어로 레퍼런스로 유효하되 크기는 작은 축이다 — 50px/500은 라이브러리 금융권에서 가장 작은 국문 히어로에 속한다(카카오뱅크 90/800 · 토스 80/700 · 토스뱅크 70/800 · 카카오페이 63/500 · 뱅크샐러드 52/500). 대신 웨이트 300을 본문 기본으로 쓰는 얇은 국문 지면과 자체 서체 두 벌(Text/Display) 분리 운용은 이 라이브러리에서 드문 사례다 |
| rendered | KBFG Text Light ×8982 · KBFG Text Medium ×7596 · KBFG Text Bold ×302 |
영문 · Latin자사 라틴
| latinFont | KBFG Text 9,882글리프(99.1%) · KBFG Display 92글리프(0.9%) · Geneva 2글리프(0.0%) |
| latinWeights | 실측 페이스 Light · Bold · Medium |
| share | 라틴 9,976글리프 / 한글 16,880글리프 — 지면의 37.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 KBFG Text를 쓰는 단: h2 36px/700 · wordmark 36px/500 · lead 26px/700 · card-title 22px/700 · ui 18px/500 · base 16px/500 · body-light 16px/300 · caption 14px/300 |
| mixing | 국영문 혼용 노드 289개(전체 909개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | KBFG Display 자사 라틴(0.9% · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — KBFG Display 라틴 0.9% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 50px) |
| sharedWithKorean | 국문과 같은 서체: KBFG Text |
| rendered | KBFG Text Light ×7292 · KBFG Text Bold ×1601 · KBFG Text Medium ×989 · KBFG Display Light ×58 · KBFG Display Medium ×34 · Geneva ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 표 | |
| Max width | 1200px | |
| Section gap | 서브 페이지는 제목 섹션(292~332px) 다음 본문이 바로 붙는다. 목록 페이지는 하단 여백 160px. 홈은 섹션 패딩 0으로 붙이고 섹션 높이(1708·1283·205·2340)로 리듬을 만든다 | |
| Header | 80px fixed | |
| Grid | 콘텐츠 폭 1200px이 10페이지 전부에서 고정이다(후보 1200×10~194 · 1400×2 보조). 개인정보 처리방침은 1200 후보가 194회로 문서 전체가 한 폭이다 | |
| Grid Cards | 홈 히어로 카드 4×1 383×518 r12 · 공시 카드 3×1 383×134 r12 · 보도자료 3열 386×375 거터 20 · 표 행 1200×52(공시·IR뉴스 10행) · 주가 셀 4열 126×35 거터 20 | |
| Card Padding | 표 셀 상하 18px가 기본. 알약 버튼 12×36 12×24 | |
| Button Padding | '주메뉴바로가기' 10×20 r0 bg #222222 흰 글자 14px/500 · '개정 전·후 비교표 보기' 12px 36px 12px 24px r9999px 1px solid #DDDDDD 16px/500 | |
| Breakpoints | 14단 — 1660 · 1643 · 1460 · 1440 · 1400 · 1330 · 1323 · 1320 · 1311 · 1280 · 1260 · 1237 · 1215 · 1200. 1200~1660 사이에 11단이 몰려 있어 표 폭을 단계적으로 맞춘 흔적으로 보인다 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 8px | 46회 · 목록 항목·작은 카드 |
| standard | 12px | 117회 · 표준 — 히어로 카드 383×518·공시 카드 383×134 |
| chip | 28px | 15회 · 칩 버튼 |
| circle | 50% | 9회 · 원형 아이콘(100% 2회 포함) |
| pill | 100px | 18회 · 알약 버튼(9999px 1회 포함) |
Guidelines
Do
- 정보량이 많은 지면에서는 색 대신 선으로 구조를 만든다 — 1px solid #DDDDDD가 2,077회로 이 사이트의 실질적 그리드다.
- 표 행 리듬을 하나로 고정한다: 상하 패딩 18px(4,080회) · 행 높이 1200×52 · 머리행 16px/700 lh3.06.
- 자체 서체를 본문용(KBFG Text)과 디스플레이용(KBFG Display) 두 벌로 나눈다. 디스플레이는 히어로 4행 92글리프에만 쓰고 나머지 전부를 Text가 맡는다.
- 웨이트를 300·500·700 세 값으로 묶고 본문 기본을 300에 둔다 — 한글 16,880글리프 중 8,597이 300이라 지면이 얇게 읽힌다.
- 히어로 영상 위 글자는 rgba(0,0,0,0.5)→(0,0,0,0.2) 세로 스크림으로 받친다. 위쪽만 진하게 깔아 영상을 덜 죽인다.
- 콘텐츠 폭 1200px을 10페이지 전부에서 지키고, 브레이크포인트를 1200~1660 사이에 11단으로 촘촘히 둬서 표가 접히지 않게 한다.
Don't
- 브랜드 노랑 #FFCC00을 면적 있는 강조로 확대하지 않는다 — 실사용이 13회(1페이지)뿐인 점 강조색이다.
- #AAAAAA(2.32:1 ×8)를 본문에 쓰지 않는다. 비활성 표시 전용이다.
- fonts.json의 hangulRenderedBy만 보고 'KBFG Display는 한글을 안 그린다'고 쓰지 않는다 — 1440 CDP 직접 측정에서 히어로 92글리프가 전부 국문이었다(집계 결함).
- radius를 표·목록에 얹지 않는다. 관측 205회 중 카드(12px 117)와 알약(19)뿐이고 데이터 영역은 전부 0px이다.
- 16px/700 lh3.06 · 18px/500 lh2.22를 조판 행간으로 해석하지 않는다 — 표 행 49px·nav 40px 높이를 만드는 값이다.
- gsap이 실려 있다고 스크롤 연출을 전제하지 않는다 — 10페이지 전부 gsap 3.8.0을 싣지만 등록된 ScrollTrigger가 0개이고 스크롤 구동 전환도 0건이다.
- 헤더가 transparent fixed라 흰 지면 위에서는 배경 없이 겹친다. 흰 배경 섹션을 만들 때 상단 80px 여백을 별도로 확보해야 한다.
