PWA(Progressive Web App)의 개념과 실행 프로세스 이해

반응형

 

PWA(Progressive Web App)의 개념과 실행 프로세스 이해

pwa 이해 삽화 이미지

1. PWA(Progressive Web App)란 무엇인가?

PWA는 웹의 접근성과 네이티브 앱의 사용자 경험(UX)을 결합한 최신 웹 기술의 집합체입니다.

단순히 새로운 프레임워크나 언어가 아니라, 기존의 웹 애플리케이션에 특정 기술들을 더해 '앱처럼' 동작하게 만드는 일종의 성숙도 모델이라고 이해하시면 정확합니다.

 

🔸OS 직접 실행이 아닙니다: 설치 과정이 있지만, 실제로는 브라우저 엔진이 뒤에서 앱을 구동합니다.
🔸스토어 종속성이 없습니다: 반드시 앱 스토어를 거치지 않아도 URL만 있으면 즉시 '홈 화면에 추가'하여 설치할 수 있습니다.

 

✔️ PWA를 구성하는 핵심 3요소는 다음과 같습니다:

웹 앱
 └─ + Service Worker
 └─ + Web App Manifest
 └─ + HTTPS
 = PWA

🔸 Service Worker (서비스 워커):

브라우저의 백그라운드에서 실행되는 스크립트로, 오프라인 지원, 푸시 알림, 리소스 캐싱을 담당합니다.
🔸 Web App Manifest (웹 앱 매니페스트):

앱의 이름, 아이콘, 테마 색상 등 설치에 필요한 정보를 담은 JSON 파일입니다.
🔸 HTTPS (보안 연결):

서비스 워커와 같은 강력한 기능을 안전하게 사용하기 위한 필수 보안 환경입니다.

 

✔️ PWA가 "아닌 것" (오해 바로잡기)

PWA의 정체성을 명확히 하기 위해 흔히 혼동되는 개념들과 비교해 보겠습니다.

구분	PWA	비교 대상 특징
vs 네이티브 앱	브라우저 엔진 위에서 실행됩니다.	iOS / Android OS에서 직접 실행되며 전용 SDK로 빌드됩니다.
vs 하이브리드 앱	별도의 래퍼(Wrapper) 없이 브라우저 기술로만 구동됩니다.	WebView를 네이티브 껍데기 안에 담아 스토어에 배포하는 방식입니다.
vs 독립 런타임	Chrome, Safari 등의 브라우저 런타임을 공유합니다.	별도의 설치형 런타임 엔진을 필요로 하지 않습니다.

 

PWA는 결국 웹의 유연함과 앱의 성능을 결합한 형태입니다.

▸ 개발자 입장: 한 번의 개발로 웹과 모바일 앱(유사 경험)을 동시에 대응할 수 있어 경제적입니다.
▸ 사용자 입장: 설치의 번거로움 없이 빠른 속도와 오프라인 지원, 알림 등의 편의 기능을 누릴 수 있습니다.

 

2. PWA의 실행 구조: 웹 앱과의 관계

🔷 실행 주체 관점에서 본 구조 : 브라우저 중심의 실행 체계
PWA를 이해하는 가장 중요한 열쇠는 "코드를 실제로 실행하는 주체가 누구인가"를 파악하는 것입니다.

[사용자]
   ↓
[브라우저]
   ├─ HTML / CSS / JS 실행
   ├─ Service Worker 실행
   └─ 네트워크 요청 제어

PWA는 아이콘을 클릭해 독립된 창에서 실행되더라도, 실제 구동 엔진은 언제나 웹 브라우저(Chromium, WebKit 등)입니다.

 

▸ OS(운영체제)의 역할: OS는 단순히 브라우저라는 프로세스를 실행할 뿐, 앱의 비즈니스 로직에 직접 관여하지 않습니다.
▸ 브라우저의 역할: HTML/CSS/JS를 해석하여 화면을 그리고, 서비스 워커(Service Worker)를 관리하며, 네트워크 요청을 제어합니다.
▸ 사용자 경험: 사용자는 브라우저의 주소창이나 툴바가 없는 '독립 모드(Standalone)'를 통해 이를 일반 앱처럼 인지하게 됩니다.

 

