목차
새로 모바일 앱을 개발할 때 "웹 앱으로 갈까, 네이티브 앱으로 갈까?" 하는 고민을 해보신 적 있으신가요? 저도 최근 회사에서 제가 개발하고 있던 기존 메인 서비스 외에 별도의 서브 앱을 개발해야 하는 상황에 놓이면서 이 고민을 하게 되었어요. 그 고민 끝에 선택한 것은 바로 PWA(Progressive Web App) 라는 기술이에요. 신규 앱의 주 사용자 환경, 현재의 개발 인력 상황, 그리고 알림 및 오프라인 사용 가능성까지 고려했을 때 PWA가 가장 현실적이고 효율적인 선택이라고 판단했어요.
이번 글에서는 PWA의 개념, 활용 사례, 적용 방법, 그리고 적합한 서비스 유형까지 정리해 드릴게요.
추가로 제가 회사에서 PWA 기술을 적용한 신규 앱에 대한 소개와 PWA 기술을 선택한 구체적인 이유는 "2024 엘리스 홈커밍데이" 행사에서 제가 직접 발표한 아래 기술 세미나 영상에서 자세히 확인하실 수 있어요. 👇
기술 세미나 발표에 대한 회고는 아래 글에서 확인하실 수 있어요.👇
”2024 엘리스트랙 홈커밍데이 발표자로 참여한 이야기”
PWA란 무엇인가요?
PWA(Progressive Web App)은 Google에서 발표한 기술 중 하나로 웹 앱의 가벼움과 네이티브 앱의 성능을 결합한 형태예요. 쉽게 말해 웹 기술(HTML, CSS, JS)로 만든 앱인데, 마치 네이티브 앱처럼 동작하고 푸시 알림도 보낼 수 있고, 오프라인에서도 작동할 수 있어요. 사용자는 별도 앱 다운로드 없이 브라우저에서 바로 실행할 수 있기 때문에 접근성이 뛰어나죠.
한 줄로 정의하면
“PWA는 앱 같은 사용자 경험을 제공하는 웹 앱입니다.”
즉, 사용자는 브라우저에서 이용하면서도, 설치된 앱처럼 느껴지는 경험을 하게 되는 거죠.
PWA에 대해 더 자세히 알아보기 전에 웹 앱(Web App)과 네이티브 앱(Native APP)은 무엇인지 한번 짚어볼게요.
웹 앱(Web App)
웹 앱은 우리가 흔히 접하는 브라우저에서 실행되는 앱 형태예요. 설치 없이 주소(URL)만 있으면 바로 접근할 수 있어서, 사용자 입장에서는 굉장히 편리하죠.
대표적인 예시로는 Gmail, Google Map 등을 들 수 있어요.
웹 앱의 주요 특징은 다음과 같아요.
- 웹 브라우저를 통해 실행되어 별도 앱 설치가 필요 없어요.
- URL만 알면 언제 어디서든 접근 가능하며 링크 공유도 간편해요.
- HTML, CSS, JavaScript 등 친숙한 웹 기술로 개발할 수 있어 진입장벽이 낮아요.
- 디바이스에 별도의 설치 없이 사용 가능해요.
이런 특성 덕분에 웹 앱은 접근성과 사용 범위(Reach)가 매우 넓어요.
하지만 단점도 있어요.
- 푸시 알림, 오프라인 모드, 하드웨어 제어 같은 고급 기능은 제한적이에요.
- 네이티브 앱처럼 매끄러운 사용자 경험을 제공하기에는 기술적 한계가 있어요.
그래서 웹 앱은 "빠르게 배포하고 많은 사용자에게 도달하고 싶을 때"는 적합하지만, "성능이나 디바이스 기능 활용이 중요한 경우"에는 다소 부족함이 있어요.
네이티브 앱(Native Application)
네이티브 앱은 말 그대로 운영체제(OS)에 직접 설치되는 애플리케이션이에요.
우리가 스마트폰에서 자주 사용하는 카카오톡, 인스타그램, 토스 같은 앱들이 모두 여기에 해당하죠.
네이티브 앱의 주요 특징은 다음과 같아요.
- 모바일 운영체제(iOS, Android) 또는 데스크톱 운영 체제(macOS, Windows)에 직접 설치해서 사용해요.
- 카메라, 마이크, GPS, 블루투스 같은 디바이스의 하드웨어 기능에 직접 접근할 수 있어요.
이런 특성 덕분에 네이티브 앱은 기술적 능력(Capability)이 뛰어나요.
하지만 단점도 있어요.
- 개발 시 Swift, Kotlin, Java처럼 각 플랫폼에 맞는 고유한 언어나 도구를 사용해서 개발해야 해요.
- 앱을 사용하려면 반드시 앱 스토어 또는 다운로드 링크를 통해 사용자가 직접 설치가 필요해요.
그래서 네이티브 앱은 “고성능, 하드웨어 제어, 앱 같은 UX”가 중요한 경우엔 최고의 선택이지만, “빠르게 배포하고, 접근성을 높이고 싶을 때”는 다소 제약이 될 수 있어요.
PWA의 장점은?
1. 일반적인 웹 기술을 활용해서 PWA를 개발 가능
PWA는 일반적인 웹 기술인 HTML, CSS, JavaScript 같은 일반적인 웹 기술만으로 개발할 수 있어요. 즉, 별도의 모바일 앱 기술이나 플랫폼별 언어를 따로 배울 필요가 없죠.
2. 개발 비용이 더 저렴
PWA를 이용하면 Android, iOS, 데스크톱, 태블릿 등 여러 플랫폼에서 모두 사용 가능한 단일 앱을 만들 수 있어요. 덕분에 iOS 용, Android 용 등 각 플랫폼별로 네이티브 앱을 따로 개발할 필요가 없죠.
3. 다양한 앱 스토어에 출시하기 위해서 별도의 프로세스 불필요
PWA는 브라우저에서 바로 실행되기 때문에, App Store나 Play Store 같은 앱 마켓에 꼭 등록할 필요가 없어요. 즉, Google Play Store나 App Store의 깐깐한 심사나 배포 승인 같은 복잡한 과정을 생략할 수 있다는 뜻이죠.
4. 필요 시 Google Play Store에도 등록 가능
PWA는 앱스토어 등록이 필요 없지만, 원한다면 Google Play Store에도 등록할 수 있어요.
자세한 등록 가이드는 아래 문서를 참고해 주세요.
Google Developers - Google Play에 프로그레시브 웹 앱 추가 가이드
5. 웹 푸시 알림을 지원
PWA는 웹 푸시 알림을 지원하여 앱을 실행하지 않아도 사용자에게 중요한 알림이나 메시지를 전달할 수 있어요.
PWA의 단점과 한계점은?
PWA가 위와 같은 많은 장점을 가지고 있다고 해도, 모든 상황에서 완벽한 선택지는 아니에요. 브라우저 호환성과 하드웨어 접근성 면에서 몇 가지 제약이 존재해요.
1. 제한된 브라우저 지원
PWA는 비교적 최신 기술이기 때문에, 모든 브라우저에서 완전히 동일하게 작동하지는 않아요. 특히 오래된 브라우저나 일부 플랫폼(특히 iOS Safari)에서는 PWA의 핵심 기능 일부가 제한되기도 해요.
예를 들어, iOS의 Safari는 웹 푸시 알림을 아주 최근에야 지원하기 시작했고, 아직도 일부 제약이 존재해요.
그렇기에 PWA로 개발하고자 하는 앱의 사용자 브라우저 환경을 분석하고, 핵심 기능이 얼마나 잘 작동하는지 사전 테스트가 필요해요.
2. 제한된 하드웨어 엑세스 및 네이티브 기능
PWA는 기본적으로 웹 기술 기반이기 때문에, 네이티브 앱만큼 하드웨어나 시스템 레벨 기능에 자유롭게 접근하기 어려워요.
✅ 접근 가능한 기능들
다행히, 다음과 같은 기능들은 대부분 브라우저에서도 잘 지원돼요.
- 위치 정보(Geolocation)
- 기기 방향 및 모션 센서
- 카메라 및 마이크 전체 접근
- 진동 기능
- 증강현실 기능(VR/VR)
❌ 아직 접근 불가능하거나 제한적인 기능들
- 시스템 설정 접근
- 예시: Wi-Fi 제어, 통화 제어 등
- 저수준 하드웨어 접근
- 예시: NFC, 블루투스, USB 포트, 파일 시스템 전역 접근 등
즉, 디바이스 제어가 중요한 서비스라면 PWA만으로는 부족할 수 있어요.🥲
PWA 많이 활용되고 있나?
그럼 실제로 PWA를 적용한 사례는 얼마나 있을까요?
생각보다 훨씬 많은 글로벌 기업들이 이미 PWA를 도입해서, 접근성 향상, 성능 최적화, 사용자 유지율 개선 등의 효과를 보고 있어요.
예시: Instagram, Tinder, X(구 트위터), Uber, Pinterest. Starbucks 등
그중에서도 대표적인 사례 두 가지를 소개할게요.
대표 사례 1. Starbucks
스타벅스는 자사 모바일 웹 서비스를 PWA로 리뉴얼하면서, 데이터 환경이 좋지 않은 지역이나 저사양 기기에서도 안정적인 사용이 가능하도록 최적화했어요.
앱 용량을 줄이고 오프라인 기능을 제공해, 인터넷 연결 없이도 메뉴 확인 및 주문 준비 가능하게 했죠. 그 결과, 모바일 웹의 일일 활성 사용자 수(DAU)가 두 배 이상 증가시켰어요.
다양한 환경에서도 끊김 없는 UX를 제공하고, 더 많은 사용자와의 접점을 만들어냈어요.
대표 사례 2. Tinder
글로벌 데이팅 앱 틴더도 PWA를 도입해 모바일 웹 경험을 최적화했어요.
특히 데이터 연결이 불안정한 지역에서의 퍼포먼스를 크게 개선했죠. 틴더의 경우에는 앱의 사이즈를 기존 앱 대비 약 1/10 수준의 가벼운 용량으로 다이어트해서 좋지 않은 네트환경 속에서도 빠르게 서비스를 로드할 수 있도록 개선했어요.
덕분에 더 많은 유저들이 가볍게 접근하고, 앱 설치 없이도 서비스를 체험하게 되었어요.
이처럼 스타벅스와 틴더는 PWA를 통해 비용은 줄이고, 사용자 경험은 오히려 더 강화하는 효과를 봤어요. PWA가 단순히 기술적 대안이 아니라, 전략적인 선택이 될 수 있다는 걸 보여주는 좋은 예죠.
PWA를 일반 웹 앱에 적용하기 위해서는?
기존 웹 앱에 PWA 기능을 적용하기 위해서는 어떻게 해야할까요?
생각보다 어렵지 않아요. 아래 3가지만 제대로 준비하면, 웹 앱을 PWA로 만들 수 있어요.
1. manifest.json - 앱의 정보를 담는 파일
manifest.json은 웹 앱의 메타데이터를 담고 있는 JSON 파일이에요.
홈 화면에 앱을 설치했을 때 어떤 이름으로 보일지, 어떤 아이콘을 사용할지 등을 정의하죠.
주요 설정 항목
name,short_name: 앱 이름 및 축약형 이름start_url: 앱 실행 시 시작할 경로icons: 홈 화면/앱 목록에 표시될 아이콘theme_color,background_color: 테마 색상과 배경 색상display: 앱이 어떤 형태로 표시될지 (예: standalone, fullscreen 등)
사용자가 앱을 설치했을 때 네이티브 앱처럼 보이게 해주는 필수 요소예요.
2. service-worker.js – 오프라인 캐싱과 푸시 알림의 핵심
service-worker.js는 브라우저의 메인 스레드와는 별개로 백그라운드에서 동작하는 JavaScript 파일
이에요. 이 파일이 있어야 오프라인 캐싱, 백그라운드 데이터 동기화, 푸시 알림 같은 기능들이 가능해져요.
주요 역할
- 정적 리소스 캐싱 → 오프라인에서도 앱이 동작 가능
- 백그라운드 푸시 알림 수신 및 표시
3. HTTPS 적용 - 신뢰할 수 있는 보안 연결
PWA는 사용자의 디바이스에 설치되거나, 푸시 알림을 보내거나, 오프라인 데이터를 저장하는 등 민감한 권한을 다루는 기술이에요. 그래서 보안을 보장할 수 있는 HTTPS 연결이 필수 조건이죠.
Service Worker는 HTTP 환경에선 동작하지 않아요.❌
정리하자면
| 구성 요소 | 역할 | 필수 여부 |
|---|---|---|
manifest.json | 앱 메타 정보 제공 (아이콘, 이름, 테마 등) | ✅ |
service-worker.js | 오프라인 지원, 푸시 알림 등 핵심 기능 | ✅ |
| HTTPS | 보안 연결, 권한 획득 조건 | ✅ |
이 세 가지를 조건을 갖추기만 해도, 브라우저가 “이건 설치 가능한 앱이구나!”라고 인식하게 되고, 홈 화면에 앱처럼 추가하거나 푸시 알림을 보내는 등 다양한 기능이 활성화돼요.
어떤 서비스를 개발할 때 PWA를 선택하는 게 좋을까?
PWA는 모든 서비스에 무조건 적합한 기술은 아니에요. 하지만 다음과 같은 조건을 가진 서비스라면, PWA가 빠르고 최적의 선택이 될 수 있어요.
- 설치형 앱처럼 보이되, 실제 설치 없이 사용하게 하고 싶을 때
- 웹과 모바일, 데스크톱을 동시에 커버해야 할 때
- 빠르게 MVP를 만들어야 할 때
- 네트워크가 불안정한 환경에서도 앱처럼 작동하길 원할 때
- 푸시 알림 기능이 필요할 때
마무리
이번 글에서는 제가 실제로 회사에서 PWA 기술을 선택했던 경험을 바탕으로, PWA가 무엇인지, 언제 사용하면 좋은지, 어떻게 적용할 수 있는지까지 함께 살펴봤어요. 활용 사례 섹션에서 소개해 드린 구글, 우버처럼 실제로 미국의 여러 빅테크 기업들은 이미 PWA를 적극적으로 활용해 앱과 유사한 사용자 경험, 오프라인 지원, 푸시 알림 등 다양한 장점을 비즈니스 임팩트로 연결하고 있어요.
반면, 아직 국내에서는 PWA에 대한 인식이나 활용 사례가 많지 않다는 점이 조금 아쉽더라고요. 그래서 이 글을 통해 “앱을 꼭 네이티브로만 만들어야 할까?”라는 질문에 대해 PWA라는 또 하나의 선택지가 있다는 걸 더 많은 분들이 알게 되었으면 좋겠어요.