더욱 다양해진 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에 문의해 주세요.