기아
흰 지면과 풀블리드 이미지 위, 자간 0·굵기 400의 자체 서체 한 벌로만 말한다.
기아 공식 사이트는 자체 서체 한 벌과 흰 지면만으로 굴러가는, 사진이 주인공인 사이트입니다. 한글을 전부 Kia Signature가 그리는데 자간 규칙이 하나도 없고 굵기도 사실상 한 단뿐이라, 타이포로 긴장을 만드는 사이트는 아닙니다. 화면을 만드는 것은 이미지 쪽으로, 히어로 대부분이 1440×900 풀블리드 사진이고 그 위에 52px 국문 제목이 좌하단에 얹힙니다. 버튼까지 모서리를 각지게 두는 정돈된 인상이라, 사진 위 텍스트 오버레이와 CTA 규격을 참고할 때 유용합니다.
https://www.kia.com/krColor Palette
Primary
Label
Line
Background
Static
Typography
Kia Signature · 400 / 700display·heading·body·ui, 한글 100%
Kia Signature Fix · 400라틴 보조
Apple SD Gothic Neo · 400폴백
Type Scale22개 스타일 전부 font-weight 400이고 letter-spacing이 normal이다 — 자간 규칙 0종
display52px · 400 · 1.23
Handgloves 123
h148px · 400 · 1.25
Handgloves 123
h242px · 400 · 1.29
Handgloves 123
h328px · 400 · 1.43
Handgloves 123
h424px · 400 · 1.5
Handgloves 123
lead20px · 400 · 1.6
Handgloves 123
body-lg18px · 400 · 1.43
Handgloves 123
body16px · 400 · 1.43
Handgloves 123
caption12px · 400 · 2
Handgloves 123
국문 · Korean
| hangulFont | Kia Signature (자체 웹폰트, self-hosted woff2) — 한글 22,488글리프 100.0% |
| hangulWeights | 400 22,254자(98.9%) · 700 234자(1.0%). CSS 상 font-weight는 22개 스타일 전부 400이고 굵기는 Bold/Regular/Light 패밀리 전환으로 낸다 |
| body | 16px/400 lh1.43(Bold) · 긴 문단은 16px Light lh1.75 · 18px Light lh1.67. 자간 normal |
| sub | 히어로 본문 18px/400, 카드 설명 16px/400 lh1.43 |
| label | 14px/400(버튼·배지) · 13.33px(검색·페이지네이션) · 12px lh2.0(메타) · 10px lh2.4(최소) |
| mixing | 한 서체가 국·영문을 다 그린다(라틴 2,739글리프도 Kia Signature). 제목 층에서 국·영문이 같은 크기로 섞인다 — 52px 히어로 4개 중 국문 3·영문 1, 48px 11개 중 국문 7·영문 4('Play your Vision'과 '간결하고 볼드한 디자인'이 같은 48px). 영문 제품·서비스명(PV5·Kia Connect·ADAS)은 번역하지 않고 그대로 제목에 넣는다 |
| hangulHeadings | 있다 — 52px 히어로 3개(Kia Connect ‘스트리밍’은 폴드 캡처로 확인, 홈 캐러셀 ‘기아렌터카 온라인 페이지’, PV5 ‘The 2027 PV5 패신저’ 혼용) · 48px 국문 7개 · 42px 국문 11개. 32px 7개는 화면에 없는 숨김 h1이라 세지 않는다. 단 홈 히어로의 폴드 첫 슬라이드는 영문 차명('The 2027 Sportage')이다 |
| verdict | 국문 히어로 레퍼런스로 유효하다 — 단 '풀블리드 이미지 위 국문 제목' 유형에 한해서다. 근거: ① 국문 대형 제목이 실재한다(52px/400 국문 히어로 2건 + 혼용 1건, 48px 국문 7건, 42px 국문 11건). Kia Connect 히어로는 616px 이미지 위 좌하단 흰 국문 52px로 폴드 캡처에서 확인된다 ② 그러나 화면을 지배하는 것은 조판이 아니라 이미지다 — 868장이 78섹션 중 53섹션에 들어가고 이미지 보유 섹션 높이가 전체의 90.2%(47,768/52,982px), 히어로 4개 중 3개가 1440×900 풀블리드이며 홈 폴드의 첫 슬라이드 제목은 영문이다 ③ 타이포 자체의 변수는 크기뿐이다: 자간 규칙 0종(22개 스타일 전부 normal), 렌더 웨이트 400이 98.9%. 따라서 자간·웨이트 대비로 긴장을 만드는 국문 타이포 히어로의 레퍼런스로는 부적합하고, 이미지 위 텍스트 오버레이의 크기·행간·정렬·CTA 규격(52/400/1.23 좌하단 + 14px/400 radius 0 패딩 16×24 2개)의 레퍼런스로는 유효하다. 서체가 자체 폰트라 값만 이식할 수 있고 서체는 재현할 수 없다 |
| rendered | Kia Signature ×24454 |
영문 · Latin국문과 동일
| latinFont | Kia Signature 15,154글리프(99.4%) · Kia Signature Fix 88글리프(0.6%) · Apple SD Gothic Neo 4글리프(0.0%) |
| latinWeights | 단일 페이스(웨이트 파생 페이스 없음) |
| share | 라틴 15,246글리프 / 한글 24,454글리프 — 지면의 38.4%가 라틴이다 (1440 CDP 실측) |
| scale | 타입 스케일에서 Kia Signature를 쓰는 단: display 52px/400 · h1 48px/400 · h2 42px/400 · h3 28px/400 · h4 24px/400 · lead 20px/400 · body-lg 18px/400 · body 16px/400 · caption 12px/400 |
| mixing | 국영문 혼용 노드 837개(전체 2,310개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다 |
| roleNote | 라틴 38.4%를 국문 서체가 그대로 그린다 — 영문용 선택 없음 |
| verdict | 영문 전용 서체 없음 — 라틴 99.4%를 그리는 Kia Signature가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다 |
| sharedWithKorean | 국문과 같은 서체: Kia Signature |
| rendered | Kia Signature ×15154 · Kia Signature Fix ×88 · Apple SD Gothic Neo ×4 |
Spacing & Shape
Spacing
| Purpose | Value | Preview |
|---|---|---|
| Density | spacious | |
| Base unit | 8px | |
| Max width | 1344px | |
| Section gap | 섹션 자체의 padding은 78개 중 71개가 0/0이고, 관측된 값은 80/120(이벤트 페이지네이션)·64/120(고객센터)·42/15(필터 스트립)뿐이다. 간격은 섹션이 아니라 안쪽 요소가 만든다 — 120px×77 | |
| Header | 80px static | |
| Grid | 카드 3열 432×244 거터 24(432×3+24×2=1344) · 카탈로그 3열 432×366 거터 24 · 뉴스·이벤트 2열 660(660×2+24=1344) · 홈 퀵링크 5열 250×244 거터 24(콘텐츠 1252) · 푸터 링크 6열 148×17 | |
| Content Widths | 1344px ×6페이지 · 1308px ×2 · 1252px(홈) · 1116px(고객센터 게시판) | |
| Card Padding | 퀵링크 카드 432×244(밴드 높이 484) · 뉴스 카드 660×517 · 이벤트 카드 660×499 · 아코디언 행 1344×52 | |
| Button Padding | 16px 24px (주·보조·고스트 3종 공통) |
Border Radius
| Role | Value | Preview |
|---|---|---|
| square | 0px | 7회 · 버튼 7종 전부·카드·이미지·인풋 — 기본값 |
| xs | 4px | 10회 · 문단 안 작은 블록(p) |
| sm | 8px | 10회 · 목록 컨테이너(ul) |
| badge | 15px | 16회 · 배지(패딩 0 17px, 14px/400) — bg #05141F/#F8F8F8 2종 |
| circle | 50% | 13회 · 원형 아이콘 버튼(채팅 상담 등) |
Guidelines
Do
- 국문 대형 제목은 52/48/42px, weight 400, lh 1.23~1.29, 자간 0으로 짠다 — 22개 스타일 전부 letter-spacing normal이라 이 사이트에는 자간 보정이라는 개념이 없다
- 굵기는 font-weight가 아니라 패밀리(Kia Signature Bold/Regular/Light)로 바꾼다. 렌더 웨이트는 400이 22,254자, 700이 234자(1.0%)뿐이다
- 버튼·카드·이미지는 radius 0으로 둔다. 라운드는 배지 15px(16회)와 원형 아이콘 50%(13회)에만 준다
- 콘텐츠 폭 1344 중앙(1440 뷰포트 좌우 48), 카드 3열 432 거터 24, 기사·이벤트 2열 660으로 맞춘다
- 지면은 #FFFFFF 한 장으로 가고(78섹션 중 74), 강조가 필요한 밴드에만 #F8F8F8을 쓴다(4섹션, 전부 PV5 상세)
- 텍스트는 #05141F → #37434B → #697278 3단으로만 내린다(각각 흰 바탕 18.65:1 · 10.16:1 · 4.91:1)
- 히어로는 1440×900 이미지 위에 52px 국문 제목 + 14px/400 고스트 버튼을 얹는 방식으로 짠다
- 모션은 0.5s ease(171회)를 기본값으로, 진입 연출은 enter-ani 1s ease-in(11회)까지만
Don't
- #0000EE를 브랜드 액센트로 옮기지 않는다 — 팔레트 4위(718회, 7페이지)이지만 소스가 ir-text 하나뿐인 브라우저 기본 링크색이고 화면에 보이지 않는다(그래서 팔레트에서 뺐다)
- #697278(4.91:1)보다 옅은 회색을 본문에 쓰지 않는다 — #B7B7B7 2.01:1 6쌍, #697278 on #D2D2D2 3.25:1 5쌍이 이미 AA 미달이다
- 다크 섹션을 만들지 않는다 — 10페이지 78섹션 중 74가 #FFFFFF, 4가 #F8F8F8이고 어두운 지면은 화면에 없다(#010E18은 select-btn 3회의 미노출 지면)
- 자간·웨이트 대비로 히어로를 만들지 않는다 — 자간 규칙 0종·웨이트 400 고정이라 이 사이트의 위계는 오직 크기(52 → 48 → 42)와 이미지가 만든다
- 그림자로 위계를 만들지 않는다 — 4종 40회뿐이고(rgba(0,0,0,.1) 0 0 11px ×25가 대부분) 그라디언트는 0개다. 분리는 1px #DADBDC(×89)와 지면 교대로 한다
- 여백을 8배수로 반올림하지 않는다 — 실측 상위가 16px×551 · 22px×374 · 10px×304 · 40px×272로 22·10·19·25px이 실제로 쓰인다
- Swiper 기본 UI 색(#000 불릿, rgba(16,16,16,.3) 화살표)을 브랜드 색으로 승격하지 않는다 — 라이브러리 기본값이 그대로 남은 것이다
- 32px h1을 제목 단으로 쓰지 않는다 — 9페이지 전부에 있지만 텍스트가 브레드크럼 전문이고 행간이 UA 기본이며 폴드 캡처에 보이지 않는 숨김 h1이다(그래서 타입 스케일에서도 뺐다)
