Google 하드웨어를 활용한 양방향 3D 웹에서: 차세대 제품 교육 경험

Melissa Mitchell
Melissa Mitchell
Aron Halil
Aron Halil
Bernice Yung
Bernice Yung
Emmett Lalish
Emmett Lalish

Google의 기기 및 서비스 마케팅 (DSM) 조직은 스마트폰, 시계, 이어폰, 태블릿, 스마트 홈 기기, 관련 구독 등 다양한 제품의 시장 진입 전략을 감독합니다. 이 모든 제품은 Google 스토어와 글로벌 서드 파티 공급업체를 통해 구매할 수 있습니다. 사람들은 온라인과 오프라인 소매업체에서 이러한 제품에 대해 알아봅니다.

이 팀이 겪는 한 가지 지속적인 어려움은 소비자와 소매업체에게 Google 하드웨어 생태계와 고급 AI 환경의 사용 사례와 이점에 관해 알리는 것입니다. DSM팀은 소비자가 제품과 기능을 더 잘 이해할 수 있도록 이러한 여러 문제를 해결하기 위해 고급 웹 기술을 갖춘 3D 가상 공간을 만들었습니다. 이 사례에서는 팀이 기존 디지털 확장 소재의 4배 빠른 속도와 절반의 비용으로 새로운 몰입형 환경을 출시하여 고객에게 더 몰입도 높은 환경을 제공한 방법을 알아볼 수 있습니다.

과제: 제품 교육

Google 하드웨어 제품을 처음 사용하는 판매 직원과 고객에게 상호 운용성 및 AI와 같은 기능의 이점을 교육하는 것은 비용이 많이 들고 어렵습니다. 기존의 제품 교육 전략은 실제 제품을 사용하여 제작된 후 디지털 학습 플랫폼에 호스팅되는 디지털 콘텐츠를 사용합니다. 이러한 학습 플랫폼은 제품 기술 사양, 이미지, 동영상을 제공하지만 실제 제품 또는 커넥티드 제품에는 액세스할 수 없습니다.

동영상과 같은 학습 콘텐츠는 제작 비용이 많이 들고, 전 세계 시장을 위해 현지화하기가 복잡하며, 제품 간에 재사용하기가 거의 불가능합니다. 초기 저작물을 만들려면 캐스팅, 의상, 장소 탐색, 장소 수수료, 스튜디오 수수료, 촬영팀, 제작 후 작업에 대한 예산이 필요합니다. 제작 비용과 결과물도 현지화를 고려해야 합니다. 저작물, 위치, 제품, 문구, 인재를 수정하는 것은 기존 마케팅에서 대규모로 관리하기가 특히 어렵습니다. 지원되는 대부분의 제품에 몇 개월마다 기능이 출시된다는 점을 고려하면 이러한 저작물은 완성되기도 전에 이미 오래된 버전이 됩니다.

제품 정보를 공유하는 더 나은 방법 모색

제품 정보를 공유하는 더 나은 방법을 찾기 위해 DSM팀은 앱에서 VR/AR 환경을 실험했습니다. 그 결과 매장에서 참여도가 강화되고 장바구니 크기가 늘어나는 등 긍정적인 결과를 얻었습니다. 그러나 앱 다운로드는 영업 담당자와 고객 모두에게 상당한 진입 장벽이었고, 환경을 앱으로 제한하면 store.google.com과 같은 다른 퍼스트 파티 또는 서드 파티 속성에 삽입할 수 없었습니다.

<model-viewer>를 사용한 경량 솔루션

제품 교육을 위한 3D 제품 모델의 성공을 확인한 팀은 이 접근 방식을 웹에 도입하기로 결정했습니다. 이를 실행하는 한 가지 방법은 <model-viewer>를 사용하여 개별 제품으로 3D 환경을 만드는 것입니다.

