더욱 다양해진 PWA 설치 UI

소개

휴대기기와 기기 공급업체 앱 스토어의 도입으로 인해 소프트웨어를 검색, 평가, 설치하는 방식에 관한 사용자의 정신 모델이 바뀌었습니다. 이제 사용자는 앱 스토어를 통해 앱 스토어를 통해 제공되는 추가 정보(예: 앱에 관한 컨텍스트, 소셜 피드백, 평점 등)에 익숙해져 있습니다. 따라서 ChromeOS, Mac, Windows를 비롯한 데스크톱 운영체제에서도 앱 스토어 메타포가 등장합니다.

오늘날의 설치 환경에서의 과제

현재 사용자가 PWA를 설치하려고 하면 최소한의 정보와 함께 정보 표시줄 및 모달 오버레이가 표시됩니다. 계속 설치되면 사용자에게 컨텍스트를 제공하지 않고 프로세스가 너무 빨리 종료됩니다. 이는 앱 설치에 대한 사용자의 기대에 어긋나며 사용자가 일어난 일에 대해 다소 혼란스러워할 수 있습니다.

PWA 설치 UI의 예
PWA 설치 UI의 예

개발자가 네이티브 환경과 동일한 수준의 설치 환경을 제공할 수 있도록 하기 위해 Chrome은 새로운 설치 표시 경로인 더욱 풍부한 설치를 도입합니다. 이 기능을 사용하면 개발자가 매니페스트 파일에 설명과 스크린샷을 추가하고 Android용 Chrome 내의 하단 시트 대화상자에 표시할 수 있습니다.

Chrome 하단 시트 UI 예
Chrome 하단 시트 UI의 예

이를 통해 개발자는 사용자 기대치에 더 잘 부합하고 설치된 환경의 기존 정신 모델을 모방하는 더 매력적인 설치 프로세스를 만들 수 있습니다.

더욱 다양해진 설치 UI가 확장되었습니다.
더 풍부해진 설치 UI 확장
더욱 풍부한 설치 UI가 축소되었습니다.
더 풍부해진 설치 UI 축소

이전 버전과의 호환성

매니페스트 파일에 스크린샷이 하나 이상 포함되지 않은 웹사이트는 계속해서 기존 메시지를 수신합니다. 이는 개발자 커뮤니티의 활용률과 사용자의 반응에 따라 향후 변경될 수 있습니다.

UI 미리보기

이 UI는 Android의 Chrome 94, 데스크톱의 Chrome 108부터 작동합니다.

이 기능은 squoosh.app에서 사용 설정되어 있으며, 미리 볼 수 있습니다.

구현

더 풍부한 설치 UI 대화상자를 표시하려면 개발자는 상응하는 폼 팩터의 스크린샷을 screenshots 배열에 하나 이상 추가해야 합니다. description 필드는 필수는 아니지만 사용하는 것이 좋습니다. 콘텐츠 대화상자는 앱 스토어 설치와 유사한 환경을 만들기 위해 screenshotsdescription 필드의 콘텐츠를 사용하여 빌드됩니다. 이 UI를 통해 사용자는 기기에 앱을 추가하고 있음을 식별할 수 있으며, 사용 가능한 공간이 더 많아지면 개발자는 설치 시 사용자에게 특정 컨텍스트를 제공할 수 있습니다.

예를 들어 개발자는 description 필드를 사용하여 사용자가 기기에 앱을 계속 사용하도록 유도하는 앱의 기능을 강조할 수 있으며, screenshots를 사용하면 플랫폼 앱이 쉽게 액세스할 수 있는 웹 앱의 디자인과 분위기를 독립형으로 표시할 수 있습니다.

자세한 사양과 이를 앱에 추가하기 위한 가이드는 더 풍부한 설치 UI 패턴을 참고하세요.

의견

향후 카테고리 및 앱 평점과 같은 다른 데이터를 추가하는 것을 고려할 예정이지만 이는 개발자와 사용자의 의견을 기반으로 합니다.

향후 몇 개월 내에 개발자가 이 새로운 UI 패턴을 어떻게 살펴보는지 확인하고자 합니다. 의견을 듣고 싶습니다. 이 양식을 작성하여 Google에 문의하세요.