🔷 일반 웹 앱과 PWA의 구조적 차이

두 기술은 뿌리가 같지만, 중간에 '누가 끼어 있는가'에 따라 전혀 다른 성능과 기능을 보여줍니다.

일반 웹 앱
 └─ 브라우저 → 서버 → 리소스 로드

PWA
 └─ 브라우저
     ├─ Service Worker (중간 계층)
     └─ 서버

 

✔️ 일반 웹 앱 (Standard Web App)

▸ 일반적인 웹 사이트는 사용자가 요청할 때마다 서버에서 데이터를 가져오는 직선적인 구조입니다.
▸ 구조: 브라우저 ↔ 네트워크(인터넷) ↔ 웹 서버
▸ 특징: 오프라인 상태에서는 접속이 불가능하며, 네트워크 속도가 느려지면 로딩 화면에서 멈추게 됩니다.

 

✔️ PWA (Progressive Web App)

▸ PWA는 브라우저와 네트워크 사이에 **'서비스 워커'**라는 강력한 중간 계층을 둡니다.
▸ 구조: 브라우저 ↔ [ 서비스 워커 / 캐시 스토리지 ] ↔ 네트워크 ↔ 웹 서버
▸ 특징: 네트워크 요청이 서비스 워커를 통과하므로, 인터넷 연결이 없어도 저장된 리소스를 즉시 반환할 수 있습니다.

 

🔷 핵심 엔진: 서비스 워커(Service Worker)의 역할

서비스 워커는 브라우저의 백그라운드에서 실행되는 스크립트 파일입니다.

 

PWA를 "웹"에서 "앱"으로 격상시키는 핵심적인 5가지 역할을 수행합니다.

① 네트워크 요청 가로채기 (Proxy)

브라우저가 서버에 리소스를 요청할 때 서비스 워커가 이를 먼저 수신합니다. "서버에 갈 것인가, 아니면 내가 가진 것을 줄 것인가?"를 결정하는 관제탑 역할을 합니다.

② 스마트한 리소스 캐싱 (Caching Strategy)
자주 사용하는 이미지, 스타일시트, 폰트 등을 로컬 기기에 저장합니다. 이를 통해 다음 방문 시 서버 통신 없이 즉시 앱을 실행할 수 있어 로딩 속도가 획기적으로 빨라집니다.

③ 오프라인 대응 (Offline Support)
인터넷 연결이 끊긴 상태에서도 사용자에게 "네트워크가 연결되지 않았습니다"라는 메시지 대신, 미리 저장된 오프라인 전용 페이지나 이전 데이터를 보여주어 서비스의 연속성을 유지합니다.

④ 백그라운드 동기화 및 업데이트
앱을 사용하지 않는 동안에도 서버와 데이터를 주고받아 최신 상태를 유지하거나, 사용자가 전송 버튼을 누른 후 오프라인이 되었을 때 다시 연결되면 자동으로 전송을 완료합니다.

⑤ 푸시 알림 처리 (Push Notifications)
브라우저가 닫혀 있는 상태에서도 서버로부터 메시지를 수신하여 사용자에게 알림을 보낼 수 있습니다. 이는 사용자 재방문을 유도하는 강력한 앱의 기능을 구현합니다.

반응형

 

3. PWA 설치·업데이트 프로세스 동작 원리

 

🔷 PWA 설치 프로세스 (사용자 관점) : "설치가 아닌 등록"

PWA의 설치는 무거운 파일을 내려받는 '다운로드'가 아니라, 브라우저가 웹사이트를 앱처럼 다루겠다고 '약속(등록)'하는 과정입니다

[웹사이트 방문]
      ↓
[PWA 조건 충족 여부 검사]
      ↓
[설치 가능 상태 인식]
      ↓
