PWA(Progressive Web Apps)

date

Mar 1, 2023

thumbnail

gsc

Done

public

slug

introduce-pwa

author

Introdution

이 글 PWA(Progressive Web Apps)에 대해 설명하고, PWA는 웹과 앱의 장점을 간단하게 살펴보자.

PWA란?

PWA는 웹과 앱의 장점을 결합한 기술로, 모바일에서 앱과 같은 사용자 경험을 제공한다. 모바일 웹앱처럼 쉽게 개발하고 네이티브 앱과 똑같은 사용자 경험을 제공하는 것이 궁극적인 목표로 한다. 즉, 본질은 웹이지만 모바일 이용자들이 앱을 설치하지 않고도 모바일 웹에서도 앱 체험을 가능하게 한다는 것을 의미한다. 또한, PWA는 웹처럼 브라우저로 접속하지만 네이티브 앱처럼 홈 화면에 바로가기 아이콘을 만들 수 있고, 알림을 보내거나, 오프라인 상태에서도 동작 할 수 있다.

PWA의 특징

앱과 같은 사용자 경험 PWA는 앱과 비슷한 사용자 경험을 제공하며, 따라서 사용자는 앱을 다운로드할 필요 없이 모바일 브라우저에서 PWA를 실행할 수 있다. 또한, PWA는 사용자가 모바일 디바이스에서 앱을 다운로드하고 설치하는 것보다 훨씬 간편하다.

오프라인 기능 PWA는 오프라인에서도 작동할 수 있으며, 사용자가 인터넷에 연결되어 있지 않더라도 PWA는 로드되고 작동할 수 있다. 이는 사용자들이 인터넷 연결이 불안정한 지역에서도 앱의 기능을 사용할 수 있도록 한다.

빠른 로딩 속도 PWA는 빠른 로딩 속도를 제공하며, 이는 사용자 경험을 향상시키는 데 큰 역할을 한다. PWA는 브라우저 캐시를 이용하여 이미 다운로드된 콘텐츠를 복제하고, 사용자의 요청에 따라 서버와 통신하여 필요한 데이터만 동적으로 로드한다.

앱 스토어가 필요 없음 PWA는 앱 스토어에 등록할 필요가 없으므로, 개발자는 앱 스토어의 규정과 수수료로부터 자유로울 수 있다. 또한, 앱 스토어를 거치지 않고 바로 배포할 수 있어서 사용자들이 최신 버전의 앱을 빠르게 이용할 수 있다.

PWA 필수 요소

PWA를 적용하기 위해서는 아래 3가지 요소가 반드시 필요하다.

Service Worker

Manifest

HTTPS

Service Worker

PWA의 핵심은 단연 Service Worker로, 웹 브라우저 안에 있지만 웹 페이지와는 분리되어 백그라운드에서 실행되는 프로그램을 말한다. 이전에는 웹에서 불가능했던 많은 작업을 수행할 수 있으며, Service Worker를 제어하여 장치와 더 긴밀하게 통합되어 앱과 유사한 기능의 Push 알림, 백그라운드 동기화 등을 제공할 수 있다. 또한, 캐시를 이용하여 오프라인 상태에서도 동작할 수 있다.

Service Worker 코드 예시는 다음과 같다.


// Service Worker 파일
// 캐시 이름
const CACHE_NAME = 'my-cache';

// 캐시할 파일 목록
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/main.js'
];

// Service Worker 설치
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Service Worker 활성화
self.addEventListener('activate', function(event) {
  console.log('Service Worker activated');
});

// 요청에 대한 캐시 응답 반환
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

Manifest

웹앱 매니페이스(manifest)란, 앱 소개 정보와 기본 설정을 담은 JSON 파일을 말한다. 이 파일은 웹앱의 이름과 소개글을 비롯해 아이콘, 화면 방향, 브라우저에서 아이콘, 배경색, 테마색상 등을 정의하며 PWA는 반드시 manifest.json이라는 파일 이름을 포함해야 한다.

아래는 예시 코드이다.


