PWA (Progressive Web App)

✨ 들어가기

우선 PWA는 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱이다.

그래서 기존의 웹 앱과는 달리 네이티브 앱과 유사한 기능들을 제공 받을 수 있다는 것이 장점이며, PWA를 통해 사용자는 앱의 다운로드나 업데이트 필요없이 웹 브라우저로 앱을 바로 사용할 수 있게 되었다.

 

하지만, 여태까지는 안드로이드와 Chromium기반 브라우저에서만 거의 모든 기능을 제공하고 있었으며, Safari는 폐쇄적인 모습을 보이고 있었다. 그래서 웹을 개발할 때, Safari 브라우저에서만 지원하지 않는 API들이 많이 존재하고 있었다.

 

그러나 macOS, iOS, iPadOS 유저들의 점유율이 빠른 속도로 증가하면서 애플은 드디어 Web Push를 지원(Meet Web Push for Safari)하겠다는 공식 입장을 밝히기도 했다.

 

그만큼 PWA는 웹 트렌드에 빠지지 않고 등장하며, 모바일 시장에서의 경쟁력을 갖추기 위해 PWA는 반드시 알고 있는 것이 중요하다고 생각되어 이 글을 작성하게 되었다.

 

---

 

✅ PWA ( Progressive Web App)

웹 사이트를 모바일 앱처럼 설치해서 사용할 수 있는 기술

웹이지만 어플리케이션처럼 URL 창도 제거되며 바탕화면에 바로가기를 추가하여 사용할 수 있도록 만든 기술이다.

때문에, 기존의 앱처럼 인스톨 과정없이 사용할 수 있으며, 알림 메시지나 디바이스들의 하드웨어적인 기능( 👉 카메라나 GPS등)을 사용할 수도 있다.

 

그렇다면 PWA는 언제 유용한 것일까?

 

1. 기본 앱의 기능이 있는 다중 플랫폼 앱 필요
2. PWA를 웹(URL, 사이트)통해 검색엔진(네이버, 구글, 다음, 줌 등)에 노출되어 자연스럽게 유입을 통한 
   SEM( 검색엔진마케팅, Search Engine Marketing )이 필요할 때

---

📍 특징

1️⃣ APP 같이 보이는 서비스

앞서 언급한 대로, PWA를 적용한 서비스는 마치 APP처럼 홈스크린에 아이콘을 추가하여 사용할 수 있다.

 

2️⃣ 보안 연결 (HTTPS) 

 PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서만 서비스를 제공받을 수 있다.

따라서 일반 인터넷 데이터에 비해 보안이 강화된 상태이다.

 

3️⃣ Push 메시지 기능

APP의 주요 기술 중 하나인 Push가 가능하다는 것이다. 

서버의 필요에 의해 클라이언트에게 정보를 제공할 수 있게 한다.

 

4️⃣ Offline 접속 기능

PWA의 또 다른 핵심 기능은 캐싱 작업이다.

이를 통해 오프라인이나 속도가 느린 환경에서도 미리 다운로드 되어 있는 정보는 계속 확인이 가능하다.

---

📍장단점

PWA는 아래와 같은 장단점들을 가지고 있다.

장점	단점
Progressive 어떤 브라우저에도 사용자에게 적합하다.	네이티브의 기능을 모두 사용할 수 없고 OS에서 기능을 지원하지 않는다면 PWA에서 존재하더라도 사용할 수 없다.
반응형  Desktop, Mobile, Tablet 등	PWA 설치시 복잡한 방법을 요구하기에 실제로 사용자가 실행을 하는 과정이 불편할 수 있다.
연결 독립적 + 최신 상태 Service worker를 사용
검색엔진 최적화
링크 연결 가능
안전 HTTPS 사용

 

개발자 입장에서 바라보았을 때,

PWA는 개발 언어와 실행 용도 측면에서 비교적 간단하고, 개발 비용도 웹사이트 기반으로 운영되기에 비교적 저렴하다고 볼 수 있다.

또한, 배포 과정과 노출, 보안에 있어서도 APP보다는 편리하다는 것을 큰 장점으로 얻을 수 있다.

 

하지만 사용자 입장에서 바라보았을 때,

사실 아직까지는 Native App이 모바일 기능면에서 우수하다는 것과 PWA를 설치하는 과정에 불편함을 겪을 수도 있다는 것이 단점이다.

 

이러한 진입장벽에도 불구하고  PWA 성공사례 를 통해 PWA 기술에 대한 긍정적인 영향을 확인할 수 있다.

