프로젝트에 Pwa 적용하기(1) - Pwa에 대해 알아보자

🖐

팀원들에게 공유할 목적으로 작성한 글입니다.

새 프로젝트에 PWA를 도입하게 되었습니다👏 그래서 프로젝트에 적용하기 전 PWA에 대해 알아본 내용과 기존 작심삼칩 프로젝트에 적용한 경험을 공유합니다.

글이 길어질 것 같아 두 파트로 나누었는데요. 첫 번째 포스팅에서는 PWA에 대해 알아보고 PWA의 조건을 충족시키기 위한 각 요소에 대해 알아보겠습니다. 두 번째 포스팅에서는 실제 작심삼칩 프로젝트에 PWA를 적용한 경험을 작성했습니다.

🤓 들어가기 전: 프로젝트에 PWA를 도입하려는 이유

뭐든 목적이 있어야 공부할 내용이 머리에 잘 들어오는 법입니다. PWA에 대해 알아보기 전에 왜 프로젝트에 PWA를 도입하려고 했는지 떠올려 봅시다.

작심삼칩 서비스는 모바일 브라우저에 최적화된 웹 사이트입니다. 추후 서비스 사용성 및 재방문 유도를 위한 기능을 몇 가지 붙이고 싶다는 기획 요구사항이 생겼는데, 간단히 정리하면 다음과 같습니다.

푸시 알림을 보내고 싶다.

사용자 기기에 다운로드 해서 홈 화면 아이콘을 통해 바로 접근할 수 있었으면 좋겠다.

앱 스토어에 등록하고 싶다..

기존 프로젝트 위에서 이러한 요구사항을 바로 구현하기는 힘들었습니다. 그래서 위의 조건을 모두 충족하는 PWA 도입을 결정했습니다. (3번은 일부 앱 스토어에서만 가능한 것으로 알고 있습니다)

PWA를 적용하면 푸시 알림, 앱 설치, 캐싱 등을 할 수 있어서 사용자에게 모바일 앱과 비슷한 경험을 제공할 수 있습니다.

1. 푸시 알림

PWA 도입의 가장 큰 이유가 푸시 알림입니다. 푸시 알림을 통해 사용성 개선 및 재방문 유도와 서비스를 지속적으로 사용하도록 하려는 목적입니다.

2. 설치 가능

네이티브 앱 처럼 사용자의 기기에 설치가 가능합니다. 기존 서비스는 브라우저를 통해 접속해야 해서 조금 번거로운데, 사용자의 기기에 설치를 하면 브라우저를 거치지 않아도 홈 화면에서 아이콘을 통해 쉽게 접근이 가능합니다.

3. 앱 스토어 등록

플랫폼에 따라 다양한 앱 스토어에서 PWA를 설치할 수 있습니다(~~하지만 iOS 앱 스토어는 PWA를 지원하지 않는다고 합니다~~). 앱 스토어에 등록하면 익숙한 방식으로 설치를 할 수 있고 스토어 내부에서 홍보 효과를 누릴 수 있다는 장점이 있습니다.

👉 수정: 아래 문서를 보니 PWABuilder에서 출시한 오픈 소스 툴을 사용해 패키지를 만들면 iOS 앱 스토어에 게시할 수 있다고 합니다. 뿐만 아니라 다양한 앱 스토어에 제출할 수 있는 패키지를 손쉽게 만들 수 있다고 합니다. (Jan 11, 2024)

PWABuilder | Publish your PWA to the iOS App Store

web.dev | 앱 스토어의 PWA

단점은 100% 앱과 같은 경험을 제공할 수 없고, 설치 과정이 익숙하지 않다는 것입니다. 보통은 앱스토어에서 설치한 다음 사용하는데 PWA는 우선 사이트에 방문한 다음 설치를 해야합니다(앱 스토어에 등록이 가능하다면 예외). 특히 사파리의 경우 다운로드 버튼을 띄울 수 없기 때문에 사용자가 알아서 홈 화면에 추가를 해야합니다. 일부 사용자에게는 이런 방식이 번거로울 수 있어 UX의 관점에서 좋지 않을 수 있습니다.

장단점을 모두 고려한 결과 장점이 더 커서 PWA 적용을 결정했습니다. 그리고 네이티브 개발자를 구해서 개발하는것도 시간이 꽤 걸리니 현재 상황에서는 PWA를 도입하는게 가장 적절하다는 판단이었습니다.

그럼 이제 본격적으로 PWA에 대해 알아봅시다!

🤔 PWA란?

PWA(Progressive Web Apps)는 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱입니다. 기존의 웹 앱과 달리 네이티브 앱과 유사한 기능을 제공해 사용자 경험에 큰 도움을 줄 수 있습니다.

MDN 문서를 보면 PWA는 완전히 새로운 개념은 아니라고 합니다. 기존에 있던 기술을 사용해 웹 서비스를 앱처럼 사용할 수 있도록 구축하는 하나의 새로운 방법입니다.

