Hyundai Motor Company (현대자동차)

픽셀 주간등 아이오닉 5 렌더 옆 큰 「80%」, 그 아래 현대 블루 #002C5F 원격제어 카드(시동/공조·문·비상등)

한국모빌리티소비자복합modern-minimal고딕spacioussoftsubtle라이트한글 지원출시 2016개정 2023

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: 현대자동차 (Hyundai Motor Company). 기아·제네시스·현대카드와 시각 체계가 다르다 — 이 문서는 현대 브랜드의 디지털 접점 두 곳만 다룬다
한 줄 정체성: 승용·SUV·전기차(아이오닉)·수소차(넥쏘)를 파는 국내 최대 완성차 브랜드. 고객이 만나는 화면은 현대닷컴(hyundai.com/kr/ko/e — 모델 페이지·내 차 만들기·구매상담)과 마이현대 앱(차량 원격제어·정비·블루멤버스 포인트)이다. 마이현대는 블루링크 앱과 옛 마이현대를 하나로 합친 앱이다(앱스토어 설명 「블루링크와 마이현대가 만나 더욱 강력해진 App」)
공식 디자인 철학: 브랜드 비전은 「Progress for Humanity(휴머니티를 향한 진보)」(2019년 수립, CES 2020 에서 공개). 전기차의 시각 정체성은 「파라메트릭 픽셀(Parametric Pixel)」 — 2019년 IAA 의 콘셉트카 「45」에서 처음 보인 네모 픽셀 램프로, 아이오닉 5·6 의 앞뒤 램프와 휠 무늬에 이어진다. 전용 서체 Hyundai Sans 의 설계 원칙은 「Rich simplicity」(2016, HvD Fonts)
CI 색(공식): 「네 가지 자연 요소에서 영감을 얻은」 전용색상 9색 — Hyundai Blue #002C5F(PMS 654C)를 중심으로 Sand #E4DCD3·Light Sand #F6F3F2·Gold #A36B4F·White·Black, 강조용 Active Blue #00AAD2·Sky Blue #AACAE6·Active Red #E63312
시그니처 요소 1개: 하늘과 도시 사진을 화면 가득 깐 위에 검정 대형 모델명(Hyundai Sans Head 68px)과 「47,350,000원 부터」, 그 옆 현대 블루 #002C5F 의 16px 알약 버튼(「카탈로그」「가격표」), 사진 아래엔 50% 검정 반투명 로컬 내비 막대. 앱에서는 같은 네이비가 원격제어 카드(시동/공조·문·비상등 켜기 + 「디지털 키 연결하기」) 면 전체를 칠한다
개편 시점: 지금 모델 페이지 마크업에는 design2020(모델 탭)·design2023(로컬 내비) 클래스가 붙어 있다 — 웹은 2020·2023년에 단계적으로 고쳤다(추정). 마이현대는 2024년 말 블루링크와 합친 판이다

Tone & Mood

톤 & 무드

