한화시스템
검정 영상 한 장으로 열고, 흰 지면 위 46px 국문 제목만 반복한다 — 브랜드 이름 한 단어에만 자사 서체를 심어서.
한화시스템 홈은 1440×900 루프 영상으로 채운 검은 히어로에서 시작해 흰 지면으로 넘어가는 방산·IT 코퍼레이트 사이트입니다. 폴드의 110px 큰 글씨는 영문 'CONNECT TO / THE FUTURE'이고 국문은 46px 섹션 제목에서 멈추므로, 국문 대형 히어로 레퍼런스로는 쓸 수 없습니다. 대신 참고할 만한 것은 두 가지입니다 — 자간을 크기와 무관하게 −0.48px 절대값으로 고정한 점, 그리고 국문 제목 안의 브랜드어 '한화시스템'·'한화인' 한 단어만 자사 서체 Hanwha R(46px weight 100, 자간 −6%)로 바꿔 넣는 인라인 처리입니다. 섹션 위아래 여백 160px에 카드 라운드 0px로 정리된 국내 대기업 코퍼레이트 홈의 표준 골격을 볼 때 참고하기 좋습니다.
https://www.hanwhasystems.com/kr/index.doColor Palette
Primary
Label
Fill
Line
Background
Static
Accent
Typography
Noto Sans KR · 300 / 400 / 500 / 700display·heading·body·ui — 국문과 라틴을 모두 그린다
Hanwha R · 100브랜드어 인라인 전용
Pretendard · 선언만 남은 서체
Apple SD Gothic Neo · 폴백
Type Scalepx은 layout
hero-display110px · 700 · 1
다람쥐 헌 쳇바퀴
display-272px · 500 · 1
다람쥐 헌 쳇바퀴
section-title46px · 700 · 1.4
다람쥐 헌 쳇바퀴
brand-word46px · 100 · 1
다람쥐 헌 쳇바퀴
card-title-lg32px · 700 · 1.75
다람쥐 헌 쳇바퀴
card-title28px · 700 · 1.3
다람쥐 헌 쳇바퀴
nav18px · 400 · 1.75
다람쥐 헌 쳇바퀴
body16px · 400 · 1.75
다람쥐 헌 쳇바퀴
caption14px · 400 · 1.75
다람쥐 헌 쳇바퀴
label13px · 700 · 1.75
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Noto Sans KR 3,264글리프(98.9%) · Hanwha R 36글리프(1.1%) |
| hangulWeights | 400 Regular 1,512 · 600 Bold 744 · 500 Medium 530 · 700 Bold 450 · 200 Light 16 · 300 Bold 12 · 100 Hanwha R 36 |
| body | 16px/400 행간 1.75(28px) 자간 −0.48px(−3.0%) |
| sub | 히어로 국문 부제 20px/500 행간 1.60(32px) 자간 −0.48px, 폭 478px ('초지능·초융합·초연결 기술로 인류를 더 풍요롭고 안전하게') |
| label | nav 18px/400 · 뉴스 날짜 13px/500 · 최소 라벨 13px/700, 전부 자간 −0.48px |
| mixing | 층으로 나뉜다 — 폴드의 최대 글자(110px/700, 72px/500)는 영문이고 국문은 46px 섹션 제목이 최대다. 한 줄 안 혼용은 서체를 바꾸지 않지만(라틴도 Noto Sans KR), 예외로 제목 안 브랜드어 '한화시스템'·'한화인'만 Hanwha R 46px/100 자간 −2.76px로 교체한다 |
| hangulHeadings | 있다 — 국문 최대 제목은 46px/700 행간 1.40 자간 −0.48px(−1.04%)이고 5개 섹션 제목이 모두 이 한 단이다. 같은 46px에서 브랜드어만 weight 100 Hanwha R로 갈린다. 그보다 큰 110px·72px은 영문 전용이다 |
| verdict | 국문 46px 섹션 제목 + 영문 110px 히어로로 층을 나눈 코퍼레이트 조판 레퍼런스로 유효하다. 국문 대형 히어로(80px 이상) 레퍼런스로는 부적합하다. 한글 웹폰트는 self-host Noto Sans KR로 실제 로드되므로(document.fonts 판정 webfont) OS 의존 문제는 없고, 다만 선언만 남은 Pretendard 9단이 걸린 언어 토글 자리는 OS 폰트로 떨어진다 |
| rendered | Noto Sans KR Regular ×1512 · Noto Sans KR Bold ×1206 · Noto Sans KR Medium ×530 · Hanwha R ×36 · Noto Sans KR Light ×16 |
영문 · Latin국문과 동일
| latinFont | Noto Sans KR 1,710글리프(97.7%) · Hanwha R 26글리프(1.5%) · Apple SD Gothic Neo 14글리프(0.8%) |
| latinWeights | 실측 페이스 Regular · Bold · Medium · Light |
| share | 라틴 1,750글리프 / 한글 3,300글리프 — 지면의 34.7%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Noto Sans KR를 쓰는 단: hero-display 110px/700 · display-2 72px/500 · section-title 46px/700 · card-title-lg 32px/700 · card-title 28px/700 · nav 18px/400 · body 16px/400 · caption 14px/400 · label 13px/700 |
| mixing | 국영문 혼용 노드 90개(전체 458개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 34.7%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 97.7%를 그리는 Noto Sans KR가 한글도 98.9% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Noto Sans KR · Hanwha R |
| rendered | Noto Sans KR Regular ×644 · Noto Sans KR Bold ×604 · Noto Sans KR Medium ×314 · Noto Sans KR Light ×148 · Hanwha R ×26 · Apple SD Gothic Neo ×14 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 8px | |
| Max width | 1410px | |
| Section gap | 섹션 상하 패딩 160/160 (사업·뉴스·채용 3개 섹션 동일). ESG 섹션만 15/15 | |
| Header | 119px absolute | |
| Grid News | 5열 297px 거터 40px = 1,645px로 1,440 뷰포트를 넘긴다(가로 스와이프 슬라이더) | |
| Grid Recruit | 4열 356px 거터 0 = 1,424px | |
| Card Padding | ESG 카드 320×440 패딩 48/44/46 · 뉴스 카드 297×407 · 채용 카드 356×347 | |
| Button Padding | 헤더 알약 0 10px(r48) · 히어로 고스트 0 20px(r45) | |
| Container Note | .sp_container는 max-width 없이 1440 전폭에 좌우 패딩 15px이라 콘텐츠 행이 1,410px로 나온다. layout.json의 contentWidth 552는 좁은 텍스트 블록을 집은 값이다 |
Border Radius
| Role | Value | Preview |
|---|---|---|
| none | 0px | 3회 · 기본값. 뉴스·채용·ESG 카드 세 벌 전부 radius 0(layout repeated.radius) |
| region | 12px | 2회 · 관측만 |
| image | 16px | 14회 · 이미지 마스크 |
| region | 20px | 2회 · 관측만 |
| card | 32px | 12회 · div/card |
| group | 40px | 4회 · 그룹 컨테이너 |
| pill-link | 45px | 4회 · 히어로 고스트 CTA(Defense·ICT) |
| pill-badge | 48px | 10회 · 헤더 배지·아웃라인 버튼(주가정보) |
| circle | 50% | 8회 · 검색 지우기 등 원형 아이콘 버튼 |
| pill-button | 60px | 10회 · 버튼 |
Guidelines
Do
- 국문 섹션 제목은 46px/700 행간 1.40(64.4px)·자간 −0.48px 한 단으로 통일한다 — 5개 섹션 전부 이 값이다
- 자사 서체는 제목 전체가 아니라 브랜드어 한 단어에만 인라인으로 심는다(Hanwha R 46px/100, 자간 −6.0%, 전체 36글리프)
- 섹션 상하 여백은 160/160으로 반복하고 컨테이너는 max-width 없이 전폭 + 좌우 15px로 둔다(콘텐츠 행 1,410px)
- 콘텐츠 카드는 radius 0px, 라운드는 버튼·배지·이미지에만(45·48·60px과 16px)
- 검정 지면 위 버튼은 채움 rgba(255,255,255,0.2) + 보더 1px rgba(255,255,255,0.5)의 고스트 규격으로
- 본문은 16px/400 행간 1.75(28px)를 기준으로 두고, 카드 안 본문만 1.5(24px)로 조인다
- 스크롤 등장은 라이브러리 없이 data-ani-* 속성 + delay 0/200/300/500ms 계단으로 처리한다(모션 라이브러리 0)
Don't
- 국문 대형 히어로 근거로 쓰지 않는다 — 폴드의 110px과 72px은 영문이고 국문은 46px에서 멈춘다
- #7C7C7C를 본문에 쓰지 않는다(흰 배경 4.17:1, AA 미달 92쌍). #A1A1A1은 더 낮다
- 브랜드 오렌지 #F37321을 텍스트·아이콘 색으로 쓰지 않는다(2.88:1). 로고 24회가 전부다
- 링크 hover 색을 브랜드 오렌지로 통일했다고 가정하지 않는다 — 실제 hover는 #FF6600 다른 값이다
- 면을 그림자로 띄우지 않는다. 관측된 그림자 2종 중 12회는 rgba(0,0,0,0) 투명이고 나머지 2회는 검정 지면 위 흰 글로우다. 그라디언트는 0개
- 자간을 크기별 비율로 환산하지 않는다 — 이 사이트는 −0.48px 절대값 고정이라 작은 글자일수록 비율이 커진다(13px에서 −3.7%)
- Pretendard가 적용된다고 전제하지 않는다 — 9단이 선언만 되고 전부 미로드라 그 자리는 OS 폰트로 떨어진다
