3D 제품 스토리텔링

01

문제

한국의 대부분 제품 상세 페이지는 이미지·텍스트의 수직 나열입니다. 구매 결정이 "상상"에 의존할 때, 상상을 돕는 매체는 정적 이미지가 아닙니다.

02

접근

GLB 포맷의 경량 모델을 R3F로 로드하고, ScrollTrigger에 카메라 path를 연결했습니다. 스크롤이 진행되면 카메라가 제품을 돌며, 특정 지점에서 하이라이트 마커가 등장합니다.

03

과정

모델 최적화 (Draco 압축 · 2.1MB 이하) → Suspense fallback으로 LCP 보호 → ScrollTrigger timeline에 카메라/라이트/머티리얼 변화를 각각 트윈 → 모바일에서는 정적 이미지 fallback.

04

결과

프로토타입 기준 LCP 1.4s, FCP 0.9s, Lighthouse Performance 94점. 3D 자산을 쓰면서도 정적 페이지보다 빠른 것이 가능합니다.

05

배운 것

3D는 "보여주는" 도구가 아니라 "이야기 순서를 제어하는" 도구입니다. 스토리텔링을 먼저 정하고, 그 다음에 카메라를 움직이세요.