핵심 키워드 3개: 신뢰, 정교함, 진보
무드 설명: 색은 사진과 차가 맡고 UI 는 흰색·검정과 현대 블루 한 가지로 정리한다. 다만 회색 대신 따뜻한 샌드(#E4DCD3 선, #F6F3F2 면)로 표 머리·메가 메뉴·접힘 목록을 나눠, 기아의 차가운 흑백과 달리 종이 같은 온기가 있다. 고르는 상태(탭·체크·「NEW」)만 청록 #007FA8 로 빛난다. 거의 모든 글자에 자간 -0.4px 를 걸어(사이트 CSS 244회) 단단하게 조인다
비주얼 스타일: 모던 미니멀 — 풀블리드 차 사진 + 큰 영문 모델명 + 1px 선과 샌드 면
밀도(Density): Spacious — 모델 페이지 첫 화면은 브라우저 높이 전체를 차 사진에 쓰고, 헤더 80px·로컬 내비 80px, 본문 폭 1120px(1280 화면에서 좌우 80px)
모서리 성향: Soft (4~8px) — 면적이 넓은 트림 카드·「자세히 보기」 버튼이 5px, 배지 4px. 예외로 히어로 알약 16px·「트림별 상세 비교」 27px·모델 탭 50px, 헤더와 사진 띠는 0
평면성: Subtle — 카드는 #F4F5F6 면 + 1px #E5E5E5 선으로 끝내고, 그림자는 검색 패널·툴팁·떠 있는 원형 버튼에만 0 1px 2px~0 2px 6px 2px 로 짧게

Color System

컬러 시스템 (CSS 변수)

공식 CI 9색은 현대닷컴 「CI 전용색상」 페이지의 HEX 를 그대로 옮겼다. 웹 역할색은 2026-10-04 아이오닉 5 모델 페이지의 CSS(61만 자)를 hex 빈도로 집계하고 요소의 계산 스타일을 재서 확인했다 — #fff 423회, #000 322회, #007fa8 124회, #002c5f 104회, #666 95회, #f6f3f2 47회, #e4dcd3 39회, #e5e5e5 31회, #cecdca 19회. (#409eff·#606266 같은 값은 사이트가 함께 싣는 Element UI 라이브러리 기본값이라 뺐다.)

:root {
  /* Primary — Hyundai Blue. 500 이 공식 CI(PMS 654C), 나머지 단계는 흰색·검정과 섞은 (추정) */
  --color-primary-50:  #E6EAEF;  /* (추정) 10% — 선택 행·옅은 파란 면 */
  --color-primary-100: #CCD5DF;  /* (추정) 20% */
  --color-primary-200: #A6B5C7;  /* (추정) 35% */
  --color-primary-300: #8095AF;  /* (추정) 50% */
  --color-primary-400: #4D6B8F;  /* (추정) 70% */
  --color-primary-500: #002C5F;  /* Hyundai Blue — 주 버튼(.btn-normal)·히어로 알약·「내 차 만들기」 글자·GNB 활성 막대 */
  --color-primary-600: #002651;  /* (추정) hover */
  --color-primary-700: #001F44;  /* (추정) active */
  --color-primary-800: #001836;  /* (추정) */
  --color-primary-900: #001128;  /* (추정) */

  /* Secondary — 현대닷컴 「선택·활성」 청록. CSS 강조색 1위(124회), CI 색은 아니다 */
  --color-secondary-50:  #E6F6FA;  /* 「변경 가능」 배지 면 실측 */
  --color-secondary-500: #007FA8;  /* 활성 탭·서브 내비 글자·.btn-skyblue·「NEW」 배지 실측 */
  --color-secondary-700: #29789C;  /* 「변경 가능」 배지 글자 실측 */
  --color-control:       #009EC3;  /* 체크박스·라디오·단계(step) 활성 실측 */

  /* CI 보조색 — 전용색상 9색 */
  --color-sand:        #E4DCD3;  /* Hyundai Sand (PMS Warm Gray 1C) — 표 머리 면·접힘 목록·날짜 버튼 테두리 */
  --color-sand-light:  #F6F3F2;  /* Hyundai Light Sand (Warm Gray 1C 30%) — 메가 메뉴·유틸 바·모델 탭 바탕 */
  --color-gold:        #A36B4F;  /* Hyundai Gold (PMS 876C) — 인쇄 핫 스탬핑, 화면에선 거의 안 씀 */
  --color-active-blue: #00AAD2;  /* Active Blue (PMS 312C) — 챗봇 원형 버튼(60px) 실측. 「+」 버튼은 현대 블루 */
  --color-sky-blue:    #AACAE6;  /* Sky Blue (PMS 277C) */
  --color-active-red:  #E63312;  /* Active Red (PMS 2347C) — 「BEST」 배지(.badge-rect.best)·경고 글자(.red-text) */

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F5F6;  /* 트림 카드 면 실측 */
  --color-neutral-100:  #E5E5E5;  /* 기본 선 — 헤더 밑줄·카드 테두리 */
  --color-neutral-200:  #CECDCA;  /* 비활성 버튼 면(.btn[disabled]) */
  --color-neutral-300:  #B1B1B1;  /* 비활성 선 버튼 테두리 */
  --color-neutral-500:  #767676;  /* 회색 버튼(.btn-gray)·검색창 placeholder */
  --color-neutral-600:  #666666;  /* 보조 글자 (95회) */
  --color-neutral-700:  #444444;
  --color-neutral-900:  #1C1B1B;
  --color-neutral-1000: #000000;  /* 제목·모델명·본문 */

  /* Semantic — 사이트에 실제로 있는 상태만 실측, 나머지는 (추정) */
  --color-success-bg: #EFF2F7;   /* 「적용」 배지 면 실측 — 초록 대신 남색 계열로 「됨」을 표시 */
  --color-success-fg: #1A4E8A;   /* 「적용」 배지 글자 실측 */
  --color-warning-bg: #FDF0EC;   /* (추정) */
  --color-warning-fg: #E63312;   /* .red-text 실측 — 팝업 안 주의 문구 */
  --color-error-bg:   #FDF0EC;   /* (추정) */
  --color-error-fg:   #E63312;   /* (추정) Active Red 로 통일. 실제 폼 오류는 Element UI 기본 #F56C6C 가 남아 있다 */
  --color-info-bg:    #E6F6FA;   /* 「변경 가능」 배지 면 실측 */
  --color-info-fg:    #29789C;   /* 「변경 가능」 배지 글자 실측 */

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F6F3F2;            /* Light Sand — 메가 메뉴·탭 바탕 */
  --bg-elevated: #F4F5F6;            /* 트림 카드 */
  --bg-overlay:  rgba(0,0,0,0.7);    /* 모바일 GNB 딤 실측 */
  --bg-localnav: rgba(0,0,0,0.5);    /* 모델 로컬 내비 실측 */

  /* Text */
  --text-primary:    #000000;
  --text-secondary:  #666666;
  --text-tertiary:   #767676;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #B1B1B1;

  /* Border */
  --border-default: #E5E5E5;
  --border-subtle:  #E4DCD3;   /* 샌드 선 — 표·접힘 목록·툴팁 테두리 */
  --border-strong:  #002C5F;   /* 선 버튼(.btn-line) */
  --border-focus:   #007FA8;
}

라이트 전용: 현대닷컴에는 다크 모드 전환이 없고, 마이현대도 앱스토어에 올린 화면은 모두 밝은 판이다. 어두운 면은 사진 위 로컬 내비(50% 검정)와 앱의 네이비 원격제어 카드뿐이다
색의 몫: 현대 블루는 「누르면 사거나 움직이는 것」(구매·시동), 청록 #007FA8 은 「지금 고른 것」(탭·체크·옵션), 샌드는 「나누는 선과 바탕」. 세 역할을 섞지 않는다

Typography

타이포그래피

폰트 페어링:
- 한글: Hyundai Sans Head KR / Text KR (전용, 비공개). 2016년 브랜드 전면 개편 때 HvD Fonts(Hannes von Döhren·Livius Dietzel·Christoph Koeberlin)가 만들었다. 제목용 Head, 12pt 이하 정보용 Text 두 가족이고, 획 끝을 90°로 잘라 뾰족한 모서리를 없앴다. 화면용으로 손 힌팅했다
- 영문: Hyundai Sans Head / Text (같은 가족, 기하학 골격)
- 폴백: 라틴은 Segoe UI·Arial, 한글은 Apple SD Gothic Neo·Malgun Gothic. Head(Medium 파일)를 폴백으로 그릴 땐 font-weight:600 이라야 원래 무게가 난다
굵기 운용: 현대닷컴은 Medium 파일을 font-family:"HyundaiSansHeadKR"·font-weight:400 으로, Regular 파일을 끝에 R 을 붙인 "HyundaiSansHeadKRR"·"HyundaiSansTextKRR" 로 따로 등록한다. 굵기를 숫자로 올리지 않고 패밀리 이름을 바꿔 쓴다(Text 138회·Head 64회·TextR 62회·HeadR 60회)
위계 (실측 크기 / 패밀리 / 행간 / 자간):
- Display: 68px / Head / 82px / 0 — 모델명 「IONIQ 5」
- H1: 46px / Head / 60px / -1.5% — 섹션 제목 「이 차가 어울리는 모든 순간」 (.title-k1 은 58/70)
- H2: 44px / Head / 44px / 0 — 「Colors」「Trims」 (.title-h1 44/56, .title-h2 30/42)
- H3: 28px / Head / 26px / 0.32px — 트림 이름 「Inspiration」 (.title-h3 20/32)
- Body Large: 24px / HeadR / 36px / 0 — 히어로 태그라인 「내가 선택한 단 하나의 전기차」
- Body: 16px / Text / 28px / -0.4px — .text-b1
- Body Small: 14px / Text / 26px / -0.4px — .text-c1, 알약 버튼은 HeadR 14px
- Caption: 12px / Text / 24px / 0.016px — .text-c2, 배지는 12px/15px
숫자·가격: 가격은 「47,350,000원 부터」처럼 원 단위 콤마를 다 쓰고, 히어로에선 Head 20px, 트림 카드에선 HeadR 20px 숫자만(「64,470,000」)

Spacing

스페이싱

Base unit: 실측 간격은 4·6·10·16·20·30·40·60·80px 로 10px 계열이 섞인다. 토큰은 4px 단위로 묶고 30·60·80 은 그대로 둔다 (추정)
토큰:

--space-xs: 4px;    /* 배지 안쪽 위아래 */
--space-sm: 8px;
--space-md: 16px;   /* 알약 버튼 좌우 */
--space-lg: 20px;
--space-xl: 30px;   /* 헤더 좌우·표 머리 좌우 (실측) */
--space-2xl: 40px;  /* 접힘 목록 위 여백 (실측 40px 60px 60px) */
--space-3xl: 60px;
--space-section: 80px;  /* 로컬 내비 좌우·섹션 간격 */

Container: 본문 1120px(트림 목록 실측), 헤더는 화면 폭 전체에 좌우 30px, 로컬 내비 좌우 80px. 모바일 헤더 55px

Border Radius

--radius-none: 0;        /* 헤더·로컬 내비·사진 띠·「더 보기」 글자 링크 */
--radius-sm: 4px;        /* 배지(변경 가능·적용·미적용) 실측 */
--radius-md: 5px;        /* 트림 카드·「자세히 보기」(.btn-detail) 실측 — 기본값 */
--radius-lg: 16px;       /* 히어로 알약 32px 높이 (카탈로그·가격표) 실측 */
--radius-xl: 20px;       /* 푸터 펼침 판 윗모서리 20px 20px 0 0 실측 */
--radius-pill: 27px;     /* 「트림별 상세 비교」 54px 알약 실측. 모델 탭은 50px */
--radius-full: 9999px;   /* 떠 있는 원형 버튼(+, 챗봇) */

마이현대 앱은 카드 12~16px, 원격제어 버튼 8px 로 웹보다 둥글다 (앱 화면 관찰, 추정).

Shadow / Elevation

--shadow-none: none;                                  /* 카드 — 면 색과 1px 선으로만 구분 */
--shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.1);             /* 위치 바·서브 탭 밑 (실측) */
--shadow-md: 0 1px 2px 2px rgba(0,0,0,0.08);          /* 최근 검색어 목록 (실측) */
--shadow-lg: 0 2px 6px 2px rgba(0,0,0,0.1);           /* 원형 버튼 툴팁 — 청록 1px 테와 함께 (실측) */
--shadow-xl: 3px 3px 5px 0 rgba(0,0,0,0.1);           /* 「트림별 상세 비교」 떠 있는 알약 (실측) */

