스마트폰의 세상은 앱이 지배합니다. 하지만 한동안 앱은 데스크톱이나 브라우저 환경에는 그만큼 큰 영향을 미치지 못했습니다. 그러나 최근 몇 년 사이 상황이 크게 달라졌습니다. 프로그레시브 웹 앱(Progressive Web Apps, PWA)은 그 입지를 빠르게 넓혀가며 우리가 웹사이트와 상호작용하는 방식 자체를 바꾸고 있습니다.
그렇다면 프로그레시브 웹 앱은 정확히 무엇일까요? PWA는 일반 웹사이트와 무엇이 다를까요? 이 글에서 프로그레시브 웹 앱에 대해 반드시 알아야 할 모든 것을 정리해 드립니다.
프로그레시브 웹 앱이란?
프로그레시브 웹 앱은 사용자에게 일반 웹사이트를 제공하면서도 네이티브 모바일 앱처럼 보이고 작동하는 웹 애플리케이션입니다. PWA는 네이티브 모바일 앱의 뛰어난 사용성을 현대 브라우저의 기능과 결합하여, 두 분야의 발전을 최대한 활용하는 것을 목표로 합니다.
그렇다면 PWA를 정의하는 핵심 요소는 무엇일까요?
- 범용성(Universal): 브라우저 종류에 상관없이 모든 사용자에게 매끄럽게 작동해야 합니다.
- 반응형(Responsive): 노트북, 태블릿, 스마트폰 등 어떤 기기에서도 문제없이 작동해야 합니다.
- 디자인(Design): 네이티브 모바일 앱처럼 깔끔하고 찾기 쉬운 메뉴, 단순한 인터랙션으로 고급 기능까지 제공해야 합니다.
- 보안(Safe): HTTPS를 사용해 사용자 데이터를 안전하게 보호해야 합니다.
- 검색 가능성(Discoverable): 사용자가 쉽게 찾을 수 있고, 단순한 '사이트'가 아닌 하나의 '애플리케이션'으로 식별되어야 합니다.
- 참여 유도(Engagement): 푸시 알림 같은 네이티브 참여 기능에 접근할 수 있어야 합니다.
- 업데이트(Updates): 항상 최신 버전의 서비스나 사이트를 제공해야 합니다.
- 설치(Installation): 앱 스토어를 거치지 않고도 홈 화면에 손쉽게 '설치'할 수 있어야 합니다.
- 공유(Sharing): URL 하나만으로 설치 과정 없이 공유할 수 있어야 합니다.
이처럼 PWA는 네이티브 앱 특유의 간결한 기능과 인터페이스 디자인을 갖춘 완전한 웹 경험을 사용자에게 제공하는 것을 지향합니다.
프로그레시브 웹 앱은 어떻게 작동할까?
PWA의 핵심에는 바로 브라우저의 서비스 워커(Service Worker)가 있습니다.
서비스 워커는 브라우저 백그라운드에서 실행되는 스크립트로, "웹 페이지와 별개로 동작하기 때문에 웹 페이지나 사용자 상호작용이 필요 없는 기능의 문을 열어줍니다." 현재는 푸시 알림이나 백그라운드 동기화 같은 기능에서 서비스 워커가 활용되고 있으며, PWA의 미래에서는 이 스크립트들이 훨씬 더 강력한 역할을 하게 됩니다.
즉, 서비스 워커는 웹 캐시를 활용해 거의 즉각적인 결과를 제공함으로써 PWA 표준의 기반이 됩니다.
서비스 워커 이전에는 Application Cache(AppCache)가 대표적인 브라우저 캐시 스크립트였습니다. AppCache는 다양한 오프라인 우선(off-line first) 서비스에 활용되었지만 오류가 잦았고, A List Apart가 지적했듯 여러 잘 알려진 한계도 안고 있었습니다.
개발자 입장에서 가장 큰 문제는 AppCache의 작동 방식을 직접 제어할 수 없다는 점이었습니다. 이 때문에 문제가 발생해도 정확하게 수정하기 어려웠고, 결국 완전한 오프라인 기능을 갖춘 웹사이트나 서비스는 위험한 선택이 되어버렸습니다.
반면 서비스 워커는 필요한 동작이 있는 동안에만 실행됩니다. PWA에서 무언가를 클릭하거나 기능을 사용하면 서비스 워커가 즉시 작동하여 해당 이벤트를 처리하고, 오프라인 캐시로 요청을 처리할 수 있는지 판단합니다. PWA는 여러 개의 오프라인 캐시 중에서 선택할 수 있어 훨씬 폭넓은 오프라인 기능을 제공할 수 있다는 것이 핵심 아이디어입니다.
게다가 캐시는 단순히 오프라인 속도 향상을 위한 것만이 아닙니다. 예를 들어 PWA에 접속했는데 연결 상태가 매우 불안정하다면, 서비스 워커는 이전에 저장된 캐시를 제공해 사용자 경험을 끊지 않고 완전하게 작동하는 화면을 보여줍니다.
프로그레시브 웹 앱 브라우저 지원 현황
PWA를 사용하려면 두 가지 조건이 필요합니다. 호환되는 브라우저와 PWA를 지원하는 서비스입니다.
먼저 브라우저부터 살펴보겠습니다. PWA 브라우저 지원 여부를 확인하는 방법은 두 가지가 있습니다. 첫 번째는 Jake Archibald의 'Is Service Worker Ready?'로, 주요 브라우저와 삼성 인터넷의 PWA 지원 상태를 한눈에 보여줍니다.
더 자세한 정보가 필요하다면 Can I Use를 확인해 보세요. 이 사이트는 다양한 웹·브라우저 기술의 구현 여부를 브라우저 버전별로 정리해 주는 전문 사이트입니다. 검색창에 "service workers"를 입력하면 각 브라우저가 어느 버전부터 PWA 서비스 워커를 지원하는지 보여주는 표를 확인할 수 있습니다.
Can I Use의 서비스 워커 지원 표를 보면 주요 브라우저가 모두 PWA를 지원하는 것을 확인할 수 있습니다. 또한 여러 대체 데스크톱 브라우저와 모바일 브라우저의 PWA 지원 현황도 함께 파악할 수 있습니다.
조금 더 자세히 나눠보면 다음과 같습니다.
- 데스크톱 브라우저(완전 지원): Chrome, Firefox, Opera, Edge, Safari
- 데스크톱 브라우저(부분 지원/구버전): QQ 브라우저, 바이두 브라우저
- 모바일 브라우저(완전 지원): Chrome, Firefox, Safari, UC 브라우저, 삼성 인터넷, Mint 브라우저, WeChat
- 모바일 브라우저(부분 지원/구버전): QQ 브라우저, 안드로이드 브라우저, Opera Mobile
결국 주요 브라우저는 모두 PWA를 지원합니다. Microsoft Edge와 Safari는 완전 지원 목록에 가장 최근에 합류한 브라우저입니다. 반면 QQ 브라우저와 바이두 브라우저는 구버전을 사용하면서 두 번째 그룹으로 내려앉았습니다.
프로그레시브 웹 앱 찾고 설치하는 방법
어떤 브라우저를 사용할지 정했다면, 이제 PWA를 찾아 설치할 차례입니다. 여기서는 삼성 갤럭시 S8과 구글 크롬을 예로 들어 설명하겠습니다.
프로그레시브 웹 앱은 이미 어디에나 있습니다. 수많은 기업이 자사 사이트와 서비스를 PWA 버전으로 개편했습니다. 대부분의 경우 서비스 홈페이지나 모바일 사이트에 접속하면 홈 화면에 추가(Add to Home Screen) 대화상자가 나타나면서 PWA를 처음 접하게 됩니다.
아래 영상에서 트위터 모바일 사이트에 접속했을 때 어떤 일이 일어나는지 확인해 보세요.
물론 수많은 사이트를 돌아다니면서 홈 화면 추가 팝업이 뜨기를 기다리는 것은 비효율적이고 시간 낭비이기까지 합니다. 다행히 PWA를 전문적으로 소개하는 사이트들이 있어 굳이 그럴 필요가 없습니다.
먼저 outweb을 방문해 보세요. 꽤 방대한 PWA 목록을 제공하며 새로운 앱들도 꾸준히 추가됩니다. 다음으로 pwa.rocks도 살펴보세요. 규모는 작지만 기기에 추가해 두면 유용한 PWA들을 만날 수 있습니다.
또한 2019년 1월 안드로이드용 Chrome 72에는 신뢰할 수 있는 웹 활동(Trusted Web Activity, TWA)이 도입되었습니다. TWA를 사용하면 크롬 탭이 독립 모드로 열릴 수 있고, 이를 통해 PWA가 구글 플레이 스토어에 등장할 수 있게 되었습니다. 구글 플레이에 처음 선보인 PWA는 Twitter Lite, Instagram Lite, Google Maps Go였으며, 이후 더 많은 PWA가 순차적으로 출시되고 있습니다.
프로그레시브 웹 앱이 네이티브 앱을 대체할까?
프로그레시브 웹 앱은 브라우저와 네이티브 모바일 앱 사이의 훌륭한 하이브리드 형태입니다. 그렇다면 PWA가 네이티브 앱을 완전히 대체할까요? 솔직히 말해 아직은 어렵다고 봅니다. PWA는 가볍고 매력적인 선택지이지만, 현재로서는 기존 사이트와 서비스를 재현하는 데 초점이 맞춰져 있어 네이티브 앱을 완전히 대체하기는 어렵습니다.
적어도 당분간은요.
하지만 PWA는 확실히 효과가 있습니다. PWA Stats의 데이터도 이를 뒷받침합니다. PWA가 자주 사용하는 웹사이트와의 상호작용을 어떻게 바꾸고 있는지 보여주는 흥미로운 수치들을 소개합니다.
- Trivago는 PWA를 홈 화면에 추가한 사용자의 참여도가 150% 증가했습니다.
- Forbes의 PWA는 "홈페이지가 단 0.8초 만에 완전히 로드"되며, 방문당 노출 수는 10% 증가했습니다. 사용자 세션 길이도 두 배로 늘었습니다.
- Twitter Lite는 세션당 페이지 수가 65% 증가했고, 트윗 수는 무려 75%나 늘었습니다. 또한 "3G 환경에서도 5초 이내에 인터랙티브"해집니다.
- Alibaba는 모바일 전환율이 76% 증가했습니다.
PWA는 아직 주류가 되지 않았습니다. 하지만 기기 저장 공간을 절약할 수 있다는 점을 비롯한 수많은 장점 덕분에, 앞으로 PWA에 대한 이야기를 더 자주 듣게 될 것입니다.