icon
15장 : 최신 웹 기술 동향

Progressive Web Apps (PWA) 소개

우리는 지금까지 웹 개발의 방대한 여정을 함께했습니다. 프론트엔드와 백엔드의 핵심 기술들을 익히고, 데이터베이스 연동, 웹 보안, 성능 최적화, 그리고 Git, npm, Webpack 같은 필수 개발 도구들까지 두루 섭렵했습니다. 이제 여러분은 어엿한 웹 개발자로서 기본적인 웹 애플리케이션을 기획하고 개발하며 배포할 수 있는 역량을 갖추게 되었습니다.

하지만 웹 기술은 끊임없이 발전하고 변화합니다. 어제의 최신 기술이 오늘의 표준이 되고, 오늘의 트렌드가 내일의 필수 역량이 될 수 있습니다. 마지막 15장에서는 이러한 웹 기술의 빠른 흐름 속에서 현재 주목받고 있으며 미래 웹 개발의 방향성을 제시하는 주요 기술 동향들을 살펴볼 것입니다.

그 첫 번째 장으로, 웹 애플리케이션이 네이티브 앱과 같은 사용자 경험을 제공하도록 만드는 기술인 PWA(Progressive Web App) 를 소개합니다. PWA는 모바일 시대에 웹이 나아가야 할 방향을 제시하며, 설치, 오프라인 지원, 푸시 알림 등 기존 웹의 한계를 뛰어넘는 새로운 가능성을 열어주고 있습니다.

PWA (Progressive Web App)란?

PWA (Progressive Web App) 는 웹 기술(HTML, CSS, JavaScript)을 사용하여 개발되었지만, 네이티브 애플리케이션(iOS, Android 앱)과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. PWA는 웹의 장점(설치 필요 없음, URL 기반 접근 용이성, 빠른 개발 및 배포)과 네이티브 앱의 장점(오프라인 지원, 푸시 알림, 홈 화면 아이콘, 시스템 자원 접근)을 결합하여 사용자에게 더욱 풍부하고 편리한 경험을 제공하는 것을 목표로 합니다.

왜 PWA가 중요한가?

  • 설치 장벽 낮춤: 사용자는 앱 스토어 방문, 다운로드, 설치 과정 없이 웹사이트 방문만으로 PWA를 사용하고, 필요하면 홈 화면에 추가할 수 있습니다. 이는 사용자 유입 장벽을 크게 낮춥니다.
  • 접근성 향상: 낮은 네트워크 환경에서도 동작하며, 푸시 알림을 통해 사용자 재참여를 유도할 수 있습니다.
  • 개발 및 유지보수 효율: 하나의 코드베이스로 모든 플랫폼(웹, 모바일)에 대응 가능하여 개발 비용과 시간을 절감합니다. 웹 표준 기술을 사용하므로 별도의 스킬셋을 익힐 필요가 적습니다.
  • SEO 이점: 웹사이트이므로 검색 엔진에 노출되며, 빠른 로딩 속도와 좋은 사용자 경험은 SEO 랭킹에도 긍정적인 영향을 미칩니다.

PWA의 핵심 구성 요소

PWA는 다음 세 가지 핵심 기술과 여러 권장 사항을 바탕으로 구현됩니다.

서비스 워커 (Service Worker)

  • PWA의 심장: 서비스 워커는 웹 페이지와 독립적으로 백그라운드에서 실행되는 JavaScript 파일입니다. 네트워크 요청을 가로채고, 캐싱 전략을 프로그래밍 방식으로 제어하며, 푸시 알림을 수신하는 등 강력한 기능을 수행합니다.
  • 주요 기능
    • 오프라인 지원 (Offline-first): 네트워크 연결이 없거나 불안정한 환경에서도 캐시된 콘텐츠를 제공하여 웹 앱이 동작하도록 합니다.
    • 빠른 로딩: 네트워크 요청을 가로채 캐시된 리소스를 즉시 반환함으로써 페이지 로딩 속도를 비약적으로 향상시킵니다.
    • 푸시 알림 (Push Notifications): 사용자가 웹 앱을 닫은 상태에서도 서버로부터 푸시 메시지를 받아 알림을 표시할 수 있게 합니다.
    • 백그라운드 동기화: 네트워크가 다시 연결될 때까지 데이터를 저장하고 있다가 백그라운드에서 서버와 동기화할 수 있습니다.
  • 동작 방식 (간략)
    1. 웹 페이지에서 서비스 워커를 등록(Register)합니다.
    2. 브라우저는 서비스 워커 파일을 다운로드하고 설치(Install)합니다. 이 단계에서 필요한 에셋들을 캐시에 저장할 수 있습니다.
    3. 서비스 워커가 활성화(Activate)되면 이후 모든 네트워크 요청을 가로채서(Fetch) 개발자가 정의한 캐싱 전략에 따라 응답을 제공합니다.

