도루코

화면을 꽉 채운 영상 위에 80px 영문 한 단어를 고정해 두고, 스크롤 2,554px 동안 그 단어만 갈아 끼운다.

도루코는 70년 된 제조 기업의 사이트인데 화면 전체를 채운 영상과 80px 영문 한 단어로 엽니다. 히어로가 GSAP ScrollTrigger로 2,554px 동안 고정된 채 'Beyond → living → shaving'으로 단어만 바뀌는데, 이 배치 세 곳 중 스크롤 구동 전환이 값으로 실측된 곳은 여기뿐이라 긴 고정 구간을 어떻게 쓰는지 보기에 좋습니다. 국문 자간을 −1.6%와 −3.2% 두 값으로만 쓰는 규칙도 그대로 가져다 쓸 만합니다. 다만 국문 웹폰트를 여덟 벌이나 올려두고도 한글 10,216글리프가 전부 OS 폰트로 그려지고 있어, 국문 조판 자체의 레퍼런스로는 쓰지 마세요.

https://www.dorco.co.kr

Color Palette

Primary

Label

Fill

Line

Background

Accent

Typography

GT America Medium · 500display (영문 전용)

Pretendard Std · 500 / 600heading·body — 실제로는 라틴만 그린다

Apple SD Gothic Neo · 400 / 500 / 600한글 전부 (10페이지 100%)

Arial · 400폼·기본 UI

Type Scale자간이 두 값으로 고정돼 있다 — **−1

display80px · 500 · 1

Handgloves 123

h148px · 600 · 1.4

다람쥐 헌 쳇바퀴

h238px · 600 · 1.4

다람쥐 헌 쳇바퀴

h326px · 600 · 1.4

다람쥐 헌 쳇바퀴

h422px · 600 · 1.4

다람쥐 헌 쳇바퀴

ui20px · 600 · 1.4

다람쥐 헌 쳇바퀴

body18px · 500 · 1.56

다람쥐 헌 쳇바퀴

link16px · 500 · 1.56

다람쥐 헌 쳇바퀴

caption14px · 500 · 1.56

다람쥐 헌 쳇바퀴

micro12px · 500 · 1.4

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Apple SD Gothic Neo — OS 시스템 폰트가 10페이지 한글 10,216글리프를 100% 그린다. 선언 1순위는 Pretendard Std이고 PretendardStd 8웨이트 woff를 자체 호스팅하는데도 한글은 한 글자도 그 서체로 오지 않는다(Pretendard Std가 그리는 것은 라틴 885글리프뿐). 원인 미확인, 결과는 CDP 실측
hangulWeights	400 8,909 · 500 1,097 · 600 210글리프. 세 웨이트 전부 OS 폰트라 굵기 차이가 웹폰트만큼 벌어지지 않는다
body	18px/500 lh1.56 자간 −0.288px(−1.6%) · 16px/500 lh1.56 −0.256px(−1.6%)
sub	26px/600 lh1.40(36.4px) 자간 −0.832px(−3.2%) — 히어로 국문 부제 2줄 '완벽을 향한 끊임없는 도전과 혁신으로 / 고객의 일상에 스며드는 기쁨을 더하겠습니다.'
label	14px/500 lh1.56 −0.224px · 12px/500 lh1.40 −0.192px (둘 다 −1.6%)
mixing	글자 단위로 갈린다. 26px/600 '고객의 일상에 스며드는 기쁨을 더하겠습니다.' 한 줄에서 한글 19자는 Apple SD Gothic Neo가, 라틴·구두점 9자는 Pretendard Std SemiBold가 그린다(rendered 'Pretendard Std SemiBold×9 + Apple SD Gothic Neo×35'). 38px 제목도 같다(SemiBold×10 + Apple SD×27). 한 줄 안에서 두 서체의 획 굵기·글자 폭이 섞이는 상태다
hangulHeadings	있음 — 단 38px/600이 천장이다. 국문 최대는 홈 y5046 '혁신적인 기술로 일상을 더욱 가치 있게, 더 큰 즐거움을 선사합니다.'와 y6320 '사람, 기술, 가치로 완성되는 도루코의 모든 이야기' 두 곳이고, 그 아래가 26px/600 히어로 부제다. 80px 히어로 3단어와 48px 'SLEEK'은 전부 영문이라 국문이 첫 화면의 제목을 맡지 않는다
verdict	국문 히어로 레퍼런스로는 부적합하고(80px은 영문 GT America, 국문은 38px에서 멈춘다), 국문 본문 조판의 근거로도 쓰지 않는다 — 한글이 100% OS 폰트라 화면마다 다르게 보이기 때문이다. 같은 '영문 히어로 + 국문 본문' 유형인 pxd·메가존과 갈리는 지점이 바로 이것이다: pxd는 국문을 Pretendard JP가, 메가존은 Pretendard가 실제로 그리는 반면 도루코는 선언만 있고 렌더가 없다. 대신 여기서 가져올 것은 두 가지다 — ① 자간 −1.6%/−3.2% 2단과 행간 1.40/1.56 2단으로 묶은 규칙(도루코는 3사 중 유일하게 국문 자간을 크기별로 나눈다. pxd는 자간 0, 메가존은 −2% 비례) ② 영문을 히어로에 세우되 국문을 26px 부제로 바로 아래 붙이는 배치(pxd는 24px 본문으로, 메가존은 60px 한 줄 안에서 섞는다)
rendered	Apple SD Gothic Neo ×10216

