두산로보틱스
검정 폴드에서 흰 지면으로 떨어뜨리고, 서브페이지는 전부 같은 검정 700px 문패로 연다.
두산로보틱스는 이 라이브러리에서 스크롤에 실제로 잠긴 모션을 가진 몇 안 되는 사이트입니다. 홈 중반에 1,365px짜리 핀 고정 구간이 있고 그 앞에 1,013px 스크럽 구간이 따로 있어서, 스크롤이 재생 손잡이 노릇을 하는 구조를 그대로 볼 수 있습니다. 조판에서 눈여겨볼 곳은 서브페이지인데, 열 페이지 중 여덟 페이지가 검정 700px 문패에 72px 국문 제목 하나만 놓는 형식을 그대로 반복합니다. 다만 자간이 11px부터 100px까지 −0.63px 한 값으로 고정돼 있어서, 크기가 커질수록 자간 비율이 저절로 0에 가까워집니다. 크기별 자간 규칙을 배울 사이트는 아니니 스크롤 연출과 서브페이지 문패 규격만 가져가시면 됩니다.
https://www.doosanrobotics.com/krColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Pretendard · 300 / 400 / 500 / 600 / 700display·heading·body·ui·caption 전량, 국영문 겸용
Apple SD Gothic Neo · 400폴백
Noto Sans CJK KR · 선언만 — 렌더 0글리프
Type Scalepx은 1440 실측이고 raw(1920)와 값이 같다 — 뷰포트에 따라 유동하는 단이 없다
display100.8px · 500 · 1.6
다람쥐 헌 쳇바퀴
page-title72px · 600 · 1.2
다람쥐 헌 쳇바퀴
hero68px · 500 · 1.25
다람쥐 헌 쳇바퀴
h148px · 600 · 1.45
다람쥐 헌 쳇바퀴
h232px · 600 · 1.6
다람쥐 헌 쳇바퀴
h324px · 600 · 1.6
다람쥐 헌 쳇바퀴
body-lg18px · 400 · 1.6
다람쥐 헌 쳇바퀴
body16px · 400 · 1.88
다람쥐 헌 쳇바퀴
body-sm15px · 400 · 1.6
다람쥐 헌 쳇바퀴
caption11px · 400 · 1.3
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard — 한글 14,691글리프 중 Pretendard 9,362(63.7%) · Pretendard SemiBold 2,270(15.5%) · Pretendard Light 2,000(13.6%) · Pretendard Medium 1,059(7.2%). declaredFirstFamilies가 'Pretendard' 하나뿐이라 선언과 실측이 일치한다. Light 2,000글리프는 뉴스 페이지 한 곳에 몰려 있어 사이트 전반의 웨이트가 아니다 |
| hangulWeights | 400 Regular 9,117 · 600 SemiBold 2,270 · 300 Light 2,000 · 500 Medium 826 · 700 493. 제목은 600, 본문은 400 두 웨이트가 사실상 전부이고 700은 CTA 블록(26px)과 푸터 링크에만 쓴다 |
| body | 15px / weight 400 / line-height 24px(1.6) / letter-spacing −0.63px (1440 실측, count 45 — 스타일 표 최다). 긴 문단은 16px/400 lh 30px(1.88), 설명 링크는 18px/400 lh 28.8px(1.6) |
| sub | 홈 폴드 리드 26px/400 lh 33.8px(1.3) 영문 · 국문 리드 22px/500 lh 31.9px(1.45) · 카드 설명 17px/400 lh 27.2px(1.6) |
| label | GNB 1뎁스 18px/600 line-height 90px(헤더 높이와 같다) ls −0.4px ×5 · CTA 띠 16px/600 lh 50px ls −0.63px · 푸터 그룹 제목 20px/700 ls −0.75px · 푸터 링크 16px/400 ls −0.75px ×14 · 표 각주 11px/400 lh1.3 |
| mixing | 서체를 나누지 않는다 — Pretendard 한 벌이 한글 14,691 + 라틴 21,285글리프를 모두 그린다. 한 줄 혼용도 같은 서체로 처리한다: '전 세계 최대 규모의 Cobot 라인업' 48px/600, 'Prime+ 혁신' 18px/500, '가반하중 30kg' 14px/400 모두 Pretendard 단일. 제품명·시리즈명(P-SERIES·M1509·Dr.Presso)이 영문이라 지면의 59.2%가 라틴인데도 서체는 하나다 |
| hangulHeadings | 있음 — 서브페이지 쪽이다. 국문 최대는 서브페이지 문패의 72px/600 h1(lh 86.4px 1.2, ls −0.63px = −0.875%)로 '제품 라인업·턴키 솔루션·고객문의·주식에 관한 사항·카탈로그·A/S 신청·뉴스·두산 K-뉴딜 아카데미' 8페이지가 같은 값을 쓴다. 홈 국문 최대는 48px/600 lh 69.6px(1.45) '로봇 도입으로 일하는 방식이 새로워집니다.' 3회이고, 홈 폴드의 68px h1과 사이트 최대 100.8px은 둘 다 영문이다. 그 아래 국문 단은 32px/600 lh1.6(count 6) · 28px/600(뉴스 제목, count 11) · 26px/700 lh1.3(CTA)로 이어진다 |
| verdict | 국문 대형 조판 레퍼런스로는 중간이다 — 72px 국문 제목이 8페이지에서 같은 값으로 반복되니 '서브페이지 문패' 규격을 통째로 이식하기에는 좋지만, 홈 폴드와 최대 글자를 영문이 가져가서 국문 히어로 사례로는 약하다. 그리고 자간 규칙이 없다는 점을 반드시 붙여 읽어야 한다 — raw 43개 스타일 중 38개가 −0.63px 한 값이라 72px에서 −0.875%, 15px에서 −4.2%, 11px에서 −5.73%로 벌어진다. 값을 그대로 옮기면 작은 국문이 뭉치므로, 이 사이트에서 가져올 것은 72/600 lh1.2라는 대형 제목 규격과 검정 문패 700px 구조지, 자간 체계가 아니다. 진짜 강점은 조판이 아니라 스크롤 연출이다 |
| rendered | Pretendard ×9362 · Pretendard SemiBold ×2270 · Pretendard Light ×2000 · Pretendard Medium ×1059 |
영문 · Latin국문과 동일
| latinFont | Pretendard 21,275글리프(100.0%) · Apple SD Gothic Neo 10글리프(0.0%) |
| latinWeights | 실측 페이스 Light · Medium · SemiBold · Black |
| share | 라틴 21,285글리프 / 한글 14,691글리프 — 지면의 59.2%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: display 100.8px/500 · page-title 72px/600 · hero 68px/500 · h1 48px/600 · h2 32px/600 · h3 24px/600 · body-lg 18px/400 · body 16px/400 · body-sm 15px/400 · caption 11px/400 |
| mixing | 국영문 혼용 노드 467개(전체 1,925개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 59.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 100.0%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard ×9217 · Pretendard Light ×5096 · Pretendard Medium ×4373 · Pretendard SemiBold ×2585 · Apple SD Gothic Neo ×10 · Pretendard Black ×4 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 8px | |
| Max width | 1296px | |
| Section gap | 섹션 상하 패딩 60·80·130·150·200·220px. 홈은 §1이 pad 220/220으로 가장 크고, 서브페이지 본문 섹션은 60/60이 기본이다 | |
| Header | 90px fixed | |
| Content Widths | 기본 1296(cands ×20~75) · 제품 1368(×6) · 법적고지 1280(×12) · 문의폼 1040(×17) · 솔루션 본문 908(×16) | |
| Card Padding | 제품 카드 425×536 g20 · 도입사례 330×320 4열 · 프로세스 카드 276×433 g64 r16 · 로고 147×73 15개 | |
| Button Padding | 구매 문의 0×20 r4/0/0/4 · 접수 17×30 r8 · 더 많은 도입사례 0 64 0 24 r8 · 배지 0×20 r35 · 칩 0×14 r6 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| standard | 4px | 316회 · 버튼·인풋·셀렉트 — 최다 |
| chip | 6px | 23회 · 스펙 칩(bg rgba(31,164,253,0.1)) |
| button | 8px | 48회 · 다크 버튼·아웃라인 버튼 |
| tile | 10px | 40회 · 타일 |
| card | 12px | 119회 · 카드·버튼 대형 |
| card-lg | 16px | 94회 · 프로세스 카드 276×433 |
| panel | 24px | 20회 · 패널·인풋 대형 |
| badge | 35px | 3회 · 배지 알약(pad 0×20) |
| pill | 40px | 9회 · 알약 버튼 |
| circle | 50% | 270회 · 아이콘 버튼·도트 — 두 번째로 많다 |
Guidelines
Do
- 서브페이지는 1440×700 검정 문패 + 72px/600 국문 h1 + 브레드크럼 3열 220×60 한 형식으로 통일한다 — 10페이지 중 8페이지가 이 규격이다
- 본문은 Pretendard 15px/400 lh1.6(count 45)을 기본으로, 긴 문단만 16px/400 lh1.88로 넓힌다
- 텍스트는 #444444(9.74:1) 한 색으로 지면을 덮고 제목만 #151515(18.26:1)로 올린다
- 브랜드 블루 #005EB8은 로고·주 액션 버튼·링크 hover 세 자리에만. 6.38:1이라 텍스트로도 안전하다
- 붙는 버튼 쌍은 radius를 4px 0 0 4px / 0 4px 4px 0으로 나눠 준다(구매 문의 + 가까운 대리점 찾기)
- 스크롤 연출은 구간 길이를 먼저 정한다 — 핀 1,365px · 스크럽 1,013px · 개별 리빌 280~420px
- 리빌은 opacity 0.6 → 1과 translateY 40~170 → 0을 함께 움직이고 280px 안에 끝낸다
- 라운드는 4px(316회)과 50%(270회) 두 축으로 잡고, 카드만 12·16px로 키운다
Don't
- 자간 −0.63px 고정을 그대로 옮기지 않는다 — 100.8px에서 −0.63%, 11px에서 −5.73%로 작은 글자가 뭉친다. 크기별 규칙은 다른 사이트에서 가져올 것
- 폴드를 국문 히어로 근거로 인용하지 않는다 — 홈 h1 68px는 'AI-Powered Robot Solutions for a Better Life' 영문이고 최대 100.8px도 'Dr.Presso'다
- #888888(3.54:1)·#1FA5FD(칩 위 2.43:1)·#38B800(2.62:1)을 본문 텍스트로 쓰지 않는다
- 카드에 그림자를 얹지 않는다 — box-shadow 최다가 rgba(0,0,0,0.22) 0 1px 3px ×102로 아주 얕은 컨트롤용이고, 0 8px 40px 같은 깊은 값은 9회뿐이다
- 핀 구간을 짧게 잡지 않는다 — 이 사이트가 1,365px을 확보하고서야 고정이 읽힌다
- 선언에 남은 Noto Sans CJK KR 다섯 웨이트를 따라 넣지 않는다 — 실제 렌더 글리프가 0이다
- 서브페이지 문패에 부제를 넣지 않는다 — 8페이지 전부 h1 한 줄과 브레드크럼뿐이다