<model-viewer>는 웹 구성요소로, 자체 사이트에서 모델을 호스팅하면서 웹페이지에 3D 모델을 선언적으로 추가할 수 있습니다. Google 스토어의 Pixel Fold 페이지에서 이를 확인할 수 있습니다. 여기에서 <model-viewer>를 사용하면 사용자가 다양한 접힌 상태로 Pixel Fold를 어떤 각도에서든 볼 수 있습니다. 카메라 각도와 양방향 색상 변형을 통해 스토리를 전달하는 버튼을 사용하여 3D 모델을 나머지 HTML UX에 쉽게 통합할 수 있었습니다. <model-viewer>를 사용하면 상상할 수 있는 모든 종류의 환경을 사용자에게 제공할 수 있습니다.

3D 모델 만들기

3D 가상 환경을 개발하는 첫 번째 단계는 3D 제품 모델을 만드는 것입니다. DSM팀은 CAD로 3D 모델을 만들었습니다. 제품 CAD를 제작하는 디자이너와 긴밀하게 협력하여 DSM팀은 웹에 최적화할 수 있는 로우 폴리 렌더링을 내보낼 수 있었습니다. 이를 달성하기 위해 사용한 권장사항 중 일부는 다음과 같은 영역에서 적용되었습니다.

  • 도형:
    • 모든 각도에서 도형 (도형 및 크기)을 정확하게 만드는 데 집중하세요.
    • 모서리 비스듬하게 처리하는 데 일반 맵을 사용하지 마세요.
    • 데칼을 별도의 도형으로 만듭니다.
  • 색상 및 재료:
    • 목표: 물리적 속성을 일관되게 시각적으로 표현합니다.
    • 실시간 조명 동적을 고려하세요.
    • 모든 메시 유형 (불투명, 투명, 데칼)에 별도의 텍스처 세트와 재료를 사용합니다.
    • 추가 조정이 필요한 경우 원래 CAD 디자이너와 함께 설계를 반복합니다.
  • 파일 크기:
    • <model-viewer>에서 모델을 사용할 수 있도록 GLB 형식의 로우 폴리 모델로 내보냅니다.
    • 3D 디자이너가 공급업체를 통해 수동으로 또는 DRACO (OS)와 같은 압축 소프트웨어를 통해 기하학적 메시를 압축합니다.

이러한 3D 모델은 휴대전화에서 자주 사용되므로 이전 세대 기기와 약한 인터넷 연결을 지원하기 위해 최대 파일 크기를 2MB의 텍스처로 설정하여 최적화했습니다.

<model-viewer>

DSM팀은 Google의 <model-viewer> 오픈소스 웹 구성요소를 사용하여 새로 만든 3D 모델을 웹페이지에 삽입합니다. 1단계에서 만든 모델이 <model-viewer>와 호환되려면 애셋이 glTF 또는 GLB 형식 (확장자 .glb)이어야 합니다. 두 형식 모두 컴팩트하고 압축 가능하며 GPU에 빠르게 로드됩니다. <model-viewer> 구성요소는 모든 주요 상시 브라우저에서 지원됩니다.

이 단계에서 DSM팀이 겪은 가장 큰 문제는 Google 하드웨어 색상 팔레트가 정확하게 렌더링되지 않는 것이었습니다. 결국 팀은 ACES 색조 매핑 (영화 업계 표준)이 색상 손실의 원인임을 발견했습니다. 이를 해결하기 위해 이러한 결함을 해결하고 선형 톤 매핑과 관련된 과다 노출된 하이라이트와 색조 변화를 피하면서 색상을 화면에 정확하게 표시하기 위해 새로운 Khronos PBR 중성 톤 매퍼를 개발했습니다.

<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>

<model-viewer>에 대해 자세히 알아보려면 modelviewer.dev를 방문하세요. 3D 모델을 테스트하고 전체 시작 웹사이트를 다운로드하려면 편집기를 사용해 보세요.

three.js를 사용한 대규모 솔루션

