셀트리온
흰 지면과 검정 글자만 남기고, 움직임은 폴드의 WebGL 세포 한 덩어리에 몰아준다.
셀트리온은 라이브러리에서 처음으로 three.js WebGL 캔버스를 폴드에 세운 사이트입니다. 지면은 흰색과 검정뿐이고 채도색은 스와이퍼 버튼과 배지에 14회밖에 나오지 않아, 화면의 인상은 사실상 폴드의 950px 캔버스 하나가 만듭니다. 조판에서 볼 것은 전용 서체를 아끼는 방식인데, 자사 서체 CelltrionSans는 웹폰트를 ExtraBold 한 벌만 얹고 100px·64px 제목과 1뎁스 내비게이션에만 써서 한글 글리프의 1.1%만 차지합니다. 나머지 98.9%는 Pretendard가 그립니다. 국문 100px 제목의 자간을 0으로 두는 점도 특이해서, 큰 국문에 음수 자간을 반사적으로 넣기 전에 반례로 볼 만합니다. 모션 라이브러리를 여섯 개나 얹고도 스크롤에 잠긴 모션은 하나도 없으니, 스크럽 레퍼런스로는 쓰지 마세요.
https://www.celltrion.com/ko-krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Celltrion Sans · 700 / 800display·page-title·gnb (국영문 겸용, 극소 비중)
Pretendard · 400 / 500 / 600 / 700body·ui·caption·라틴 전량, 한글 98.9%
Pretendard Variable · 500 / 600 / 700일부 페이지의 body·ui
Apple SD Gothic Neo · 400폴백
Type Scalepx은 1440 실측이고 raw(1920)와 갈리는 단이 있다 — 140px은 1920에서도 140px로 같지만 100px은 1920에서 153
display-en140px · 600 · 1
다람쥐 헌 쳇바퀴
display-ko100px · 700 · 1.2
다람쥐 헌 쳇바퀴
page-title64px · 700 · 1.2
다람쥐 헌 쳇바퀴
hero-en60px · 800 · 1.5
다람쥐 헌 쳇바퀴
h348px · 800 · 1.4
다람쥐 헌 쳇바퀴
h432px · 600 · 1.38
다람쥐 헌 쳇바퀴
lead24px · 500 · 1.42
다람쥐 헌 쳇바퀴
body-lg20px · 500 · 1.7
다람쥐 헌 쳇바퀴
body16px · 500 · 1.5
다람쥐 헌 쳇바퀴
caption12px · 500 · 1.33
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard — 한글 23,506글리프 중 Pretendard Medium 18,538(78.9%) · Pretendard 3,519(15.0%) · Pretendard SemiBold 1,197(5.1%) · Celltrion Sans 252(1.1%). 선언 1순위는 CelltrionSans인데 웹폰트가 ExtraBold 한 벌뿐이라 실제로 그리는 한글은 1.1%에 그친다 |
| hangulWeights | 500 Medium 18,868 · 700 2,690 · 600 1,263 · 400 458 · 800 227. 본문 기본이 400이 아니라 500이고, 800은 GNB 1뎁스와 홈 48px 제목에만 227글리프 나온다 |
| body | 16px / weight 500 / line-height 24px(1.5) / letter-spacing −0.02px (1440 실측, count 44). 넓은 본문은 20px/500 lh 34px(1.7) · 18px/500 lh 32.04px(1.78) |
| sub | 섹션 리드 24px/500 lh 34.08px(1.42) ls −0.02px · 사업 항목 24px/600 lh 33.12px(1.38) ls −0.06px |
| label | GNB 1뎁스 20px/800 Celltrion Sans lh 24px(1.2) ls −0.02px · 2뎁스 16px/500 Pretendard ls −0.2px ×18 · 푸터 16px/500 lh 24px ls −0.02px ×30 · 캡션 12px/500 lh 16px(1.33) ls −0.01px |
| mixing | 제목층과 본문층에서 서체가 갈린다. 100·64·50·48px 제목과 GNB는 Celltrion Sans, 32px 이하는 전부 Pretendard다. 한 줄 안에서 섞을 때는(예: '램시마®SC' 32px/600, '250,000L의 대규모 자체 생산 가능 설비 보유' 24px/600) Pretendard 하나가 한글과 라틴을 모두 그린다. Celltrion Sans가 라틴을 그리는 양도 506글리프(1.7%)로 작다 |
| hangulHeadings | 있음 — 다만 폴드에는 없다. 국문 최대는 홈 사업 3섹션의 100px/700 '연구개발'·'생산'·'유통'(y2745, lh 120px 1.2, ls 0, Celltrion Sans ×3)이고, 폴드(y158)의 60px/800 'Daring to Go Beyond'와 홈 최대 140px/600 'One-Stop Solution Provider'는 둘 다 영문이다. 서브페이지 제목은 10페이지 전부 64px/700 국문 h2(lh 77px 1.2, ls −0.13px = −0.2%)로 고정되고, 그 아래 50px/700(lh 1.4, ls −0.01px)과 48px/800(lh 1.4, ls −0.12px) 국문 섹션 제목이 이어진다. 미디어센터의 90px/700 '브로슈어'가 서브페이지 국문 최대다 |
| verdict | 국문 대형 조판 레퍼런스로는 2급이다 — 100px 국문이 서긴 하지만 폴드가 아니라 홈 중반 y2745이고, 폴드와 최대 글자는 영문이 가져간다. 대신 두 가지를 인용할 값이 있다. 첫째, 100px/700 국문의 자간이 0이다 — 64px −0.2%, 48px −0.25%와 함께 보면 클수록 좁히는 통상 방향과 반대로 간다. 둘째, 전용 서체를 제목·내비게이션에만 1.1%로 아껴 쓰고 본문 전량을 Pretendard에 넘기는 이원 구조가 또렷하다. 자사 서체가 한 벌(ExtraBold)뿐일 때 그 서체를 어디까지 쓸 수 있는지의 실증 사례로 쓸 만하다 |
| rendered | Pretendard Medium ×18538 · Pretendard ×3519 · Pretendard SemiBold ×1197 · Celltrion Sans ×252 |
영문 · Latin국문과 동일
| latinFont | Pretendard 28,889글리프(98.2%) · Celltrion Sans 506글리프(1.7%) · Apple SD Gothic Neo 19글리프(0.1%) |
| latinWeights | 실측 페이스 Medium · SemiBold |
| share | 라틴 29,414글리프 / 한글 23,506글리프 — 지면의 55.6%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: h4 32px/600 · lead 24px/500 · body-lg 20px/500 · body 16px/500 · caption 12px/500 |
| mixing | 국영문 혼용 노드 459개(전체 1,815개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 55.6%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 98.2%를 그리는 Pretendard가 한글도 98.9% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · Celltrion Sans |
| rendered | Pretendard Medium ×27733 · Pretendard ×800 · Celltrion Sans ×506 · Pretendard SemiBold ×356 · Apple SD Gothic Neo ×19 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 10px | |
| Max width | 1296px | |
| Section gap | 홈 사업 섹션은 간격이 아니라 높이를 1800px로 통일해 y2201·4001·5801에 놓는다. 서브페이지는 히어로 블록(y28 h229~339) 다음 414px 비주얼 띠, 그 뒤 본문 | |
| Header | 80px fixed | |
| Content Widths | 서브 1296(cands ×30~41) · 홈 1264(×22) · 약관 1184(×132) · 고객센터 1164(×3) | |
| Card Padding | 파이프라인 카드 315×402 g20 · News 404×360 g20 r20 · Magazine 1264×495 r40 | |
| Button Padding | 주 버튼 pad 0(높이만) r10 · 아웃라인 11.008×30 r4 · 필터 알약 12×24 r26.5 · 스와이퍼 이전 0 0 0 60 r30 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| small | 4px | 54회 · 인풋·아웃라인 버튼 |
| chip | 6px | 180회 · 앵커 칩 |
| standard | 8px | 576회 · 리스트 항목·링크 타일 — 최다 |
| button | 10px | 273회 · 주 버튼·모달 |
| tile | 20px | 49회 · News 카드 |
| pill-sm | 26.5px | 2회 · 필터 알약(pad 12×24) |
| control | 30px | 18회 · 스와이퍼 이전·다음 컨트롤 |
| large | 40px | 32회 · Magazine 카드·대형 이미지 |
| circle | 50% | 12회 · 슬라이드 이동 버튼 |
| xl | 120px | 6회 · 이미지 마스크 |
Guidelines
Do
- 국문 대형은 Celltrion Sans 100px/700 lh1.2 자간 0, 서브 제목은 64px/700 lh1.2 자간 −0.13px. 큰 국문에서 자간을 좁히지 않는 것이 이 사이트의 규칙이다
- 전용 서체는 제목과 GNB 1뎁스에만 쓴다 — 한글 23,506글리프 중 252개(1.1%). 본문·UI·라틴 전량은 Pretendard가 맡는다
- 본문 기본은 Pretendard 16px/500 lh1.5 자간 −0.02px(count 44). 400이 아니라 500이 기본 웨이트다
- 지면은 #FFFFFF 단색, 텍스트는 #000000 → #666666(5.74:1) 두 단만으로 끝낸다. #999999 이하는 부제·메타에만
- radius는 8px(576회)과 10px(273회) 두 값으로 UI를 덮고, 40px은 Magazine 카드 1264×495 같은 대형 면에만
- 헤더는 80px fixed에 rgba(255,255,255,0.9) — 반투명 흰색으로 콘텐츠를 비친다
- 반복 섹션은 간격이 아니라 높이를 통일한다 — 홈 사업 3섹션 전부 1800px
- 히어로 영상 위에는 rgba(18,18,18,0.4) 스크림을 깔고 글자를 올린다
Don't
- 스크롤 스크럽 레퍼런스로 쓰지 않는다 — gsap·ScrollTrigger·Lenis·AOS·Swiper·three.js 6종을 얹고도 홈의 등록 ScrollTrigger가 0개다
- #007AFF(4.02:1)와 #20C85A(2.22:1)를 텍스트 색으로 쓰지 않는다 — 둘 다 AA 미달이고 실제 용도도 스와이퍼 버튼 8회·배지 6회뿐이다
- #999999(2.85:1)·#B8B8B8(1.98:1)을 본문에 쓰지 않는다
- Celltrion Sans로 본문을 짜지 않는다 — 웹폰트 파일이 ExtraBold 한 벌뿐이라 400·500 본문에 답할 페이스가 없다
- 폴드 텍스트를 국문 히어로 근거로 인용하지 않는다 — 60px 'Daring to Go Beyond'와 140px 'One-Stop Solution Provider'는 영문이다
- 다크 섹션을 만들지 않는다 — 홈 16섹션이 전부 #FFFFFF이고 어두운 면은 히어로 영상뿐이다
- 카드에 그림자를 얹지 않는다 — box-shadow 6종 중 최다가 rgba(17,17,17,0.1) 0 4px 16px ×9회로, 카드가 아니라 드롭다운·모달용이다
