본문 바로가기

HMG Driving Experience

현대자동차(주)

2024


Overview

HMG Driving Experience는 현대자동차그룹이 운영하는 체험형 드라이빙 프로그램으로, 고객이 다양한 차량을 직접 주행하며 성능과 브랜드를 경험할 수 있도록 제공하는 공식 예약 플랫폼입니다.

기존 서비스는 운영 중인 소스를 기반으로 기능 확장 및 UI 개선이 동시에 요구되는 프로젝트였습니다. 기존 구조를 직접 수정할 경우 안정성에 영향을 줄 수 있어 신규 구조를 별도로 설계하고 우선적으로 적용하는 방식으로 리스크를 최소화하며 개편을 진행했습니다.

Work Detail

  • 주요 페이지 퍼블리싱
    • 현대 N 체험(현대 N 페스티벌 참가 신청, 현대 N 라운지), 마이페이지(메인, 내 정보 수정, 결제현황, 참여/예약현황, 나의 드라이빙, 포인트/쿠폰, 나의 Q&A, 나의 후기, 빈자리 알림 내역), 예약하기(프로그램부터 예약하기), 현장 디스플레이, EDM
      • 마이페이지 및 예약 시스템 UI 구현
        • 내 정보 수정, 결제 현황, 참여/예약 현황, 포인트/쿠폰, Q&A, 후기 등
  • 웹 접근성 인증마크 획득

Tech Stack

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • GSAP
  • Swiper

Tool

  • Visual Studio Code
  • Git
  • Figma
  • Google Workspace
HMG Driving Experience 스크린샷

레거시 유지 기반 구조 개선

기존 소스 수정 없이 신규 파일 기반으로 구조를 확장해, 기존 기능에 영향을 최소화하면서 안정적인 기능 확장과 UI 개선을 목표로 작업했습니다.

사용자 입력 및 상태에 따른 동적 UI 처리

마이페이지 및 예약하기 페이지는 사용자의 선택 및 입력 값에 따라 다양한 UI 상태가 발생하는 구조였습니다.

큰 틀에서 공통적인 UI를 먼저 구성한 후, 상태에 따라 달라지는 영역은 기능 단위로 분리하여 작업했습니다. 이를 통해 복잡한 화면 구성을 체계적으로 정리하고 유지보수성을 향상시켰습니다.