| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- ES6
- null
- react
- 투두리스트
- typescript
- 함수
- todolist
- Number
- VUE
- 모던
- 타입스크립트
- 스코프
- BIND
- 객체
- 자바스크립트
- redux
- 뷰
- this
- 라우터
- Interface
- 리액트
- 데이터 타입
- 컴포넌트
- const
- function
- js
- CSS
- var
- 모던 자바스크립트
- let
- Today
- Total
홍준혁
PWA란 무엇인가? 본문
프로그래시브 웹앱(PWA)에 대해서 알아보는 시간을 가져보도록 하자.
네이티브 앱, 기기에 최적화된 기능을 구현하다.
네이티브 앱은 스마트폰에서만 작동하는 앱을 말한다. 그에 맞는 운영체제 환경에 맞는 별도의 프로그래밍 언어와 SDK라는 개발 도구를 이용해야 앱을 제작할 수 있다.
대표적인 예시로, 안드로이드 앱은 자바를 이용해서 안드로이드 스튜디오에서 만들고, IOS는 Objective-C나 Swift를 이용해서 XCode에서 개발을 하는데, 네이티브 앱은 기본적으로 개발 난도가 높은 편이다. 또한 각 운영체제 별로 개발을 해야 하니 비용과 시간이 들 수밖에 없다. 그럼에도 네이티브의 장점이라고 하면 기기에 탑재된 모든 기능을 사용할 수 있다는 것이 있겠다.
| 구분 | 장점 | 단점 |
| 개발 | 스마트폰에 최적화된 기능을 구현할 수 있음. | 개발 난이도가 높고 시간과 비용이 많이 듦. |
| 배포 | 전 세계를 시장으로 삼을 수 있다. | 업데이트가 생기면 다시 내려받아야함. |
| 사용 | 홈 아이콘을 눌러 손쉽게 접속 가능하다. | 기기 안에 용량을 많이 차지한다. |
이러한 네이티브의 단점을 보완하기 위해서 웹앱이라는 개념이 등장하기 시작합니다.
모바일 웹앱은 브라우저로 통신하기 때문에 모든 단말기에서 똑같은 콘텐츠를 볼 수 있다는 장점이 있다. 또한 운영체제에 얽매일 필요도 없을뿐더러 제작 비용도 저렴하고 개발 시간도 절약할 수 있다.
| 구분 | 장점 | 단점 |
| 개발 | 익숙한 웹 기술을 그대로 이용할 수 있다. | 모든 하드웨어의 기능과 푸쉬 알람 기능을 사용할 수 있다. |
| 배포 | 브라우저만 있으면 어디든 배포할 수 있다. | 앱 스토어, 플레이 스토어를 이용할 수 없다. |
| 사용 | 실시간으로 유지보수를 할 수 있다. | 인터넷이 끊기면 접속이 불가능하다. |
모바일 웹앱은 개발 비용을 단축하고도 운영체제에 얽매이지 않고 같은 서비스를 제공한다. 하지만 위의 표에서 봤듯, 단점은 언제나 존재하는데 "모바일 웹앱과 네이티브 앱의 장점만 살릴 수는 없을까?" 라는 생각에 등장한 하이브리드 앱을 살펴보도록 하자.
하이브리드 앱은 간단히 말하면 앱 개발은 모바일 웹앱처럼, 앱 배포는 네이티브 앱처럼 할 수 있다.
기기에 저장된 고유 파일에 접근하거나 카메라와 같이 하드웨어적인 부분에도 제한적이기는 하지만 접근할 수는 있다.
| 구분 | 장점 | 단점 |
| 개발 | 기존에 사용하던 웹 개발 기술을 모든 운영체제에서 그대로 사용할 수 있음 | 하드웨어를 사용할 수는 있지만 플러그인에 의존해야 하므로 제약이 있을수도 있다. |
| 배포 | 앱 스토어, 플레이 스토어에 배포할 수 있다. | 앱 배포와 같이 업데이트가 생기면 다시 내려받아야 한다. |
| 사용 | 네이티브 앱과 유사한 사용자 경험을 제공한다. | 네이티브 앱과 동일한 성능을 내는 데는 한계가 있다. |
단점의 보완하려다 보니 또 다른 단점이 생기는 현상이 보인다.
그래서 장점만을 모아서 개발한 프로그래시브 웹앱이라는 것이 나왔다.
미래의 웹 기술, 프로그레시브 웹앱
프로그레시브 웹앱은 모바일 웹앱처럼 쉽게 개발하고 네이티브 앱과 똑같은 사용자 경험을 제공하는 것이 궁극적인 목표이다.
이 개념은 알렉스 러샐이라는 구글 크롬 엔지니어가 고안한 개념이며, 이후 발전을 거듭해 전 세계로 네이티브 앱의 강력한 기능성과 웹의 뛰어난 접근성을 모두 갖춘 이상적인 형태의 웹앱이라는 평가를 받고 있다.
PWA의 등장으로 웹 vs 앱이라는 진부한 싸움은 막을 내릴 때가 되었다.
프로그레시브 웹앱의 장단점을 살펴보도록 하자.
| 구분 | 장점 | 단점 |
| 개발 | 푸쉬 알람, 오프라인 캐시, HTTPS를 사용할 수 있다. | 하드웨어 사용은 웹 API를 통하므로 웹 표준을 지원하는 브라우저가 필요하다. |
| 배포 | 웹 브라우저만 있으면 어디든 배포할 수 있다. | 앱 스토어, 플레이 스토어를 이용할 수는 없지만 코르도바를 이용하면 코드 기반으로 배포할 수 있다. |
| 사용 | 네이티브 앱과 유사한 UX를 제공한다. | IOS는 현재 일부의 기능만 사용할 수 있다. |
프로그래시브 웹앱을 대표하는 6가지 핵심 기술을 보도록 하자.
- 24시간 실행되는 PWA의 서비스 워커
- PWA의 신분증인 웹앱 매니페스트
- 보안을 강화한 HTTPS
- 사용자에게 먼저 다가오는 푸시 알림
- 터치 한 번으로 접속하게 되는 홈 화면에 추가 기능
- 네이티브 앱도 부럽지 않은 웹 API
위의 기능들 중 1,2,3번은 PWA에게 있어서 없어서는 안 될 필수 요소들이다.
하나라도 없다면 PWA로서의 기능을 발휘할 수 없기 때문이다.
첨단 웹 기술이 결한 된 PWA는 지금까지 계속 발전하고 있고 사용 경험도 점점 새로워지고 있다.
웹앱 프로젝트에 PWA를 도입해보는 것도 괜찮을 것 같다.
