소개
2020년 초, 모바일 및 데스크톱 전반의 Chrome팀은 설치된 웹 앱의 검색 가능성과 참여도를 개선하기 위한 계획을 세웠습니다. 이러한 노력 덕분에 PWA 설치 및 참여도가 100% 넘게 증가했습니다. 이를 위해 기존 기능을 연구하고, A/B 테스트 실험 및 사용자 인터뷰를 진행하여 사용자의 인식과 기대치에 관한 통계를 얻었습니다. 이 기사에서는 우리가 어떻게 거기에 도달했는지 다룹니다.
통합 설치 언어
PWA 설치를 트리거하는 클릭 유도 문구가 웹 플랫폼에서 일관되지 않았습니다. Android의 Chrome에서는 홈 화면에 추가를 채택했지만 데스크톱 플랫폼에서는 설치를 강조했습니다. 이 불일치의 원인은 2016년에 Google팀에서 진행한 여러 문자열을 비교한 연구에서 비롯되었습니다. 팀은 모바일에서 홈 화면에 추가 기능이 미미한 수준은 더 높다는 사실을 발견했습니다.
2019년의 분류에 관한 추가 연구에서는 차이가 발견되지 않았으므로 PWA 설치 환경을 통합하려는 팀은 Android에서 라벨을 Install으로 업데이트하기로 했습니다. 2021년의 추가 연구를 Install, Get, Download와 비교한 결과, 사용자는 Install을 그 과정으로 이해하고 있는 것으로 나타났습니다. 사용자는 Get 라벨이 있는 버튼을 탭하면 사용자가 웹사이트로 이동한다고 느꼈고 Download를 통해 파일이 다운로드 폴더 또는 이에 상응하는 파일에 있다고 생각했습니다.
이 모든 점을 염두에 두고 설치 라벨이 PWA에 가장 적합하다는 결론을 내렸습니다. 웹 플랫폼 전반의 개발자는 앞으로 설치를 기본 문자열로 채택하는 것이 좋습니다.
바탕화면에 설치 아이콘
데스크톱 플랫폼에는 웹사이트에서 PWA를 로드할 때마다 Chrome에서 아이콘과 설치 라벨이 포함된 검색주소창 오른쪽에 알약을 표시하는 디자인 패턴이 있습니다. 그 후에는 사용자가 사이트를 방문할 때 아이콘만 표시됩니다. 이 필을 클릭하면 데스크톱 PWA가 설치됩니다.
이 아이콘은 처음에는 더하기 기호로 사용되었는데, 이는 모바일에서 사용되는 홈 화면에 추가 비유 때문이기도 합니다. 그러나 앞서 언급했듯이 사용한 언어는 Install이었습니다. 개발자 커뮤니티의 의견에 따르면 이 아이콘이 혼란스럽다는 의견이 있었습니다. 또한 사용자가 확대/축소 기능을 사용하여 텍스트를 확대한 경우 확대/축소 아이콘이 매우 유사하여 사용자를 더욱 혼란스럽게 합니다.
대부분의 의견이 단편적이기 때문에 사용자의 인식을 조사하기로 했습니다. Google은 UX 연구원과 함께 미국과 인도네시아의 사용자 10,000명을 대상으로 연구를 진행하여 사용자가 설치 아이콘에 관한 이해도를 확인했습니다. 기존 디자인을 포함하여 5가지 디자인을 테스트하고 사용자에게 '설치'가 무엇을 의미하는지 물었습니다. 현재 아이콘인 더하기 기호가 사용자에게 가장 혼란스러울 수 있음을 발견했습니다. 많은 사람들이 이 기호를 '약', '응급 처치', '배터리'와 혼동합니다.
또한 사용자는 주로 화살표, 기기와 같은 이미지를 설치와 연결한다는 사실도 확인했습니다. 이러한 결론을 기반으로 Chrome에서 A/B/C 테스트를 실행하여 기존 디자인을 두 가지 대안과 비교했습니다. 그 결과 다른 2개의 모니터보다 훨씬 우수한 성능을 보이는 모니터를 가리키는 화살표로 이동하게 되었습니다. 또한 이 새로운 아이콘을 사용한 설치 UI의 닫기 수도 감소했습니다.
그 결과 지금 보고 있는 디자인이 탄생합니다. PWA의 경우 웹사이트 설치율이 2배 이상 증가했습니다. 또한 이 아이콘과 모바일을 머티리얼 디자인 아이콘 세트와 동등하게 추가하여 커뮤니티에서 가장 흥미로운 아이콘을 사용할 수 있도록 했습니다.
물론 아이콘 하나만으로 세상이 바뀌지는 않습니다. 따라서 다음 기능을 살펴보겠습니다.
제품 내 도움말
제품 내 도움말은 특정 기준에 따라 사용자가 관심을 가질 만한 새로운 기능을 온보딩하는 파란색 도움말 풍선 도움말입니다. Google은 사용자에게 설치 기능을 알리고 새로운 아이콘 디자인을 더욱 지원하기 위해 이 디자인 패턴을 출시하기로 결정했습니다.
사용자가 웹사이트를 정기적으로 방문하면 Chrome은 사이트 참여라는 서비스를 사용합니다.
사용자의 사이트 참여 정도에 대한 정보를 제공합니다. chrome://site-engagement/를
방문하면 정기적으로 참여하는 사이트를
확인할 수 있습니다. 이 점수를 사용하여 사용자가 웹사이트에 관심이 있는지 판단할 수 있습니다. 사이트가 PWA이고 사용자가 참여하면 제품 내 도움말 UI를 표시합니다.
다시 말해, 사이트를 한 번 방문하는 사용자를 불편하게 하지 않고 참여도가 높은 사용자에게만 초점을 맞췄습니다.
데스크톱에서 제품 내 도움말을 사용한 결과 PWA 설치 수가 100% 이상 증가했으며 참여도 높은 사용자에 집중하면 웹 앱의 설치 가능성이 개선되었음을 알 수 있습니다.
더욱 다양해진 설치 UI
대부분의 사용자의 설치 패러다임은 스토어입니다. 2000년대 중반부터 Google은 사용자가 앱을 설치할 때마다 설명, 스크린샷 및 기타 메타데이터가 표시되어 사용자가 원하는 앱인지 판단하는 데 도움을 주었다고 안내했습니다.
PWA에서는 사용자가 웹 앱을 설치하기로 결정했을 때 보여준 UI가 상대적으로 미미했습니다. 따라서 팀에서는 사용자에게 웹 앱에 관한 컨텍스트를 제공하고 개발자가 네이티브 환경과 동일한 수준의 PWA를 즐길 수 있도록 지원하는 더 풍부한 설치 환경을 살펴보기로 했습니다.
올해 초 Google에서는 개발자가 매니페스트에 스크린샷을 추가할 수 있는 Android용 Chrome의 확장 설치 UI인 Richer Install을 출시했습니다. 개발자는 설명을 추가할 수도 있습니다. 이는 권장되지만 필수는 아닙니다. 이 최신 UI 덕분에 일부 PWA의 설치율이 2배 증가했습니다. 이는 사용자가 더 많은 컨텍스트와 풍부한 환경을 제공할 때 웹 앱을 설치할 가능성이 더 크다는 것을 보여줍니다. 이 UI의 데스크톱 버전은 현재 작업이 진행 중입니다.
결론
팀은 지난 2년 동안 PWA 개발자를 지원하고 권한을 부여하고 사용자에게 웹 환경의 이점에 관해 교육하는 데 도움을 준 Chrome의 최신 기능을 연구하고 실험해 왔습니다. 아직도 할 수 있는 일이 많지만 모두 함께하면 사용자의 삶을 개선하고 풍요롭게 하며 오픈 웹을 추가로 지원할 수 있습니다.