[개발] 최신 웹 트렌드: Progressive Web App(PWA)

PWA란 무엇인가?

Progressive Web App(PWA)는 웹과 네이티브 앱의 장점을 결합한 웹 애플리케이션 개발 접근 방식입니다. PWA는 일반적으로 3가지 기준을 충족해야 합니다:

1. 신속한 로딩

PWA는 빠르게 로딩되어 사용자의 대기시간을 최소화합니다. 이를 위해 리소스 압축, 캐싱 등 다양한 최적화 기술을 적용할 수 있습니다. 예를 들어, Service Worker를 이용하여 캐싱 기능을 구현하고, 리소스를 사전에 다운로드하여 오프라인 상황에서도 로딩할 수 있습니다.

2. 앱 같은 사용자 경험

PWA는 네이티브 앱과 유사한 사용자 경험을 제공합니다. 사용자는 홈 화면에 앱 아이콘을 추가하고, 푸시 알림을 받을 수 있으며, 전체 화면 모드에서 실행할 수 있습니다. 또한, 오프라인 상황에서도 작동할 수 있어 일관된 경험을 제공합니다.

3. 업데이트 가능

PWA는 서버로부터 업데이트를 받아 자동으로 최신 버전으로 업데이트됩니다. 사용자는 매번 앱을 다운로드하거나 업데이트할 필요 없이 항상 최신 기능과 보안 패치를 이용할 수 있습니다.


// 예시 코드
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered:', registration);
      })
      .catch(error => {
        console.log('Service Worker registration failed:', error);
      });
  });
}

PWA의 장점

2.1 오프라인 동작

PWA는 오프라인 상황에서도 동작할 수 있는 능력을 갖추고 있습니다. 이를 위해 Service Worker를 사용하여 네트워크 요청을 가로채고 캐시에서 데이터를 반환할 수 있습니다. 사용자가 네트워크에 연결되지 않은 상태에서도 기존에 로딩한 콘텐츠를 볼 수 있어, 오프라인 동작이 필요한 애플리케이션에 매우 유용합니다.


// 예시 코드 - Service Worker를 이용한 오프라인 캐싱
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => {
        return cache.addAll([
          '/',
          '/index.html',
          '/styles.css',
          '/main.js'
        ]);
      })
  );
});

2.2 앱 같은 사용자 경험

PWA는 네이티브 앱과 유사한 사용자 경험을 제공합니다. 사용자는 홈 화면에 앱 아이콘을 추가하여 일반 앱처럼 실행하고, 전체 화면 모드로 실행할 수 있습니다. 또한, 푸시 알림을 통해 사용자에게 알림을 전달할 수 있습니다.

2.3 푸시 알림

PWA는 푸시 알림을 통해 사용자에게 중요한 정보를 제공할 수 있습니다. 사용자는 앱을 실행하지 않더라도 푸시 알림을 받을 수 있으며, 알림을 클릭하여 앱으로 바로 이동할 수 있습니다.


