개발/PWA

pwa란 무엇인가

pizzaYami 2023. 11. 17.

1. PWA(Progressive Web Apps)란 무엇인가

PWA는 우리 모두가 알고 있고 좋아하는 HTML, CSS, JS와 같은 웹 기술로 만드는 앱이다. 하지만 그 느낌과 기능은 실제 네이티브 앱과 견줄 수 있을 정도로 좋다. PWA는 모바일환경에서 일단 홈 화면에 저장되면 브라우저에서 실행되며, 네이티브 앱처럼 동작한다.

또한, 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들도 전부 제공할 수 있다.

위 그림에서 볼 수 있는 것과 같이, PWA란 웹 앱의 발견 용이성과 네이티브 앱의 강력함을 모두 제공하는 것을 목표로 한다.

웹 앱의 발견 용이성

웹 사이트에 방문하는 것이 훨씬 쉽다.
설치해야 하는 네이티브 앱과는 달리 웹 사이트에 방문하면 바로 사용할 수 있다.
URL 링크로 웹 앱을 공유할 수 있다.

네이티브 앱의 강력함

부드러운 사용자 경험을 제공
내가 필요로 하는 정보에 대해 푸시 알림을 받을 수 있음
홈 화면 아이콘을 탭하여 웹보다 더 쉽게 접근할 수 있음

pwa를 사용하는 대표적인 기업은 스타벅스(Starbucks.com), 핀터레스트(Pinterest.com), 워싱턴포스트(Washingtonpost.com), 우버(Uber.com) 등이 있다.

2. PWA의 특징

웹 앱과 네이티브 앱이 가지는 장점만을 취하기 위해서 PWA는 새로운 기술 (Service Worker) 을 같이 사용합니다.

Service Worker란?

Service Worker (앞으로 SW로 통칭) 란 브라우저가 백그라운드에서 실행하는 스크립트입니다.

Service Worker의 실행 조건

1. 브라우저에서 지원해야 함

2. HTTPS에서 실행 (로컬환경에서는 상관없음)

3. manifest.json의 유무

3. PWA의 장점

다양한 앱스토어에 출시하기 위해서 별도의 프로세스를 거치지 않아도 된다.
일반적인 웹 기술을 활용해서 PWA를 만들 수 있다.
일반적으로 개발 비용이 더 저렴하다.
기존의 웹사이트를 앱으로 만들 수 있기 때문에, 추가로 유지관리해야 하는 코드베이스(codebase, 소스코드 일체)가 적다.
PWA는 기본적으로 반응형(responsive)이기 때문에, 다양한 화면 크기에도 잘 동작한다.
PWA는 부드럽고 빠르며 가볍다.
일반적인 웹사이트와는 달리, 오프라인에서도 작동한다.
PWA는 검색엔진을 통해서 찾을 수 있다. (앱스토어보다는 검색엔진을 사용하는 사람들이 훨씬 더 많다. 그리고 원한다면 앱스토어를 통해서도 PWA를 배포할 수 있다.)
푸시 알림을 통해서 사용자들의 관심을 끌 수 있다.
PWA를 설치하게 함으로써 보다 높은 참여를 이끌어낼 수 있다.