현대자동차 아이오닉6
3D 파노라마 런칭 프로모션
현대자동차 아이오닉6 런칭 프로모션의 3D 웹사이트를 4개국 대상으로 개발했습니다. 사용자가 차량 외관과 실내를 360도로 자유롭게 둘러보며 디자인과 공간감을 살펴볼 수 있는 인터랙티브 페이지입니다.
4개국3D 웹사이트 개발 범위
3D 파노라마360도 자유 시점
WebGLThree.js 브라우저 3D
반응형모바일·PC 동시
문제
모바일과 PC에서 3D 파노라마를 빠르게 열고 자연스럽게 조작할 수 있어야 했습니다.
- 차량 디자인과 주변 공간을 정적 이미지 대신 3D 파노라마로 전달해야 했습니다.
- 모바일과 PC 환경에 맞춰 품질과 입력 방식을 조정해야 했습니다.
- 초기 로딩이 빠르면서도 시선이 자연스러운 카메라 연출이 필요했습니다.
- 검색과 공유에 유리하도록 웹 표준을 기반으로 구현해야 했습니다.
해결 방식
Three.js 기반 WebGL 로 차량 외관·실내와 주변 공간을 담은 3D 파노라마 씬을 구성하고, 스크롤·드래그 인터랙션으로 자유 시점을 제공했습니다.
3D 파노라마 씬
차량 외관·실내와 주변 공간을 함께 담아 실제 공간을 둘러보는 듯한 3D 파노라마를 구성했습니다.
360도 자유 시점
드래그와 스와이프로 카메라를 돌려 차량 밖과 안을 원하는 각도에서 볼 수 있게 했습니다.
스크롤 시퀀스
스크롤 위치에 따라 카메라와 조명이 전환되는 흐름을 구현했습니다.
반응형 대응
모바일과 PC 해상도에 맞춰 품질을 조정하고 터치·마우스 인터랙션을 나눴습니다.
지연 로딩
메인 씬을 먼저 싣고 세부 에셋은 스크롤에 따라 단계적으로 불러왔습니다.
결과
- 런칭 기간에 3D 파노라마 프로모션 페이지를 공개했습니다.
- 링크 공유만으로 앱 설치 없이 차량 3D 파노라마를 볼 수 있습니다.
- 모바일·PC 환경에 맞춰 품질과 입력 방식을 나눠 적용했습니다.
4개국에 같은 프로모션을 내야 했기 때문에, 나라별로 페이지를 따로 만들지 않고 하나의 3D 웹사이트에서 언어와 콘텐츠만 갈아 끼우는 구조로 잡았습니다.
기술 구성
| 영역 | 기술 |
|---|---|
| 3D 렌더링 | Three.js · WebGL |
| 프론트엔드 | 순수 JavaScript (Vanilla JS) |
| 인터랙션 | 드래그·스크롤 기반 카메라 시퀀스 |
Vanilla JavaScript로 구현해 별도 UI 프레임워크 의존성을 두지 않았습니다. Three.js WebGL과 Unity WebGL의 선택 기준이 궁금하시다면 웹 3D 기술 선택 기준 보기를 참고해 주세요.
관련 프로젝트
브라우저에서 3D를 보여줘야 하나요?
어떤 기기에서 누가 보는지 알려주세요. 어디까지 가능한지 답하겠습니다.
프로젝트 문의