온라인에서 신발 한 켤레를 보고 있습니다. 상점은 정면과 측면 사진을 제공합니다. 가죽의 질감을 보고 싶어 확대해 보지만, 이미지는 픽셀 덩어리로 변해버립니다. 다음 사진으로 넘깁니다. 다른 발에 신은 똑같은 신발입니다. 열 장의 사진을 넘겨봐도 밑창이 딱딱한지 유연한지, 색상이 진한 네이비인지 빛바랜 검은색인지 알 수 없습니다. 결제 단계에서 망설여집니다. 그리고 탭을 닫습니다.
이런 일은 매일 수백만 번씩 일어납니다. 평면적인 이미지는 고객에게 실제 물체를 상상해야 하는 정신적 노동을 요구합니다. 그 노동은 마찰을 일으키고, 마찰은 구매를 가로막습니다.
이제 다른 탭을 상상해 보세요. 똑같은 신발이 페이지 안에서 3D 모델로 바로 로드됩니다. 클릭하고 드래그하여 회전시킵니다. 확대해도 기하학적 구조가 선명하게 유지되는데, 이는 늘어난 비트맵이 아니라 메쉬(mesh)를 보고 있기 때문입니다. 실시간으로 색상을 변경해 봅니다. 제품 사진작가가 미처 찍지 못했을 각도인 뒤꿈치 부분의 스티치를 아래쪽에서 살펴봅니다. 물체가 공간에 존재하는 방식 그대로 화면에 존재합니다. 이미 손에 쥐어본 것 같은 기분이 들어 장바구니에 담습니다.
제품의 무엇도 변하지 않았습니다. 오직 경험만이 변했을 뿐입니다.
왜 브라우저인가?
최근까지 이런 종류의 상호작용을 하려면 대부분의 사용자가 설치를 거부하는 전용 앱이나 플러그인이 필요했습니다. Three.js가 이를 바꾸어 놓았습니다. Three.js는 브라우저의 내장 WebGL 렌더러 위에서 작동하는 JavaScript 라이브러리로, 개발자가 웹 페이지의 나머지 부분을 구동하는 것과 동일한 코드를 사용하여 3D 장면을 구축할 수 있게 해줍니다. 사용자는 특별한 소프트웨어를 다운로드할 필요가 없습니다. 별도의 창도, 실행 파일도, 권한 요청 대화 상자도 없습니다. 캔버스는 다른 HTML 요소와 똑같이 렌더링됩니다.
이것이 중요한 이유는 접근성이 채택 여부를 결정하기 때문입니다. 고객이 출퇴근 중에 휴대폰으로, 오래된 노트북으로, 또는 IT 부서에 의해 제어되는 기업용 데스크톱으로 3D 제품을 볼 수 있다면, 기술은 실제로 사람들에게 도달하게 됩니다. Three.js는 브라우저를 보편적인 뷰포트(viewport)로 만듭니다.
3D가 가치를 증명하는 곳
3D 그래픽을 추가하는 것은 공짜가 아닙니다. 개발 시간, 성능 예산, 그리고 종종 에셋 자체를 위한 제작 예산이 소요됩니다. 수익이 확실할 때만 그 비용을 지불해야 합니다. 웹 3D를 지지하는 네 가지 일반적인 논거는 각각 단순한 불렛 포인트 이상의 무게감을 가집니다.
**높은 참여도(Higher engagement)**는 마케팅 지표처럼 들리지만, 여기에는 기계적인 원인이 있습니다. 방문자가 장면과 상호작용할 수 있을 때(회전, 확대, 애니메이션 트리거 등), 그들은 스스로 콘텐츠를 생성합니다. 그들은 더 이상 수동적으로 제안을 받는 것이 아닙니다. 그들은 탐험하고 있습니다. 이러한 능동적인 상태는 모델에 대해 해결되지 않은 궁금증을 남기기 때문에 사용자를 페이지에 더 오래 머물게 합니다. 뒷면을 보고 싶어 하고, 내부를 보고 싶어 합니다. 상호작용은 정적인 그리드가 복제할 수 없는 호기심의 루프를 만들어냅니다.
**더 나은 이해도(Better understanding)**는 이커머스에서 가장 명확하게 나타납니다. 2차원으로 표시된 소파는 쇼핑객이 사양서에서 치수를 읽고 그림자를 통해 깊이감을 상상하도록 강요합니다. 3D 모델은 제품 주위를 돌며 팔걸이가 어떻게 가늘어지는지 보여줍니다. 동일한 Three.js 장면을 기반으로 구축된 증강 현실(AR)을 사용하여 제품을 방 안에 배치해 볼 수도 있으며, 줄자를 꺼내지 않고도 창문 아래의 여유 공간을 확인할 수 있습니다. 고객이 모든 각도에서 제품을 볼 때, 그들은 확신을 가지고 결정을 내립니다.
**스토리텔링(Storytelling)**은 제품 그 이상을 넘어섭니다. 제조업체는 물리적인 데모 제품을 배송하지 않고도 엔진이 연소 과정을 어떻게 거치는지 보여줄 수 있습니다. 건축가는 기초 공사를 시작하기 전에 고객에게 평면도를 보여주며 안내할 수 있습니다. 움직임은 말이나 정지 화면으로는 설명하기 힘든 관계를 설명합니다