[FE] PWA(프로그레시브 웹 앱)란 무엇인가?

괴발·2022년 8월 4일

프론트엔드 개발자

목록 보기

4/8

프로그레시브 웹 앱이란

progressive web app :
HTML, CSS, 자바스크립트(JavaScript)와 같은 웹 기술을 이용해 웹과 네이티브 앱 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹이자 앱입니다.

웹의 장점은 발견이 쉽고 어플리케이션을 설치하는 것보다 웹사이트 방문하는 것이 쉽고 빠르며, 링크로 공유할 수 있습니다.

앱은 운영체제와 잘 통합되므로 부드러운 사용자 경험을 제공할 수 있습니다. 앱은 설치할 수 있으므로 오프라인에서도 동작하며, 사용자는 홈화면의 아이콘을 탭해 브라우저를 이용하는 것보다 더 쉽게 앱에 접근할 수 있습니다.

PWA는 이와 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다.

:
:

우리가 아는 트위터, 스타벅스, 핀터레스트, 우버 등 많은 웹 사이트들이 PWA를 이용하고 있습니다.
이 사이트들은 아이폰, 안드로이드와 관계없이 휴대폰, 템플릿, PC에 관계없이 모양과 기능이 동일합니다.

이것이 PWA 로 만든 웹 애플리케이션의 가장 큰 장점입니다.

우리는 첫눈에 이 웹, 앱이 PWA인지는 알 수 없으나 오프라인에서의 동작, 설치가 가능한, 쉬운 동기화, 푸시 알림 등 몇가지 요구사항을 만족하거나 기능이 구현되었을 때 PWA로 볼 수 있습니다.

다음은 웹 앱을 PWA로 식별하기 위한 몇가지 핵심 원칙입니다.

컨텐츠를 검색엔진을 통해 찾을 수 있다.
기기의 홈화면에 설치하여 사용할 수 있다.
간단하게 url을 전송해 공유할 수 있다.
네트워크에게서 독립적이다. 따라서 오프라인이나 불안한 네트워크 상에서도 동작할 수 있다.
최신 브라우저에서 모든 기능을 사용할 수는 없지만 이전 브라우저의 기본기능은 여전히 사용 가능하다.
새 컨텐츠가 사용 가능할 때마다 알림을 보내 재참여가 가능하다.
모든 기기, 브라우저에서 사용이 가능한 반응형.
이용자와 앱 사이의 연결이 민감한 데이터에 접근하려는 제3자로부터 안전하다.

PWA로 만들면 뭐가 좋을까요?

캐싱을 이용해 앱 설치 후 로딩시간이 줄어들어 데이터와 시간을 절약할 수 있습니다.
네이티브 앱의 경우 작은 수정에도 어플리케이션 전체를 다시 다운로드 하도록 하지만 PWA는 앱 업데이트 시 변경된 컨텐츠만 업데이트 할 수 있습니다.
네이티브 플랫폼보다 통일된 UI를 확인할 수 있습니다.
시스템 알림 및 푸시 메세지를 사용자의 재참여를 이끌어 낼 수 있습니다.

:
:

흔히 우리가 다운로드 할 수 있는 네이티브 앱은 아이폰이나 안드로이드에 특화된 프로그래밍 언어로 만드는 경우가 많습니다. IOS는 스위프트(Swift)로 만들고 안드로이드는 자바(JaVa)로 만듭니다. 원하는 플랫폼에서 실행되는 앱을 만들기 위해서는 관련 기술을 알아야 합니다. 이 방식은 빠르게 적용하기에는 한계가 있습니다.

반면, PWA는 브라우저에서 실행되고 네이티브 앱처럼 동작합니다. 보안상의 이유로 브라우저가 접근하지 못하는 시스템 하드웨어와 소프트 웨어에도 접근할 수 있습니다.

:
:

PWA는 기본적으로 웹(web)중심입니다.

이는 검색엔진이 쉽게 찾을 수 있다는 강점이 있습니다. PWA가 검색엔진 최적화(SEO)에 쉽게 처리 되기 위해서는 PWA 환경을 설정할 때 검색엔진이 자바스크립트에 액세스 할 수 있도록 해야 합니다. 검색엔진의 봇(bot)이 파일에 접근하는 것을 막아 놓으면 안 되며, 링크도 유효한 것인지를 확인해야 합니다. 렌더링 프로세스를 개선하려면, 여러분의 자바스크립트 프레임워크가 서버 측 렌더링(웹페이지의 내용을 서버에서 렌더링 해서 전송해주는 방식)을 사용하도록 설정하는 것이 좋습니다.

:
:

PWA를 설정하는 데는 많은 작업이 필요하지 않습니다. 기존의 웹사이트를 그럴듯한 PWA로 바꾸기 전에 해야 할 작업은 크게 3가지가 있습니다.

+ 보안 연결(HTTPS):
PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 합니다. 이건 단지 보안상의 이유 때문만은 아니고, 사용자들의 신뢰를 얻기 위해서도 아주 중요한 부분입니다.
+ 서비스 작업자(service worker):
서비스 작업자는 백그라운드에서 실행되는 스크립트입니다. 서비스 작업자는 네트워크와 관련된 요청의 처리를 도와주기 때문에, 여러분은 그 점에 대해서는 걱정하지 않고 더욱 복잡한 작업을 수행할 수 있습니다.
+ 매니페스트 파일(manifest file, 설정 파일):
이것은 제이슨(JSON, 용량이 적은 데이터를 교환하기 위한 형식) 파일이며, PWA가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있는 것입니다. 여기에서는 PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있습니다.