[홈 화면에 추가]

1. 웹사이트 방문: 사용자가 브라우저를 통해 URL에 접속합니다.
2. 환경 검사: 브라우저가 백그라운드에서 해당 사이트가 PWA 조건을 충족하는지 탐색합니다.
3. 설치 가능 알림: 조건이 충족되면 주소창에 설치 아이콘이 나타나거나 "홈 화면에 추가" 팝업이 뜹니다.
4. 아이콘 생성: 확인 버튼을 누르면 스마트폰 홈 화면이나 PC 바탕화면에 바로가기 아이콘이 생성됩니다.

 

🔷 PWA 설치 조건 : "신뢰와 구조"

브라우저가 웹사이트를 앱으로 승격시키기 위해서는 반드시 세 가지 보안 및 구조적 요건을 갖춰야 합니다.

HTTPS
  +
Manifest.json
  +
Service Worker

▸ HTTPS (보안): 데이터의 가로채기를 방지하기 위해 반드시 보안 연결이 필요합니다. 서비스 워커는 보안상 매우 강력한 권한을 가지므로 HTTPS가 필수입니다.
▸ Web App Manifest (manifest.json): 앱의 외형(아이콘, 이름)과 동작 방식(시작 페이지, 가로/세로 고정)을 정의한 설정 파일입니다.
▸ Service Worker (서비스 워커): 오프라인 지원, 푸시 알림, 캐싱 등을 담당하는 백그라운드 스크립트입니다. 이것이 있어야 앱다운 '성능'이 보장됩니다.

 

🔷 실행 프로세스

홈 화면 아이콘을 클릭했을 때, 단순한 북마크와는 다른 특별한 실행 과정이 진행됩니다.

[홈 화면 아이콘 클릭]
        ↓
[브라우저 실행]
        ↓
[start_url 로드]
        ↓
[Service Worker 개입]
        ↓
[캐시 또는 네트워크 응답]

1. 전용 창 실행 (Standalone Mode): 브라우저의 주소창, 뒤로 가기 버튼 등이 사라진 독립된 창으로 앱이 열립니다.
2. Service Worker 개입 (인터셉트): 네트워크 요청이 발생하기 전, 서비스 워커가 이를 가로챕니다.
3. 캐시 우선 전략 (Cache First): 서비스 워커는 네트워크 상태가 불안정해도 미리 저장해 둔 이미지나 스크립트를 즉시 보여주어 로딩 속도를 극대화합니다.
4. 네이티브 UI 제공: 하단 네비게이션 바나 스플래시 화면(로딩 화면) 등을 통해 웹이 아닌 앱을 사용하는 느낌을 줍니다.

 

🔷 업데이트(코드 반영) 프로세스 : "실시간 코드 푸시"

PWA의 가장 큰 장점은 "업데이트를 위해 앱 스토어 심사를 기다릴 필요가 없다"는 것입니다.

사용자가 수동으로 '업데이트' 버튼을 누를 필요가 없으며, 백그라운드에서 자연스럽게 이루어집니다.

코드 푸시(Code Push)와 같은 별도의 유료 솔루션 없이도 웹 기술만으로 앱 업데이트 관리가 가능합니다.

[서버에 새 코드 배포]
        ↓
[사용자 앱 실행]
        ↓
[Service Worker가 변경 감지]
        ↓
[새 리소스 백그라운드 다운로드]
        ↓
[다음 실행 시 반영]

1. 배포: 개발자가 서버에 새로운 코드(HTML, JS, CSS)를 올립니다.
2. 변경 감지: 사용자가 PWA를 실행하면 브라우저는 백그라운드에서 서버의 sw.js(서비스 워커 파일)가 1바이트라도 변했는지 체크합니다.
3. 대기 상태 (Waiting): 새로운 서비스 워커가 발견되면 이를 몰래 다운로드합니다. 하지만 현재 사용 중인 앱에 즉시 적용하면 충돌이 날 수 있어 '대기' 상태로 둡니다.
4. 활성화 (Activation): 사용자가 앱을 완전히 껐다가 다시 켜면, 대기하던 새 버전이 활성화되며 최신 코드가 화면에 반영됩니다.

 

