"쇼룸에 가지 않아도 차를 느낄 수 있게 해주세요"
ROSSO는 페라리 공식 딜러십의 온라인 쇼룸 프로젝트였습니다. 클라이언트의 요청은 명확했습니다. 오프라인 쇼룸에서 느끼는 압도적인 존재감을 웹사이트에서도 그대로 전달하고 싶다는 것이었죠.
일반적인 이미지 갤러리로는 이 요구를 충족할 수 없었습니다. 실제 차량의 곡선미, 도장 위로 흐르는 빛의 반사, 앵글에 따라 달라지는 인상까지 — 이 모든 것을 담으려면 3D밖에 답이 없었습니다.
Three.js로 쇼룸을 웹에 옮기다
ROSSO 사이트의 핵심은 Three.js 기반 실시간 3D 렌더링입니다. GLB 포맷의 페라리 모델을 로드하고, HDR 환경맵으로 실제 스튜디오 조명과 유사한 반사와 그림자를 구현했습니다. 사용자는 마우스 드래그로 차량을 360도 회전하며 감상할 수 있고, 줌인하면 도장의 질감까지 확인할 수 있습니다.
특히 GroundedSkybox 기법을 활용해 바닥면에 차량의 반사가 자연스럽게 비치도록 했습니다. 이 디테일 하나만으로도 "진짜 쇼룸 같다"는 반응을 이끌어낼 수 있었습니다.
색을 고르는 경험까지 디지털로
자동차 구매 과정에서 색상 선택은 가장 감성적인 순간 중 하나입니다. ROSSO에는 인터랙티브 컬러피커를 넣어 사용자가 직접 외장 색상을 바꿔볼 수 있게 했습니다. 클래식한 Rosso Corsa 레드부터 우아한 Grigio Silverstone까지, 색상을 선택하는 순간 3D 모델의 도장이 실시간으로 변하며 빛 반사까지 자연스럽게 업데이트됩니다.
이 기능은 단순한 재미를 넘어 실질적인 비즈니스 가치를 만들었습니다. 쇼룸 방문 전에 원하는 색상을 미리 결정한 고객이 늘면서 상담 시간이 단축되었다는 피드백을 받았습니다.
럭셔리 브랜드에 어울리는 디자인 언어
3D가 아무리 훌륭해도 UI가 받쳐주지 못하면 소용이 없습니다. ROSSO의 디자인은 철저히 "덜어내는" 방향으로 잡았습니다. 칠흑 같은 다크 배경(#0a0a0a) 위에 골드 악센트와 세리프 타이포(Playfair Display)를 조합해 럭셔리의 무게감을 표현했고, 네비게이션과 텍스트는 최소한으로 줄여 3D 모델이 화면의 주인공이 되도록 했습니다.
로딩 화면도 하나의 경험으로 설계했습니다. 3D 에셋 로딩 중 골드 프로그레스 바와 퍼센티지가 표시되는데, 이 짧은 대기 시간이 오히려 기대감을 높이는 장치가 됩니다. 럭셔리 브랜드에서는 "기다림"조차 브랜드 경험의 일부이기 때문입니다.
기술적 도전과 해결
가장 큰 도전은 성능과 품질의 균형이었습니다. 고해상도 GLB 모델과 HDR 환경맵은 파일 크기가 상당합니다. ES Module(importmap) 기반으로 Three.js를 로드하고, 텍스처 압축과 LOD(Level of Detail) 최적화를 통해 모바일에서도 30fps 이상의 부드러운 렌더링을 유지했습니다.
또한 원페이지 구조로 설계해 페이지 전환 없이 스크롤만으로 브랜드 스토리, 차량 스펙, 갤러리, 컨택트까지 자연스럽게 이어지도록 했습니다. 3D 캔버스가 배경에 고정된 채로 UI 레이어가 그 위에 겹쳐지는 구조라, 어느 섹션에서든 차량이 함께 보이는 몰입감을 만들어냈습니다.
결과: 디지털이 물리적 경험을 대체할 수 있다는 증명
ROSSO 프로젝트는 CYAN에게도 특별한 의미가 있는 작업이었습니다. 웹 기술의 한계를 밀어붙여 "브라우저에서 이런 게 가능해?"라는 반응을 끌어낸 프로젝트였기 때문입니다. Three.js, GLB, HDR이라는 기술 스택은 이미 존재했지만, 이를 럭셔리 브랜드의 감성과 결합해 실제 비즈니스 가치로 연결한 것이 핵심이었습니다.
만약 제품의 물리적 경험이 중요한 비즈니스를 운영하고 계신다면, 3D 웹 기술이 그 경험을 온라인으로 확장하는 강력한 도구가 될 수 있습니다. CYAN은 이런 기술적 도전을 즐기는 팀입니다.