한미약품
흰 지면과 브랜드 레드 한 색. 큰 목소리는 영문 Poppins가 내고, 한글은 −0.5% 자간으로 조용히 받친다.
한미약품 홈은 흰 지면에 검정과 브랜드 레드 한 색만 쓰는 정직한 코퍼레이트 사이트입니다. 큰 제목은 전부 영문 Poppins가 맡고 한글은 본문·설명 자리에 머무는데, 국문이 크게 쓰인 곳은 채용 문구 64px 한 군데뿐입니다. 대신 자간 규칙이 아주 또렷해서 16~64px 전 구간을 −0.5% 한 값으로 묶고 100px 이상에서만 더 좁히므로, 국문 본문 조판 기준을 잡을 때 그대로 가져다 쓸 만합니다. 그림자도 그라디언트도 없고 모서리도 거의 각이라, 색면 전환만으로 리듬을 만드는 코퍼레이트 랜딩을 설계할 때 참고하기 좋습니다.
https://www.hanmi.co.krColor Palette
Primary
Label
Line
Background
Static
Typography
Pretendard · 400 / 600 / 700국문 전담 — heading·body·ui·caption
Poppins · 400 / 500 / 600 / 700영문 디스플레이 전용 — 300·100·50·40px 제목
Type Scale자간이 한 규칙으로 잠겨 있다 — 16px·18px·20px·24px·28px·32px·40px·50px·64px가 전부 −0
marquee300px · 500 · 1.25
Handgloves 123
display100px · 400 · 1.2
Handgloves 123
display-ko64px · 400 · 1.4
다람쥐 헌 쳇바퀴
h250px · 700 · 1.55
Handgloves 123
h340px · 600 · 1.55
Handgloves 123
lead28px · 400 · 1.5
다람쥐 헌 쳇바퀴
subhead24px · 600 · 1.55
다람쥐 헌 쳇바퀴
body20px · 400 · 1.55
다람쥐 헌 쳇바퀴
body-sm18px · 400 · 1.55
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.57
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard — self-hosted /font/Pretendard-*.woff2. 한글 1,493글리프 중 Pretendard 1,481(99.2%) · Pretendard SemiBold 12(0.8%) |
| hangulWeights | 400 1,277글리프(주력) · 700 169 · 600 47(Pretendard 35 + SemiBold 12) |
| body | 20px/400 lh1.55 ls−0.1px(−0.5%) — 55회로 사이트 최다 스타일 |
| sub | 28px/400 lh1.50 ls−0.14px(리드, 5회) · 24px/600 lh1.55 ls−0.12px(소제목, 14회) |
| label | 18px/400 lh1.55 ls−0.09px(31회) · 14px/400 lh1.57 ls−0.1px(날짜·푸터, 31회) |
| mixing | 층으로 분리한다 — 300·100·50·40px 대형은 전부 Poppins 영문이고 Pretendard는 64px 한 곳을 빼면 28px 이하만 맡는다. 라틴 1,783글리프 중 Poppins가 1,078(60.5%)이고 Pretendard도 705글리프를 함께 그려, 국문 문장 안의 영문·숫자는 Pretendard로 이어진다 |
| hangulHeadings | 있다 — 단 한 곳. §10 채용 CTA(y8414 h388)의 64px/400 lh1.40 ls−0.32px Pretendard '당신의 꿈이 한미약품의 미래입니다. 당신을 기다립니다.'(raw display 64px count 1). 그 위의 300px 마퀴·100px 섹션 제목 6회·50px 소제목 15회는 전부 Poppins 영문이며, 폴드 히어로(§1)에는 제목 텍스트가 0줄이다 |
| verdict | 국문 본문·자간 규칙 레퍼런스로 유효하다 — 16~64px를 −0.5% 한 값으로 묶는 규칙이 또렷하고 본문 20/400 lh1.55가 55회로 굳어 있다. 국문 히어로·대형 제목 레퍼런스로는 부적합하다(국문 대형 64px 1회, 폴드 조판 0줄). 웹폰트는 실제로 로드된다(fontsrc: @font-face 12개 선언 · 11개 로드, Pretendard webfont) — OS 폰트 대체가 아니므로 Mac/Windows 렌더 차이는 없다 |
| rendered | Pretendard ×1481 · Pretendard SemiBold ×12 |
영문 · Latin영문 전용
| latinFont | Poppins 1,078글리프(60.5%) · Pretendard 705글리프(39.5%) |
| latinWeights | 실측 페이스 SemiBold · Medium |
| share | 라틴 1,783글리프 / 한글 1,493글리프 — 지면의 54.4%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Poppins를 쓰는 단: marquee 300px/500 · display 100px/400 · h2 50px/700 · h3 40px/600 |
| mixing | 국영문 혼용 노드 38개(전체 174개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | Poppins 영문 전용(60.5% · 선언됨 · 최상단 디스플레이 독점) |
| verdict | 영문 전용 서체가 있다 — Poppins 라틴 60.5% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 300px) |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Poppins ×838 · Pretendard ×540 · Pretendard SemiBold ×165 · Poppins SemiBold ×120 · Poppins Medium ×120 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 5px | |
| Max width | 1340px | |
| Section gap | 공통 섹션 갭이 없다 — 13섹션 중 세로 패딩을 가진 곳은 §4 R&D와 §8 제품 캐러셀 둘뿐이고 둘 다 200/200이다. 나머지 11섹션은 padding 0이며 섹션 자체 높이(238~1,736px)가 리듬을 만든다 | |
| Header | 92px fixed | |
| Content Width Candidates | 1340×22 · 672×4 · 900×4 · 760×1 (1440 기준 — 1340은 좌우 50px 여백) | |
| Card Padding | 제품 캐러셀 아이템 900×482 gap 30(§8 5열) · Newsroom/IR 타일 565×341(§3) · 공지 팝업 반복 항목 387×18 | |
| Button Padding | 언어 선택 0 33 0 15(r21) · Join Us 10 50(r60) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| standard | 2px | 9회 · div·button 기본 — 사실상 각진 모서리 |
| small | 5px | 2회 · span |
| medium | 10px | 7회 · div·a(카드·썸네일) |
| pill-sm | 21px | 2회 · 언어 선택 버튼(h42 추정 알약, 보더 1px #C5C5C5) |
| pill | 60px | 1회 · Join Us 버튼(#E1251B, 패딩 10×50) |
| circle | 482px | 15회 · a — Newsroom·IR 타일의 대형 원형 아웃라인 |
Guidelines
Do
- 대형은 영문 Poppins에 맡기고 국문은 28px 이하 본문·설명에 둔다 — 100px/400 제목 6회가 전부 영문이고 국문 최대는 64px 1회다
- 자간은 16~64px 전 구간을 −0.5% 한 값으로 묶고, 100px −2.0% · 300px −4.0%로만 깊게 한다
- 국문 본문은 Pretendard 20px/400 lh1.55(55회), 보조는 18px/400(31회), 날짜·푸터는 14px/400 lh1.57(31회)
- 제목 강조는 색이 아니라 웨이트를 단어 단위로 바꿔 만든다 — 100px/400 제목 안에서 강조 단어만 <b> 600(§6 CDMO)
- 지면 전환은 색면으로 한다 — #FFFFFF 7섹션 · #F9F9F9 3 · #E1251B 2 · #091129 1 · #CCCCCC 1
- 큰 섹션의 세로 패딩은 200/200 두 곳(§4·§8)에만 주고, 나머지는 섹션 높이(238~1,736px)로 리듬을 만든다
- 콘텐츠 폭 1,340px 중앙(1440에서 좌우 50px), 알약은 버튼 2종(21px·60px)에만 쓰고 나머지는 2px로 각지게 둔다
Don't
- 그림자로 면을 띄우지 않는다 — box-shadow는 공지 팝업 1개(rgba(0,0,0,0.1) -2px 0 10px)뿐이고 그라디언트는 0이다
- #7B7B7B를 본문 색으로 쓰지 않는다 — 흰 지면에서 4.23:1로 AA 미달이며 52회 등장한다(통과하는 회색은 #525252 7.81:1 1회뿐)
- 레드 지면(#E1251B) 위에 검정 텍스트를 올리지 않는다 — 4.48:1로 미달(6회). 흰 텍스트는 4.69:1로 통과한다
- 국문 히어로 레퍼런스로 인용하지 않는다 — 국문 대형은 §10의 64px 한 곳뿐이고 300·100·50px는 전부 영문이다
- 커스텀 이징을 늘리지 않는다 — easing은 ease 단일 39회이고 커스텀 커브는 keyframe ani_scale의 cubic-bezier(0.76,…) 하나뿐이다
- 8px 스케일을 전제하지 않는다 — 실측 최다는 10px(72회)·5px(25회)·20px(22회)·25px(15회)로 5px 사다리다
- 이 값을 사이트 전체로 일반화하지 않는다 — 크롤이 49페이지를 방문하고 템플릿을 1개(홈)만 잡았고 raw도 홈 1페이지 병합이다