4. PWA 적용이 적합한 서비스 유형과 기술적 한계

🔷 PWA 도입이 특히 적합한 서비스 유형

PWA는 브라우저 기반의 유연한 실행 구조와 '즉시 배포'라는 강력한 무기를 가지고 있습니다.

다음과 같은 특성을 가진 서비스에 도입했을 때 가장 큰 효과를 기대할 수 있습니다.

 

1. 콘텐츠 중심 서비스 (뉴스, 미디어, 블로그)

▸ 오프라인 가독성: 서비스 워커(Service Worker)를 활용한 캐싱으로 네트워크가 불안정한 환경에서도 읽던 콘텐츠를 계속 볼 수 있습니다.
▸ 푸시 알림: 새로운 기사나 추천 콘텐츠를 푸시 알림으로 전송하여 사용자 재방문을 유도합니다.
▸ 검색 최적화(SEO): 웹 기반이므로 포털 사이트 검색 결과에 노출되어 신규 유입을 늘리기에 유리합니다.

 

2. 이커머스 및 예약·주문 시스템

▸ 실시간 업데이트: 가격 수정, 이벤트 배너 교체 등을 앱 스토어 심사 없이 즉시 반영할 수 있습니다.
▸ 설치 장벽 완화: 앱을 다운로드받기 귀찮아하는 고객에게 홈 화면 추가(Add to Home Screen)를 통해 앱과 동일한 진입 경로를 제공합니다.
▸ 간편한 위치 기반 서비스: 매장 찾기나 배송지 설정을 위한 단발성 GPS 호출이 충분히 가능합니다.

즉시 배포가 중요하다           → PWA 적합
스토어 정책·OS 기능이 중요하다 → 네이티브 적합
고성능·백그라운드 필수         → 네이티브 / 하이브리드
운영 효율·개발 속도 우선       → PWA
센서·GPS를 "잠깐" 쓰면 충분    → PWA 가능
센서·GPS를 "계속" 써야 한다    → 네이티브 필요

 

🔷 공통 지원 항목 (Android & iOS)

참고:

https://brainhub.eu/library/pwa-on-ios

https://dev.to/daviekim13/building-progressive-web-apps-pwas-with-android-bridging-the-gap-2khh

기능	설명
카메라 및 마이크 (MediaDevices API)	기본적인 MediaDevices API는 양쪽에서 동작함.
지리 위치 (Geolocation API)	표준 Geolocation API 지원.
웹 푸시 (Web Push API)	iOS 16.4+에서 설치된 PWA에만 가능.
방향/가속도 (Device Orientation & Motion)	표준 센서 API로 지원되나 iOS에서는 권한 제약.
배지 (Badging API)	Android는 널리 지원, iOS는 제한적 혹은 없음. MDN/CanIUse 참조 필요.

 

🔷 PWA의 핵심 기술적 한계 (iOS의 제한적인 PWA 지원)

▸ 지속적 추적 불가: 앱이 완전히 종료되거나 화면이 꺼진 상태에서 GPS를 24시간 실시간으로 수집하는 것은 네이티브 앱에서만 원활합니다.

▸ 백그라운드 동기화: 네트워크가 연결되었을 때 데이터를 전송하는 'Background Sync'는 지원되나, 복잡한 작업 수행에는 한계가 있습니다.

▸ 기본 설정 제어: 시스템 설정(Wi-Fi 켬/끔, 밝기 조절 등)이나 통화 기록, SMS 메시지 데이터베이스에는 접근할 수 없습니다

▸ 타 앱과의 연동: 특정 시스템 서비스에 등록되거나 다른 앱 위에 UI를 띄우는 기능은 불가능합니다.

---

※ 게시된 글 및 이미지 중 일부는 AI 도구의 도움을 받아 생성되거나 다듬어졌습니다.

반응형