삼성바이오로직스
흰 지면 위 영문 디스플레이 한 줄, 그 아래 국문은 300 웨이트로 낮게 깔고 자간은 손대지 않는다.
삼성바이오로직스는 글로벌 B2B 코퍼레이트 사이트답게 흰 지면과 파란 액센트 한 색으로 정리된 사이트입니다. 히어로의 가장 큰 글자는 영문 'Driven. For Life.'(58px)이고 국문은 그 아래 26px 부제로 내려가, 국문 대형 히어로 레퍼런스로는 맞지 않습니다. 대신 국문 본문을 Light(300) 웨이트로 낮게 깔고 자간을 전혀 건드리지 않는 조판, 그리고 38px 국문 섹션 제목이 페이지를 끌고 가는 구조는 그대로 배울 만합니다. 영문 디스플레이 위에 국문 본문을 얹는 국영문 2단 히어로나, 정보량이 많은 기업·기관 사이트를 설계할 때 참고하기 좋습니다.
https://samsungbiologics.com/krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Noto Sans KR · 300 / 400 / 500 / 600 / 700한글 전담 — heading·body·ui·caption
Gilroy · 300 / 400 / 500 / 600 / 700영문 디스플레이·nav·라벨
Montserrat · 300 / 400 / 500 / 700숫자·영문 본문 폴백
Apple SD Gothic Neo · 500OS 폴백(소수)
Type Scale1440 기준이고 1920에서 같은 px로 측정됐다 — vw·clamp 스케일링이 없다
display58px · 700 · 1.5
Handgloves 123
stat50px · 700 · 1.16
Handgloves 123
h238px · 500 · 1.58
다람쥐 헌 쳇바퀴
page-title36px · 500 · 1.5
다람쥐 헌 쳇바퀴
h1-sub26px · 400 · 1.4
다람쥐 헌 쳇바퀴
body-lg18px · 300 · 1.5
다람쥐 헌 쳇바퀴
body16px · 300 · 1.5
다람쥐 헌 쳇바퀴
body-sm15px · 300 · 1.67
다람쥐 헌 쳇바퀴
label14px · 500 · 1.5
다람쥐 헌 쳇바퀴
caption12px · 500 · 1.5
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR — Light 5,952(40.1%) · Regular 4,873(32.8%) · Medium 3,528(23.8%) · Bold 347(2.3%). 자체 호스팅 웹폰트다(NotoSansKR-*.woff2, URL 91개, CDP isCustomFont=true). 선언명은 `ssl-font`라 이름 대조로는 실체를 못 맞춘다. 나머지 0.6%는 Apple SD Gothic Neo(86글리프)로 떨어지는 소수 노드다 |
| hangulWeights | 300 Light 40.1% · 400 Regular 32.8% · 500 Medium 23.8% · 600 Bold 2.3% · 700 Bold 7글리프. **700은 사실상 쓰지 않는다** — 굵기로 위계를 만들지 않고 크기와 색으로 만든다 |
| body | 16px w300 lh1.50(24px) 자간 normal ×28이 기준이고 15px w300 lh1.67(25.05px) ×26이 카드 본문이다. 히어로 본문만 15px w400 lh24px에 색이 #041C59다 |
| sub | 히어로 국문 부제 26px w500 lh34.06px(1.31) 자간 normal, 색 #041C59, 2행. 영문 디스플레이 58px 바로 아래에 온다 |
| label | 브레드크럼·탭 14px w500 lh1.50 ×15 · 푸터 캡션 12px w500 lh1.50 자간 +0.25px ×9(사이트에서 유일한 양수 자간) |
| mixing | 선언 두 갈래로 갈린다 — `ssl-gilroy, ssl-font`인 요소는 라틴을 Gilroy가, 한글을 폴백 `ssl-font`(Noto Sans KR)가 그린다(홈 26/500 '인류의 더 건강한 내일을 만들어 갑니다.' → Noto Sans KR Medium×56 + Gilroy Medium×7). `ssl-font` 단독이면 라틴은 Montserrat다(15/400 본문 → Noto Sans KR Regular×230 + Montserrat×55). 한 줄 안 혼용이 잦아 혼용 노드가 322개(전체 1,257개)이고 322개 전부 한글만 담은 프로브로 재측정했다 |
| hangulHeadings | 있다. 최대 38px w500 lh60.04px(1.58) 자간 normal — 홈 섹션 제목 6개(더 건강한 삶을 만드는 지속가능한 CDMO 파트너 · 숫자로 보는 삼성바이오로직스 · 전문 자료실 · 회사 소식 · 문의하기 · 더 알아보기). 서브페이지 국문 최대는 36px w500(사회공헌) → 32px w500(존림) → 30px w500(국내 경력) → 26px w400(원료의약품·감사보고서·국내경력직)으로 내려간다 |
| verdict | **국문은 중형까지만 맡는다 — 38px 이상은 없다.** 폴드 최대 58px w700은 영문 'Driven. For Life.'(Gilroy Bold, #041C59)이고 국문은 그 아래 26px w500 부제로 내려간다. 40px 이상 국문 대형 히어로 레퍼런스로는 부적합하다. 유효한 쓰임은 둘이다 — ① 영문 디스플레이 58 + 국문 부제 26 + 국문 본문 15를 한 색(#041C59)으로 묶는 **국영문 2단 히어로** ② 38px w500 lh1.58 자간 normal이 페이지를 끌고 가고 본문은 300 웨이트로 낮게 까는 **정보량 많은 코퍼레이트 국문 조판**. 자간을 전 구간 normal로 두는 규칙은 라이브러리에서 드문 편이다 |
| rendered | Noto Sans KR Light ×5952 · Noto Sans KR Regular ×4873 · Noto Sans KR Medium ×3528 · Noto Sans KR Bold ×347 · Apple SD Gothic Neo ×86 · Montserrat ×65 |
영문 · Latin영문 전용
| latinFont | Montserrat 10,441글리프(65.3%) · Gilroy 4,128글리프(25.8%) · Noto Sans KR 1,369글리프(8.6%) · Apple SD Gothic Neo 56글리프(0.4%) |
| latinWeights | 실측 페이스 Medium · Light · SemiBold · Regular · Bold |
| share | 라틴 15,996글리프 / 한글 14,851글리프 — 지면의 51.9%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Montserrat를 쓰는 단: stat 50px/700 |
| mixing | 국영문 혼용 노드 322개(전체 1,257개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Montserrat 영문 전용(65.3% · 최상단 디스플레이 독점) · Gilroy 영문 전용(25.8% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Montserrat 라틴 65.3% / 한글 0.4% · 최상단 디스플레이 독점 · Gilroy 라틴 25.8% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 50px) |
| sharedWithKorean | 국문과 같은 서체: Montserrat · Noto Sans KR · Apple SD Gothic Neo |
| rendered | Montserrat ×10441 · Gilroy ×1864 · Gilroy Medium ×1507 · Noto Sans KR Light ×857 · Gilroy Light ×384 · Gilroy SemiBold ×294 · Noto Sans KR Regular ×270 · Noto Sans KR Medium ×195 · Gilroy Bold ×79 · Apple SD Gothic Neo ×56 · Noto Sans KR Bold ×47 · Apple Color Emoji ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 10px | |
| Max width | 1200px | |
| Docs width | 800px | |
| Section gap | 섹션 상하 패딩으로 벌린다 — 95/95 ×4(채용 블록) | |
| Header | 91px fixed | |
| Grid Services | 4열 288px, 거터 16px (288×4+16×3=1200) — 홈 서비스 카드 | |
| Grid News | 3열 384px, 거터 24px (384×3+24×2=1200) — 홈 뉴스·Related Content(거터 12) | |
| Grid Stats | 4열 191px, 거터 186px — 숫자 밴드 | |
| Grid Sitemap | 6열 110px, 거터 117px — 푸터 사이트맵 | |
| Card Padding | 카드 자체 패딩 없음(0px) — 이미지 아래 텍스트를 20/30px 간격으로 쌓는다 | |
| Button Padding | 7px 10px 8px (히어로 알약 140×40) · 0 10px (헤더 아웃라인 112×34) · 8px 20px (더 알아보기) · 0 25px (CTA 밴드 버튼) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 17px | 4회 · 작은 버튼 |
| standard | 20px | 11회 · 히어로 알약 140×40 · 더 알아보기 |
| pill | 26px | 9회 · 헤더 Contact Us 아웃라인 112×34 |
| — | 30px | 2회 · 태그 칩(#Development Service) |
| large | 36px | 18회 · 최다 — 큰 알약 버튼 |
| — | 40px | 1회 · 관측만 |
| circle | 50% | 8회 · 아이콘 버튼 |
| circle-full | 100% | 11회 · 카드 원형 화살표 버튼 |
Guidelines
Do
- 국문 제목은 38px w500 lh1.58(60.04px) 자간 normal에서 멈춘다 — 이 사이트의 국문 최대치이고 홈 섹션 제목 6개가 전부 같은 값이다
- 국문 본문은 웨이트 300을 기본으로 깐다 — 한글 14,851글리프 중 Light(300) 40.1% · Regular(400) 32.8%로 73%가 300~400이고 700은 7글리프뿐이다
- 자간을 건드리지 않는다 — 화면에 보이는 단은 12px 캡션(+0.25px)과 숫자 카운터(−1px)를 빼고 전부 normal이다
- 영문 디스플레이는 Gilroy Bold 58/700 lh1.50 한 자리에만, 국문이 섞이면 같은 선언(`ssl-gilroy, ssl-font`)에서 Noto Sans KR로 폴백시킨다
- 지면은 흰색 단일 — 90섹션 중 80(88.9%)이 #FFFFFF이고 색 밴드는 #FAFAFC 5 · #222EDD 2 · #F0FAF9 2 · #004963 1뿐이다
- 액센트 #222EDD는 버튼 배경·1px 아웃라인·링크 호버(#222222→#222EDD)·CTA 밴드에만 쓴다(229회, 9페이지)
- 라운드는 버튼·아이콘에만(17·20·26·30·36·40 + 50%/100%) 주고 카드·이미지는 0px로 둔다(10페이지 repeated.radius 전부 0)
- 콘텐츠 폭 1200 중앙(좌우 120)에 4열 288/거터 16, 3열 384/거터 24를 맞춘다 — 둘 다 합이 정확히 1200이다
Don't
- 국문에 대형 디스플레이를 맡기지 않는다 — 58px 자리는 영문 'Driven. For Life.'이고 국문은 26px 부제로 내려간다. 국문 히어로 조판 레퍼런스로 쓰지 말 것
- 그림자로 띄우지 않는다 — 9페이지 box-shadow 0 · gradient 0이고 헤더도 transparent다
- raw의 −1.6px 자간을 베끼지 않는다 — 30px/600 ×9와 16px/500 ×19는 0×0 숨은 팝업 레이어('Your download is ready'·'Subscribe to Our Newsletter') 것이고 24px/600 −1px은 쿠키 배너다
- #888888을 본문에 쓰지 않는다 — #FAFAFC 위 3.4:1로 AA 미달(9쌍)이다
- 색 밴드 위 텍스트를 상속색으로 두지 않는다 — wcag에 #222222/#222EDD 1.9:1 ×5 · #222222/#004963 1.62:1 ×5가 남아 있다(실측하면 밴드 제목은 #F8F8FA로 다시 칠해져 있고, 색을 안 고친 래퍼 요소가 집계된 것으로 보인다 — 미확인)
- 여백을 8px 배수로 짜지 않는다 — 실측 최다는 10px×675 · 20px×622 · 30px×272 · 50px×189의 10px 사다리이고 7px×417 · 9px×247 · 13px×108 · 33px×108이 섞여 있다. 이 홀수 잔재는 재현하지 말 것
- 1×1px 스크린리더 전용 h1을 조판 근거로 삼지 않는다 — 홈 h1 'Samsung Biologics' 58px/500이 position:absolute 1×1px이다