네이티브 앱 vs 기존 웹 사이트 vs PWA

네이티브 앱

네이티브 앱은 iOS 또는 Android 디바이스와 같은 특정 운영 체제(OS)/디바이스 종류를 위해 개발됩니다. 이러한 앱은 일반적으로 앱 스토어를 통해 배포되며, 사용자는 앱 스토어에서 앱을 찾아 설치할 수 있습니다.

장점은 다음과 같습니다.

쉬운 접근 사용자의 기기에 각 앱의 아이콘이 표시되어 사용자가 쉽게 찾아서 열 수 있습니다.

오프라인 및 백그라운드 작동 사용자가 상호 작용하지 않거나 오프라인 상태일 때 작동할 수 있습니다. 예를 들어 채팅 앱이 열려있지 않을 때 메시지를 수신하고 사용자에게 알림을 표시할 수 있습니다.

디바이스 기능 사용 카메라, GPS와 같은 디바이스 기능에 접근해 사용할 수 있습니다.

앱 스토어 배포 앱 스토어를 통해 배포되므로 사용자는 한 곳에서 앱을 찾고 일관된 방식으로 설치할 수 있습니다.

기존 웹 사이트

웹 사이트는 사용자가 소유하는게 아닌 방문하는 곳에 가깝습니다. 사용자가 접속하지 않을 때는 사용자의 디바이스에 존재하지 않으며, 브라우저를 통해 접속할 수 있고, 네트워크 연결에 크게 의존합니다.

네이티브 앱에 비해 다음과 같은 장점이 있습니다.

단일 코드베이스 단일 코드베이스로 다양한 운영체제 및 디바이스에서 웹 사이트를 실행할 수 있습니다.

웹을 통한 공유 및 배포 앱 스토어에 가입할 필요 없이 웹에 바로 배포할 수 있습니다. 또한 URL을 사용해 공유하고 접근할 수 있습니다.

Progressive Web Apps

PWA는 기존 웹사이트와 네이티브 앱의 장점을 결합한 앱입니다.

다음과 같은 장점이 있습니다.

사용자의 디바이스에 설치 가능 각 플랫폼의 앱 스토어에서 설치하거나 웹에서 직접 설치할 수 있습니다. 설치가 완료되면 PWA는 브라우저의 웹사이트가 아닌 독립형 앱으로 실행할 수 있습니다.

백그라운드에서 오프라인으로 작동 가능 일반적인 웹사이트는 웹 페이지가 브라우저에 로드되는 동안에만 활성화 됩니다. 하지만 PWA는 기기가 네트워크에 연결되어 있지 않은 상태에서도 작동할 수 있습니다.

전체화면 사용 가능 브라우저 UI에서 실행되지 않고 전체 화면을 사용할 수 있습니다.

앱 스토어 배포 가능 앱 스토어에서 배포가 가능하며 웹을 통해 공개적으로 배포할 수도 있습니다.

앱이 특정 요구사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있습니다.

오프라인에서 동작

설치 가능

푸시 알림

등등…

PWA를 적용한 곳

PWA를 적용하고 있는 곳은 대표적으로 트위터, 스타벅스, GitHub 등이 있습니다.

브라우저에서 트위터에 접속하면 상단 주소창에 앱 설치 아이콘이 등장하는 것을 확인할 수 있습니다.

💡 PWA를 만들기 위한 최소 조건

일반 웹 앱이 PWA가 되려면 최소한 아래 3가지 조건을 갖춰야 합니다.

HTTPS: 안전성 및 서비스 워커가 제대로 작동하기 위해 필요

Web App Manifest: PWA 설치 시 필요한 정보 제공을 위해 필요

Service Worker: 오프라인 및 백그라운드 작업 지원을 위해 필요

1. HTTPS

Service Worker가 제대로 작동하려면 HTTPS가 필요합니다. Service Worker는 PWA의 모든 요청을 가로챌 수 있어서 보안이 굉장히 중요하기 때문에 HTTPS에서만 작동합니다.

2. Web App Manifest

Manifest는 브라우저가 PWA를 설치하는 데 필요한 정보를 제공하는 JSON 파일입니다. 테마 색상, 아이콘, 앱 이름 등 PWA의 외형이나 특정 동작을 정의할 수 있습니다.

3. Service Worker

오프라인 및 백그라운드 작업을 구현할 때 필요합니다. PWA를 웹 사이트가 아닌 앱처럼 작동하도록 합니다.

Service Worker는 네트워크의 프록시 역할을 하는 웹 워커의 일종으로, PWA의 모든 요청을 가로채는 역할을 합니다(=PWA와 주고 받는 모든 요청은 Service Worker를 거침). 이벤트 기반이며 애플리케이션의 나머지 부분과 별도의 스레드에서 작동합니다. 또한 네트워크 요청을 수정할 수 있기 때문에 보안에 취약해서 HTTPS에서만 작동합니다.