베스핀글로벌
흰 지면과 남색 #0F172A 띠를 번갈아 쌓고, 채도는 파랑 #2573FF 한 점에만 준다.
베스핀글로벌은 클라우드·AI 전환을 파는 기업 사이트로, 흰 바탕과 남색(#0F172A) 띠를 번갈아 쌓아 긴 페이지를 끊어 읽게 만듭니다. 한글은 Pretendard가 89%를 그리고 문의 페이지 제목이 64px/700까지 올라가, 국문 대형 제목을 실제로 쓰는 몇 안 되는 사례입니다. 히어로가 Slider Revolution 슬라이더(1,256×688 캔버스 3장)로 되어 있어 첫 화면 카피가 40px/700 국문 두 줄로 들어가는 구조도 참고할 만합니다. 콘텐츠 폭 1,400px에 섹션이 20개 넘게 이어지는 편이라, 정보량이 많은 B2B 기업 사이트를 설계할 때 쓰기 좋습니다.
https://www.bespinglobal.comColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 300 / 400 / 500 / 600 / 700 / 800display·heading·body·ui 전부, 한글 89.0% + 라틴 89.8%
Apple SD Gothic Neo · 400 / 600 / 700한글 폴백 (웹폰트 아님)
Noto Sans KR Thin · 100잔여 선언 (거의 안 그림)
Roboto · 400 / 700라틴 잔여
FontAwesome · 400 / 900아이콘
Type Scaleraw(1920) 기준 47단이 관측됐고 위 11단이 count 상위다
hero64px · 700 · 1.15
다람쥐 헌 쳇바퀴
h148px · 700 · 1.4
다람쥐 헌 쳇바퀴
h240px · 700 · 1.35
다람쥐 헌 쳇바퀴
h2-cta38.4px · 700 · 1.6
다람쥐 헌 쳇바퀴
h332px · 700 · 1.35
다람쥐 헌 쳇바퀴
h424px · 700 · 1.07
다람쥐 헌 쳇바퀴
lead20px · 700 · 1.2
다람쥐 헌 쳇바퀴
body16px · 400 · 1.6
다람쥐 헌 쳇바퀴
ui14px · 700 · 1.3
다람쥐 헌 쳇바퀴
label13px · 500 · 1.23
다람쥐 헌 쳇바퀴
caption12px · 700 · 1.3
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 26,546글리프(89.0%) · Pretendard Medium 2,149(7.2%) · Pretendard SemiBold 542(1.8%) · Apple SD Gothic Neo 425(1.4%) · Noto Sans KR Thin 87(0.3%) · Pretendard ExtraBold 23 |
| hangulWeights | 400 주력 Pretendard 22,075 · 700 Pretendard 4,471 · 500 Medium 2,034 · 600 SemiBold 542 · 800 ExtraBold 23. 400+700 두 축이 88.9%를 차지한다 |
| body | 16px/400 lh1.6 ls−0.4px (count 13). 남색 띠 위 본문은 색만 #C3CADD로 바뀐다 |
| sub | 20px/400 리드(13회) · 20px/700 lh1.20 ls−0.4px 강조 리드(5회) |
| label | 14px/700(15회) 버튼 라벨 · 13px/500 lh1.23 ls−0.13px(19회) 뱃지 · 12px/700 lh1.30(22회) 캡션 |
| mixing | 국영문이 한 줄에 자주 섞인다 — 문의 히어로 'AI 도입의 성공 전략 지금 바로 전문가에게 문의하세요.'가 혼용(한글 다수)이고, 홈 남색 띠 제목 '하나의 Layer부터 전체 Stack까지'도 혼용이다. 혼용 노드는 같은 Pretendard가 그리므로 서체 전환이 없다. 다만 -apple-system을 1순위로 선언한 노드(raw 6단)에서 한글 425글리프가 Apple SD Gothic Neo로 떨어진다 |
| hangulHeadings | 있다. 국문 최대는 문의 페이지 h1 64px/700 lh1.15 자간 0(혼용·한글 다수, 1440 실측 y220). 순한글만으로 된 최대는 홈 CTA 48px/700 '기업 맞춤 솔루션을 만나보세요.'(y6874)와 홈 슬라이더 40px/700 lh1.275 '‘세계 최초’ 원전 특화'(sr7-txt y340) |
| verdict | 국문 대형 제목 레퍼런스로 유효하다 — 64px/700까지 올리면서 자간을 0으로 두는 선택이 실측으로 확인된다. 다만 회색 위계(#999999 826회)의 대비 미달이 많아 색 위계는 그대로 베끼면 안 된다 |
| rendered | Pretendard ×26546 · Pretendard Medium ×2149 · Pretendard SemiBold ×542 · Apple SD Gothic Neo ×425 · Noto Sans KR Thin ×87 · FontAwesome ×55 · Pretendard ExtraBold ×23 · Font Awesome 6 Free Solid ×1 |
영문 · Latin국문과 동일
| latinFont | Pretendard 18,386글리프(95.8%) · Noto Sans KR 612글리프(3.2%) · Roboto 112글리프(0.6%) · .SF NS 71글리프(0.4%) |
| latinWeights | 실측 페이스 Medium · Thin · SemiBold · Light · ExtraBold |
| share | 라틴 19,184글리프 / 한글 29,828글리프 — 지면의 39.1%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: hero 64px/700 · h1 48px/700 · h2 40px/700 · h2-cta 38.4px/700 · h3 32px/700 · h4 24px/700 · lead 20px/700 · body 16px/400 · ui 14px/700 · label 13px/500 · caption 12px/700 |
| mixing | 국영문 혼용 노드 731개(전체 2,175개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 39.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 95.8%를 그리는 Pretendard가 한글도 98.1% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Noto Sans KR · Font Awesome 6 Free Solid |
| rendered | Pretendard ×17199 · Pretendard Medium ×906 · Noto Sans KR Thin ×612 · Pretendard SemiBold ×253 · Roboto ×112 · .SF NS ×71 · Pretendard Light ×14 · Pretendard ExtraBold ×14 · Font Awesome 6 Free Solid ×3 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 10px | |
| Max width | 1400px | |
| Section gap | 섹션 높이 자체가 간격을 만든다 — 홈 17섹션 y70~6874, 회사소개 22섹션 y70~7788. 명시 패딩은 히어로 96/80(about #0)과 카드 32/32(리더십)뿐이고 나머지 섹션은 0/0 | |
| Header | 70px fixed | |
| Card Padding | 인사이트 카드 467x508 (3열 x 3행, gap 0) · 리더십 카드 343x24 pad 32/32 · FAQ 행 963x121 · 상담 폼 행 595x88 | |
| Button Padding | 14x12 (주·보조 CTA r8) · 10x28 (뉴스레터 r8) · 7.2x13.6 (성숙도 칩 r20) · 8/0/6 (아웃라인 알약 r50) | |
| Grid | 파트너 로고 12개(클라우드)·11개(데이터/AI)·7개(보안) · 아카이브 태그 페이지는 22x7 120x16 반복 · 제품 요약 4x2 451x27 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 4px | 50회 · 작은 버튼·구분 블록 |
| input | 6px | 27회 · 폼 인풋·셀렉트 |
| standard | 8px | 234회 · CTA 버튼·카드 표준 |
| medium | 12px | 92회 · 아이콘 타일·박스 |
| large | 16px | 94회 · 인풋 래퍼·큰 카드 (16 16 0 0 상단 라운드 20회 포함) |
| chip | 20px | 12회 · AI 성숙도 선택 칩 |
| pill-outline | 50px | 66회 · 아웃라인 알약 버튼('관련 상품 자세히보기') |
| circle | 50% | 46회 · 슬라이더 화살표·아바타 |
| pill | 999px | 43회 · 카테고리 뱃지·성숙도 뱃지 |
Guidelines
Do
- 국문 대형 제목을 64px/700 lh1.15까지 올린다 — 이 사이트는 문의 페이지 h1을 실제로 그 크기로 쓴다(자간 0)
- 긴 페이지를 흰 #FFFFFF와 남색 #0F172A 띠의 교대로 끊는다(홈 17섹션 중 남색 3·먹 1·파랑 1)
- CTA는 같은 치수 두 개를 색으로만 구분한다 — 14px/700 패딩 14x12 radius 8px, 채움 #2573FF / 흰색 + #222222
- 본문은 16px/400 lh1.6 자간 −0.4px, 2차 텍스트는 #666666(5.74:1)까지만 내린다
- 콘텐츠 폭 1400px 중앙 고정(10페이지 전부, 홈 후보 1400x49)
- 라운드는 8px 표준 한 값으로 통일하고, 알약은 뱃지 999px·버튼 50px으로 자리를 나눈다
- 모션은 0.3s ease 한 값으로 밀고(3,548회) 진입 연출만 fadeInUp 0.75s로 준다
Don't
- #999999를 본문에 쓰지 않는다(#F7F8F8 위 2.68:1 · 60쌍이 AA 미달, 팔레트 2위 826회라 가장 흔한 실수 자리다)
- 파랑 위 흰 글자를 작게 쓰지 않는다 — #fff on #2573FF 4.22:1(53쌍), #fff on #3B82F6 3.68:1(16쌍) 둘 다 AA 미달이다
- 간격을 8배수로 가정하지 않는다 — 실측 최빈은 10px(2,217)·12.8px(1,774)이고 8px은 3위(1,047)다
- #6927A6은 단색으로 쓰지 않는다 — 관측된 4회가 전부 그라디언트 끝점이다
- 스크롤에 잠긴 스크럽 연출을 넣지 않는다 — 3페이지 실측에서 스크럽 0건, 전환 10건이 전부 one-shot이다
- -apple-system 선언을 남기지 않는다 — 한글 425글리프가 Apple SD Gothic Neo로 떨어져 Mac/Windows에서 다르게 보인다
- 히어로 카피를 캔버스로 그리지 않는다 — 이 사이트도 캔버스는 배경이고 카피는 sr7-txt 텍스트 레이어다
