Case Study · Hyundai IONIQ 6
현대자동차 아이오닉6 — 3D 파노라마 런칭 프로모션
현대자동차 아이오닉6 런칭 프로모션 웹사이트에 WebGL 기반 3D 파노라마 뷰를 구현했습니다. 사용자가 차량 주변을 360도로 자유롭게 둘러보며 디자인과 공간감을 체험할 수 있는 인터랙티브 페이지입니다.
런칭 캠페인아이오닉6 프로모션
3D 파노라마360도 자유 시점
WebGLThree.js 브라우저 3D
반응형모바일·PC 동시
Challenge — 직면한 문제
자동차 런칭 프로모션 페이지는 방문자 첫 3초 안에 브랜드 임팩트를 전달해야 합니다. 과제는 다음과 같았습니다.
- 차량 디자인·주변 공간을 정적 이미지 대신 3D 파노라마로 전달.
- 모바일·PC에서 동일한 경험을 유지.
- 초기 로딩이 빠르면서도 시선이 자연스러운 카메라 연출.
- 검색·공유에 유리한 웹 표준 기반 구현.
Solution — 해결 방식
Three.js 기반 WebGL 로 차량과 주변 공간을 담은 3D 파노라마 씬을 구성하고, 스크롤·드래그 인터랙션으로 자유 시점을 제공했습니다.
3D 파노라마 씬
차량 + 주변 공간을 함께 구성한 3D 파노라마로 실제 공간을 둘러보는 듯한 경험 제공.
360도 자유 시점
드래그·스와이프로 카메라를 자유롭게 회전, 차량을 원하는 각도에서 감상.
스크롤 시퀀스
스크롤 위치에 따라 카메라·조명이 시네마틱하게 전환되는 연출.
차량 3D 모델 최적화
원본 고폴리곤 차량 모델을 웹용 경량 glTF 로 변환.
반응형 대응
모바일·PC 해상도에 맞춘 품질 조정과 터치·마우스 인터랙션 분리.
지연 로딩
메인 씬을 우선 로드, 세부 에셋은 스크롤 진행에 따라 단계 로드.
Result — 결과
- 런칭 기간 브랜드 임팩트가 큰 3D 파노라마 프로모션 페이지 공개.
- 링크 공유만으로 앱 설치 없이 차량 3D 파노라마를 체험 가능.
- 모바일·PC 동일한 경험을 유지.
- 이후 다른 WebGL 자동차·캠페인 프로젝트의 참고 사례로 활용.
Tech Stack — 기술 스택
| 영역 | 기술 |
|---|---|
| 3D 렌더링 | Three.js · WebGL |
| 에셋 | glTF |
| 프론트엔드 | 순수 JavaScript (Vanilla JS) |
| 인터랙션 | 드래그·스크롤 기반 카메라 시퀀스 |
프레임워크 없이 Vanilla JavaScript 로 경량 구현해 번들 사이즈·초기 렌더 비용을 최소화했습니다. 런칭 캠페인 특성상 단기간 트래픽이 몰리는 환경에서도 안정적으로 동작합니다. Three.js WebGL 과 Unity WebGL 의 선택 기준이 궁금하시다면 WebGL vs Unity WebGL 비교 가이드를 참고해 주세요.
관련 프로젝트
프로젝트 상담
구체적인 요구사항을 알려주시면 1~3영업일 내 제안서로 회신드립니다.
프로젝트 상담하기