이 문서에서는 항공 뷰 여행을 시작하는 데 도움이 되는 다양한 디자인 패턴과 아이디어를 설명합니다. 제품에 대한 높은 수준의 참여도를 높이고 고객이 제품의 가치를 인식할 수 있도록 공중 촬영을 고객에게 어떻게 표시할지 신중하게 고려해야 합니다.
공중 촬영은 숙박 시설 및 주변 환경을 조감식으로 보여주어 웹사이트에 시각적으로 매력적인 구성요소를 추가합니다.
사용자는 속성을 3D로 볼 때 장소의 위치와 크기를 더 잘 파악할 수 있습니다. 또한 도로, 수역, 산, 공원과 같은 주변 지형지물 외에도 수영장, 부속 건물, 넓은 마당과 같은 숙박 시설의 특징을 강조하는 데 도움이 됩니다.
참여도 높이기
공중 촬영은 고객에게 멋진 경험을 선사할 수 있습니다. 이 기능을 최대한 활용하려면 콘텐츠를 최대한 쉽게 찾을 수 있어야 합니다. 이 섹션에서는 이를 위한 항공 뷰 구현 디자인 패턴에 관해 알아봅니다.
동영상 방향
공중 촬영 동영상이 로드되는 기기의 화면 방향을 고려하는 것이 중요합니다. 휴대기기에서 가로 모드 동영상을 표시하는 것은 특히 전체 화면에서 표시하는 경우 사용자 환경에 좋지 않을 수 있습니다. 기기에 잘못된 가로세로 비율을 사용하여 동영상을 표시하면 화면 공간을 상당히 낭비하게 됩니다.
항공 뷰 동영상은 가로 모드 및 세로 모드 방향으로 제공됩니다.
다음은 휴대기기에서 공중 뷰를 실행할 때 권장 방향과 권장되지 않는 방향의 차이를 보여주는 예입니다.
삽입된 호버 카드
숙박 시설 검색 뷰에 여러 숙박 시설을 표시할 때는 삽입된 호버 카드를 추가하여 항공뷰 동영상을 표시하고 주소, 가격 등 숙박 시설에 관한 추가 정보를 위에 오버레이하는 것이 좋습니다. 이렇게 하면 사용자가 숙박 시설 세부정보 페이지로 이동하지 않고도 숙박 시설을 빠르고 쉽게 파악할 수 있습니다.
아래 예는 마운틴 뷰의 Googleplex 단지를 나타내는 마커를 보여줍니다. 이 마커 위로 마우스를 가져가면 숙박 시설의 항공뷰 동영상이 표시된 호버 카드가 표시됩니다.
마커와 삽입된 호버 카드 모두에 onClick 이벤트를 추가하여 사용자를 숙박 시설 세부정보 페이지로 연결할 수 있습니다. 이렇게 하면 사용자가 쉽게 속성에 대해 자세히 알아보고 자신에게 적합한지 판단할 수 있습니다.
숙박 시설에 스토리 같은 환경 만들기
잠재적 구매자를 위한 진정한 몰입형 환경을 만들고 싶다면 사진과 항공뷰 동영상을 결합한 스토리 형식의 환경으로 숙박 시설을 선보일 수 있습니다.이는 HTML, CSS, JavaScript를 혼합하여 이미지 캐러셀과 유사한 방식으로 만들 수 있습니다.
위 예에는 슬라이드 중 하나에 항공 뷰 동영상이 포함되어 있으며 하단에는 부동산에 대한 세부정보를 볼 수 있는 링크가 있습니다. 이 버튼을 클릭하면 사용자를 숙박 시설 세부정보 페이지로 연결해야 합니다.
방법은 다음과 같습니다.
- 사진을 선택합니다. 숙박 시설의 장점을 가장 잘 보여주는 다양한 사진을 선택하세요.
- 항공 뷰 동영상을 만듭니다.
- 사진과 동영상을 스토리로 결합하세요.
- 이야기를 공유해 주세요. 웹사이트 또는 이메일 마케팅 캠페인에서 잠재적 구매자와 스토리를 공유하세요.
쇼케이스 숙박 시설에 스토리 같은 환경을 만들어 잠재적 구매자의 관심을 사로잡을 수 있습니다.
페이지 로드 시 공중 촬영 시작
Google의 UX 연구에 따르면 3D 뷰가 기본적으로 로드될 때 사용자 참여도가 가장 높습니다. 이는 새롭고 흥미로운 폼 팩터이므로 고객이 속성의 세부정보를 보려고 하는 즉시 로드해야 합니다. 비용 측면에서 API에서 항공뷰 동영상을 가져오는 경우 요금이 청구됩니다. 동영상이 요청되면 자동재생을 사용하여 사용자가 혜택을 누릴 수 있도록 하세요.
패턴 방지: 항공 뷰를 버튼 뒤에 숨기면 사용자가 3D 뷰를 보기 위해 한 걸음 더 가야 하므로 피해야 할 패턴으로 간주됩니다. 이로 인해 사용자가 3D 뷰의 이점을 놓치거나 항공 뷰를 정적 콘텐츠로 오해할 수 있습니다.
고객이 숙박 시설의 세부정보를 보려는 경우 기본적으로 항공 이미지를 로드하는 것이 좋습니다. 이렇게 하면 훌륭한 사용자 환경을 제공할 수 있으며, 사용자가 충분한 정보를 바탕으로 숙박 시설에 대한 결정을 내리는 데 도움이 됩니다. 자동재생 환경을 설계할 때는 공중 촬영 동영상이 30MB를 초과하며 일부 사용자에게는 느리게 로드될 수 있다는 점에 유의하세요.
페이지에 이미지 캐러셀이 있는 경우 항공뷰 동영상을 대표 항목으로 포함하여 3D 환경을 기존 웹사이트 디자인에 쉽게 통합할 수 있습니다.
3D 보기를 로드하는 버튼을 배치하는 것은 구현하기 쉽지만 참여도를 줄일 수 있습니다. Google 지도에서는 기본적으로 3D 보기가 로드됩니다. 예를 들어 엠파이어 스테이트 빌딩을 검색하면 3D 뷰가 자동으로 로드되며 3D 뷰에 있는 동안 이미지의 일부가 표시됩니다. 이는 사용자에게 더욱 몰입도 높고 흥미로운 경험을 제공하는 좋은 방법입니다.
버튼 디자인
버튼을 사용하여 공중 뷰에 액세스하는 경우 다음 사항을 고려해야 합니다.
- 위치: 버튼은 사용자가 속성의 위치와 관련되어 있음을 알 수 있도록 다른 매핑 관련 버튼과 그룹화해야 합니다.
- 전환: 동영상으로의 전환이 원활해야 합니다. 페이지에 이미 이미지, 지도, 스트리트 뷰를 표시하는 섹션이 있는 경우 동일한 섹션에 항공뷰 동영상이 표시되어야 합니다.
- 강조 표시: 페이지에 새로 추가되는 기능이므로 '새로운 기능' 태그 또는 동영상의 스틸 이미지 썸네일로 버튼을 강조 표시하는 것이 좋습니다.
- Emphasis: 버튼을 누르면 눈에 띄는 작업이 실행되므로 중간 또는 높은 강조로 버튼을 디자인해야 합니다. Google Material Design에서 강조 수준이 다른 버튼을 디자인하는 방법에 관한 안내를 확인할 수 있습니다.
다음은 효과적인 공중 뷰 버튼을 디자인하기 위한 몇 가지 추가 팁입니다.
- 명확하고 간결한 표현을 사용하세요. 사용자가 버튼의 기능을 알 수 있도록 버튼에 명확한 라벨을 지정해야 합니다.
- 읽기 쉬운 큰 글꼴을 사용하세요. 버튼은 사용자가 쉽게 보고 클릭할 수 있을 만큼 커야 합니다.
- 대비되는 색상을 사용합니다. 버튼이 눈에 띄도록 주변 텍스트 및 배경과 다른 색상을 사용해야 합니다.
- 클릭 유도 문구를 사용하세요. 버튼에는 '항공 뷰 보기' 또는 '동영상 보기'와 같은 명확한 클릭 유도 문구가 포함되어야 합니다.
디스플레이 고려사항
동영상 로드 중
동영상의 정지 이미지 미리보기를 표시하고 onClick과 같은 사용자 상호작용 시 전체 환경을 로드하면 연결 속도가 느려지는 것을 고려할 수 있습니다. 또한 공중 촬영 동영상과 함께 이를 실행하는 데 사용할 수 있는 썸네일도 이용할 수 있습니다.
또한 다양한 해상도에서 동영상에 액세스할 수 있으므로 다양한 연결 속도에서 사용자가 환경이 로드될 때까지 기다리는 데 소비해야 하는 시간을 최소화하기 위해 전략적으로 사용할 수 있습니다.
로고 저작자 표시
항공 뷰를 구현할 때 로고 저작자 표시를 포함한 모든 약관을 준수해야 합니다. 자세한 내용은 이 페이지를 참조하세요.
결론
이 도움말을 통해 사용자 참여도가 높은 웹사이트에 공중 촬영을 구현하는 방법을 생각해 보시기 바랍니다.
사용자가 콘텐츠를 찾는 방법과 콘텐츠를 표시하는 데 가장 적합한 형식을 고려하는 것이 중요합니다. 동영상이 재생될 기기 유형, 특히 화면 방향과 사용자의 연결 속도도 고려하는 것이 좋습니다.
다음 단계
추가 자료:
참여자
Google에서 이 도움말을 유지관리합니다. 다음 참여자가 원래 작성했습니다.
책임 저자:
헨릭 밸브 | Google Maps Platform 솔루션 엔지니어