PWA(Progressive Web Apps) 의 정의

출처 : https://www.goodbarber.com/blog/progressive-web-apps-browser-support-compatibility-a883/

Progressive Web Apps 줄여서 PWA, 프로그래시브 웹 앱 은 웹 과 네이티브 앱의 기능, 모두의 이점을 갖도록 수 많은 특징과 표준 패턴을 사용해 개발된 웹 앱입니다.

구글이 가장 큰 투자를 하고 있으며 MS도 많은 투자를 하고 있어서 현재 많이 관심 있는 기술이라고 볼 수 있습니다.

관련 기사 : http://www.ciokorea.com/news/39944

칼럼 | MS와 구글이 '프로그레시브 웹 앱'에 올인하는 이유

왜 PWA 가 필요한가에 대해 이야기를 해 볼 필요가 있습니다.

2014년을 기준으로 모바일 사용자는 데스트탑 사용자를 넘어섰습니다.

거기에 모바일 사용자의 87%는 네이티브앱에서 많은 시간을 보내고 있습니다.

네이티브를 쓰는건 2가지 정도 장점이 있다고 볼 수 있습니다.

1.메인 화면에서 아이콘이 존재하 접근성이 좋다

2. 푸시알람이 나와 접근성이 좋다

그럼 여기서 의문이 들 수 있죠. 그럼 그냥 네이티브 앱을 만드는게 좋지 않나?

하지만 다른 통계를 본다면 모바일 사용자의 50% 정도는 월간 앱을 전혀 다운로드 하지 않는다는 통계가 있습니다.

사용자의 87% 는 네이티브를 쓰지만 월로 보면 1개도 안받는 경우가 50%를 넘는 것이죠.

결론적으로 사용자들은 새로운 앱을 더이상 설치 하지 않는다고 보면 됩니다. 이미 사용중인 앱을 계속 쓰는 경우가 많다는 거죠.

간단하게 네이티브는 설치하는데 시간과 비용이 들고 웹은 설치는 없고 네이티브는 아이콘이 있고 웹은 url 만 있으면 되지만 매면 url 을 기억해야 하는 수고로움이 있습니다.

결정적으로 웹은 플랫폼에 종속되지 않습니다. 서비스하는 입장에서는 플랫폼별로 개발해야 하는 비용을 줄일 수 있는거죠.

요즘은 React Native나 Flutter 같은 언어가 많이 나와 있어 동시 컴파일이 가능하지만 아직은 웹에 비할바는 아닙니다.

또한 네이티브 앱은 오프라인에서도 사용할 수 있다는 장점이 있습니다. 웹은 오프라인에서는 아무것도 할 수가 없죠.

이에 PWA 는 장점들을 적절하게 녹여 냈습니다. 

PWA를 아이콘화 하여 메인화면에 추가 할 수 있으며 추가안 아이콘으로 언제나 실행이 가능합니다. 원한다면 오프라인 모드를 지원하여 오프라인에서도 사용이 가능합니다.

PWA는 새로운 기술이라기 보단 웹 구현 방식, 방법에 가깝습니다. 구글이 상당히 공격적으로 밀고 있어서 공식 코드랩에서 보는 것도 상당히 도움이 될 거 같습니다.

저도 차근차근 공부를 진행하며 포스트를 추가할 예정입니다.

이번 포스트는 여기까지 할꼐요. 하단에 출처와 공식코드랩은 연결해 두겠습니다~!

 

구글 공식 코드랩

https://codelabs.developers.google.com

Google Codelabs

참조문서 : https://medium.com/@euncho/pwa-%EC%BD%94%EB%93%9C%EB%9E%A9-%EA%B0%80%EC%9D%B4%EB%93%9C%EB%9D%BC%EC%9D%B8-597049b2df40

PWA 코드랩 가이드라인

참조문서 : https://altenull.github.io/2018/02/25/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C-%EC%9B%B9-%EC%95%B1-Progressive-Web-Apps-%EB%9E%80/

프로그레시브 웹앱(Progressive Web Apps)이란?

참조문서 : https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/%EC%86%8C%EA%B0%9C

프로그레시브 웹 앱 소개