// 예시 코드 - Push API를 이용한 푸시 알림
self.addEventListener('push', event => {
  const title = '새로운 알림';
  const options = {
    body: '알림 내용',
    icon: '/icon.png',
    badge: '/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

PWA에 필요한 기술 스택

3.1 Service Worker

PWA의 핵심 요소인 Service Worker는 백그라운드에서 작동하는 스크립트로서 웹 애플리케이션과 브라우저 간의 중간자 역할을 합니다. Service Worker는 네트워크 요청을 가로채고 캐싱, 오프라인 동작 등을 처리할 수 있습니다.

3.2 Manifest 파일

Manifest 파일은 웹 애플리케이션의 설명서 역할을 합니다. 이 파일은 앱의 이름, 아이콘, 출시 화면의 배경색 등을 정의하여 사용자의 홈 화면에 추가되는 앱 아이콘의 모습을 결정합니다.

3.3 HTTPS

HTTPS는 PWA의 보안 요구사항 중 하나입니다. Service Worker를 등록하기 위해서는 HTTPS 연결이 필요하며, 사용자가 PWA를 이용하는 동안 데이터의 보안을 보장합니다.

3.4 Web App Manifest

Web App Manifest는 PWA의 설치와 실행에 필요한 정보를 정의하는 JSON 파일입니다. 이 파일은 앱의 이름, 아이콘, 색상, 시작 URL 등의 속성을 포함하며, 브라우저가 앱의 설치 화면 및 사용자 경험을 구성하는 데 사용됩니다.


// 예시 코드 - Web App Manifest
{
  "name": "PWA Example App",
  "short_name": "PWA App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

PWA 구현 방법

4.1 기존 웹 앱을 PWA로 변환하기

기존의 웹 앱을 PWA로 변환하는 것은 다음과 같은 단계를 따를 수 있습니다.

Service Worker 등록: Service Worker를 사용하여 네트워크 요청을 가로채고 캐싱할 수 있도록 등록합니다.
Manifest 파일 생성: Manifest 파일을 작성하여 앱의 이름, 아이콘 등을 정의합니다.
오프라인 지원 구현: Service Worker를 활용하여 오프라인 상황에서도 앱이 동작할 수 있도록 지원합니다.
푸시 알림 구현: 푸시 알림을 위한 푸시 서비스와 연동하여 알림을 제공할 수 있도록 구현합니다.

4.2 React Native로 PWA 개발하기

React Native를 사용하여 PWA를 개발하는 방법은 다음과 같습니다.

React Native 프로젝트 생성: React Native CLI 또는 Expo를 통해 React Native 프로젝트를 생성합니다.
React Navigation 설정: React Navigation을 사용하여 앱의 네비게이션을 구성합니다.
Service Worker 등록: Service Worker를 사용하여 네트워크 요청을 가로채고 캐싱할 수 있도록 등록합니다.
Manifest 파일 생성: Manifest 파일을 작성하여 앱의 이름, 아이콘 등을 정의합니다.
오프라인 지원 구현: Service Worker를 활용하여 오프라인 상황에서도 앱이 동작할 수 있도록 지원합니다.

4.3 Angular로 PWA 개발하기

Angular를 사용하여 PWA를 개발하는 방법은 다음과 같습니다.

Angular 프로젝트 생성: Angular CLI를 통해 Angular 프로젝트를 생성합니다.
Service Worker 설정: Angular Service Worker 모듈을 사용하여 Service Worker를 설정합니다.
Manifest 파일 생성: Manifest 파일을 작성하여 앱의 이름, 아이콘 등을 정의합니다.
오프라인 지원 구현: Service Worker를 활용하여 오프라인 상황에서도 앱이 동작할 수 있도록 지원합니다.
푸시 알림 구현: 푸시 알림을 위한 푸시 서비스와 연동하여 알림을 제공할 수 있도록 구현합니다.

PWA를 이용한 성공 사례

5.1 Twitter Lite

Twitter Lite는 PWA를 활용하여 만들어진 경량 버전의 Twitter 앱입니다. PWA의 장점인 빠른 로딩 속도, 오프라인 기능, 앱 아이콘 등을 제공하면서도 데이터 사용량을 크게 줄일 수 있습니다.

5.2 Flipkart

인도의 전자상거래 기업인 Flipkart은 PWA를 사용하여 사용자 경험을 향상시켰습니다. PWA로 구현된 Flipkart 웹 앱은 네트워크 속도가 느린 지역에서도 빠른 로딩 속도와 풍부한 기능을 제공하여 사용자들에게 편리한 쇼핑 경험을 제공합니다.

5.3 Pinterest

Pinterest는 PWA를 도입하여 사용자들이 앱을 쉽게 설치할 수 있고, 빠른 로딩 속도 및 오프라인 상태에서도 검색과 핀 저장을 지원합니다. 이를 통해 사용자들은 핀터레스트를 통해 찾은 아이디어를 언제 어디서나 손쉽게 저장하고 공유할 수 있습니다.

PWA의 한계와 개선 방향

6.1 한계

PWA는 많은 이점을 제공하지만 몇 가지 한계점이 있습니다.

기능 제한: 일부 하드웨어 기능에 접근하는 것이 제한적입니다. 예를 들어, 지문 인식, NFC 등과 같은 기능은 PWA에서 사용할 수 없습니다.
푸시 알림 제한: 푸시 알림은 푸시 서비스와의 연동이 필요하며, 현재 모든 브라우저가 이를 지원하지는 않습니다.
크로스 브라우저 지원 문제: PWA는 모든 브라우저에서 동일한 성능과 기능을 제공하지 않을 수 있습니다. 특히 오래된 버전의 브라우저에서는 지원되지 않을 수 있습니다.

6.2 개선 방향

PWA의 한계를 극복하고 더 나은 사용자 경험을 제공하기 위해 다음과 같은 개선 방향이 제시되고 있습니다.

기능 확장: 브라우저의 성능과 기능이 계속 발전하고 있는 만큼, PWA에서 지원하는 기능도 확장될 것으로 예상됩니다. 추가적인 하드웨어 기능에 대한 접근성 확대가 이루어질 수 있습니다.
푸시 알림 기능 개선: 브라우저들이 푸시 알림을 더욱 지원하게 됨에 따라, 푸시 알림 기능 역시 더욱 개선될 것으로 예상됩니다.
크로스 브라우저 지원 강화: 모든 브라우저에서 PWA를 완전히 지원하는 것은 어렵겠지만, 크로스 브라우저 호환성을 개선하여 더 많은 사용자들이 PWA를 이용할 수 있도록 할 것으로 예상됩니다.

PWA와 네이티브 앱의 가장 큰 차이점

7.1 개요

PWA와 네이티브 앱은 모바일 애플리케이션을 구축하는 두 가지 접근 방식입니다. 각각의 특징과 차이를 살펴보겠습니다.

7.2 PWA의 특징

웹 기술: PWA는 웹 기술을 사용하여 개발되며, HTML, CSS, JavaScript로 구현됩니다.
플랫폼 독립성: PWA는 여러 플랫폼에서 동작할 수 있으며, 모바일, 데스크톱, 태블릿 등 다양한 환경에서 사용할 수 있습니다.
웹브라우저에서 실행: PWA는 웹브라우저를 통해 실행되며, 앱 스토어에서 설치할 필요가 없습니다.
Responsive 디자인: PWA는 다양한 디바이스에 맞게 반응형 디자인을 제공합니다.
서비스 워커: PWA는 서비스 워커를 통해 오프라인 상태에서도 작동하고, 푸시 알림 등의 기능을 제공합니다.

7.3 네이티브 앱의 특징

모바일 플랫폼 SDK: 네이티브 앱은 iOS, Android 등 각각의 모바일 플랫폼에 맞는 SDK를 사용하여 개발됩니다.
플랫폼 종속성: 네이티브 앱은 해당 플랫폼에서만 동작합니다. iOS용 앱은 iOS 디바이스에서, Android용 앱은 Android 디바이스에서만 실행됩니다.
앱 스토어에서 설치: 네이티브 앱은 앱 스토어에서 다운로드 및 설치해야 합니다.
네이티브 기능 활용: 네이티브 앱은 플랫폼에 특화된 기능에 접근할 수 있으며, 네이티브 디자인 및 성능을 제공합니다.

7.4 코드 예시

// PWA 예시: 일반적인 PWA 구현

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PWA Example</title>
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Welcome to PWA Example</h1>
  <p>This is a progressive web app.</p>

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
        .then(registration => {
          console.log('Service Worker registered:', registration);
        })
        .catch(error => {
          console.log('Service Worker registration failed:', error);
        });
    }
  </script>
</body>
</html>

// manifest.json
{
  "name": "PWA Example",
  "short_name": "PWA Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e88e5",
  "icons": [{
    "src": "/icon.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "any"
  }]
}

// sw.js (Service Worker)
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

// 네이티브 앱 예시는 해당 플랫폼의 SDK를 사용하여 개발된 코드로 구성됩니다.

PWA의 미래 전망

8.1 점점 더 많은 기업이 PWA를 채택할 것

미래에는 더 많은 기업이 PWA를 채택할 것으로 예상됩니다. PWA는 더 나은 사용자 경험을 제공하고, 개발 및 유지보수 비용을 줄일 수 있기 때문에 많은 기업들이 PWA로 전환하고자 할 것입니다. 특히 모바일 사용자가 증가함에 따라 PWA의 중요성은 더욱 커질 것입니다.

8.2 웹 표준과 PWA의 발전

PWA의 미래에는 웹 표준의 발전과 함께 가다록 될 것으로 예상됩니다. 브라우저 및 웹 표준의 계속적인 발전은 PWA의 기능과 성능을 향상시킬 것입니다. 더 많은 하드웨어 기능에 대한 접근성 확대와 푸시 알림 기능의 개선 등이 이루어질 것입니다.

8.3 PWA와 네이티브 앱의 경계가 희석될 것

미래에는 PWA와 네이티브 앱 간의 경계가 점점 희석될 것으로 예상됩니다. PWA의 발전과 웹 표준의 개선으로 인해, PWA는 더욱 많은 네이티브 앱의 기능과 성능을 제공할 수 있게 될 것입니다. 또한, PWA를 네이티브 앱으로 변환하는 도구와 기술도 발전하여, PWA를 사용하여 개발한 애플리케이션을 네이티브 앱으로 변환할 수 있을 것입니다.

8.4 코드 예시

// 앱 매니페스트 파일 예시

{
  "name": "Example PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e88e5",
  "icons": [{
    "src": "/icon.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "any"
  }]
}

// PWA의 미래 전망은 더욱 발전할 것이며, 코드 예시의 예측된 향상과 함께 많은 기대를 가져옵니다.

PWA를 활용한 개발 지침과 팁

9.1 반응형 디자인 적용

PWA는 다양한 디바이스에서 동작하기 때문에, 반응형 디자인을 적용해야 합니다. 다양한 스크린 크기와 해상도에 대응하기 위해 미디어 쿼리를 사용하여 스타일을 조정하는 것이 중요합니다.

9.2 서비스 워커 구현

서비스 워커는 PWA의 핵심 요소입니다. 오프라인 상태에서도 작동하고, 푸시 알림 등의 기능을 제공할 수 있습니다. 사용자 경험을 향상시키기 위해 적절하게 서비스 워커를 구현해야 합니다.

9.3 웹 표준 준수

PWA의 특징은 웹 표준을 기반으로 개발된다는 점입니다. 따라서 웹 표준을 준수하여 PWA를 개발해야 합니다. HTML, CSS, JavaScript의 최신 기능 및 API를 활용하여 성능과 기능을 개선할 수 있습니다.

9.4 오프라인 캐싱

오프라인 상태에서도 사용자가 앱을 사용할 수 있도록 오프라인 캐싱을 구현해야 합니다. 서비스 워커를 통해 네트워크 요청을 관리하고, 캐시된 자원을 사용하여 오프라인 시에도 앱을 로드할 수 있도록 해야 합니다.

9.5 코드 예시

// 반응형 디자인 적용 예시

// styles.css
@media (max-width: 767px) {
  /* 모바일 화면에 대한 스타일 조정 */
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* 태블릿 화면에 대한 스타일 조정 */
}

@media (min-width: 1024px) {
  /* 데스크톱 화면에 대한 스타일 조정 */
}

// 서비스 워커 구현 예시

// sw.js (Service Worker)
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

// 웹 표준 준수는 기본적으로 HTML, CSS, JavaScript의 최신 표준을 준수하는 것을 의미합니다.

// 오프라인 캐싱 예시는 서비스 워커의 fetch 이벤트 핸들러에서 캐시를 확인하고 요청을 관리하는 방법을 보여줍니다.