PWA?(Progressive Web App)

성현제(Jay)
3 min readJul 20, 2020

오늘 포스팅에서는 진보적 웹 앱(PWA)에 대해서 알아보겠다. PWA란 쉽게 말해서 모바일 앱 같은 웹사이트라고 쉽게 이해하면 되겠다. Google과 MS에는 PWA에 전폭적인 투자를 하고 있는 중이다. 특히 Google에서 출시 예정인 Fushia OS와도 연관이 많다. AppStore나 GooglePlayStore에 아무리 많은 앱들이 업로드가 되어도 실제로 유저들이 볼 수 있는건 Top3고 나머지는 조회 설치 횟수가 0에 가까운게 요즘 모바일 앱 시장의 현실이다. Top3에 올라가기 위해서는 광고,마케팅에 엄청난 돈을 쏟아야하고 이러한 노력은 Input 대비 Output이 나오지 않아 결국에 수포로 돌아가는 경우가 많다. 이러한 Input을 줄이는 방법으로 PWA는 많은 미국 스타트업에서 사랑을 받고 있다.

웹이기 때문에 각기 다른 브라우저에서 조금씩 다른 모습을 보인다.

위의 사진에서는 브라우저에 따른 PWA의 모습을 보여줬다. 아직 Safari에서는 PWA에 대한 푸시알림기능을 지원하지 않고 있다. 우리가 흔히보는 모바일 앱과는 특별한 차이가 보이지 않는다. PWA 장단점을 간략하게 정리하면 이렇다.

우리는 이렇게 PWA로 적은 Input으로 최고의 효율로 앱을 만들 수 있다. IT분야가 아닌 다른 분야에 있는 자영업자들에게는 최고의 앱이라고 할 수 있다. PWA는 웹이지만 API를 이용하여 모바일의 카메라 기능도 사용할 수 있다.

많은 음식점에서 우리는 페이스북 사진을 찍고 좋아요를 남기면 음료수 하나 더드립니다 라는 문구를 많이 봤을 것이다. 사실 소비자 입장에서는 엄청 귀찮은 부분이 많다. 그리고 사실상 그렇게 좋아요를 눌러도 체감이 크게 되지 않는다. 하지만 음식점이 자체적으로 만든 한 PWA앱에 예약 기능과 빈자리 현황, 현재 위치 등을 바로 카메라로 찍어서 포스팅 할 수 있다면 단골 손님들을 위한 최적의 앱으로 활용도가 높을 것이다.

기존의 반응형 웹사이트 앱에서 ServiceWorker 와 Mainfest만 추가하면 되서 기존에 있는 웹에서 확장을 쉽게 할 수 있다. 사실 제일 중요한건 반응형 디자인일 것이다.

PWA관련 다음 포스팅에서는 PWA 앱제작을 위한 Outline을 소개하도록 하겠다.

--

--