Google의 기기 및 서비스 마케팅 (DSM) 조직은 스마트폰, 시계, 이어폰, 태블릿, 스마트 홈 기기, 관련 구독 등 다양한 제품의 시장 진출 전략을 감독하며, 이러한 모든 제품은 Google 스토어 및 글로벌 서드 파티 공급업체를 통해 제공됩니다. 사람들은 온라인과 오프라인 소매점에서 이러한 제품에 대한 정보를 얻습니다.
이 팀은 소비자와 소매업체에게 Google 하드웨어 생태계와 고급 AI 환경의 사용 사례와 이점을 교육하는 것을 끊임없이 도전하고 있습니다. 소비자가 제품과 기능을 더 잘 이해하도록 돕기 위해 DSM 팀은 고급 웹 기술을 사용하여 3D 가상 공간을 만들어 이러한 여러 문제를 해결했습니다. 이 우수사례에서는 이 팀이 고객을 위한 몰입도 높은 환경을 조성하여 기존 디지털 애셋보다 절반의 비용으로 4배 더 빠르게 새로운 환경을 출시한 방법을 확인할 수 있습니다.
과제: 제품 교육
Google 하드웨어 제품을 처음 사용하는 영업 담당자와 고객에게 상호 운용성 및 AI와 같은 기능의 이점을 교육하는 것은 비용이 많이 들고 까다롭습니다. 기존의 제품 교육 전략은 실제 제품을 사용하여 제작된 후 디지털 학습 플랫폼에서 호스팅되는 디지털 콘텐츠를 사용합니다. 이러한 학습 플랫폼은 제품 기술 사양, 이미지, 동영상을 제공하지만 실제 제품 또는 연결된 제품에 대한 액세스는 제공하지 않습니다.
동영상과 같은 학습 콘텐츠는 제작 비용이 많이 들고 글로벌 시장에서 현지화하기가 복잡하며 제품 간 재사용이 거의 불가능합니다. 초기 애셋을 만들려면 캐스팅, 의상, 로케이션, 로케이션 수수료, 스튜디오 비용, 영화 제작진, 후반 작업 등의 예산이 필요합니다. 제작 비용과 결과물도 현지화를 고려해야 합니다. 애셋, 위치, 제품, 사본, 인재를 수정하는 것은 기존 마케팅의 대규모 관리를 위해 특히 까다롭습니다. 지원되는 제품 대부분이 2개월에 한 번씩 기능 출시가 이루어진다고 생각하면 이러한 애셋은 완성 시점이 되었을 때 이미 오래된 버전입니다.
제품 정보를 공유할 수 있는 더 좋은 방법 탐색
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>와 호환되려면 애셋이 gITF 또는 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 모델을 테스트하고 전체 시작 웹사이트를 다운로드하려면 편집기를 사용해 보세요.
third.js를 사용하는 중량 솔루션
<model-viewer>는 하나의 3D 모델을 표시하고 상호작용하는 우수한 성능의 방법입니다. 그러나 DSM팀에는 <model-viewer>를 사용할 때보다 더 몰입도 높고 상호 연결된 웹 환경이 필요한 경우도 있었습니다. Nest Mini + C의 출시를 예로 들 수 있습니다. <model-viewer>를 사용하면 잠재고객이 웹에서 3D로 제품을 경험할 수 있지만 다른 Google 하드웨어 제품 및 어시스턴트 등의 AI 기능과 결합하면 그 유용성을 과시할 수 없습니다.
이 작업을 위해 팀은 <model-viewer>,three.js를 뒷받침하는 라이브러리를 활용했습니다. Three.js는 오픈소스 자바스크립트 게임 엔진으로, 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배 더 빠르게 출시할 수 있습니다.