업비트 (Upbit)
숫자가 주인공인 지면 — 자간 0·행간 1.5·라운드 2px으로 서체의 개성을 죽이고 24~52px 행에 표를 채운다.
디지털 자산 거래소의 사이트로, 지면의 주인공이 글이 아니라 숫자와 표입니다. 마케팅 화면과 시세·호가 같은 데이터 화면이 배경색부터 갈리고, 라운드는 2px·행간은 1.5로 통일해 서체의 개성을 최대한 눌렀습니다. 국문 제목이 36px에서 멈추고 자간 규칙이 아예 없어 대형 제목 참고로는 약합니다. 대신 높이 24~52px의 행이 촘촘히 쌓이는 국문 표·리스트 조판, 그리고 한글은 본문 서체가 숫자·영문은 다른 서체가 그리는 혼용 구조를 볼 때 유효합니다.
https://www.upbit.com/homeColor Palette
Primary
Label
Line
Background
Static
Accent
Typography
Noto Sans KR · 400 / 500 / 700한글 본문·제목 전부
Roboto · 400 / 500 / 700라틴·숫자 (시세·수량)
Pretendard · 400 / 500 / 600스테이킹 페이지 한정
Droid Sans · 400미사용(선언만)
Type Scale38개 스타일 전부 letterSpacing이 null이다 — 자간 규칙 0종
display36px · 700 · 1.5
다람쥐 헌 쳇바퀴
h132px · 700 · 1.5
다람쥐 헌 쳇바퀴
h220px · 700 · 1.5
다람쥐 헌 쳇바퀴
h317px · 700 · 1.47
다람쥐 헌 쳇바퀴
body16px · 400 · 1.5
다람쥐 헌 쳇바퀴
body-sm15px · 400 · 1.47
다람쥐 헌 쳇바퀴
ui14px · 400 · 1.5
다람쥐 헌 쳇바퀴
ui-sm13px · 400 · 1.46
다람쥐 헌 쳇바퀴
caption12px · 400 · 1.5
다람쥐 헌 쳇바퀴
micro10px · 500 · 1.2
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR — 한글 22,519글리프 중 21,229(94.3%). CDP 보고명은 'Noto Sans KR Thin'(가변 폰트 기본 인스턴스명으로 추정, 미확인). /staking/items 한 페이지만 Pretendard 1,185글리프(937+156+92)로 갈리고, 선언 1순위 Roboto가 그리는 한글은 105글리프(0.5%)뿐이다 |
| hangulWeights | 400 주력(19,491글리프) · 700(1,330) · 500(408) — Noto Sans KR 기준, 사실상 2단. 300은 선언(wght@300;400;500;700)만 있고 렌더 0 |
| body | 16px/400 lh1.5 자간 0 (스타일 42회, 38종 중 최다) |
| sub | 15px/400 lh1.47 자간 0 (36회) — 글로벌 nav 라벨 12개가 이 크기 |
| label | 14px/400 lh1.5 (41회) 표·리스트 셀 · 12px/400 링크(34회) · 10px/500 lh1.2(14회) 차트 축 · 8.4px/400(25회) 최소 |
| mixing | 선언 순서가 Roboto → Noto Sans KR → Dotum → 돋움 → Arial → Helvetica라 라틴·숫자는 Roboto(라틴 12,438글리프)가, 한글은 폴백 자리의 Noto Sans KR이 그린다 — 한글만 떼어 재측정하면 Roboto 몫은 105글리프(0.5%)로 사실상 0이다. 한 줄 안에서 서체가 갈리는 구조이고 자간 보정이 0종이라 국영문 폭 차이를 조판으로 메우지 않는다 |
| hangulHeadings | 있다. 최댓값은 홈 히어로 36px/700 span '대한민국 / 디지털 자산 거래소'(1440, 섹션 높이 528) 한 곳이고, 그다음이 32px/700 페이지 제목 6개(공지사항 · 수수료 안내 · 업비트소식 · 정책 및 거래지원 문의 · 입출금 이용 안내 · 코인모으기 · '강력한 멀티팩터 인증으로 24시간 안심거래')다. 스테이킹의 36px/700 '로그인 후 이용해 주세요.'는 제목이 아니라 빈 상태 문구다 |
| verdict | 국문 대형 히어로 레퍼런스로는 약하다 — 최대 36px/700이고 자간 규칙이 0종이라 디스플레이 조판에서 가져올 값이 없다. 대신 밀도 높은 국문 데이터 지면(행 24~52px, 본문 16/400 lh1.5, 셀 14/400, 링크 12px)의 레퍼런스로 유효하며, '자간을 건드리지 않고 행간 1.5로 통일한 국문 표 조판'의 실측 사례다 |
| rendered | Noto Sans KR Thin ×21360 · Pretendard ×937 · Pretendard SemiBold ×156 · Roboto ×111 · Pretendard Medium ×92 |
영문 · Latin폴백
| latinFont | Roboto 12,689글리프(86.0%) · Noto Sans KR 1,773글리프(12.0%) · Pretendard 285글리프(1.9%) |
| latinWeights | 실측 페이스 Thin · SemiBold · Medium |
| share | 라틴 14,747글리프 / 한글 22,656글리프 — 지면의 39.4%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다 |
| mixing | 국영문 혼용 노드 728개(전체 2,646개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Roboto 폴백(86.0% · 선언됨) |
| verdict | 영문 전용 서체 없음(폴백) — 라틴을 Roboto 86.0%가 그리지만 전부 OS·브라우저 기본 페이스다. 서체를 고른 결과가 아니라 스택이 흘러간 결과이므로 **디자인 결정으로 인용하지 말 것** |
| sharedWithKorean | 국문과 같은 서체: Roboto · Noto Sans KR · Pretendard |
| rendered | Roboto ×12689 · Noto Sans KR Thin ×1773 · Pretendard ×187 · Pretendard SemiBold ×92 · Pretendard Medium ×6 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 8px | |
| Max width | 1360px | |
| Docs width | 800px | |
| Section gap | 홈 섹션 패딩 64/64 | |
| Header | 80px sticky | |
| Grid Home | 히어로 5열 192×238 gapX −192(카드 겹침·캐러셀 추정, 미확인) · 보안 카드 3열 440×200 gapX 20 | |
| Grid Staking | 카드 5열 171×150 gapX 16 r6px bg rgb(250,250,250) · 아이콘 4열 26×25 | |
| Row Heights | 홈 시세 640×24 ×6 · 체결 990×32 ×25 · 차트 헤더 990×33 ×4 · 스테이킹 약관 968×50 ×4 · 마켓 400×45 ×25 · 호가 328×46 ×30 · 고객센터 좌측 메뉴 192×42 ×16 · 공지 860×52 ×23 · 소식 860×52 ×20 · 스테이킹 자산 370×80 ×6 · 가이드 태그 93×16 ×44(7열 gap 6) | |
| Card Padding | 카드 440×200 r4px + 1px rgb(214,216,219) 보더 | |
| Button Padding | 0px 8px (필터 버튼 '거래대금 기준(24H)' 13.3333/400 r4px) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| standard | 2px | 30회 · a·div 기본 — 최다 |
| — | 3px | 2회 · div 관측만 |
| card | 4px | 24회 · ul·a·카드·필터 버튼 |
| card-lg | 6px | 5회 · 스테이킹 카드 171×150 (layout 실측, 1440) |
| tab | 4px 4px 0px 0px | 2회 · 탭 상단 라운드 |
| badge | 12px | 1회 · span 배지 |
| circle | 50% | 1회 · 원형 아이콘 |
| pill | 100px | 1회 · 알약 1회뿐 — 이 사이트의 예외 |
Guidelines
Do
- 국문 본문은 Noto Sans KR 16px/400 lh1.5, 자간 0으로 둔다 — 38개 타입 스타일 전부 letterSpacing이 null이라 자간을 손대는 규칙 자체가 없다
- 표·리스트 행 높이를 24~52px로 잡는다(홈 시세 640×24 · 체결 990×32 · 마켓 400×45 · 호가 328×46 · 공지 860×52)
- 콘텐츠 폭은 1360 중앙(후보 1360×18)으로, 긴 문서만 800폭으로 좁힌다(/project docHeight 10,869 · 본문 행 800×29 ×33)
- 라운드는 2px(30회)·4px(24회)만 쓴다. 카드도 4px + 1px rgb(214,216,219) 보더로 끝낸다(440×200, gapX 20)
- 숫자·라틴은 Roboto(라틴 12,438글리프)에 맡기고 한글은 Noto Sans KR(21,229글리프)로 받는다 — 시세 32px/500은 Roboto가 그린다
- 등락·상태 색은 하드코딩하지 말고 --upk-color-content-*·--theme-colors-* 변수(17종)로 받는다(하락 #3488EF · 멜론 상승 #1FB28B · 별 #ffa800)
- 헤더를 두 종류로 나눈다 — 홈 80px rgb(252,252,253), 서비스 60px rgb(0,53,151). 둘 다 sticky이고 nav 라벨 12개는 동일하다
- 마케팅 섹션에만 여백을 준다(패딩 60~100px). 표·리스트 섹션은 0/0으로 붙인다
Don't
- #8E929B(3.12:1, 33쌍)·#BEC1C6(1.81:1, 7쌍)를 본문 텍스트에 쓰지 않는다 — 캡션·비활성 전용
- #DD3C44를 흰 배경 본문 색으로 쓰지 않는다(4.37:1 ×5, #f2f5fa 위에서는 4.0:1 ×3으로 더 낮다) — 상승 숫자·기호에만
- 그림자로 띄우지 않는다 — 10페이지 통틀어 그림자 1종 3회(rgba(0,0,0,0.2) 0 4px 20px), 그라디언트 0종
- 8.4px(25회)·10px(14회) 텍스트를 새로 만들지 않는다 — 국문 가독성이 무너지는 크기이고 차트 축 잔재로 보인다
- 국문 대형 디스플레이를 기대하지 않는다 — 최댓값이 홈 히어로 36px/700 한 곳뿐이다(32px 페이지 제목이 그다음)
- 커스텀 이징을 넣지 않는다 — ease(25회)와 Tailwind 기본 cubic-bezier(0.4, 0, 0.2, 1)(10회)이 전부, 최장 0.5s(21회)
- 알약 버튼을 쓰지 않는다 — radius 100px은 전체 1회뿐이다
- 8px 스케일 밖으로 여백을 늘리지 않는다(8px 15회 · 16px 12회 · 10px 12회 · 12px 10회 순)
