[PWA, progressive web app] 01 - 1. 프로그레시브 웹 앱이 뭘까?

* 'Do it! 프로그레시브 웹앱 만들기' 책 + 유튜브 강의 + 구글링을 통해 개인적으로 정리한 내용입니다.

혹시나 정정해야될 내용이나 잘못된 부분이 있다면 댓글로 피드백 주시면 감사하겠습니다.

 

 

https://dev.to/sudhirdontha/pwa-what-is-pwa-progressive-web-app-2kmc

 

 

 

프로그레시브 웹앱(PWA, Progressive web app)

 

배경

- 2015년 구글 크롬 엔지니어 알렉스 러셀(Alex Russell)이 고안한 개념.

- 웹에서 출발해 앱으로 가는 여정(웹으로 시작하지만 결국엔 앱처럼 구현이 되도록 하는 것)

 

특징

- 웹의 장점 + 네이티브 앱의 강점

- 네이티브 앱의 강력한 기능성 + 웹의 뛰어난 접근성(편리함)

 

 

 

프로그레시브 웹앱을 제대로 배우기 전에 네이티브 앱, 모바일 웹앱, 하이브리드 앱, 프로그레시브 웹앱에 대해 전반적으로 정리해보자.

 

 

 

네이티브 앱(Native App)이란?

- 흔히 핸드폰 내에 있는 기본 애플리케이션이나 게임 앱을 생각하면 된다. 모바일 기기에 최적화된 네이티브 언어로 개발된 앱이다.

Ex.계산기, 노트 등

 

구분	장점	단점
개발	- 스마트폰에 최적화된 기능 구현	- 개발 난이도 高, 시간 소요 高 - 같은 서비스를 OS 별로 만들어야 함. - 플랫폼 한정적임(ex. IOS / Android)
배포	- 전 세계 가능	- 업데이트 시 다시 스토어에서 다운 받아야 함. - 앱시장의 포화로 선택 어려움
사용	- 홈 화면에서 아이콘으로 쉽게 접속 - 알림(푸시)을 통해 재방문 유도	- 기기 안에 용량을 많이 차지

 

 

 

 

모바일 웹앱(Mobile Web app)이란?

- URL로 접속, 브라우저로 통신하는 앱이다. 모바일 화면에 맞게 구성한 웹.

 

구분	장점	단점
개발	- 웹 사이트 그대로 이용 가능 - 개발시간 단축 - 모든 기기와 브라우저에서 접근 가능	- 모든 하드웨어의 기능을 사용할 수 없음. - 알람(푸시) 불가능함 - 플랫폼 API 사용이 불가, 브라우저 API만 사용 가능
배포	- 웹 브라우저만 있으면 어디든 배포 가능	- 앱 스토어, 플레이 스토어 이용 불가 - 친화적인 터치 앱을 개발하기가 까다로움
사용	- 유지 보수 용이	- 인터넷 접속이 끊어지면 사용 불가능. - 네이티브, 하이브리드 앱보다 실행이 까다로움.

 

 

 

 

하이브리드 앱(Hybrid App)이란?

- 모바일 웹앱 + 네이티브 앱의 장점을 살린 앱.

- 기본 기능은 웹 표준으로 구현 후 패키징만 모바일 운영체제별로 다르게 적용.

ex. Gmail, 인스타그램 등

 

구분	장점	단점
개발	- 네이티브 API, 브라우저 API를 활용하여 다양한 개발 가능 - 기존 웹 개발 기술을 모든 OS에서 사용가능	- 플러그인 의존 시 제약 - 네이티브 개발 지식이 필요
배포	- 네이티브 앱처럼 앱 스토어, 플레이 스토어에서 배포 가능	- 앱 스토어, 플레이 스토어를 통한 업데이트 - UI 프레임 도구를 사용하지 않으면 개발자가 UI직접제작해야 함.
사용	- 네이티브 앱과 비슷하게 사용자 경험 제공	- 네이티브 앱과 같지 않은 성능(Performance) 문제

 

 

 

프로그레시브 웹앱(PWA, Progressive Web App)이란?

- 네이티브 앱(사용자 경험) + 모바일 웹앱(웹 접근성) + 하이브리드 앱(크로스 플랫폼 관점에서 같은 코드 베이스로 쓸 수 있는 형태)

- 본질은 웹이나 앱처럼 사용할 수 있음.

- 리액트(React)나 앵귤러(Angular)만 있으면 만들 수 있음.

ex. 스타벅스(Starbucks.com), 핀터레스트(Pinterest.com), 워싱턴포스트(Washingtonpost.com), 우버(Uber.com) 등

 

구분	장점	단점
개발	- 기존 웹 기술 그대로 사용 가능 - 개발시간 단축(네이티브 앱보다 훨씬 저렴 & 빠른 개발) - HTTPS를 통해 제공되기 때문에 안정적 - 푸시 알림, 오프라인 캐시 사용 가능	- 하드웨어 사용 시 웹 API를 통하기 때문에 웹 표준을 지원하는 브라우저 필요. - 오래된 브라우저들은 PWA 미지원.
배포	- 웹 브라우저만 있으면 어디든 배포 가능 - 실시간으로 유지 보수 가능	- 앱 스토어, 플레이스토어 이용 불가, 코르도바를 사용 시 같은 코드 기반으로 배포 가능
사용	- 빠른 실행 속도로 네이티브 앱과 유사한 사용자 경험 제공 가능 - 다양한 플랫폼, 다양한 화면 크기(데스크톱, 모바일, 태블릿 등)에서 사용 가능	- iOS에서는 성능이 약하고 일부만 사용 지원 가능. - 배터리 전력 소모 高

 

 

 

 

 

 

* 참고

 

프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN

 

모바일웹 / 웹앱 / 하이브리드앱 / 네이티브앱  

 

네이티브 앱(Native App) vs 하이브리드 앱(Hybrid App) vs 프로그레시브 웹 앱(PWA) – 정의와 장단점

 

[모바일] 네이티브앱 vs 모바일웹앱 vs 하이브리드앱

 

프로그레시브 웹 앱(PWA)이란 무엇이며, 왜 필요한가? | 요즘IT