웹 앱 매니페스트 (Web App Manifest)

  • PWA의 신분증: 웹 앱 매니페스트는 JSON 형식의 파일로, PWA의 메타데이터(이름, 아이콘, 시작 URL, 표시 방식 등)를 정의합니다.
  • 주요 기능
    • 홈 화면 아이콘: 사용자가 PWA를 홈 화면에 추가했을 때 표시될 아이콘을 정의합니다.
    • 시작 화면 (Splash Screen): 앱을 실행할 때 표시되는 스플래시 화면을 정의합니다.
    • 표시 모드 (Display Mode): PWA가 브라우저 UI 없이 독립적인 앱처럼 실행될지(standalone), 최소한의 UI를 가질지(minimal-ui), 아니면 일반 웹 페이지처럼 보일지(browser) 등을 설정합니다.
    • 시작 URL: PWA를 실행했을 때 로드될 초기 URL을 지정합니다.
  • index.html에 연결: <link rel="manifest" href="/manifest.json"> 형태로 HTML 파일에 연결합니다.

HTTPS

  • PWA의 필수 조건: PWA는 서비스 워커의 보안 및 무결성 문제 때문에 반드시 HTTPS 환경에서 호스팅되어야 합니다. 로컬 개발 환경(localhost)에서는 예외적으로 HTTP가 허용됩니다.
  • 보안과 신뢰: HTTPS는 웹 페이지와 서버 간의 통신을 암호화하여 데이터 유출 및 변조를 방지하고, 사용자에게 신뢰성을 제공합니다.

PWA의 주요 특징 및 장점

PWA는 네이티브 앱의 장점을 웹으로 가져오면서도 웹 본연의 장점을 유지합니다.

특징PWA네이티브 앱 (iOS/Android)
설치앱 스토어 불필요, 홈 화면 추가앱 스토어/플레이 스토어를 통해 설치
접근성URL로 직접 접근 가능, 즉시 사용검색/설치 과정 필요
오프라인서비스 워커로 지원 가능기본적으로 지원
푸시 알림지원 가능지원 가능
업데이트웹페이지처럼 자동으로 업데이트 (재방문 시)앱 스토어/플레이 스토어를 통해 수동 업데이트 또는 자동
개발 비용단일 코드베이스, 웹 기술 사용으로 효율적플랫폼별(iOS/Android) 개별 개발 필요 (높은 비용)
배포웹서버에 배포, 즉시 반영앱 스토어 심사 필요 (시간 소요)
시스템 접근제한적 (카메라, 마이크, GPS 등 일부 가능)전반적인 시스템 자원(주소록, 캘린더 등) 접근 용이
용량초기 다운로드 용량 적음일반적으로 용량이 큼
SEO검색 엔진 노출 용이검색 엔진 노출 어려움 (앱 스토어 내 검색 위주)

PWA 구현의 간단한 흐름 (예시)

  1. 매니페스트 파일 (manifest.json) 생성
    manifest.json
    {
  "name": "My Awesome PWA",
  "short_name": "My PWA",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  2. HTML에 매니페스트 링크 추가 
    <head>
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#000000">
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
  3. 서비스 워커 파일 (sw.js) 생성 및 캐싱 전략 정의
    sw.js
    // sw.js (간단한 예시 - 캐시 우선 전략)
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png',
  // ... 기타 중요한 리소스
];

// 서비스 워커 설치 시점에 캐시할 리소스 정의
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// 네트워크 요청 가로채기 (캐시 우선 전략)
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 캐시에 응답이 있으면 캐시된 응답 반환
        if (response) {
          return response;
        }
        // 캐시에 없으면 네트워크에서 가져옴
        return fetch(event.request).then(
          response => {
            // 가져온 응답을 캐시에 저장 (나중에 사용할 수 있도록)
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
            const responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });
            return response;
          }
        );
      })
  );
});

// 오래된 캐시 삭제
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});
  4. 메인 JavaScript 파일에서 서비스 워커 등록 
    // script.js (또는 index.js)
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered: ', registration);
      })
      .catch(error => {
        console.error('Service Worker registration failed: ', error);
      });
  });
}
  5. HTTPS 환경에서 서비스 배포. (또는 개발 시 localhost 사용)

참고: create-react-app과 같은 최신 프론트엔드 개발 도구들은 PWA 기능을 내장하고 있어, 별도의 설정 없이도 간단한 명령어로 PWA 빌드를 지원합니다. (예: CRA는 기본적으로 서비스 워커와 매니페스트 설정을 포함)

마무리하며

이번 장에서는 웹의 한계를 넘어 네이티브 앱과 같은 사용자 경험을 제공하는 PWA(Progressive Web App) 에 대해 학습했습니다.

여러분은 PWA가 무엇인지, 왜 중요한지, 그리고 서비스 워커(Service Worker), 웹 앱 매니페스트(Web App Manifest), HTTPS라는 세 가지 핵심 구성 요소가 어떻게 상호작용하여 오프라인 지원, 푸시 알림, 홈 화면 추가 등의 기능을 구현하는지 이해했습니다. 또한, PWA가 네이티브 앱과 비교했을 때 가지는 장점들을 파악하고, PWA를 구현하기 위한 간단한 코드 흐름을 살펴보았습니다.

PWA는 사용자에게 더 나은 웹 경험을 제공하고, 개발자에게는 효율적인 개발 및 배포 환경을 제공하는 강력한 기술입니다. 모든 웹 애플리케이션에 PWA가 필요한 것은 아니지만, 모바일 퍼스트 시대에 웹 서비스의 접근성과 사용성을 높이는 데 중요한 역할을 합니다. 이 장에서 배운 지식들을 바탕으로 여러분의 웹 애플리케이션을 PWA로 발전시켜 새로운 가능성을 탐색해 보시길 바랍니다.

Babel과 Polyfill

Previous Page

WebAssembly 기초

Next Page