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