[IT열쇳말] 프로그레시브 웹 앱스(PWA)

‘프로그레시브 웹 앱스(Progressive Web Apps. PWA)’는 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념으로 알려졌다. PWA는 앱 수준으로 점진적으로 발전해 나가는 웹을 지향한다. 궁극적으로는 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적이다.

앱은 사용자 관여도를 높이기에 좋다. <출처 : 네이버 앱 화면 갈무리>

확장성 좋은 웹, 깊이 있는 앱

모바일을 중심으로 하는 인터넷 서비스는 크게 모바일 웹과 모바일 앱(응용프로그램)의 형식을 띤다. 각각 장단점이 있다. 모바일 웹은 확장에 유리하다. 사용자가 앱을 설치하려면 스토어에 들어가서 앱을 내려받는 지난한 과정을 거쳐야 한다. ‘굳이 앱을 별도로 설치할 필요가 있을까’라는 생각의 허들도 넘어야 한다. 이에 비해 모바일 웹은 웹주소만 있으면 누구나 접근해서 사용할 수 있다. 스마트폰의 저장공간을 잡아먹는 것도 아니다. 다양한 플랫폼을 통해서 홍보도 진행할 수 있다.

하지만 모바일 웹은 사용자를 묶어두기 어렵다. 한 번 가기는 쉽지만, 반복해 찾아가게 만들기 어렵다. 반면 앱은 사용자를 묶어두는 데 좀 더 유리한데, 필요할 때마다 푸시 알림을 보내는 형식으로 사용자에게 ‘이 앱을 사용하라’는 주문을 끊임없이 넣을 수 있다. 조금 더 매끄러운 사용자 경험을 제공하는 것도 장점이다.

PWA는 웹과 앱의 장점을 모두 취하고자 한다. 본질은 ‘웹’이다. PWA는 ‘앱 같은 웹’을 지향한다. 물론 스마트폰 초창기에도 ‘웹앱’이라는 개념은 있었지만, PWA는 그 이름에서 알 수 있듯 더 진보한 개념이다. 정말 ‘네이티브 앱’에 가까운 경험을 제공하는 웹을 목표로 한다. PWA는 ‘서비스 작업자(service worker)’로 불리는 새로운 API를 활용해 웹앱의 중요한 부분을 캐싱하고, 사용자가 다음에 열 때 즉시 로딩하는 방식을 취한다. 그 덕분에 네트워크 환경이 좋지 않아도 빠르게 구동되며, 사용자에게 푸시 알림을 보내기도 한다.

모바일 웹이지만 푸시 알림을 보낼 수 있다. <출처: 구글 개발자 블로그>

PWA의 특징

PWA의 특징은 크게 3가지다. 첫 번째는 ‘안정성’이다. 불안정한 네트워크 환경에서도 PWA는 안정적으로 동작해야 한다. 두 번째는 ‘빠른 속도’다. 사용자 인터랙션에 빠르고 부드럽게 반응해야 한다. 마지막으로 ‘관여(Engaging)’다. 마치 진짜 앱처럼 몰입감 높은 사용자 경험을 제공해야 한다. 이 같은 특징을 가지는 PWA는 사용자에게 더 나은 사용자 경험을 제공할 뿐 아니라, 인터넷 속도가 느린 지역에서도 비교적 쾌적한 웹 활용을 돕는다는 장점도 있다.

■ 프로그레시브 웹앱이란?

• 진화 : 점진적인 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관없이 모든 사용자에게 적합하다
• 반응형 : 데스크톱, 태블릿, 모바일 등 모든 폼팩터에 맞다
• 연결 독립적 : 오프라인이나 느린 네트워크에서 작동(로컬 기기의 캐시에서 로드)
• 앱과 유사 : 앱 스타일의 상호작용 및 탐색 기능을 사용자에게 제공
• 최신 상태
• 안전 : HTTPS를 통해 제공됨
• 검색 가능
• 재참여 가능 : 푸시 알림 같은 기능 가능
• 설치 가능 : 앱 스토어 등록이 필요 없음
• 링크 연결 가능 : URL을 통해 손쉽게 공유할 수 있음

– 출처 : 구글 개발자 블로그

프로그래시브 웹앱을 구현한 ‘알리익스프레스’ <출처: 구글 개발자 블로그>

PWA를 활용하는 서비스로는 세계 최대 규모의 전자 상거래 사이트인 중국의 ‘알리익스프레스’가 있다. 알리익스프레스는 PWA를 구축한 후 신규 사용자 전환율이 104%까지 증가했으며, 세션 당 2배의 페이지 방문이 생겼고, 74%의 시간을 더 많이 보낸다고 알려졌다. 알리바바도 PWA로 전환 이후 76%의 전환율 상승을 확인했다.

PWA 파트너사 <출처: 구글 개발자 한국 블로그>

AMP와 PWA

PWA와 비슷한 기술로는 구글의 ‘AMP’(Accelerated Mobile Pages) 프로젝트가 있다. 우리말로 옮기면 ‘가속 모바일 페이지’쯤 되겠다. AMP는 2015년 10월부터 구글이 전세계 30곳 이상의 매체 및 기술 파트너들과 함께 발표한 오픈소스 이니셔티브(Open Source Initiative, OSI)다. AMP의 핵심은 모바일 웹 로딩 시간 단축에 있다. 일반 웹사이트와 비교했을 때 4배 정도 빠르다고 알려져 있다.

PWA로 제작된 ‘Jalan Tikus’ <출처: 구글 개발자 한국 블로그>

두 기술 모두 웹 환경 개선을 목적으로 한다는 점에서 공통된 목표를 지녔다. 엄청나게 거대해진 구글은 이미 대다수 나라에서 웹과 거의 동일한 말로 쓰이고 있다. 웹 환경 개선은 곧 구글을 사용하는 경험의 개선을 의미한다. 물론 사용자에게도 좋다. 구글이 AMP나 PWA를 강조하는 이유다.

※ 참고자료

• Dan Rowinski, 『Why Progressive Web Apps Are The Future Of Web Development』, (Applause, 2015.11.30)
• Pete LePage, 『여러분의 첫 Progressive Web App』, (Google Developers Blog, 2017.03.03)
• Rahul Roy-chowdhury, 『모바일 웹은 영업 중』, (Google Developers Korea Blog, 2016.06.05)

이 글은 ‘네이버캐스트→테크놀로지월드→용어로 보는 IT’에도 게재됐습니다. ☞‘네이버캐스트’ 보기