[PWA] PWA(Progressive Web App)란 무엇인가?

Chani·2022년 7월 4일
2
post-thumbnail
post-custom-banner

본 포스팅은 아래 링크의 만들면서 배우는 프로그레시브 웹 앱 책을 보며 공부한 내용을 스스로 정리한 것 입니다.
만들면서 배우는 프로그레시브 웹 앱

1. PWA란?

PWA는 네이티브 앱의 장점과 웹의 낮은 진입 장벽이라는 두 가지 장점을 모두 지닌 새로운 종류의 웹 앱이다.

PWA는 단순한 웹사이트로 시작하여 사용자의 사용범위에 따라 기존 네이티브 앱과 비슷하게 발전한다.

2. Why PWA ?

시장성 측면

2016년 콤스코어의 보고서에 따르면 일반 사용자는 모바일 기기 사용 시간의 84%를 가장 유명한 앱 5개를 사용하는데 쓰고있다.

태블릿 기기에서는 사용시간의 95%가 상위 5개 앱에 해당되었다.

반면, 500만 명 이상의 사용자가 사용하는 모바일 웹 사이트 수는 600개에 달하며 비슷한 수의 사용자가 사용하는 네이티브 앱의 수보다 거의 4.5배 많다.

상위 1000개의 모바일 웹 사이트 잠재 고객은 상위 1000개의 네이티브 앱의 잠재 고객보다 3배 이상 많으며, 성장 속도도 네이티브 앱보다 2배 빠르다.

접근성 측면

사용자가 앱을 설치하는 과정을 살펴보자, 먼저 광고나 웹사이트에서 앱을 발견한 후(또는 앱스토어에서 검색을 한 후)에 앱 스토어에 들어가서 설치 버튼을 누르고, 앱마다 다른 권한 항목을 확인하고 권한부여에 동의한다.

앱을 다운로드 받고 설치가 되기를 기다린 후에 설치가 완료되면 그제서야 앱을 실행한다.

이러한 과정은 연구에 따르면 각 과정마다 평균적으로 20%의 사용자가 이탈한다.

배너 광고를 보고 최종적으로 앱을 실행하는 사용자는 배너 광고를 클릭한 전체 사용자의 20% 조차 안된다.

위 내용처럼 사용자가 휴대폰에 앱을 설치하도록 유도하는 것은 비용이 너무 많이 들게된다.

다만, 일단 한번 앱을 설치하고 나면 전통적인 웹사이트보다 앱은 훨씬 더 오래 살아남고, 훨씬 더 오래 사용자의 주의를 끌 수 있기에 개발자는 이러한 비용을 투자해서라도 사용자가 앱을 설치하기를 원한다.

하지만 이러한 설치 과정이 없이 웹사이트에서 바로 앱을 설치할 수 있다면, 웹이지만 위에서 언급한 앱의 장점을 가지고 있다면 네이티브 앱을 고집 할 이유가 없어진다.

3. PWA 의 장점

연결 상태와는 무관한 가용성(오프라인 지원)

PWA에서는 전통적인 웹사이트와 달리 사용자의 인터넷 연결 여부가 중요하지 않다.

인터넷 연결이 되지 않았다면 그에 맞는 화면과 서비스를 제공하면 된다.

PWA에서는 서비스 워커를 사용하여 사용자의 연결 상태 변화를 감지하여 적절히 대응하는것이 가능하다.

구현하기에 따라 오프라인 상태에서 메시지 송신, 메일 회신, 게시물 댓글 달기 기능을 이용한 이후 온라인으로 상태가 바뀌면 사용자가 이미 웹 브라우저를 종료했더라도 작업이 정상적으로 완료되도록 할 수 있다.

빠른 로딩 시간

서비스 워커를 사용하면 초고속 인터넷이든, 연결이 불안정하든, 심지어는 아예 인터넷이 없더라도 바로 시작되는 웹 사이트를 만들 수 있다.

이전에 경험했던 전통적인 어떠한 웹사이트보다도 빠르게 로딩이 가능하다.

푸시(Push) 알림

PWA에서는 네이티브 앱과 마찬가지로 푸시 알림을 보낼수가 있다. 알림은 사용자의 재참여를 유도하고 다시 방문하게 만들 수 있다.

홈 화면 바로가기

네이티브 앱의 장점인 홈 화면에서 바로 앱에 접근할 수 있는 장점을 PWA에서 가져갈 수 있다. 홈 화면에 아이콘을 추가하면 사용자는 네이티브 앱과 PWA를 구분하기 어려워진다.

다음 포스팅부터는 PWA를 직접 구성해보고 실습해보는 과정에 대해 포스팅 할 예정입니다.

profile
프론트엔드에 스며드는 중 🌊
post-custom-banner

1개의 댓글

comment-user-thumbnail
2022년 7월 4일

LGTM

답글 달기