1. 개요
프로그레시브 웹앱(Progressive Web Apps)이란 Google I/O 2016에서 소개된 웹의 신기술이며, PWA라고 줄여서 부르기도 한다.
신기술이라고해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있다.
신기술이라고해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있다.
2. 상세
PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱이다.
웹의 경우, 접근성이 매우 좋다.
설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있다.
모바일 사용자의 월간 앱 다운로드 수를 보여주는 통계를 보면[통계] 50% 이상의 사용자는 앱을 전혀 다운로드 하지 않는다.
반면, 모바일 사용자들은 한 달에 평균 100개 이상의 웹사이트를 방문한다고 한다.
반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있다.
이로 인하여, 모바일 환경의 사용자의 87%는 네이티브 앱을 주로 이용한다고 한다.[통계]
PWA는 이 모든 장점을 사용할 수 있는 웹 앱을 생성하는 능력을 제공한다.
그러나 이건 완전히 새로운 개념은 아니다. 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 논의되어 왔고, 점진적인 향상과 반응형 디자인은 이미 우리가 모바일 친화적인 웹사이트를 구축할 수 있게 해주고 있다. 오프라인에서 동작하는 것과 앱을 설치하는 것은 몇 년 전 Firefox OS 생태계에서 이미 가능했었다.
하지만, PWA는 웹의 기존 기능을 제거하지 않은 상태로 이 모든 것과 다른 여러 기능을 제공한다.
웹의 경우, 접근성이 매우 좋다.
설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있다.
모바일 사용자의 월간 앱 다운로드 수를 보여주는 통계를 보면[통계] 50% 이상의 사용자는 앱을 전혀 다운로드 하지 않는다.
반면, 모바일 사용자들은 한 달에 평균 100개 이상의 웹사이트를 방문한다고 한다.
반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있다.
이로 인하여, 모바일 환경의 사용자의 87%는 네이티브 앱을 주로 이용한다고 한다.[통계]
PWA는 이 모든 장점을 사용할 수 있는 웹 앱을 생성하는 능력을 제공한다.
그러나 이건 완전히 새로운 개념은 아니다. 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 논의되어 왔고, 점진적인 향상과 반응형 디자인은 이미 우리가 모바일 친화적인 웹사이트를 구축할 수 있게 해주고 있다. 오프라인에서 동작하는 것과 앱을 설치하는 것은 몇 년 전 Firefox OS 생태계에서 이미 가능했었다.
하지만, PWA는 웹의 기존 기능을 제거하지 않은 상태로 이 모든 것과 다른 여러 기능을 제공한다.
3. PWA의 기능
위에서 말했듯이, PWA는 하나의 기술로 생성된 것이 아니다. 이는 일부 특정 패턴, API 및 다른 기능들을 포함하는 웹 앱을 구축하는 하나의 새로운 철학을 나타낸다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않다. 앱이 특정 요구 사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있을 것이다.
- 오프라인에서 동작
- 설치가 가능
- 쉬운 동기화
- 푸시 알림, 등.
게다가, 앱의 완성도를 퍼센트로 측정하는 도구들도 있다.[3] 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있을 것이다. 하지만 이는 대략적인 지표일뿐.
다음은 웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙이다.
다음은 웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙이다.
- 검색 가능, 컨텐츠를 검색 엔진을 통해 찾을 수 있어야 한다.
- 설치 가능, 기기의 홈 화면에서 사용할 수 있어야 한다.
- 연결 가능, 간단하게 URL을 전송해 공유할 수 있어야 한다.
- 네트워크 독립적, 오프라인이나 불안한 네트워크 연결에서 동작해야 한다.
- 점진적, 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있어야 한다.
- 재 참여 가능(Re-engageable), 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있다.[5]
- 반응형, 모든 기기의 화면이나 브라우저에서 사용할 수 있어야 한다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
- 안전, 유저와 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전하여야 한다.