Case Study · Hyundai IONIQ 6
현대자동차 아이오닉6 — WebGL 런칭 프로모션
현대자동차 아이오닉6 런칭 프로모션 웹사이트에 WebGL 기반 차량 3D 인터랙션을 구현했습니다. 차량 디자인의 공기 역학적 실루엣과 디테일을 브라우저에서 직접 경험할 수 있도록 설계했습니다.
런칭 캠페인아이오닉6 프로모션
WebGLThree.js 브라우저 3D
공유 가능링크 기반 즉시 접근
반응형모바일·PC 동시
Challenge — 직면한 문제
자동차 런칭 프로모션 페이지는 방문자 첫 3초 안에 브랜드 임팩트를 전달해야 합니다. 과제는 다음과 같았습니다.
- 차량 디자인·디테일을 정적 이미지 대신 3D 인터랙션으로 전달.
- 모바일·PC에서 동일한 경험을 유지.
- 초기 로딩이 빠르면서도 실사 수준의 렌더링 퀄리티.
- 검색·공유에 유리한 웹 표준 기반 구현.
Solution — 해결 방식
Three.js 기반 WebGL로 차량 3D를 구현하고, 스크롤 시퀀스에 맞춘 카메라·조명 연출을 설계했습니다.
차량 3D 모델 최적화
원본 고폴리곤 차량 모델을 웹용 경량 glTF로 변환.
PBR 재질
차체 도장·유리·휠을 PBR 재질로 실사 수준 표현.
스크롤 시퀀스
스크롤 위치에 따라 카메라·조명·디테일이 시네마틱하게 전환.
반응형 대응
모바일·PC별 해상도·LOD·디테일 조정.
지연 로딩
메인 3D를 우선 로드, 세부 에셋은 스크롤 진행에 따라 단계 로드.
웹 표준 SEO
Next.js SSR로 OG 이미지·메타·크롤링 대응.
Result — 결과
- 런칭 기간 브랜드 임팩트가 큰 3D 프로모션 페이지 공개.
- 링크 공유만으로 앱 설치 없이 차량 3D 체험 가능.
- 모바일·PC 동일한 경험 유지.
- 이후 다른 WebGL 자동차·캠페인 프로젝트의 참고 사례로 활용.
Tech Stack — 기술 스택
| 영역 | 기술 |
|---|---|
| 3D 렌더링 | Three.js · WebGL |
| 에셋 | glTF · Draco · PBR 텍스처 |
| 프론트엔드 | Next.js · React · TypeScript |
| 인터랙션 | 스크롤 기반 카메라 시퀀스 |
| 호스팅 | CDN · Google Cloud Storage |
브랜드 캠페인용 WebGL은 짧은 기간 대규모 트래픽이 몰리는 특성이 있어, 초기 로딩 최적화와 CDN 캐싱 전략이 성패를 좌우합니다. 이 사례에서 확립된 스크롤 시퀀스·지연 로딩 패턴은 다른 브랜드 캠페인 프로젝트에 재사용됩니다.
프로젝트 상담
구체적인 요구사항을 알려주시면 1~3영업일 내 제안서로 회신드립니다.
프로젝트 상담하기