현대로템
검푸른 영상 한 컷으로 열고, 글자는 27px에서 멈추며, 색은 섹션 단위 색면으로만 들어온다.
현대로템 홈은 1440×900 풀블리드 영상으로 열고, 그 아래 흰 지면 위에 색면 섹션을 하나씩 끼워 넣는 코퍼레이트 구성입니다. 글자 크기와 여백을 전부 rem으로 잡아 1440에서는 1920 값의 0.75배로 줄어드는데, 그 결과 국문 최대 제목이 27px에 그치고 본문이 12.73px까지 내려갑니다. 자간은 전 구간 −1%로 통일돼 있고 그림자와 그라디언트가 한 개도 없어, 조판보다는 풀블리드 미디어와 색면 구획을 배울 사이트입니다. 국문 히어로 조판 레퍼런스로는 쓰지 마시고, 영상 히어로 + 영문 대문자 섹션 라벨 + 국문 경어체 카피 조합을 참고하실 때 여십시오.
https://www.hyundai-rotem.co.krColor Palette
Primary
Label
Line
Background
Accent
Typography
Pretendard SemiBold · 600한글·영문 전 구간
Pretendard · 400px 고정 소형 텍스트(400)
Noto Sans KR · 선언만 · 렌더 0글리프
Type Scale크기 기준은 layout
hero-copy27px · 600 · 1.3
다람쥐 헌 쳇바퀴
h124px · 700 · 1.2
다람쥐 헌 쳇바퀴
h221px · 600 · 1.3
다람쥐 헌 쳇바퀴
lead16.5px · 600 · 1
다람쥐 헌 쳇바퀴
nav14.23px · 600 · 1.2
다람쥐 헌 쳇바퀴
link12.73px · 600 · 1.2
다람쥐 헌 쳇바퀴
body-sm11.98px · 600 · 1.2
다람쥐 헌 쳇바퀴
caption10.48px · 600 · 1
다람쥐 헌 쳇바퀴
fixed-ui14px · 400 · 1.2
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard SemiBold — 자체 호스팅 웹폰트(CDP isCustomFont=true). 한글 1,503글리프 100%(fonts.json 161노드) · fontsrc 재측정에서도 1,088/1,089글리프. Apple SD Gothic Neo가 1글리프를 그리지만 OS 폴백 잔재다 |
| hangulWeights | 600 단일 — hangulByWeight에 600 하나뿐(1,503글리프). Regular·Medium·SemiBold·Bold 4파일을 올리고 Noto Sans KR 6웨이트(100~900)를 추가로 선언하지만 한글을 그린 웨이트는 600 하나다 |
| body | 12.73px/600 lh1.20 ls −0.13px (1440) = 16.9728px(1920) — 71회로 최다. 그 위 단은 14.23px/600(48회) |
| sub | 히어로·섹션 카피 27px/600 lh1.30 ls −0.27px (1440) — 3행 좌하단 정렬. 이 사이트 한글의 최대 크기다 |
| label | 11.98px/600(푸터·스킵 내비) · 10.48px/600 ls −1.14%(최소 단). nav 1depth는 14.23px/600, 유틸은 12.73px/600 |
| mixing | 혼용 노드 42개(전체 161개)를 한글 전용 프로브로 재측정했다. 국문과 영문을 같은 Pretendard SemiBold가 그리고(라틴 721글리프), 갈림은 서체가 아니라 역할이다 — 섹션 머리 라벨과 지속가능 타일 제목(Principles of Governance · Planet · People · Prosperity)이 영문 대문자·영문 제목, 카피·본문·nav는 전부 국문이다 |
| hangulHeadings | 있다 — 제목·카피를 전부 한글이 맡는다(히어로 '더 나은 미래를 향한 창조적 혁신으로 최고를 지향합니다', 섹션 카피 '안전하고 평화로운 미래를 만들어 갑니다' 등). 다만 최대 크기가 27px/600(1440, fontsrc maxSize 27로 교차 확인)이고 1920에서도 35.9424px에 그친다 |
| verdict | 국문 대형 조판 레퍼런스로는 부적합하다 — 한글 최대가 27px(1440)이고 크기·자간·여백이 전부 rem이라 좁은 화면에서 더 줄어든다. 대신 자간 −1% 전 구간 통일과 웨이트 600 단일 운용은 국문 코퍼레이트 본문 조판에 그대로 인용할 수 있고, 사이트의 값어치는 풀블리드 영상 히어로 + 색면 섹션 구획 쪽에 있다 |
| rendered | Pretendard SemiBold ×1503 |
영문 · Latin국문과 동일
| latinFont | Pretendard 724글리프(99.7%) · Apple SD Gothic Neo 2글리프(0.3%) |
| latinWeights | 실측 페이스 SemiBold |
| share | 라틴 726글리프 / 한글 1,503글리프 — 지면의 32.6%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: hero-copy 27px/600 · h1 24px/700 · h2 21px/600 · lead 16.5px/600 · nav 14.23px/600 · link 12.73px/600 · body-sm 11.98px/600 · caption 10.48px/600 · fixed-ui 14px/400 |
| mixing | 국영문 혼용 노드 42개(전체 161개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 32.6%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.7%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard |
| rendered | Pretendard SemiBold ×721 · Pretendard ×3 · Apple SD Gothic Neo ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | compact | |
| Base unit | 1rem | |
| Max width | 1224px | |
| Section gap | 72px 고정(1440) — 900→972 | |
| Header | 108px fixed | |
| Card Padding | ROTEM LIVE 카드 499×332 gapX 18 · 지속가능 타일 292×145 2열 gapX 121 · IR 링크 61×22 4열 gapX 0 · 사업영역 슬라이드 1440×599 3장(gapX −1440 = 겹쳐 쌓인 캐러셀) | |
| Button Padding | 17.9712px 29.952px(1920) = 13.48 × 22.46px(1440) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| xs | 3.9936px (0.25rem) | 6회 · 본문 요소(p) — rem 선언이라 1440에서 3px |
| xs-fixed | 4px | 6회 · div — px 고정이라 뷰포트에 상관없이 4px |
| button | 7.9872px (0.5rem) | 7회 · 버튼·박스. 1440에서 6px |
| md | 16px | 2회 · div — px 고정 |
| pill | 99.84px | 1회 · 알약 1곳 |
Guidelines
Do
- 자간은 −1%(−0.01em) 한 값으로 전 구간을 통일한다 — 27px −0.27px부터 10.48px −0.12px까지 같은 비율이고, 예외는 24px −0.5% 2회뿐이다
- 지면은 흰색 하나로 두고(팔레트 581회, 사용 빈도 90.1%) 색은 섹션 단위 색면으로만 넣는다 — #151721 히어로·푸터 · #EEEFF4 ROTEM LIVE · #162E70 지속가능 · #067BA5 채용
- 섹션 간격은 72px(1440) 고정으로 간다 — 네 구간(900→972 · 1613→1685 · 2203→2275 · 2916→2988) 전부 같은 값이다
- 미디어 위 텍스트는 흰 글자 + 아웃라인 버튼(2px rgba(255,255,255,0.2) ×6)으로 얹는다. 채움 버튼은 한 개도 쓰지 않았다
- 섹션 머리는 영문 대문자 라벨(OUR BUSINESS · ROTEM LIVE · SUSTAINABILITY · INVESTOR RELATIONS · CAREERS), 본 카피는 국문 경어체 27px/600으로 갈라 쓴다
- 웨이트는 600 하나로 간다 — 27종 타입 스타일 중 25종이 600이고 400은 14px ui 9회·15.9744px body 1회뿐이다
- 카드·이미지 라운드는 0px로 두고 라운드는 버튼 7.9872px(0.5rem) 한 곳에만 준다
Don't
- 그림자·그라디언트로 깊이를 만들지 않는다 — shadows 0개 · gradients 0개다. 깊이는 색면 교체와 영상으로만 만든다
- 국문 대형 제목을 기대하지 않는다 — 한글은 27px(1440) / 35.9424px(1920)에서 멈춘다. 국문 히어로 조판 레퍼런스로 인용하지 말 것
- #A1AAC5를 #2D437E 위 텍스트로 쓰지 않는다(4.09:1 AA 미달 9쌍). #7E7F85 on #FFFFFF 3.99:1 5쌍 · #777880 on #EEEFF4 3.82:1 4쌍도 같은 결함이다
- 크기를 전부 rem으로만 잡지 않는다 — 1440에서 본문이 12.73px, 최소 단이 10.48px까지 내려간다. 이 사이트는 그 하한을 두지 않았다
- px 고정 단과 rem 단을 섞지 않는다 — 14px/400 ×9와 19px/600 ×1만 px 직접 선언이라 다른 단이 0.75배로 줄 때 이 둘만 그대로 남는다
- 라운드를 rem과 px으로 갈라 선언하지 않는다 — 3.9936px(0.25rem)×6과 4px 고정×6, 7.9872px×7과 16px 고정×2가 공존해 뷰포트가 바뀌면 위계가 어긋난다
- 웹폰트를 불러놓고 안 쓰는 구조를 따라 하지 않는다 — Noto Sans KR 6웨이트(100~900, subset=korean)를 Google Fonts로 받지만 렌더 글리프는 0이다
- 히어로 밖에서 스크롤 스크럽을 기대하지 않는다 — ScrollTrigger 8개 중 scrub은 히어로 1개(0→900px, scrub 0.3)뿐이고 나머지 7개는 토글이다