<model-viewer>은 하나의 3D 모델을 표시하고 상호작용하는 데 효과적인 방법입니다. 하지만 DSM팀에서는 <model-viewer>로 제공할 수 있는 것보다 더 몰입도 높고 상호 연결된 웹 환경이 필요했습니다. Nest Mini + C 출시가 한 가지 예입니다. <model-viewer>를 사용하면 잠재고객이 웹에서 3D로 제품을 경험할 수 있지만 다른 Google 하드웨어 제품 및 어시스턴트와 같은 AI 기능과 결합할 때는 유용성을 보여주지 못했습니다.

이 작업을 위해 팀은 <model-viewer>의 기반이 되는 라이브러리인 three.js를 사용했습니다. Three.js는 오픈소스 JavaScript 게임 엔진으로, 팀은 Nest 실내 카메라, 조명, 스피커가 포함된 가상 홈 환경을 위한 재사용 가능한 애셋의 프레임워크를 만들 수 있었습니다. 이를 통해 팀은 기기 간의 상호작용 방식에 관한 실시간 피드백을 제공할 수 있었습니다.

Dialogflow

상호 연결된 환경을 만드는 마지막 단계는 Google 어시스턴트를 추가하는 것입니다. 이를 통해 사용자는 상호 연결된 가상 환경에서 실제 명령어와 루틴을 사용해 볼 수 있었습니다. 하지만 사용자의 기존 계정에서 Google 어시스턴트를 삽입하면 여러 가지 개인 정보 보호 문제가 발생할 수 있습니다. DSM은 개인 정보 보호 중심의 솔루션을 만들기 위해 Google Cloud Dialogflow 서비스와 협력하여 이 분야에서 Google 어시스턴트를 모방했습니다. 다음의 대략적인 다이어그램은 웹 앱이 Dialogflow의 API를 사용하는 방식을 보여줍니다 (Dialogflow 기본사항에서 조정됨). 웹 앱은 대화 차례마다 Dialogflow의 인텐트 분류를 사용했고 API는 인텐트와 일치하는 사전 결정된 최종 사용자 표현을 반환했습니다.

사용자 흐름 다이어그램

Dialogflow에 대해 자세히 알아보려면 Google Cloud 문서를 참고하세요.

최종 결과: 삽입 가능한 iFrame

최종 결과물은 <model-viewer>를 사용하여 웹페이지에 삽입하거나 전체 가상 환경에서 사용하여 고객이 개별 제품과 제품 간의 상호 연결에 관해 자세히 알아볼 수 있는 애셋 라이브러리입니다. 이 환경은 진정성 있고 확장 가능하며 비용 효율적입니다. 이 첫 번째 가상 환경은 2021년 5월에 출시되었으며 더 이상 Google 스토어 웹사이트에 표시되지 않지만 사용해 볼 수 있습니다.

결과

Nest Mini +C 출시 이후 DSM은 지난 2년간 Pixel 포트폴리오 출시에 프레임워크를 재사용하고 확장하여 성공을 거둘 수 있었습니다. 이러한 3D 확장 소재와 환경의 반복을 운영화함으로써 지금까지 대화형 제품 교육 환경의 수를 4배, 이 웹 기술의 이점을 누리는 제품 수를 3배 늘릴 수 있었습니다.

그 결과, 이전 전략보다 더 지속 가능하고 일관성 있으며 양방향적인 대규모 사용 사례의 증가하는 변형에 관한 브랜드화된 진정성 있는 제품 교육이 탄생했습니다. 앞으로 DSM팀은 동적 비즈니스 타겟에 빠르게 적응할 수 있는 몰입형 환경 구성요소의 강력한 포트폴리오를 보유하게 되었습니다. 이러한 개선사항을 통해 DSM팀은 이전의 기존 프로세스보다 4배 더 빠르고 절반 이하의 비용으로 새로운 제품 교육 콘텐츠를 출시할 수 있습니다.