Iconography

스타일: Outline. 웹은 PNG 아이콘(카탈로그 책·가격표 동전 더미)과 선 아이콘을 섞고, 앱은 2px 안팎 둥근 끝 선 아이콘(홈·샵·제어·서비스·마이)
Stroke 굵기: 1.5~2px (추정)
모서리 처리: Round
추천 라이브러리: 공식 세트는 공개되지 않았다. 대체로 Lucide (stroke 1.75)
화살표: 「더 보기 ›」 꺾쇠는 아이콘 파일이 아니라 7px 정사각형의 오른쪽·아래 테두리(2px)를 -45° 돌려 만든다(.btn-more:after 실측)

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button — 현대닷컴 .btn 계열을 옮겼다. 색·테두리·비활성은 실측, hover·active·loading 은 (추정)

.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius-md); font: 400 16px/1 "HyundaiSansTextKR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; letter-spacing: -0.4px; text-decoration: none; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.hm-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }       /* .btn-normal — 「자세히 보기」 */
.hm-btn--primary:hover { background: var(--color-primary-600); }
.hm-btn--primary:active { background: var(--color-primary-700); }
.hm-btn--line { background: transparent; border-color: var(--color-primary-500); color: var(--color-primary-500); font-family: "HyundaiSansHeadKRR", "Malgun Gothic", Arial, sans-serif; } /* .btn-line */
.hm-btn--line:hover { background: var(--color-primary-50); }
.hm-btn--active { background: var(--color-secondary-500); color: #FFFFFF; }                    /* .btn-skyblue — 모바일 「구매상담신청」 */
.hm-btn--ghost { background: transparent; border: 2px solid #FFFFFF; color: #FFFFFF; }          /* .btn-white-line — 사진 위 */
.hm-btn--ghost:hover { background: #FFFFFF; color: var(--color-primary-500); }
.hm-btn--danger { background: transparent; border-color: var(--color-active-red); color: var(--color-active-red); } /* (추정) 사이트에 빨간 버튼은 없다 */
.hm-btn:disabled { background: var(--color-neutral-200); border-color: var(--color-neutral-200); color: #FFFFFF; cursor: default; } /* .btn[disabled] #CECDCA 실측 */
.hm-btn--line:disabled { background: transparent; border-color: var(--color-neutral-300); color: var(--text-secondary); }       /* 실측 */
.hm-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.hm-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.hm-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #FFFFFF; border-radius: 50%; animation: hm-spin .8s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* 히어로 알약 — 「카탈로그」「가격표」 32px·16px 실측 */
.hm-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: var(--radius-lg); background: var(--color-primary-500); color: #FFFFFF; font: 500 14px/14px "HyundaiSansHeadKRR", "Malgun Gothic", Arial, sans-serif; letter-spacing: -0.4px; text-decoration: none; }
/* 「더 보기 ›」 글자 링크 — 꺾쇠는 테두리 두 변 */
.hm-more { display: inline-flex; align-items: center; gap: 7px; color: var(--color-primary-500); font: 400 15px/30px "HyundaiSansHeadKR", "Malgun Gothic", Arial, sans-serif; letter-spacing: -0.4px; text-decoration: none; }
.hm-more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); }

Input — GNB 통합검색은 #F2F2F2 패널 안의 테두리 없는 20px 입력(실측). 폼 입력의 테·높이는 (추정)

.hm-search-panel { display: flex; align-items: center; gap: 12px; height: 72px; padding: 0 30px; background: #F2F2F2; box-shadow: var(--shadow-sm); }
.hm-search { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: 400 20px/1 "HyundaiSansHeadKRR", "Malgun Gothic", Arial, sans-serif; color: var(--text-primary); }
.hm-search::placeholder { color: var(--text-tertiary); }   /* #767676 실측 */
.hm-search:focus { outline: none; }
.hm-search-panel:focus-within { box-shadow: inset 0 -2px 0 var(--color-primary-500); }   /* (추정) */
.hm-input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--color-neutral-100); border-radius: 0; background: #FFFFFF; font: 400 16px/1 "HyundaiSansTextKR", "Malgun Gothic", Arial, sans-serif; letter-spacing: -0.4px; }
.hm-input:focus { outline: none; border-color: var(--border-focus); }
.hm-input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.hm-input[aria-invalid="true"] + .hm-input__msg { color: var(--color-error-fg); font-size: 12px; margin-top: 6px; }
.hm-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card — 트림 카드(#F4F5F6 + 1px 선 + 5px) / 강조 / 샌드 테두리

.hm-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px 22px 22px; }
.hm-card__name { margin: 0; font: 400 22px/1.1 "HyundaiSansHeadKR", "Malgun Gothic", Arial, sans-serif; letter-spacing: .32px; }
.hm-card__price { font: 400 16px/1.3 "HyundaiSansHeadKRR", "Malgun Gothic", Arial, sans-serif; }
.hm-card--emphasis { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #FFFFFF; }   /* (추정) */
.hm-card--outlined { background: #FFFFFF; border-color: var(--border-subtle); }   /* 접힘 목록·툴팁의 샌드 테 */
.hm-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-secondary-500); }  /* 비교용 선택 표시 (실측 색) */

Badge / Tag — 사양 상태 배지(4px) + 차종 배지(.badge-rect)

.hm-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); font: 500 12px/15px "HyundaiSansTextKR", "Malgun Gothic", Arial, sans-serif; letter-spacing: -0.4px; }
.hm-badge--change { background: var(--color-info-bg); color: var(--color-info-fg); }          /* 변경 가능 */
.hm-badge--on     { background: var(--color-success-bg); color: var(--color-success-fg); }    /* 적용 */
.hm-badge--off    { background: #E8EAEB; color: #4A565E; }                                     /* 미적용 */
.hm-badge--best   { border-radius: 0; padding: 4px 5px 2px; height: auto; background: var(--color-active-red); color: #FFFFFF; font-size: 11px; }   /* solid */
.hm-badge--new    { border-radius: 0; padding: 3px 4px 1px; height: auto; border: 1px solid var(--color-secondary-500); color: var(--color-secondary-500); background: #FFFFFF; font-size: 11px; } /* outline */

Navigation — GNB(80px, 활성 4px 남색 막대) + 모델 로컬 내비(50% 검정 80px) + 서브 탭

.hm-gnb { display: flex; align-items: center; gap: 36px; height: 80px; padding: 0 30px; background: #FFFFFF; border-bottom: 1px solid var(--border-default); }
.hm-gnb--clear { background: transparent; border-color: transparent; }        /* 사진 위 (.isTransparent) */
.hm-gnb__menu { display: flex; gap: 28px; font: 400 16px/30px "HyundaiSansHeadKRR", "Malgun Gothic", Arial, sans-serif; letter-spacing: -0.4px; }
.hm-gnb__menu a { position: relative; color: inherit; text-decoration: none; }
.hm-gnb__menu a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -25px; height: 4px; background: var(--color-primary-500); }  /* 활성 막대 4px — .4s 로 미끄러짐 */
.hm-localnav { display: flex; align-items: center; gap: 30px; height: 80px; padding: 0 80px; background: var(--bg-localnav); color: #FFFFFF; font: 500 16px/16px "HyundaiSansHeadKRR", "Malgun Gothic", Arial, sans-serif; }
.hm-localnav a { position: relative; display: flex; align-items: center; height: 100%; color: inherit; text-decoration: none; }
.hm-localnav [aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #FFFFFF; }  /* 실측 ::after 4px */
.hm-subnav { display: flex; justify-content: center; gap: 50px; height: 54px; align-items: center; border-bottom: 1px solid var(--border-default); font: 400 15px/1 "HyundaiSansHeadKR", "Malgun Gothic", Arial, sans-serif; }
.hm-subnav > * { position: relative; display: flex; align-items: center; height: 100%; }
.hm-subnav [aria-current="true"] { color: var(--color-secondary-500); }
.hm-subnav [aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-secondary-500); }
.hm-tab { height: 33px; padding: 0 17px; border: 0; border-radius: 50px; background: var(--bg-subtle); color: #6A6E72; font: 400 14px/1 "HyundaiSansHeadKRR", "Malgun Gothic", Arial, sans-serif; }
.hm-tab[aria-selected="true"] { background: var(--color-secondary-500); color: #FFFFFF; }

Motion

--duration-fast: 200ms;   /* 페이지 진행 막대(.nav_bar 5px 청록) .2s linear 실측 */
--duration-base: 300ms;   /* 헤더 숨김 transform .3s·접힘 목록 높이 .3s ease-in-out 실측 */
--duration-slow: 400ms;   /* GNB 활성 막대 left·width .4s ease 실측 */
--ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);     /* CSS ease */
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);    /* 실측 ease-in-out */

스크롤을 내리면 헤더가 위로 빠지고 로컬 내비가 화면 위에 붙는다. 모델 사진의 360° 보기는 드래그로 프레임을 넘긴다(공식 360 프레임 60장). prefers-reduced-motion 이면 막대 이동·자동 슬라이드를 끈다.

Anti-patterns

1. 모델명을 한글로 크게 쓰지 않는다 — 히어로의 큰 이름은 「IONIQ 5」「PALISADE」처럼 영문 대문자 Head 서체이고, 한글 「아이오닉 5」는 로컬 내비·태그에만 쓴다 2. 현대 블루와 청록 #007FA8 을 바꿔 쓰지 않는다 — 구매·실행 버튼은 남색, 「지금 고른 것」(탭·체크·옵션)만 청록이다. CI 의 Active Blue #00AAD2 와 웹 청록 #007FA8 도 다른 색이다 3. 나누는 선을 회색 일색으로 두지 않는다 — 표 머리·접힘 목록·툴팁 테두리는 샌드 #E4DCD3, 메가 메뉴 바탕은 라이트 샌드 #F6F3F2 가 현대닷컴의 온기다 4. 차 그림을 아무 차 실루엣으로 대신하지 않는다 — 모델 페이지는 그 차종의 공식 렌더(360 프레임 60장)를 쓴다. 아이오닉 5 라면 네모 픽셀 주간등·틈 없는 클램셸 후드·문을 가로지르는 사선 면·검은 휠 아치 테가 보여야 한다 5. 원 단위를 줄이지 않는다 — 「4,735만 원」이 아니라 「47,350,000원 부터」, 트림 카드는 「64,470,000」. 세제 혜택 전후를 각주로 밝힌다

Sources

출처

Hyundai Motor Company (현대자동차) 이름과 로고는 각 권리자의 상표입니다.