하나투어
흰 지면에 보라(#5E2BB8) 한 색으로 읽히는 길을 내고, 청록(#08D1D9)을 면 카드 하나에만 터뜨리는 여행 기업 홈.
하나투어의 기업 홈페이지는 풀블리드 사진 히어로로 열고, 흰 지면 위에 보라색 포인트와 청록색 카드 한 장을 얹은 밝은 인상입니다. 통계 카드, 사진 4열, 세계지도와 숫자, 전면 사진 ESG 띠, 뉴스 카드 3열이 차례로 이어집니다. 큰 제목을 국문이 맡고 자체 서체(JourneyItself)로 41px 두 줄을 쓰므로 국문 히어로 타이포그래피 레퍼런스로 쓸 만합니다. 홈에서는 헤더가 사진 위에 투명하게 얹히고 서브 페이지에서는 흰 바탕 75px로 바뀝니다. 기업 소개·IR 성격의 사이트에서 숫자 카드와 사진 띠의 리듬을 참고하기 좋습니다.
https://www.hanatourcompany.com/kr/indexColor Palette
Primary
Accent
Label
Background
Fill
Line
Typography
JourneyItself · 400 / 700display (국문 제목)
Pretendard · 400 / 500 / 700body·link·ui
Spoqa Han Sans Neo · 700display (통계 숫자)
Arial · Apple SD Gothic Neo · PingFang SC · 400 / 700en·cn·jp 페이지 폴백
Type Scale크기 표기는 두 층이 섞여 있다
stat-number54.4px · 700 · 1
다람쥐 헌 쳇바퀴
heading-141.25px · 700 · 1.4
Handgloves 123
heading-241.3px · 400 · 1.4
Handgloves 123
heading-326.3px · 400 · 1.5
Handgloves 123
card-title25px · 700 · 1.3
다람쥐 헌 쳇바퀴
body-lg22.5px · 500 · 1.33
다람쥐 헌 쳇바퀴
link20px · 400 · 1
다람쥐 헌 쳇바퀴
body17.5px · 400 · 1.29
다람쥐 헌 쳇바퀴
label16.25px · 500 · 1.31
다람쥐 헌 쳇바퀴
caption13.75px · 400 · 1.27
다람쥐 헌 쳇바퀴
국문 · Korean
| hangulFont | Pretendard 92.7% (19,227글리프) · JourneyItself Regular 5.3% (1,097) · Pretendard Medium (391) · JourneyItself Bold (24) · Spoqa Han Sans Neo Bold (12) |
| hangulWeights | 400 주력(Pretendard 16,368 / JourneyItself 1,097) · 500 Pretendard Medium 391 · 700 Pretendard 2,859 / JourneyItself Bold 24 |
| body | Pretendard 17.5px/400 lh1.29 ls−0.35px (raw 1920), 카드 설명 22.5px/500 |
| sub | Pretendard 16.875px/400 (1440, '하나투어와 함께라면,' ×20) |
| label | Pretendard 16.25px/500 ls−0.325px, 13.75px/400 캡션 |
| mixing | 한글 노드 1,594개(10페이지) 중 제목은 JourneyItself 단독, 본문은 Pretendard 단독. 국영문 혼용 시 같은 서체가 라틴도 그린다(JourneyItself 라틴 829글리프, Pretendard 17,598) |
| hangulHeadings | 있음 — 홈 '꿈꾸는 대로, 펼쳐지다' 41.25px/700 JourneyItself(1440), 섹션 제목 41.3px/400 JourneyItself 두 줄 4곳, 서브 페이지 제목 밴드 리드 41.3px/400 · 한글 렌더 폰트는 전부 웹폰트(OS 폰트 없음) |
| verdict | 국문 대형 제목 레퍼런스로 유효(41px 두 줄, 자간 −2.0%, 자체 서체). 단 41px는 라이브러리 최대급은 아니고, JourneyItself는 사이트 전용이라 대체 서체가 필요하다 |
| rendered | Pretendard ×19227 · JourneyItself Regular ×1097 · Pretendard Medium ×391 · JourneyItself Bold ×24 · Spoqa Han Sans Neo Bold ×12 |
영문 · Latin국문과 동일
| latinFont | Pretendard 18,401글리프(95.4%) · JourneyItself 854글리프(4.4%) · Spoqa Han Sans Neo 26글리프(0.1%) · Arial 12글리프(0.1%) |
| latinWeights | 실측 페이스 Regular · Medium · Bold |
| share | 라틴 19,293글리프 / 한글 20,751글리프 — 지면의 48.2%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Pretendard를 쓰는 단: card-title 25px/700 · body-lg 22.5px/500 · link 20px/400 · body 17.5px/400 · label 16.25px/500 · caption 13.75px/400 |
| mixing | 국영문 혼용 노드 560개(전체 2,018개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 48.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 95.4%를 그리는 Pretendard가 한글도 94.5% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Pretendard · JourneyItself · Spoqa Han Sans Neo |
| rendered | Pretendard ×17598 · JourneyItself Regular ×829 · Pretendard Medium ×803 · Spoqa Han Sans Neo Bold ×26 · JourneyItself Bold ×25 · Arial ×12 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | regular | |
| Base unit | 5px | |
| Max width | 1292px | |
| Section gap | 섹션 상단 패딩 150px(통계·People·뉴스·절차 안내) | |
| Header | 75px fixed | |
| Card Padding | 뉴스 카드 345×356, 3열 거터 19px · 여행서비스 4열 사진 카드 | |
| Button Padding | 0 20px (계열사) / 0 27.5px 0 37.5px (하나투어 닷컴) / 0 30px (Family Site) — 알약, raw 값 | |
| Content Width Sub | 서브 페이지 1072px (후보 1072×27·180·30 등) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| card | 11.25px | 0회 · 서브 페이지·People 카드 (layout 반복 항목 r11.25px) |
| image | 15px | 110회 · 이미지·뉴스 카드 (raw 1920) |
| card-lg | 17.5px | 4회 · card |
| tab | 22.5px · 30px 30px 0 0 · 50px 50px 0 0 | 25회 · 탭·상단만 둥근 패널(div) |
| pill | 125px · 999px · 1248.75px | 171회 · 버튼(125px ×130, 999px ×20, 1248.75px ×21), 입력창 123.75px ×20 |
| circle | 50% | 158회 · 탑 버튼·화살표 아이콘 원 |
Guidelines
Do
- 한글 제목은 JourneyItself 41.25px/700(히어로)·41.3px/400(섹션) 두 줄로, 자간 −2.0%를 전 구간에 준다
- 본문·링크는 Pretendard 400/500, 글자색 #666666(5.74:1)을 기본으로 하고 강조·호버에만 #5E2BB8을 쓴다
- 통계 숫자는 54.4px/700 보라로 카드 안에 크게 두고 단위는 작게 분리한다
- 청록 #08D1D9는 면(카드 1장)과 1px 테두리에만 쓴다 — 흰 글자 대비가 1.89:1이므로 글자는 진한 색으로
- 섹션은 상단 패딩 150px(큰 섹션)·105~113px(보조)로 열고 콘텐츠 폭은 홈 1292px·서브 1072px에 맞춘다
- 이미지·카드는 15px 라운드, 버튼은 알약(125px 이상)으로 통일한다
- 전면 사진 섹션은 흰 글자 + 하단 반투명 흰 1px 구분선으로 탭을 둔다
Don't
- #878D96(3.34:1)을 본문에 쓰지 않는다 — 저작권·Family Site 버튼·날짜 전용
- 청록 #08D1D9 위에 흰 글자를 올리지 않는다 (1.89:1 AA 미달)
- 한글 제목에 Pretendard를 쓰지 않는다 — 제목은 JourneyItself 자체 서체가 맡는다(이 서체는 외부에 배포되지 않으므로 대체 서체 선택은 별도 판단)
- 근거 없는 다크 섹션을 넣지 않는다 — 홈 9섹션 중 어두운 면은 사진 2개(히어로·ESG)뿐이다
- size 0px 스타일(raw 11건)을 타입 스케일에 포함하지 않는다
- Spoqa Han Sans Neo를 본문에 쓰지 않는다 — 통계 숫자 전용(24글리프)
- raw에 #0000EE는 없다 — 브라우저 기본 링크색 문제는 이 사이트에 해당하지 않는다(링크는 #666666·#343A3F·#121619, 호버 #5E2BB8)
