Mercedes-AMG G63 3D 가상현실 구현

프로젝트 개요 자동차 브랜드의 온라인 제품 체험 플랫폼 구축 기존 정적 이미지 중심의 제품 페이지에서 벗어나, 고객이 웹 브라우저에서 직접 차량을 만져보고 조작하는 몰입형 3D 쇼룸을 요구받았습니다. 외장·내장 컬러를 실시간으로 변경하고, 도어와 후드를 열어 디테일을 확인하며, 물리 엔진 기반으로 직접 주행까지 체험할 수 있는 — 오프라인 전시장 방문 없이도 제품을 충분히 경험할 수 있는 **"보는 웹이 아닌 체험하는 웹"**을 목표로 기획·개발하였습니다. 주요 작업 내용 1. 실시간 3D 렌더링 엔진 구축 React Three Fiber 기반 GLB 모델 실시간 렌더링 파이프라인 구현 PBR 머티리얼 동적 스왑 시스템으로 외장 11색 / 내장 8색 실시간 컬러 커스터마이징 HDR 환경맵 기반 3가지 조명 프리셋 (Studio / Night Neon / Desert) 구현 Key · Fill · Rim 3점 조명 시스템으로 시네마틱 라이팅 연출 2. 5단계 인터랙티브 씬 시스템 GSAP 카메라 애니메이션으로 씬 간 시네마틱 전환 구현 Intro → Exterior(360° 뷰) → Interior(실내 둘러보기) → Details(도어/후드 오픈) → Driving(주행) 순차 체험 구성 씬별 독립적 OrbitControls 제어 (회전 제한, 줌 범위, 타겟 포인트 분리) 3. 물리 기반 주행 시뮬레이션 @react-three/cannon 물리 엔진으로 차량 다이내믹스 구현 서스펜션 스프링, 마찰 계수, 엔진 출력 등 실제 차량 파라미터 시뮬레이션 키보드(WASD) + 모바일 터치 조이스틱 듀얼 입력 지원 트랙 코스 충돌체(Collider) 및 램프 물리(Trimesh) 구현 4. 반응형 UI/UX styled-components 기반 글래스모피즘 오버레이 UI 모바일 가로/세로 모드 감지 및 적응형 레이아웃 씬 전환 로딩 오버레이 및 프로그레스 인디케이터 다크모드 / 라이트모드 프리셋 전환 5. 성능 최적화 Recoil 상태 관리로 3D 씬과 UI 레이어 간 효율적 상태 동기화 씬별 조건부 렌더링으로 불필요한 3D 오브젝트 메모리 관리 react-spring 물리 기반 애니메이션으로 60fps UI 인터랙션 유지 성과 약 2개월간 기획부터 배포까지 단독 풀스택 개발 5개 인터랙티브 씬, 19가지 컬러 조합, 3가지 조명 프리셋 구현 WebGL만으로 네이티브 앱 수준의 3D 제품 체험 환경 구축