PWA기술웹앱

PWA란 무엇인가? 앱 설치 없이 앱처럼 사용하기

Progressive Web App(PWA)의 개념과 장점을 쉽게 설명합니다. 왜 많은 서비스들이 PWA 방식을 선택하는지 알아보세요.

✍️ 감자월드 ·

“앱을 설치하지 않아도 앱처럼 쓸 수 있다고요?” 처음 들으면 이해가 안 될 수 있습니다. 오늘은 PWA(Progressive Web App)가 무엇인지, 왜 점점 많은 서비스들이 이 방식을 선택하는지 알아보겠습니다.

PWA란?

PWA(Progressive Web App, 프로그레시브 웹 앱)는 웹 기술로 만들었지만 네이티브 앱처럼 동작하는 웹 애플리케이션입니다.

일반 웹사이트와 네이티브 앱(iOS/Android 앱)의 중간 어딘가에 있다고 생각하면 됩니다.

특성일반 웹사이트PWA네이티브 앱
설치 필요❌선택적✅
오프라인 작동❌✅✅
홈화면 추가제한적✅✅
업데이트자동자동수동 (앱스토어)
용량거의 없음작음수~수백 MB
앱스토어 심사❌❌필요

PWA의 핵심 기술

PWA를 가능하게 하는 3가지 핵심 기술이 있습니다.

1. Service Worker

서비스 워커는 브라우저 백그라운드에서 실행되는 JavaScript 파일입니다. 네트워크 요청을 가로채서 캐시에서 응답하거나, 오프라인 상태에서도 저장된 데이터를 제공할 수 있습니다.

쉽게 말하면: 서비스 워커가 앱 데이터를 기기에 저장해두기 때문에, 인터넷이 없어도 앱이 작동할 수 있습니다.

2. Web App Manifest

manifest.json 파일로 앱의 이름, 아이콘, 색상, 시작 화면 등을 정의합니다. 이 파일 덕분에 홈 화면에 추가했을 때 일반 앱처럼 보입니다.

{
  "name": "Kids Content",
  "short_name": "키즈콘텐츠",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192" }
  ]
}

3. HTTPS

PWA는 반드시 HTTPS를 통해 제공되어야 합니다. 보안 연결이 있어야만 서비스 워커가 작동합니다.

PWA의 실제 장점

사용자 입장에서

설치 없이 사용 가능 앱스토어에서 찾고, 설치하고, 업데이트하는 번거로움이 없습니다. 브라우저에서 URL 입력하면 바로 사용 가능합니다.

홈 화면에 추가 가능 “홈 화면에 추가” 옵션으로 마치 네이티브 앱처럼 아이콘을 홈 화면에 배치할 수 있습니다. 이후에는 앱처럼 탭해서 실행됩니다.

오프라인 작동 서비스 워커가 데이터를 캐시해두기 때문에, 인터넷이 없어도 이미 접속했던 콘텐츠를 볼 수 있습니다.

가벼움 네이티브 앱은 설치 파일이 100MB가 넘는 경우도 있지만, PWA는 기기에 저장되는 데이터가 매우 적습니다.

개발자/서비스 입장에서

한 번 개발, 모든 기기에서 작동 iOS 앱, Android 앱, 웹사이트를 따로 만들 필요 없습니다. 웹 기술 하나로 모든 기기를 지원합니다.

앱스토어 심사 불필요 새로운 기능이나 버그 수정을 앱스토어 심사 없이 즉시 배포할 수 있습니다.

검색엔진에 노출됨 네이티브 앱은 검색엔진에서 찾기 어렵지만, PWA는 일반 웹페이지처럼 Google 검색에 노출됩니다.

유명 PWA 서비스들

이미 많은 글로벌 서비스들이 PWA를 제공합니다:

  • Twitter/X: PWA 버전이 네이티브 앱보다 빠르다는 평가
  • Pinterest: PWA 도입 후 참여율 60% 상승, 앱 설치율 44% 증가
  • Starbucks: PWA가 앱스토어 앱보다 99% 작은 용량
  • Uber: 느린 네트워크 환경을 위한 경량 PWA 제공

감자월드 서비스의 PWA 활용

감자월드의 서비스들은 PWA 방식으로 개발되었습니다.

Kids Content

Kids Content는 오프라인 사용이 핵심 기능이기 때문에 PWA가 필수적입니다. 처음 앱에 접속하면 서비스 워커가 모든 콘텐츠를 기기에 저장합니다. 이후에는 인터넷 없이도 완벽하게 작동합니다.

비행기 탑승 직전 한 번만 접속해두면, 비행 내내 아이가 오프라인으로 사용할 수 있습니다.

FlashLingo

FlashLingo 역시 PWA 방식입니다. 단어 카드와 학습 데이터를 브라우저에 저장하기 때문에, 지하철 터널처럼 인터넷이 약한 곳에서도 끊김 없이 학습할 수 있습니다.

PWA의 한계

PWA가 모든 면에서 네이티브 앱을 대체하지는 못합니다.

iOS에서의 제한:

  • Safari에서는 일부 PWA 기능이 제한됨
  • Push 알림 지원이 Android에 비해 늦게 지원됨

하드웨어 접근 제한:

  • 카메라, 블루투스, NFC 등은 네이티브 앱이 더 자유롭게 접근 가능

앱스토어 노출:

  • iOS/Android 앱스토어에 기본적으로 등록되지 않음 (별도 작업 필요)

따라서 카메라 앱, 헬스케어 앱, 게임 등 하드웨어 기능이 중요한 앱은 여전히 네이티브가 유리합니다. 반면 정보 제공, 학습, 간단한 도구 앱은 PWA가 충분합니다.

PWA 설치 방법

모바일에서

iOS (Safari):

  1. 공유 버튼(네모+화살표) 탭
  2. “홈 화면에 추가” 선택
  3. 이름 확인 후 “추가” 탭

Android (Chrome):

  1. 주소창 옆 메뉴(점 3개) 탭
  2. “앱 설치” 또는 “홈 화면에 추가” 선택

PC에서 (Chrome)

  1. 주소창 오른쪽 설치 아이콘 클릭
  2. “설치” 버튼 클릭

설치 후에는 일반 앱처럼 아이콘에서 바로 실행됩니다.

마치며

PWA는 웹과 앱의 장점을 결합한 현대적인 웹 개발 방식입니다. 사용자 입장에서는 편리하고, 개발자 입장에서는 효율적입니다. “웹인데 왜 이렇게 빠르고 오프라인도 되지?”라는 경험을 하게 된다면, 그것이 PWA입니다.

오프라인에서도 사용 가능한 PWA 앱들을 경험해보세요: Kids Content, FlashLingo

← 블로그 목록으로