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