영문 · Latin영문 전용

latinFont	Apple SD Gothic Neo 6,900글리프(84.7%) · Pretendard Std 885글리프(10.9%) · Arial 342글리프(4.2%) · GT America 19글리프(0.2%)
latinWeights	실측 페이스 Medium · SemiBold
share	라틴 8,150글리프 / 한글 10,216글리프 — 지면의 44.4%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Apple SD Gothic Neo를 쓰는 단: h2 38px/600 · h3 26px/600
mixing	국영문 혼용 노드 556개(전체 1,977개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Pretendard Std 영문 전용(10.9% · 선언됨 · 최상단 디스플레이 독점)
verdict	영문 전용 서체가 있다 — Pretendard Std 라틴 10.9% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 48px)
sharedWithKorean	국문과 같은 서체: Apple SD Gothic Neo
rendered	Apple SD Gothic Neo ×6900 · Pretendard Std Medium ×689 · Arial ×342 · Pretendard Std SemiBold ×196 · GT America Medium ×19 · Helvetica ×4

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	16px
Max width	1120px
Section gap	섹션 padding은 104px 한 값으로 통일돼 있다(pT/pB 104
Header	nullpx
Grid Cards	제품 카드 504×359 4개 2열 거터 112(504×2+112=1120, 콘텐츠 폭과 정확히 일치) · 브랜드 카드 370×587 48개 거터 24(가로 흐름) · 스토리 카드 298×364 3개 3열 거터 32
Card Padding	미확인 — 카드 외곽 치수만 실측됐다
Button Padding	6×16 r999 (더 알아보기, 투명 배경 + 1px solid #ffffff, 16/500)

Border Radius

Role	Value	Preview
small	4px	1회 · 목록 컨테이너 1곳
circle	50%	1회 · 아이콘 버튼
circle	100%	6회 · 원형 인디케이터·아이콘
pill	999px	5회 · '더 알아보기' 알약 버튼

Guidelines

국문 자간을 −1.6%와 −3.2% 두 값으로만 운용한다 — 26·38·48px 제목에 −3.2%, 22px 이하에 −1.6%
행간도 두 값으로 묶는다 — 제목 1.40, 본문·링크 1.56
히어로를 스크롤에 고정하고 그 안에서 단어만 갈아 끼운다(ScrollTrigger pin, 0→2,554px, scrub 1, 영문 80px/500 3단어)
섹션 여백을 104px 한 값으로 통일한다(마지막 섹션만 208 = 104×2)
그리드를 콘텐츠 폭에 정확히 맞춘다 — 제품 카드 504×2 + 거터 112 = 1120
지면을 흰색 하나로 두고 색은 nav hover의 #E10600 한 점에만 쓴다(팔레트 채도색 20회)
라운드를 쓰지 않는다 — 카드·이미지·섹션 전부 직각이고 알약 버튼 하나만 999px이다

Don't

국문 조판을 이 사이트에서 인용하지 않는다 — 한글 10,216글리프가 100% Apple SD Gothic Neo(OS 폰트)라 Mac/Windows에서 다르게 보인다
국문 대형 제목을 기대하지 않는다 — 국문은 38px/600에서 멈추고 80px·48px 단은 전부 영문이다
#0000EE(1,728회)와 #007AFF(16회)를 브랜드 색으로 옮기지 않는다 — 브라우저·Swiper 기본값 잔재다
select·input의 기본 스타일을 그대로 두지 않는다 — 이 사이트는 11개를 그대로 뒀다(border 1px solid #767676, radius 0)
#E10600을 검은 면 위 글자색으로 쓰지 않는다(4.23:1, AA 미달). 흰 면 위 4.97:1도 큰 글자에만
그림자로 카드를 띄우지 않는다 — 그림자는 rgba(0,0,0,.16) 0 2px 8px 1종 1회, 그라디언트 0이다
영문 히어로의 자간 −4.8%를 국문에 그대로 옮기지 않는다 — 이 사이트의 국문 최대 자간은 −3.2%다