PWA(프로그레시브 웹 앱)는 기존 완전한 네이티브 앱의 경량 버전이라고 할 수 있습니다. 안드로이드용 크롬에서 이러한 앱을 설치하면, 앞으로의 PWA 설치 과정이 마치 네이티브 앱을 설치하는 것과 비슷하게 느껴질 것입니다.
그 이유는 구글이 구글 플레이 스토어 UI와 매우 유사한 새로운 PWA 설치 UI를 출시하고 있기 때문입니다.
크롬의 현재 PWA 설치 방식
현재 안드로이드 크롬에서 PWA를 지원하는 사이트를 열면 화면 하단에 '홈 화면에 앱 추가'를 안내하는 작은 배너가 나타납니다. 지금까지 안드로이드 크롬에서 프로그레시브 웹 앱을 설치하는 방식은 바로 이것이었습니다.
다만 이 설치 UI는 네이티브 앱 설치 UI와 같은 모양이나 느낌을 주지는 못했습니다.
안드로이드 크롬의 새로운 PWA 설치 UI
Chrome Developers가 트위터를 통해 발표한 내용에 따르면, 구글은 안드로이드 크롬에 더욱 풍부한 PWA 설치 UI를 제공할 예정입니다.
이 UI는 공식 구글 플레이 스토어에서 볼 수 있는 것과 매우 흡사합니다. 앱 이름, 간단한 설명, 몇 장의 스크린샷, 그리고 설치 버튼까지 모두 포함되어 있습니다.
새로운 PWA UI의 모습
새로운 UI가 막 출시된 단계라 아직 이 인터페이스를 활용하는 앱은 많지 않습니다. 트위터(Twitter)가 이 설치 인터페이스를 자사 PWA에 가장 먼저 적용한 서비스입니다.
새로운 설치 UI에는 앱에 대한 간략한 설명과 설치하려는 앱의 스크린샷 몇 장이 표시되며, 프롬프트 우측 상단에는 설치(Install) 버튼이 배치됩니다.
이 버튼을 탭하면 PWA가 휴대폰에 설치되며, 플레이 스토어에서 앱을 설치하는 것과 거의 동일한 경험을 제공합니다.
개발자가 새 UI를 적용하는 방법
개발자라면 이 새로운 설치 UI를 활용하기 위해 매니페스트에 두 가지 항목을 추가해야 합니다. 매니페스트 파일에 description과 screenshots 멤버를 추가하면, 안드로이드 크롬이 해당 PWA 설치 시 새로운 UI를 사용합니다.
앱에 이미지를 추가할 때는 다음 사항을 유의해야 합니다:
- 이미지의 가로·세로 크기는 최소 320px, 최대 3840px여야 합니다.
- 모든 스크린샷은 동일한 가로세로 비율을 가져야 합니다.
- 스크린샷은 JPG 또는 PNG 파일 형식이어야 합니다.
- 이미지의 최대 변 길이는 최소 변 길이의 2배를 초과할 수 없습니다.
매니페스트 파일에 필요한 변경 사항을 적용하면 PWA 설치 화면이 네이티브 앱 설치와 거의 같은 모습으로 바뀝니다.
더 풍부해진 크롬의 PWA 설치 인터페이스
이제 PWA 개발자들은 안드로이드 크롬에서 더 풍부한 설치 프롬프트를 사용할 수 있게 되어, 더 많은 사용자가 자신의 앱을 휴대폰에 설치하도록 유도할 수 있습니다.
일반 사용자 입장에서도 휴대폰에 PWA를 설치하기 전에 앱에 대한 더 자세한 정보를 미리 확인할 수 있게 되었습니다.