{
  "name": "My First PWA Project",
  "short_name": "MyPWA",
	"start_url": "./index.html",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    {
      "src": "/assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}


/*
"start_url" : 웹앱이 실행될 때 가장 처음 보여질 URL 설정
"display" : 웹 앱의 화면 형태 (browser, standalone, fullscreen)
"orientation" : 웹앱의 화면 방향(가로모드, 세로모드)
"icons" : 설치 시 앱의 아이콘 이미지와 크기 설정
...
*/

위의 예시 코드에서는 PWA의 이름, 짧은 이름, 테마 색상, 배경 색상, 화면 형태 등을 정의하고 있으며, PWA에서 사용될 아이콘 파일들에 대한 정보도 포함하고 있다.

속성 더보기

icons

앱 아이콘, 스플래시 화면에 사용되는 아이콘
기기 해상도에 따라 명시된 icon 리스트 중 적절한 크기의 이미지가 로딩됨
대부분의 기기에서 잘 보이려면 최소한 192x192 크기와 512x512 크기 2개 정도 제공하는 게 좋음
한 개의 이미지만 등록한다면 512x512 크기 제공

display

fullscreen, standalone, minimal-ui, browser 중에 설정
fullscreen: 전체화면 모드, 디바이스의 상태 바와 브라우저 주소창 등 영역이 없음(네이티브 앱과 비슷하게 동작)
standalone: 브라우저 주소창 영역이 없음
browser: 브라우저에서 앱을 실행
minimal-ui: 안드로이드, 데스크톱에서만 가능. 앱 내의 내비게이션 기능만 가능한 최소한의 UI만 노출됨

orientation

any, landscape, portrait, natural, primary, secondary 값 중에 선택
any: 디바이스의 세팅 값에 따름
landscape: 화면 너비가 높이보다 큰 방향
portrait: 화면 높이가 너비보다 큰 방향
primary: 디바이스의 방향에 따라 어떤 모드를 우선으로 선택할지
secondary: 디바이스의 방향에 따라 어떤 모드를 차선으로 선택할지

scope

웹 앱 내에서 열리는 URL 범위
scope에 포함되지 않은 항목의 경우 웹 앱이 아닌 브라우저에서 열림

출처: 홈 화면에 웹 바로가기를 추가하기(A2HS) | 카카오엔터테인먼트 FE 기술블로그 (kakaoent.com)

HTTPS

모든 PWA는 HTTPS를 사용해야 한다. HTTPS 프로토콜은 라이트하우스(lighthouse)라는 성능 평가 프로그램에서 인증을 받기 위한 의무 사항이며, 홈 화면 추가 기능은 HTTPS에서만 지원한다. HTTPS는 암호화 인증을 거쳐 보안을 강화한 웹 통신 규약으로 사용자들의 개인정보를 안전하게 보호한다.

PWA의 장/단점

장점

사용자 경험 향상 PWA는 사용자 경험을 향상시키는 데 큰 역할을 한다. 사용자는 앱을 다운로드하고 설치하는 과정이 없기 때문에, 쉽고 빠르게 앱을 이용할 수 있다.

높은 성능과 빠른 로딩 속도 PWA는 빠른 로딩 속도와 높은 성능을 제공한다. 이는 앱이나 모바일 웹보다 더 빠르게 로딩되고, 더 빠르게 실행되도록 설계되어있다.

앱 스토어 없이 배포 가능 PWA는 앱 스토어에 등록할 필요가 없다. 개발자는 PWA를 직접 배포할 수 있기 때문에, 앱 스토어의 규정과 수수료를 걱정하지 않아도 된다.

손쉬운 유지 보수 PWA는 모바일 웹과 동일하게 웹 기술을 이용한다. 따라서, 네이티브 앱 대비 특별한 유지 보수가 필요 없으며 업데이트가 용이하다.

단점

모든 브라우저에서 지원되지 않음 PWA는 모든 브라우저에서 지원되지 않을 수 있다. 따라서, 사용자들은 최신 브라우저를 사용해야 한다.

네이티브 앱보다는 기능이 제한적 PWA는 네이티브 앱보다는 기능이 제한적이다. 따라서, 앱에서 제공하는 모든 기능을 PWA에서 제공할 수 없다.

캐싱이 필요한 데이터 관리가 어려움 PWA에서는 캐싱이 필요한 데이터를 관리하기 어렵다는 단점이 있다. 이는 Service Worker의 캐시 API를 이용하여 해결할 수 있지만, 이를 구현하는 것이 쉽지 않을 수 있다.

PWA의 적용 사례

PWA가 적용된 사이트의 사례이다.

스타벅스: https://app.startbuck.com/

트위터: https://mobile.twitter.com/

알리익스프레스: https://m.aliexpress.com/

PC에서 PWA 살펴보기

스타벅스의 사이트를 예시로 간단하게 살펴보자.

사이트 접속

Starbucks로 접속하면, 브라우저 상단에 이미지와 같이 아이콘이 활성화 된다.

PWA 설치

클릭하면 앱 설치 안내창이 생성되며, 설치 버튼을 클릭한다.

설치 완료

이미지와 같이 앱 처럼 생성된다.

MacOS: 맥의 경우 Launch Pad를 들어가면, 앱과 같이 표시된다. Windows: 바탕화면 혹은 시작메뉴에서 Starbucks의 앱을 찾을 수 있다.

실행 결과

웹의 형태가 아닌 앱과 같이 실행되며, 별도의 프로세스가 띄워진다. 마치 하나의 프로그램처럼 동작하는것을 볼 수 있다.

모바일(아이폰)에서 PWA 살펴보기

PC의 예시에서 살펴본 Starbucks 사이트에서 확인해보자.

설치하기

이미지와 같은 아이콘을 클릭한다. — 이미지와 같은 `아이콘`을 클릭한다.

홈 화면에 추가 항목을 클릭한다. — `홈 화면에 추가` 항목을 클릭한다.

실행 결과

이와 같이 앱처럼 동작하며, 실제로 프로세스가 이미지(오른쪽)와 같이 Safari와 분리된것을 확인 할 수 있다.

마무리

PWA는 웹과 앱의 장점을 결합한 기술로, 사용자 경험을 향상시키는 데 큰 역할을 한다. PWA는 앱과 비슷한 사용자 경험을 제공하면서도, 앱 스토어에 등록할 필요가 없기 때문에 개발자들이 쉽게 배포할 수 있다는 장점이 있다. 하지만, PWA는 모든 브라우저에서 지원되지 않으며, HTTPS 적용이 필수적이기 때문에 구현하기 어려울 수 있다는 단점이 있다. 따라서, PWA를 적용하기 전에 장단점을 충분히 고려하여야 한다.