만약 앱개발에 대한 한계가 있는 비즈니스 모델인 경우에는 PWA를 통해 앱시장에 진입을 할 수 있다는 것도 사업성이 높다고 볼 수 있다.

 

필자인 나도 결론적으로 위 부분을 고려하여 Pic.me 서비스에 PWA를 도입하였다.

 

---

📍PWA 기술

PWA의 구현 기술은 단, 2가지 이다. 

 

1️⃣ Service Worker

Javascript 기반의 Web API의 한 종류로 백그라운드에서 실행되는 스크립트이다.

서비스 워커를 통해 캐싱 작업과 push 에 대한 프로그래밍 기술을 구현하게 된다.

 

 

✨ 등록단계  

1. install
   👉 등록 시작을 나타내는 단계
2. wait === installed
   👉 서비스 워커가 설정 완료 되어지고, 기존의 다른 서비스 워커를 사용하는 클라이언트가 종료될 때까지 대기
3. activate
   👉 다른 서비스 워커가 제어하고 있는 클라이언트가 존재하지 않아 접속한 클라이언트에서 서비스워커가 활성화

서비스워커의 이벤트

총 3단계를 거쳐 서비스 워커를 등록하는 과정이 진행된다.

해당 과정에서 알고 있어야 할 부분은 생명주기이다.

 

✨ 생명주기   

• 서비스 워커는 활성화된 상태에서만 Push, Fetch 등의 기능적인 제어가 가능하다
• 도메인당 한 개의 서비스 워커만 등록된다.
• 만약, 이미 등록되어있는 서비스 워커가 존재하면 업데이트 작업이 필요하다.
• 기존 서비스워커를 제거하고 새로운 서비스 워커로 대체하기 위해서는 self.skipWaiting( )의 작업이 필요하다.
• 서비스 워커 설치를 위해 필요한 작업들은 event.waitUntil( ) 내부에서 수행해야 한다.

 

이 두 가지를 고려하여 service-worker를 구성하면 PWA를 위한 기능 개발의 80%는 완료된다고 볼 수 있다. 

---

2️⃣ manifest.json

PWA를 설치할 때 아이콘의 이미지, 해당 아이콘을 눌렀을 때 접속할 페이지, PWA의 이름, 접속시 사용자에게 보여질 배경화면 등등에 대한 설정 파일이다. json을 사용해 용량이 적은 데이터를 교환하도록 구성되어 있다.

 

 

👇 해당 manifest.json은 Pic.me에 적용된 파일이다.

{
  "short_name": "Pic.me",
  "name": "친구가 골라주는 나의 베스트 Pic! Pic.me",
  "icons": [
    {
      "src": "Pic.me_logo.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "Pic.me_192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "Pic.me_512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#FF5D5D",
  "background_color": "#FF5D5D"
}

 

설정 요소들에 대한 의미를 알아보자.

• short_name : 필수 입력 사항으로 프로젝트 이름으로 설치된 아이콘 이름
• names: 필수 입력 사항으로 설치 배너에 표시되는 이름이며 검색의 키워드로 사용
• icons : 앱에서 필요한 다양한 크기의 아이콘을 지정, 이 중에서는 192px은 반드시 지정되어 있어야 하는 아이콘
• start_url : 필수 요소로 웹 앱이 실행될 때 가장 처음에 나오는 화면을 지정
• display : 웹 앱이 어떤 모양으로 사용자에게 보여질지 설정
  👉 browser (normal) 해당 브라우저에서 기본 웹으로 실행
  👉 standalone 상단의 url 바를 제거하여 native app 처럼 구동

// ios에서 standalone 사용시 해당 head 태그를 추가 해야한다
<meta name="apple-mobile-web-app-capable" content="yes">

        👉 fullscreen 화면 전체를 사용

• theme_color : 브라우저 상단의 URL입력바와 시스템 바를 포함한 색상을 지정
• background_color : 애플리케이션의 배경색

---

🌈 마무리

앞서 언급한 대로 safari에서 push 알림을 일부 지원하는 것에 대해 긍정적인 영향을 인지하고, 현재 내가 운영하고 있는 서비스에 이를 도입하고자 한다. 분명히 PWA의 장단점이 있기에 이는 지속해서 고민하며 개발을 해야 한다고 생각한다.

 

다음글에서 PWA의 구현 과정을 자세히 다뤄보고자 한다.