HD한국조선해양
항공 촬영 영상 위에 흰 국문 한 줄을 얹고, 다크 네이비 #001023 면과 흰 지면을 번갈아 넘기며 조선·해양 기업의 규모를 보여주는 사이트.
HD한국조선해양은 조선·해양플랜트 기업 사이트로, 첫 화면을 조선소 항공 영상 전체로 열고 그 위에 흰 국문 제목 한 줄을 얹습니다. 이어서 흰 지면의 사업 카드, 하늘 사진 위로 흐르는 거대한 영문 'BEYOND INNOVATION', 다크 네이비 면으로 길게 이어지는 ESG 구간, 흰 지면의 뉴스·투자자 정보 순으로 넘어갑니다. 국문 제목이 48px와 42px로 실제 화면의 주인공이라 국문 히어로 레퍼런스로 쓸 수 있고, 사이트 전체 크기가 화면 폭에 비례해 줄어드는 점도 참고할 만합니다. 하위 페이지는 흰 지면에 916px 단일 컬럼이라 헌장·보고서·정책 문서를 설계할 때 쓰기 좋습니다.
https://www.hd-ksoe.com/kr/mainColor Palette
Label
Background
Line
Accent
Typography
Pretendard · 400heading·body·ui, 한글 94.7%
HDfont-Bold · 400display (영문 대문자)
Noto Sans KR · 400ui (폴백·일부 폼)
Type Scale크기는 layout(1440) 실측이고 raw(1920) 값의 정확히 0
display180px · 400 · 1.3
Handgloves 123
h148px · 400 · 1.3
다람쥐 헌 쳇바퀴
h2-feature42px · 400 · 1.3
다람쥐 헌 쳇바퀴
h233px · 400 · 1.4
다람쥐 헌 쳇바퀴
h327px · 400 · 1.4
다람쥐 헌 쳇바퀴
h418px · 400 · 1.5
다람쥐 헌 쳇바퀴
link-lg15px · 400 · 1.5
다람쥐 헌 쳇바퀴
body13.5px · 400 · 1.6
다람쥐 헌 쳇바퀴
nav / label12px · 400 · 1.6
다람쥐 헌 쳇바퀴
caption10.5px · 400 · 1.6
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard (웹폰트, 한글 20,099글리프 중 94.7%) + Pretendard Medium 4.4% |
| hangulWeights | CSS 400 단일 — 굵기는 Pretendard-Bold(제목·링크)·Medium·Regular(본문) 파일로 구분 |
| body | 13.5px lh1.6 ls −0.38px (raw 18px −0.5px, 1440 기준) |
| sub | 12px lh1.6 ls −0.24px (히어로 부제·링크) |
| label | 10.5~12px (날짜·푸터·GNB) |
| mixing | 국영문 혼용 노드 354개 — 영문 대문자 제목(BUSINESS·NEWS)도 Pretendard로 그리고 BEYOND INNOVATION만 HDfont-Bold |
| hangulHeadings | 있음 — 홈 히어로 국문 48px(Pretendard Bold, '혁신적인 기술로 바다의 무한한 잠재력을 실현합니다.' 2줄), 하위 페이지 리드 42px('HD한국조선해양의 대담하고도 간결한 브랜드 정체성'·'ESG 동반성장 기반 공급망 관리…'), 페이지 제목 48px(기업개요·지배구조·IR자료실·사회) |
| verdict | 국문 히어로·제목 레퍼런스로 유효(48/42/33px, ls −1.6~−2.3%, 흰 글자 영상 위 2줄). 국문 최대는 48px이고 그보다 큰 디스플레이(180px)는 영문 대문자 전용이다 |
| rendered | Pretendard ×19041 · Pretendard Medium ×882 · OTS derived font ×176 |
영문 · Latin국문과 동일
| latinFont | Pretendard 15,595글리프(97.8%) · OTS derived font 312글리프(2.0%) · Times New Roman 22글리프(0.1%) · Apple SD Gothic Neo 18글리프(0.1%) |
| latinWeights | 실측 페이스 Medium |
| share | 라틴 15,949글리프 / 한글 20,099글리프 — 지면의 44.2%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: h1 48px/400 · h2-feature 42px/400 · h2 33px/400 · h3 27px/400 · h4 18px/400 · link-lg 15px/400 · body 13.5px/400 · nav / label 12px/400 · caption 10.5px/400 |
| mixing | 국영문 혼용 노드 354개(전체 1,195개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 44.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 97.8%를 그리는 Pretendard가 한글도 99.1% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · OTS derived font |
| rendered | Pretendard ×14504 · Pretendard Medium ×1091 · OTS derived font ×312 · Times New Roman ×22 · Apple SD Gothic Neo ×18 · Lucida Grande ×2 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 미확인 | |
| Max width | 916px | |
| Section gap | 홈 섹션 상단 패딩 120px(BUSINESS·NEWS·INVESTORS padT 120) | |
| Header | 75px fixed | |
| Content Width Note | 하위 페이지 916(후보 916×39·159·102·37회). 홈 NEWS 카드 3×295 + gap15×2 = 915. 전폭 섹션(히어로·마키·ESG)은 1380·1440 | |
| Grid Home | BUSINESS 카드 447×300 gap20, 6×2(가로 슬라이더, 페이지당 3열) · NEWS 295×311 gap15, 3열×2행 · ESG 카드 450×724 3개 | |
| Card Padding | NEWS 카드 하단 텍스트 영역(날짜 포함) · 개인정보 표 셀 302×94 / 302×132 | |
| Button Padding | 알약 18×32(raw) · 탭 13(raw) · PDF·이동 14×16(raw) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| tiny | 2px | 58회 · span 마커 (raw) |
| small | 4px | 111회 · 이미지·PDF/이동 버튼 (raw, 1440 환산 3px) |
| standard | 8px / 12px | 636회 · 링크·카드 (raw 8px ×515 · 12px ×121; layout 카드 9px) |
| bottom-card | 0 0 16px 16px | 45회 · 카드 하단 텍스트 영역 (raw) |
| large | 24px | 14회 · 큰 썸네일 (raw) |
| pill | 28px | 18회 · 알약 버튼 'IR문의 신청'·'주가정보 바로가기' (raw, 1440 환산 21px) |
| xlarge | 40px | 5회 · 이미지 (raw) |
| circle | 50% | 18회 · 슬라이더 화살표 버튼 |
Guidelines
Do
- 첫 화면은 풀블리드 영상 + 흰 국문 한 줄 제목(1440 기준 48px, ls −1.6%)으로 연다. 제목은 영상 위 좌측 x≈147에 두 줄
- 다크 구간은 #001023 한 색으로, 흰 지면(#FFFFFF)과 번갈아 쓴다. 홈 문서의 약 65%(3,216~12,625px)가 다크
- 영문 디스플레이(BEYOND INNOVATION 180px)는 자사 서체 한 줄만, 전폭 마키로 흘린다
- 한글 제목은 48→42→33→27→18px 사다리, 자간은 −1.6~−4.2%(px로 −0.75 고정)
- 섹션 제목은 영문 대문자 33px(BUSINESS·NEWS·INVESTORS) + 우측 보조 링크/화살표, 상단 패딩 120px
- 카드 라운드 9px, 테두리 1px #D9D9D9, 그림자는 rgba(0,0,0,.08) 0 8 16 한 종류만
- 버튼은 알약(r21~28)이고 외곽선형 #1A1A1A와 채움형 #003087 두 종뿐
- 문서·헌장·정책 페이지는 콘텐츠 폭 916 단일 컬럼, 제목 밴드 48px로 시작
Don't
- #007AFF를 액센트로 쓰지 않는다 — swiper 기본 버튼 색 잔재(8회)
- #999999를 본문에 쓰지 않는다 — 대비 2.85:1, AA 미달(9쌍)
- 한글 굵기를 font-weight로 만들지 않는다 — 전 스타일 CSS weight 400, 굵기는 Pretendard-Bold·Medium 파일로 갈린다(합성 볼드가 아니라 별도 파일)
- BEYOND INNOVATION 서체(HDfont-Bold)를 한글 제목에 쓰지 않는다 — 영문 대문자 1개 요소 전용
- 하위 페이지에 영상 히어로·다크 구간을 가져오지 않는다 — 하위는 전부 흰 지면 + 916 컬럼
- 카드에 외부 그림자를 겹쳐 쓰지 않는다 — 그림자 9회가 전부 같은 값
- px 값을 고정으로 옮기지 않는다 — 이 사이트의 크기는 1920 대비 0.75배로 스케일되는 값이다(1440 기준)
