PWA가 뭐지? 디자이너의 입장에서 쓰는 실제 적용 후기

디자인/실무 Tip

PWA가 뭐지? 디자이너의 입장에서 쓰는 실제 적용 후기

sing.song 2023. 3. 5. 11:00

현재 운영하는 자사 서비스 디자인은 웹 개발과 안드로이드/iOS 기반의 앱으로 각각 개발되어있다.

그러다가 PWA 도입에 대한 얘기가 들려왔고, 이 생소한 이름을 chatGPT에게 물어봤다.

아래 1번은 ChatGPT의 답변이다.

1. PWA가 뭐지?

PWA(Progressive Web App)는 모바일 및 데스크탑 웹사이트에서 제공하는 웹 어플리케이션으로, 기존의 웹사이트에 추가 기능을 더해 네이티브 앱과 유사한 기능을 제공한다.

오프라인 모드에서 작동: 캐시를 이용해 기본적인 기능 사용 가능
네이티브 앱과 비슷한 경험 제공 : UI, 성능, 동작 및 애니메이션을 제공
푸시 알림 기능 : 브라우저를 통해 푸시 알림을 제공
보안 강화 : HTTPS를 통해 안전한 연결을 제공
앱 스토어 없이 설치: 사용자는 앱 스토어에서 다운로드할 필요 없이 바로 설치 가능

PWA는 모바일 기기 및 데스크탑 모두에서 사용할 수 있으며, 브라우저와 플랫폼 제한 없이 제공한다. 이러한 이점으로 인해 PWA는 최근 웹 기술 트렌드 중 하나로 떠오르고 있다.

2. iOS도 가능할까?

PWA는 네이티브 고유의 기능들 중 일부를 웹에서 사용가능하게 하는것이다. 스토어에 올리지 않아 승인 과정도 없다.

다만, iOS에서는 PWA가 네이티브 앱처럼 작동하는 것이 아니라, 브라우저에서 열리는 웹앱으로 동작하게 된다.

Safari 브라우저를 통해 사용하며 홈 화면에 추가하여 앱 처럼 사용이 가능하다.

안드로이드와 달리 크게 아쉬운 점은 푸시 알림 기능이 불가능하다는 것이다.

그러므로, iOS에서도 PWA를 이용할 수 있지만, 네이티브 앱과 같은 기능을 모두 구현하는 것은 어렵고, iOS의 제한사항을 고려하여 개발해야 한다.

실무에서도 PWA를 도입하게된 계기가 푸시 알림 기능이었는데 iOS는 배제하고 진행하였다.

3. 디자이너가 해야할 일은 뭘까?

바로 앱 아이콘과 Splash(스플래시) 이미지 제작이다.

스플래시 이미지란 웹앱이 시작될 때 보여지는 로딩화면으로, 다양한 해상도와 크기의 디바이스에서 모두 깔끔하게 보여질 수 있도록 디자인되어야 한다. 직접 이미지를 전달할 수도 있겠지만 앱아이콘과 Manifest 값만 전달하였다.

https://webvista.co.in/pwa-splash-screen

4. Manifest(매니페스트)란?

매니페스트는 PWA의 설치 및 홈 화면에 대한 정보를 담고 있는 JSON 파일이다.

PWA 매니페스트는 다음과 같은 속성을 포함할 수 있습니다.

name: 서비스명
short_name: 사용자의 홈 화면에 표시될 때 사용할 간략한 서비스명
start_url: PWA를 시작할 때 사용되는 URL
display: PWA의 디스플레이 모드를 지정. (fullscreen, standalone, minimal-ui, browser 중 하나를 선택)
background_color: PWA의 배경색
theme_color: PWA의 테마 색상 (모바일 브라우저의 주소 표시줄과 PWA에서 상태바(status bar) 의 컬러)
icons: PWA 아이콘. 다양한 크기의 아이콘을 지정하여 다양한 기기 대응이 가능하다.
1. ✨ 필수 사이즈 : 192px(128dp)
description: PWA에 대한 설명.
orientation: PWA의 방향을 지정. (portrait, landscape-primary, landscape-secondary 중 하나를 선택)

이외에도 매니페스트는 scope, categories, lang, dir 등의 속성을 포함할 수 있다.

스플래시에서 사용한 것은 short_name,background_color,icons 3가지로 구성하였고, 상태바 컬러 지정을 위해 theme_color 값도 설정했다. (미 설정시 라이트/다크모드에 따른 기본값이 있음)

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#0078d7",
  "icons": [
    {
      "src": "/img/icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

5. PWA를 설치할 수 있는 필수 조건

HTTPS 프로토콜 사용 : HTTPS는 보안 연결 프로토콜로, 사용자의 개인 정보를 보호하고 데이터 전송 과정에서 정보 유출을 방지하는 데 중요한 역할을 한다. 브라우저에서는 HTTPS를 사용하지 않는 PWA를 인식하지 못하며, PWA 설치 기능을 지원하지 않는다.
매니페스트 필수 요소 지정 : name, background_color, start_url
앱 아이콘 지정 : 192px 크기 이상
Service Worker 지원: Service Worker는 브라우저의 백그라운드에서 실행되는 스크립트로, PWA의 오프라인 동작과 캐싱 기능을 제공

위 조건을 모두 충족하면, 사용자는 브라우저의 "설치" 버튼을 통해 PWA를 설치할 수 있다. 사용자는 PWA를 설치하면 앱 스토어에 등록된 일반적인 네이티브 앱처럼 홈 화면에 바로 추가된다.