PWA (프로그레시브 웹 앱)
"Progressive Web Apps use modern web capabilities to deliver an app-like user experience that is fast, reliable, and engaging."
— 구글 개발자 포털(Google Developers)의 PWA 공식 가이드라인 첫머리.
앱스토어의 가혹한 30% 수수료와 까다로운 검수 과정을 우회해 보고자 웹 개발자들이 머리를 맞대고 짜낸 모바일 앱 흉내 내기 종합 선물 세트. 하지만 사파리(Safari) 브라우저를 지배하는 애플은 이 기술이 대중화되면 앱스토어 수수료 수입이 줄어들까 봐 아주 세련되고 집요하게 PWA를 견제하고 있다
1. 개요
PWA는 프로그레시브 웹 앱(Progressive Web App)의 약자로, 웹 브라우저 안에서 구동되는 단순한 웹페이지를 스마트폰의 일반 네이티브 애플리케이션처럼 사용할 수 있도록 진화시키는 최신 웹 표준 기술이다. HTML, CSS, 자바스크립트라는 표준 삼총사만으로 개발하며, 유저가 구글 플레이나 앱스토어에 접속해 다운로드할 필요 없이 웹 브라우저에서 '홈 화면에 추가' 버튼을 툭 누르는 것만으로 바탕화면에 진짜 앱처럼 설치된다.
단순히 아이콘 모양만 앱처럼 흉내 내는 바로가기 버튼이 아니다. 서비스 워커(Service Worker)를 활용해 인터넷이 끊긴 오프라인 상태에서도 이전에 읽은 화면을 보여주고, 백그라운드 상태에서 유저에게 푸시(Push) 알림을 보내며, 하드웨어(카메라, 블루투스, GPS 등) 기능까지 직접 제어하는 등 기막힌 능력을 자랑한다.(...)
2. PWA를 받치는 3대 기술 기둥
2.1. 서비스 워커 (Service Worker)
PWA의 알파이자 오메가다. 웹 브라우저 내부의 일반 탭과는 별개의 완전히 독립된 스레드로 돌아가는 백그라운드 자바스크립트 파일이다. 클라이언트 브라우저와 인터넷 망 한가운데에 버티고 서서 모든 네트워크 요청을 가로채는(Intercept) 일종의 프록시 서버 역할을 한다.
이를 통해 인터넷 요청이 올 때마다 '서버에서 가져올 것인가, 아니면 로컬 캐시에서 즉시 뱉어낼 것인가'를 스스로 영리하게 결정할 수 있다. 오프라인 환경에서도 웹앱이 번개처럼 켜질 수 있는 비결이 바로 이 서비스 워커 덕분이다.
2.2. 웹앱 매니페스트 (Web App Manifest - manifest.json)
스마트폰 운영체제(Android나 iOS)에게 '이 사이트는 평범한 웹이 아니라 모바일 앱으로 다뤄달라'고 안내하는 공식 설정 파일이다. 앱의 이름, 아이콘 파일의 경로, 테마 색상, 켰을 때 나오는 로딩 화면(Splash Screen), 주소창을 숨길지 여부 등을 정의해 둔다.1
2.3. HTTPS
서비스 워커는 네트워크 트래픽을 마음대로 훔쳐보고 조작할 수 있는 엄청난 권력을 쥐고 있다. 이 파일이 보안이 취약한 HTTP에서 작동했다가는 중간 해커가 악성 스크립트를 주입해 유저의 전체 트래픽을 가로채는 헬게이트가 열리기 때문에, 오직 HTTPS(혹은 개발용 로컬호스트) 연결 하에서만 구동되도록 웹 브라우저 엔진 차원에서 철저하게 물리적으로 원천 봉쇄해 두었다.
3. 애플(Apple)의 보이지 않는 세련된 견제
3.1. 사파리는 너희가 앱스토어를 피해 가는 꼴을 못 본다
PWA 생태계의 최대 장벽이자 고난은 구글 안드로이드가 아닌 애플 iOS 생태계에서 시작된다. 구글은 어떻게든 모바일 웹의 성능을 한계까지 끌어올리기 위해 PWA 기술 규격을 적극 제안하고 안드로이드 OS에 완벽 지원을 보장해 왔다.
반면 애플은 모바일 웹 환경이 네이티브 앱을 완전히 위협하게 되는 순간, 자신들의 연간 수십조 원짜리 황금알을 낳는 거위인 '앱스토어 인앱 결제 30% 수수료' 매출이 공중분해될 것을 누구보다 잘 알고 있다. 때문에 사파리 브라우저에서의 PWA 지원은 눈물겹도록 짜다.
아이폰 홈 화면에 추가한 PWA는 오랫동안 푸시 알림이 아예 작동하지 않았거나, 백그라운드 캐시 용량을 엄청나게 좁게 제어하여 조금만 안 써도 오프라인 캐시를 사정없이 지워버리는 등 교묘하고 치사한 하드웨어 기능 제한 정책을 고수해 왔다.(...) 최근 EU의 독점 금지 규제 압박에 마지못해 조금씩 기능을 풀어주고는 있지만, 여전히 애플 기기에서 PWA를 완벽히 네이티브처럼 굴리기는 가시밭길을 걷는 것과 같다.2
4. 관련 밈 및 드립
4.1. 영원불멸의 캐시 감옥 (Update Lock)
서비스 워커 캐싱 전략 중 'Cache-First'를 맹신하고 잘못 코딩했을 때 나타나는 최악의 버그 밈이다. 유저가 사이트에 들어올 때마다 최신 서버 코드가 아닌, 서비스 워커가 로컬 저장소에 고이고이 모셔둔 옛날 static 파일만 영원히 먼저 긁어다 화면에 뿌린다. 웹사이트 업데이트 소식을 듣고 새로고침(F5)을 사정없이 연타해 봤자, 요청 자체가 인터넷 망으로 나가지 않고 서비스 워커 선에서 철저히 씹혀서 구버전 화면만 뜬다. 유저 입장에서는 브라우저 전체 쿠키와 캐시를 수동으로 깡그리 삭제하는 초강수를 두지 않는 한 이 캐시 감옥에서 탈출할 수 없다.(...)
5. 여담
- 스토어 우회 등재: PWA는 웹 브라우저에서 직접 깔 수도 있지만, 구글의 TWA(Trusted Web Activity)나 다양한 래핑 도구를 이용하면 아주 약간의 포장만 씌워서 구글 플레이 스토어와 마이크로소프트 스토어에 공식 앱처럼 정식 업로드하여 유통할 수도 있다.
- 공룡 게임의 추억: 인터넷이 아예 연결되지 않은 비행기 모드 상태에서 크롬 브라우저를 켜면 나오는 '티라노사우루스 공룡 달리기 게임'이 대표적인 오프라인 구동 브라우저 캐싱과 서비스 워커 활용의 초기 아이디어 시연작이다.
- 데이터 깡패 방지: 서비스 워커 캐싱은 오프라인에서도 작동해서 빠르지만, 만약 캐싱 크기 제한이나 자동 수거(LRU Cache) 로직을 정교하게 구현해놓지 않으면 모바일 유저의 소중한 스마트폰 용량 수 기가바이트를 순식간에 쓰레기 캐시 파일로 점령해 버리는 민폐를 끼치기 십상이다.