[PART1] 웹/디자인 - TERMS 16

[ TERMS 16 ]  PWA

PWA를 설명하는 이미지 (출처 : https://www.tecnova.cl/2020/02/24/what-are-progressive-web-applications-or-pwa-a-short-guide-to-understanding-them/?lang=en)

1. PWA( Progressive Web App )의 정의

 PWA는 구글 크롬 엔지니어 알렉스 러셀과 디자이너 프랜시스 베리만이 소개한 웹의 새로운 개념으로 네이티브 앱( Native App ) 수준으로 웹 기술이 발전해 나갈 수 있게 방향성을 제시하는 최신 웹 개발 방법이다. 궁극적으로는 웹에서 네이티브 앱 수준의 사용자 경험을 제공하는 것이 목적이다.

 

2. PWA는 어떻게 접하게 될까?

 웹 사이트에 접속했는데 앱을 설치하겠냐고 물어보며 팝업창을 띠우고, 클릭시 스토어를 거치지 않고 설치된다면 PWA이다. 대표적으로는 스타벅스가 PWA로 만들어진 웹 앱을 서비스하고 있다. PWA는 웹 앱의 화면과 동일하지만 주소창이 사라지고 네이티브 앱처럼 더 쾌적하게 사용할 수 있다. 

 

3. PWA 알아보기

 PWA는 웹의 기능과 네이티브 앱 수준의 기능을 모두 활용할 수 있도록 다양한 기술과 표준 패턴으로 개발된 방법론이다. 웹 앱을 PWA로 만들기 위해서는 3가지의 요건을 충족해야 한다.

 

>  서비스 워커 ( Service Worker )

서비스 워커를 설명하는 이미지 (출처 : https://stackoverflow.com/questions/49314386/what-is-service-worker-in-react-js)

 서비스 워커란, 웹 브라우저의 뒤편에서 항상 실행되고 있는 백그라운드 프로그램을 말한다. 서비스 워커가 실행되어 있으면 클라이언트인 브라우저와 서비스 사이에 상태 변경을 감지할 수 있다. 따라서 서버가 클라이언트에게 '푸시 알림'을 보내는 것도 가능하며, 또한 오프라인 상태에서 브라우저가 서버로 전송할 요청을 저장했다가 인터넷 연결이 활성화되었을 때 즉시 서버로 전송하는 것도 가능하다. 서비스 워커 덕분에 이미 불러온 콘텐츠에 접근하여 '오프라인에서의 동작'을 설계할 수 있다.

 

>  웹 앱 매니페스트 ( Web Application Manifest )

 웹 앱 매니페스트는 앱의 이름, 아이콘, 화면 방향, 배경 색 등 기본 정보 및 설정을 저장한 JSON(JavaScript Object Notation)파일을 의미한다. 웹 앱 매니페스트는 다양한 기기에서 PWA가 설치될 때 꼭 필요한 가이드라인이 된다.

 

>  HTTPS

 PWA는 여러 운영체제의 권한을 필요로 하기 때문에 웹 서버와 보안이 중요하다. 따라서, HTTPS를 통해 배포되고 실행되어야 한다. HTTPS를 통한 서비스는 서비스 워커가 클라이언트의 기기에 등록하거나 Geolocation과 같은 최신 API들을 사용하기 위한 보안상의 전제조건이며 추가 보안 조치 및 콘텐츠의 신뢰성을 보장할 수 있다.

 

4. PWA를 사용하는 이유

web,app,pwa를 비교하는 이미지 (출처 : https://www.coredna.com/blogs/progressive-web-app)

>  PWA의 핵심 기능

 일반적인 모바일 웹 앱에 PWA를 도입하면 검색 엔진 최적화가 가능하고 스마트폰의 주소록, 카메라에 접근과 같은 기존 웹 앱에서는 불가능한 네이티브 기능을 사용할 수 있다는 이점이 있다. 이 외에도 다음과 같은 PWA 핵심 기능이 존재한다.

• 푸시 알림
• 앱 설치 기능
• 네트워크 독립성과 캐싱(caching)

>  푸시 알림

 푸시 알림은 네이티브 앱의 성공에 꼭 필요한 기능이다. 이 기능의 유무에 따라 앱의 재방문률, 실행 시간이 크게 달라진다. 사용자가 다른 앱을 사용하거나 완전히 종료한 상태에서도 푸시 알림을 보낼 수 있다.

 

>  앱 설치 기능

 PWA에서 '홈 화면에 추가'는 기존 웹과 같이 즐겨찾기가 아니라 네이티브 앱처럼 운영체제에 설치된다. 네이티브 앱과 거의 유사한 사용자 경험을 제공한다는 장점이 있다. 동시에 네이티브 앱에 비하여 매우 적은 설치용량이 장점이다.

 

>  네트워크 독립성과 캐싱

 네트워크가 끊어져도 서비스 워커와 '캐싱 API'의 도움으로 404에러 페이지가 표시되지 않고 오프라인 상태에 표시할 커스텀 오프라인 페이지와 오프라인 기능들을 정의할 수 있다.

 PWA에서 캐싱은 브라우저 자체의 캐싱(cache-control)이 아니라 브라우저의 캐시 저장 공간(cache storage)을 활용하는 자원 관리 방법이다. PWA에서 캐싱은 '프리 캐싱(precaching)'과 '런타임 캐싱(runtime caching)'으로 분류한다.

• 프리 캐싱 : 사용자가 웹 앱에 접속하기 전, 서비스 워커가 처음 설치될 때 사전에 필요한 데이터를 미리 캐시 해 놓는 방법이다. 이때 캐시된 데이터는 웹 앱 접속 시 바로 사용할 수 있다. 따라서 앱 시작 화면에서 바로 필요한 데이터들은 프리 캐싱이 더 나은 선택이다.
• 런타임 캐싱 : 웹 앱을 동작시킬 때 발생하는 요청으로 얻은 데이터를 캐시하는 방법이다. 용량이 큰 데이터는 프리 캐싱으로 불러오면 서비스 워커 설치 시간이 길어져 웹 앱 접속이 늦어지므로 런타임 캐싱이 나은 선택이다.

 서비스 워커의 캐싱에는 '캐싱 전략'이 존재한다. 캐싱 전략은 캐시된 데이터를 우선할 것인지 네트워크 요청을 우선할 것인지에 대한 조합으로 다음과 같이 다섯 가지가 존재한다. 자원(데이터)별로 다섯 가지 전략중 하나를 채택해 적용 가능하다.

• Cache First : 네트워크 요청과 캐싱 중 항상 캐시된 데이터에 먼저 접근하는 방식이다. 바뀔 일이 거의 없는 폰트나 파비콘 이미지가 같은 데이터에 사용된다.
• Cache Only : 항상 캐싱된 데이터를 사용하고 데이터가 없으면 에러를 발생시키는 방식
• Network First : 캐시된 데이터를 확인하기 전 항상 네트워크 요청을 먼저 진행하는 방식 포털 사이트의 뉴스, 인스타그램의 포스트처럼 항상 최신의 데이터를 불러와야 하는 곳에 사용
• Network Only : 해당 데이터에 대해서는 캐시된 데이터 유무에 상관없이 항상 네트워크 요청만 하는 방식
• Stale While Revalidate : 캐시된 데이터를 먼저 사용하고 캐시된 데이터가 없거나 오래되었으면 네트워크 요청을 진행하는 방식, 프로필 이미지처럼 가끔 바뀌지만 최신 데이터가 아니어도 상관없는 데이터에 적용

자원의 종류와 크기에 따라 프리 캐싱과 런타임 캐싱 그리고 5가지 캐싱전략을 적절히 사용하면 불필요한 네트워크 요청의 반복을 획기적으로 줄일 수 있고 웹앱을 빠르고 효율적으로 구현할 수 있다.

 

>  PWA를 도입하는 이유

 웹 앱은 네이티브 앱보다 확장성이 좋다. 검색 접근성이 좋으며 앱을 설치하는 번거로운 작업도 없고 스마트폰의 용량도 차지하지 않는다. 또한, 링크를 보내 바로 웹 앱을 공유할 수 있다는 장점이 있다.

 네이티브 앱은 설치 후 사용자들의 재방문율이 높다. 뿐만 아니라 운영체제의 더 많은 네이티브 기능들을 활용하여 사용자에게 더 나은 경험을 제공할 수 있다. 오프라인에서도 기본 기능이 작동하도록 설계할 수 있고 푸시 알림으로 사용자의 지속적인 재방문을 이끌어 내는 데 유리하다. PWA를 사용하면 네이티브 앱의 장점을 누리는 웹 앱을 만들수 있다.

 

5. PWA 더 알아보기

>  PWA의 현재와 미래

 유튜브, 핀터레스트, 인스타그램, 우버 등 많은 기업이 PWA의 잠재력을 인정하고 PWA로 웹 앱을 런칭했다. 특히 마이크로소프는 구글 앱스에 대항하기 위해 오피스 앱을 통합하여 오피스 365라는 PWA를 출시하였다. PWA의 심장인 서비스 워커는 이미 많은 웹 프로젝트에서 가치를 증명했다. PWA를 지원하지 않는 브라우저가 서비스를 종료하고 PWA를 적극 지원하는 크롬이 점유율을 상승하는 점으로 볼 떄 PWA의 전망은 긍정적이다.

 

>  PWA 적용 시 고려사항

• PWA 미지원 브라우저 존재 : 오래된 브라우저에서 지원을 하지 않는다.
• 애플의 소극적인 지원 : 애플은 앱스토어 생태계를 중요시하여 PWA 지원에 소극적이었다. 그러나 사파리 11.1버전부터 서비스 워커를 탑재하는 등 점차 변화를 보이고 있다. 하지만 여전히 푸시 알림이나 앱 스토어 출시를 지원하지 않는 등 PWA 지원에 미온적이다.
• 성능상의 한계 존재 : PWA를 잘 활용하면 기존 웹의 성능을 대폭 향상 시킬수 있지만, 네이티브 API 수준의 완벽한 기능과 매끄러운 동작을 보이기에는 한계가 존재한다.

구분	장점	단점
개발	● 웹 기술로 모든 운영체제용 개발이 가능하다. ● 기존 웹 앱을 PWA로 전향할 수 있다. ● 푸시 알림, 백 그라운드 동작, 캐싱 기능을 사용할 수 있다.	하드웨어 사용은 웹 API가 필요하지만 웹 표준을 지원하지 않는 브라우저가 존재한다.
배포	● 검색 엔진 노출이 쉽다 ● 배포 및 유지 보수가 용이하다 ● 앱 설치가 가능하고, 앱의 설치 용량이 네이티브 앱보다 훨씬 작다	네이티브 앱처럼 앱 스토어에 출시할 수 없다.(하이브리드 앱처럼 아파치 코르도바 같은 네이티브 앱 변환과정이 필요함)
사용	캐싱을 통한 빠른 로딩, 푸시 알림 등 네이티브 앱과 유사한 사용자 경험 제공이 가능하다	iOS에서 PWA의 모든 기능을 활용할 수 없다.(푸시 알림 등 미지원)

 

>  함께 알아 두면 좋은 용어

• 앱 스토리지
• 웹 표준 / 웹 접근성
• 네이티브 앱 / 웹 앱 / 하이브리드 앱 / 크로스 플랫폼

 

>  참고 자료

 

• https://terms.naver.com/entry.naver?docld=3581225&cid=59088&categoryId=59096  
• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
• https://developer.google.com/web/tools/workbox/reference-docs/latest/module-workbox-strategies