뱅크샐러드
흰 지면에 #111111 잉크와 초록 #13BD7E 한 줄 — 히어로만 프로모션 슬라이드로 색을 바꾸고, 나머지는 110~197px 행이 반복되는 금융상품 목록이다.
뱅크샐러드 웹은 마케팅 홈 아래에 카드·적금 랭킹 목록이 길게 붙은 구조입니다. 히어로는 슬라이드마다 버튼 색까지 바뀌는 프로모션 캐러셀이라 브랜드 선언형 히어로와는 결이 다르고, 국문 제목도 52px에서 멈춥니다. 참고할 곳은 목록 쪽으로, 폭 768px 안에서 높이 110~197px짜리 상품 행이 여백 없이 이어지고 상품명·설명·숫자 강조가 굵기 차이만으로 갈립니다. 정보가 빽빽한 금융 목록 화면의 밀도 기준으로 쓰기 좋습니다.
https://www.banksalad.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 400 / 500 / 700 / 800display·heading·body·ui·caption — 한글·라틴 전부
Type Scaleraw 32스타일(1920)에서 추린 10단
display52px · 500 · 1.15
다람쥐 헌 쳇바퀴
h132px · 800 · 1.31
다람쥐 헌 쳇바퀴
h228px · 500 · 1.36
다람쥐 헌 쳇바퀴
h324px · 500 · 1.17
다람쥐 헌 쳇바퀴
title20px · 700 · 1.2
다람쥐 헌 쳇바퀴
body-reading18px · 400 · 1.44
다람쥐 헌 쳇바퀴
label16px · 700 · 1.63
다람쥐 헌 쳇바퀴
body14px · 400 · 1.5
다람쥐 헌 쳇바퀴
caption12px · 500 · 1.5
다람쥐 헌 쳇바퀴
micro10px · 700 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 정적 서브셋 5종(Regular·Medium·SemiBold·Bold·ExtraBold woff2) — 한글 35,036글리프 전량. 'Pretendard'(Regular+Bold 페이스) 26,529 75.7% · 'Pretendard Medium' 8,345 23.8% · ExtraBold 162 0.5%. Variable 아님 |
| hangulWeights | 400 21,161(60.4%) · 500 8,345(23.8%) · 700 5,368(15.3%) · 800 162 · 600 0(로드만). 페이지별 편차 — 아티클은 Regular/Bold 8,257 vs Medium 445로 한쪽에 쏠리고, 머니피드 아티클은 3,305 vs 3,085로 반반, 홈은 700 vs 668로 반반이다 |
| body | 아티클 18/400 lh1.44 ls−0.09px (688폭) · 제품 14/400 lh1.5 ls−0.07px ×16 · UI 16/400 ×29 |
| sub | 16/500 lh1.63 ls−0.08px ×21 · 15/500 lh1.53 ls−0.075px ×4 (머니피드 아티클 h3) |
| label | 16/700 lh1.63 ls−0.08px ×35(카드명·푸터) · 14/700 lh1.43 ×13 · 12/500 lh1.5 ls−0.06px ×16 · 10/700 ls−0.05px ×4 |
| mixing | 단일 서체 — 라틴 14,910글리프도 전부 Pretendard가 그리고 이모지 6글리프만 OS로 떨어진다. 별도 영문 서체 없음. 상품명은 국영문 한 줄 혼용('신한카드 B.Big(삑)', '삼성 iD STATION 카드 (HD현대오일뱅크)') 16/700. 숫자 강조 '최고 6%' 20/800, '최대 87만원 받기' 18/700 |
| hangulHeadings | 있음 — 홈 히어로 h2 52/500 lh1.15 ls+0.5px 2행 '뱅샐에서 대출받으면 / 금리 0.1% 무조건 할인'(1440·1920 동일 52px), 슬라이드 변형 52/700·48/700 각 1회. 머니피드 h1 32/800 '주제별 재테크 추천', 홈 h2 28/500 ×2('뱅크샐러드는 쉽고 정확하게 비교합니다.'·'뱅크샐러드 Pick!'), 상품 h1 28/700 '신한카드 처음(ANNIVERSE)', 배너 24/500 '금융을 내 편으로 뱅크샐러드 다운로드'. 대환대출 h1 '더 낮은 금리로 대출 갈아타고 누구나 이자지원금 받기'는 섹션 추출 누락으로 px 미확인 |
| verdict | 국문 히어로 레퍼런스로 유효하되 성격은 프로모션 배너다 — 52/500 중간 웨이트에 양수 자간 +0.5px·lh1.15, 슬라이드마다 CTA 색이 바뀌는 마케팅 캐러셀이라 브랜드 히어로(토스·카카오뱅크류 80~90px/700)와는 다른 결. 강점은 핀테크 목록 조판 — 16/700 lh1.63 ls−0.5% 상품명 + 14/400 본문 + 20/800 숫자 강조가 768폭 행에서 반복되는 밀도 레퍼런스 |
| rendered | Pretendard ×26529 · Pretendard Medium ×8345 · Pretendard ExtraBold ×162 |
영문 · Latin국문과 동일
| latinFont | Pretendard 14,910글리프(100.0%) · Apple Color Emoji 6글리프(0.0%) |
| latinWeights | 실측 페이스 Medium · ExtraBold |
| share | 라틴 14,916글리프 / 한글 35,036글리프 — 지면의 29.9%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: display 52px/500 · h1 32px/800 · h2 28px/500 · h3 24px/500 · title 20px/700 · body-reading 18px/400 · label 16px/700 · body 14px/400 · caption 12px/500 · micro 10px/700 |
| mixing | 국영문 혼용 노드 938개(전체 2,276개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 29.9%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 100.0%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard ×10002 · Pretendard Medium ×4831 · Pretendard ExtraBold ×77 · Apple Color Emoji ×6 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 8px | |
| Max width | 960px | |
| Section gap | 홈 섹션 pad 48/48(feature) | |
| Header | 미확인 (추출기 0 — absolute 헤더로 추정, fixed 감지)px fixed | |
| Grid Home | Pick 카드 4열 209×210, 거터 16 (209×4+16×3=884 — 960 안 884 후보 8회) | |
| Grid Related | 아티클 관련 상품 카드 4×3 208×194, 거터 32 | |
| Grid Topics | 머니피드 토픽 칩 78개 203×44, 거터 8, 유동 랩 | |
| List Row | 카드 랭킹 행 768×197/165 ×40 · 캐시백 행 110 ×15 · 적금 행 161 ×11 · 혜택 카테고리 행 140 ×12 · 아티클 행 688×74 ×20 | |
| Card Padding | 미확인 — 목록 행은 pad 0, 내부 여백 9px 추정 | |
| Button Padding | 10×20 (히어로 알약 18/500) / 16×20 (주 액션 16/700) / 12×20 (슬라이드 블루 r8) / 8×12 (필터 칩) | |
| Breakpoints | 961 / 960 / 767px (Tailwind CSS + Radix UI) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| hairline | 2px | 4회 · div — 관측만 |
| small | 6px | 29회 · span 배지·태그 |
| link | 8px | 59회 · a 링크 타일·차트 칩(#F0F2F5 61×26)·슬라이드 블루 CTA |
| button-sm | 10px | 37회 · 작은 버튼 |
| standard | 12px | 158회 · 버튼 표준·필터 칩('카드사 선택')·상품 혜택 탭 3×3 231×40 |
| tile | 15px | 24회 · div 타일 |
| action | 16px | 3회 · 주 액션 버튼(#06A96C)·정보 버튼(#F8F9FB) |
| button-lg | 18px | 80회 · 큰 버튼 |
| chip | 20px | 9회 · 상품 태그 칩 50×23 (#F4F5F7)·li |
| pill | 41px | 4회 · 히어로 슬라이드 알약 CTA(a) — 9999px ×4(배너 보기)·999px ×3(span)과 함께 알약 계열 11회 |
| circle | 50% | 14회 · 카드사 로고·아이콘 원형 |
Guidelines
Do
- 본문 16/400 lh1.5~1.63, 목록 라벨 16/700 lh1.63 ls−0.08 — 18px 이하 자간은 크기×−0.005로 계산한다(14→−0.07, 12→−0.06)
- 24px 이상 국문 제목은 자간 +0.5px 양수·lh 1.15~1.36 — 히어로 52/500 lh1.15
- 텍스트 위계는 #111111 → #606874(5.63:1) → #9FA4B0 3단. 강조는 #272A30(14.38:1)
- 초록 #13BD7E는 텍스트·아웃라인·그라디언트(90deg →#0FC9BA)에, 흰 글자를 얹는 버튼 배경은 #06A96C로
- 목록 행은 768폭 110~197px 높이로 pad 0 연속 배치, 구분은 1px #D0D6DE(105회)
- 라운드는 12px 표준(158회), 큰 버튼 18px(80회), 주 액션 16px, 마케팅 CTA만 알약 41px
- 채움 회색은 #F0F2F5(고지·표) · #F4F5F7(요약·칩) · #F6F7F9(약관) 3단으로 용도를 나눈다
- 모션은 0.25s ease(48회)·0.35s(14회) 이내, 버튼만 0.3s cubic-bezier(.4,0,.2,1)
Don't
- #13BD7E 위에 흰 글자를 올리지 않는다 — 2.44:1, 27쌍 AA 미달(사이트 자체가 위반 중)
- #878E9C(3.29:1, 54쌍)·#5C818A on #F0F6F8(3.88:1, 27쌍)·#877AF5 위 흰 글자(3.42:1)를 본문·버튼 라벨에 쓰지 않는다
- 그림자로 카드를 띄우지 않는다 — 10페이지 합쳐 box-shadow 14회(0 2px 8px .1 ×6 · 0 4px 9px .15 ×4 · 0 0 2px .26 ×4)뿐
- keyframe 애니메이션·스크롤 전환을 넣지 않는다 — animations 0, transitions 0, interactiveDelta는 링크 color-shift 1건
- Pretendard Variable로 바꾸지 않는다 — 정적 5종 서브셋이며 600은 로드만 되고 0글리프. 웨이트는 400/500/700/800 4단
- 9px·2px 같은 스케일 밖 여백(2,209회·428회)을 재현하지 않는다 — 출처 미확인 잔재
- 히어로 슬라이드 CTA 색(#877AF5·#FFBE4C·#4A88E5)을 제품 UI 액센트로 전용하지 않는다 — 프로모션 슬라이드 전용
- 카드 24px 라운드·#F0F2F5 보더(OmD 제안)를 그대로 쓰지 않는다 — 실측 0회, 보더는 #D0D6DE
