[ICT / Articles] 오프라인 웹이 온다

원문 : http://m.news.naver.com/read.nhn?oid=092&aid=0002103405&sid1=105&mode=LSD

PWA, 들어보셨습니까 

(지디넷코리아=임민철 기자)네이버 포털 검색이나 카페, 구글 G메일이나 유튜브같은 웹서비스를 쓰려면 인터넷 접속은 필수죠. 브라우저 주소창에 웹사이트 도메인을 백날 적어 넣어 봐야, 인터넷에 연결되지 않으면 서비스에 진입할 수 없죠. 즉 오프라인에선 웹을 못 쓴다, 이게 상식입니다. 

그런데 '상식 밖' 얘기가 심심찮게 들립니다. 오프라인에서 쓸 수 있는 웹을 구현하는 기술이 한창 개발 중이라는 소식입니다. 언젠가 사람들은 온라인일 때 '내려받은' 웹사이트를 오프라인일 때 자연스럽게 활용하게 될지도 모르겠네요. 뭐가 어떻게 좋아질지 대충 상상해 보죠. 

■오프라인 웹이라는 세계 

원본보기

일반적으로 인터넷이 끊긴 오프라인 환경에선 브라우저 기반으로 돌아가는 웹을 쓸 수 없다. [사진=Pixabay]

마이크로소프트 메일 앱 '아웃룩'처럼 동작하는 G메일을 떠올려 보세요. 브라우저 안에서 돌아가지만 인터넷이 끊겨도 이미 저장된 메일을 읽고, 분류를 지정하거나 회신을 작성해 놓으면, 다시 인터넷에 연결됐을 때 그 처리 내역이 구글 서버에 적용되는 겁니다. 

참여형 인터넷 백과사전 '위키피디아'를 컴퓨터 내장 사전처럼 열람할 수도 있겠네요. 인터넷을 통해서는 표제어에 대한 설명과 출처 링크가 꾸준히 갱신되고, 즐겨찾기나 보관함에 등록한 자료는 오프라인일 때에도 다시 찾아 보는 식으로 활용되겠죠. 

맞춤형 비디오 서비스 넷플릭스의 실시간 스트리밍 영상을 DVD 다운로드 서비스처럼 즐기면 어떨까요. 오리지널 콘텐츠를 통째로 내려받는 거죠. 접속 상태에 따른 화질 저하나 끊김 걱정 없이 영상을 감상하거나 주요 장면을 빠르게 훑어 보기도 쉽겠네요. 

데이터 용량을 소비하지 않고 인터넷포털 다음(카카오)의 웹 지도를 볼 수도 있겠네요. 주요 도로나 건물과 같은 시설 정보나 행정구역은 쉽게 바뀌지 않으니, 이를 참고하려는 지역의 지리정보를 지하철 노선도처럼 휴대한다면 유용하지 않을까 싶은데요. 

원본보기

설치형 앱처럼 오프라인에서 쓸 수 있는 웹이 프로그레시브웹앱스(PWA)라는 이름으로 구체화하고 있다. PWA가 기존 브라우저 사용자들에게 일상으로 자리잡을 수 있을까. [사진=Pixabay]

요약하면 사용자들이 PC나 모바일 기기용 네이티브 앱과 비슷한 경험을 누릴 수 있게 된다는 얘깁니다. 사용자들에게만 좋은 게 아니고요. 웹을 제공하는 사업자 또는 개발자에게 이점도 있습니다. 용량이 수백메가바이트(MB)에 달하는 앱을 배포해야 하는 경우를 가정해 보죠. 

한국처럼 네트워크 인프라가 쾌적하고 전반적인 단말기 성능이 일정 수준 이상인 지역에는 수백MB 용량의 네이티브 앱을 한 번에 내려받게 해도 문제 없을 겁니다. 그런데 단말기 평균 성능이 낮고 네트워크 접속도 느리고 불안정한 곳에선 사용자들이 해당 앱을 못 쓰겠죠. 

이 때 해당 앱 콘텐츠나 기능을 오프라인 웹으로 전달하는 게 대안이 될 수 있습니다. 수백MB에 달하는 내용을 통째로 배포하는 대신, 사용자가 브라우저를 통해 요청한 일부만 제공하는 거죠. 기기 성능이 낮거나 인터넷이 열악한 지역 시장에 대응하기 위한 방안이 되겠네요. 

■웹표준이 이끄는 진화

원본보기

5대 PC 브라우저 아이콘. 각 개발업체가 웹표준화기구 W3C 활동을 통해 주류 웹기술 표준화 활동을 추진해 왔다. [사진=Pixabay]

이처럼 오프라인에서도 쓸 수 있도록 만들어진 웹을 가리키는 표현이 따로 있습니다. 기술 커뮤니티에서 통용되는 '프로그레시브웹앱스(PWA, Progressive Web Apps)'라는 용어죠. PWA는 최신 웹 기술을 조합해서, 웹을 일반 앱처럼 쓸 수 있게 만든 결과물을 가리킵니다. 

엄밀히 말해 PWA는 오프라인 웹보다 한차원 발전된 개념입니다. 단지 웹을 오프라인에서 쓸 수 있게 할뿐아니라, 웹의 사용자인터페이스(UI)와 상호작용 방식까지 네이티브 앱에 가깝게 만든다는 목표가 포함돼 있거든요. 기능적으로 오프라인 작동 말고도, 주소창을 표시하지 않는 화면, 푸시 알림을 받아 띄우는 기능, 모바일 기기 홈스크린에 배치되는 실행 아이콘 등을 구현하는 작업까지 전제합니다. 

그런데 PWA가 확산하려면 조건이 있습니다. 일단 사용자 브라우저가 최신 웹표준 기술을 지원해야 합니다. 웹 제공자는 손수 이 기술에 대응한 웹사이트를 만들어야 하고요. 말은 간단한데, 실제로는 극복해야 할 기술과 시장의 벽이 높습니다. 

현재 PWA 관련 기술 개발과 확산 흐름을 주도할만한 기업이라면 인터넷 시장의 거인 구글, 모바일 업계 큰손 삼성전자를 꼽을 수 있습니다. 두 회사의 브라우저 개발팀 소속 또는 웹표준화 커뮤니티 전문가들이 PWA 구현에 필요한 기술 개발에 힘을 쏟고 있죠. 

최근 PWA에 관심을 갖고 있는 사람들을 위한 웹 기술 세미나 배경에도 구글과 삼성전자가 있었습니다. 지난달 25일 구글코리아 사무실에서 열린 제44차 W3C HTML5 KIG미팅 자리 얘깁니다. 

KIG 미팅은 그간 다양한 웹 기술 표준화 현황을 다뤄 왔는데요. 지난번 세미나는 PWA 하나에 집중했습니다. 발표자 가운데 구글 엔지니어는 없었지만, 삼성전자 브라우저 개발팀 소속 엔지니어 3명과 한국 최대 포털사 네이버의 서비스 개발 담당자 1명이 참석해 현황 정보를 공유하고 각자 전망을 제시했습니다. 

원본보기

제44차 W3C HTML5 KIG 미팅 현장. 이원석 HTML5 융합기술포럼 의장이 참석자들 앞에서 일정을 설명하고 있다. [사진=W3C HTML5 KIG]


■삼성 브라우저 개발자들이 말하는 PWA

현장에선 PWA를 실현하기 위한 기술로 월드와이드웹컨소시엄(W3C)의 '서비스워커(Service Worker)', '웹앱매니페스트(Web App Manifest)', '푸시API(Push API)', 이 3가지 표준과 크롬 브라우저 쪽 오픈소스 커뮤니티에서 만들어지고 있는 '웹APK(WebAPK)'를 살폈습니다. 

서비스워커는 웹이 네트워크 접속에 의존하지 않고 사용자 기기에 저장된 데이터를 다룰 수 있도록 만들어 주는 웹 표준입니다. 온라인의 문서나 이미지나 파일 가운데 사용자 기기에 보관(caching)할 대상을 지정하고, 이미 기기에 저장된 것과 그렇지 않은 것을 가려 필요한 정보를 온라인에서 가져올 수 있게 해 줍니다. 삼성전자 브라우저 개발팀 소속 엔지니어, 송정기 책임이 서비스워커 표준화를 주도하고 있죠. 

[☞관련기사: 웹앱도 설치해 쓰는 시대 온다] 
[☞관련기사: 웹도 네이티브앱처럼…최신 웹기술 8가지] 

이날 송 책임은 PWA와 서비스워커 기술의 개념과 현황을 다뤘어요. 글로벌 웹사이트에 실험 구현된 사례 몇 가지도 소개했습니다. 오프라인 기사 읽기를 지원하는 뉴스 사이트(워싱턴포스트, 파이낸셜타임스), 리우올림픽 시즌에 맞춰 모바일 기기 사용자 위치정보에 연동되는 현지 올림픽경기장 정보를 음성 제공하는 웹앱 '리오 런' 푸시알림을 지원하는 글로벌판 중고나라 '셀리오', 역시 오프라인 읽기를 지원하는 위키피디아의 공식 API 기반 데모 사이트가 제시됐죠. 

그는 이어 서비스워커 기술을 다루는 개발자를 위해 표준 최신 버전의 동작 및 리소스 관리 방식, 브라우저가 이를 다루는 개념적 모델 등을 설명했습니다. 설명엔 서비스워커가 갖는 3가지 상태(설치, 활성, 대기)와 백그라운드 실행 방식, 대기에서 활성 상태로 전환되는 조건 등이 포함됐고, 서비스워커 지원 브라우저로 크롬, 파이어폭스, 오페라, 삼성인터넷 등이 언급됐습니다. 애플의 사파리 브라우저는 지원하지 않는다고 합니다. 애플 개발팀이 W3C 표준화 회의에 참가하고 있지만, 공식적으로 구현 일정이나 계획에 대해 언급한 적이 없다네요. 

삼성전자 엔지니어인 방진호 선임이 PWA의 또다른 기본 기술, 웹앱매니페스트를 설명했습니다. 모바일 기기 홈스크린에 웹 실행 아이콘을 만들고, 이걸 눌렀을 때 웹이 뜨는 방식을 구성하는 수단입니다. 즉 방문자가 들렀을 때 어느 시점에 아이콘 설치를 유도할지, 설치시 사용자 기기 화면에 어떤 아이콘 이미지를 쓸지, 아이콘 이름을 뭘로 할지, 아이콘을 눌렀을 때 웹 화면을 어떻게 띄울지, 주소창을 감출지 등의 설정을 'JSON' 형식 파일로 작성해 사용합니다. 

아직 웹앱매니페스트만으로 네이티브 앱 경험을 온전히 제공할 순 없는데요. 홈스크린에 웹 실행 아이콘이 무한히 생성된다든지, 다른 앱에서 누른 사이트 주소 링크를 통해 열리는 과정이 매끄럽지 않게 처리된다든지, 사용자 권한 설정에 따라 푸시 알림을 제대로 처리하지 못하는 문제 때문입니다. 현장에서 방 선임이 웹APK라는 기술을 함께 소개한 이유죠. 이건 웹앱매니페스트와 안드로이드용 앱(APK) 코드를 연동해 이런저런 제약을 극복한다는 아이디어로 제안된 오픈소스 기술입니다. 

또다른 삼성전자 엔지니어 박상현 선임은 웹 푸시(Web Push) 기술 표준에 초점을 맞춰 발표를 진행했습니다. 푸시 알림은 원래 웹에 없는 기능이고, PC보다는 모바일 앱 사용자들에게 중요한 정보를 전달하기 위한 수단이죠. 박 선임은 사업자가 푸시 알림을 활용시 서비스 방문 시간이 72% 늘고 사용자의 지출 금액도 26% 늘어난다는 자료를 인용하며, PWA에서 푸시 알림을 구현하는 게 중요하다 강조했습니다. 

웹 푸시는 백그라운드 동작을 지원하는 서비스워커가 등장한 덕분에 정적을 깨고 발전이 재개됐습니다. 삼성인터넷, 크롬, 오페라, 파이어폭스 등 최신 모바일 브라우저와 크롬, 사파리 등 데스크톱 브라우저가 지원하고 있고요. 다만 한국에서 많이 쓰는 인터넷익스플로러(IE)는 이를 지원하지 않는다고 합니다. 바이스뉴스, 페이스북, 워드프레스, 이베이 등 글로벌 사업자 웹사이트가 웹 푸시를 활용한 기능을 적용 중이고 최근 구현된 메시지 암호화 기능이 확산을 예고했습니다. 

원본보기

제44차 W3C HTML5 KIG 미팅 참석자들. 삼성전자 브라우저 개발팀 엔지니어들의 프로그레시브웹앱스 기술 관련 세션을 경청하고 있다. [사진=W3C HTML5 KIG]

■한국 웹에 가깝고도 먼 PWA

오프라인 웹 개념에서 발전된 PWA가 당장 일반 사용자들이 쉽게 체감할 수 있을 만큼 확산하리라 기대하긴 어렵습니다. 국외 사업자들의 흥미로운 시도가 앞으로도 계속되겠지만, 같은 개념이나 기술을 국내 사업자들의 일반 서비스에 적극적으로 도입하겠느냐는 의문이 남죠. 

2가지 이유를 들 수 있습니다. 일단 한국 웹 생태계는 PWA의 전제조건인 최신 웹표준 수용에 보수적인 편입니다. 국내 사용자 대상 서비스에 주력하려는 사업자 관점에선 이미 네트워크 인프라 수준과 기기 성능이 높아 PWA 확산을 통한 실리가 적다고 판단하기 쉽고요. 

PWA는 시장 관심에서 멀어질 수밖에 없는 운명일까요? 그렇진 않습니다. 서비스 경험을 차별화하려는 사업자, 한국을 넘어 미국, 중국, 인도 등 인터넷 인프라와 단말 성능이 천차만별인 세계 소비자 시장을 겨냥한 앱이나 웹을 만들려는 사업자에겐 여전히 주목할만합니다. 

KIG 미팅에서 '현실적 PWA'라는 제목으로 마지막 발표를 맡았던 개발자 박재성 씨의 메시지가 인상적이었는데요. 한국 최대 포털사이트 네이버 소속 엔지니어인 그는 서비스 개발 실무에 PWA 개념을 적용해 본 경험을 바탕으로, PWA 구현을 위한 기술적인 제약사항과 한국 시장 특성에 맞물리는 어려움을 함께 다뤘습니다. 

[☞참조링크: 현실적 PWA] 

박 씨는 인스턴트로딩, 홈스크린 아이콘 추가, 푸시알림, 3가지 기술을 갖춘 웹을 PWA로 부를 수 있지만 사용자 관점에서 '성능'이 가장 중요한 요소라 꼽았습니다. 성능을 통해 웹에서 '앱같은 경험'을 제공하는 게 PWA의 주요 달성 목표 아니겠느냐는 판단에서였죠. 

이를 전제로 그는 한국 모바일 사용자 환경을 바라볼 때, 오프라인 캐싱같은 PWA 구현 기법이 iOS와 안드로이드에 나란히 적용되지 않는 점은 정식 서비스에 걸림돌이라 봤습니다. 다만 데스크톱에선 오프라인 캐싱을 위한 기술을 여러 브라우저가 지원하고, 미지원 환경에서도 일반 브라우저의 캐시 활용 효율을 높이는 형태로 접근할 수 있다고 했습니다. 

그는 서비스워커를 사용할 때 리소스 요청, 캐싱 등 전략을 잘 계획해 접근하지 않으면 구현시 코드 복잡도가 높아 어려움을 겪을 거라 조언했습니다. 서비스워커 기술이 지원되지 않더라도 웹스토리지, 인덱스드DB, 파일API 등을 활용한 캐싱을 구현하고, 업데이트 빈도가 상대적으로 낮은 라이브러리, 제이쿼리 앵귤러JS 등 자주 사용하는 정적 파일을 캐싱하는 전략을 쓰면 성능 개선에 도움이 된다고 설명했고요. 

원본보기

네이버 개발자 박재성 씨의 제44차 W3C HTML5 KIG 미팅 발표자료 첫 슬라이드. 현업 웹개발자들에게 실용적인 PWA 구현 전략과 접근법, 유용한 도구 등을 설명했다.

■구글이 미는 PWA

사실 구글은 지난달 KIG 미팅에서 장소 협찬만 했지만, 이전부터 PWA 확산에 주력하고 있습니다. 한국에서도 삼성전자 송정기 책임과 함께 웹 업계 종사자들에게 PWA 개념과 기술 정보를 열심히 소개해 왔죠. 지난 4월 28일 진행한 '구글 개발자 서밋'과 지난 7월 19일 열었던 '구글 포 모바일' 현장 발표 내용에서도 PWA 관련 소식을 들을 수 있었습니다. 

구글개발자서밋은 안드로이드N(누가) 디벨로퍼 프리뷰 2번째 버전이 나올 무렵 진행됐던 개발자 대상 행사인데요. 국내 안드로이드 앱 개발자들에게 차세대 플랫폼의 신기능과 변화를 소개하고 SDK 배포 일정이나 API 변경 세부내용과 같은 사전정보를 제공하는 자리였어요. 

행사 전반부는 안드로이드N 관련 통합 세션으로 진행됐는데 후반부는 앱개발자와 웹개발자 대상으로 2개 트랙이 나뉘었습니다. 웹개발자 대상 트랙에서 한국구글개발자그룹(GDG Korea) 웹기술커뮤니티 운영자인 SK플래닛의 개발자 도창욱 씨가, PWA에 초점을 맞춘 웹 기술 및 구현 전략을 포괄적으로 다뤘습니다. 인스턴트로딩, 비동기 스크립트 페칭, HTTP/2 프로토콜의 커넥션 셰어 활용, 서비스워커의 라이프사이클, 리소스 캐싱, 페이지셸 등을 설명했죠. 

구글포모바일은 역시 서울 중구 동대문디자인플라자에서 국내 개발자 대상으로 열린 행사인데 개발자서밋 때보단 규모가 좀 있는 컨퍼런스로 치러졌습니다. 모바일앱 개발자들을 겨냥해 구글 클라우드의 유용함을 강조하면서 특히 서비스형 백엔드(BaaS) '파이어베이스'를 소개하는 데 힘을 쏟는 자리였죠. 

[☞관련기사: 구글, 백엔드서비스로 애플 생태계 넘보나] 

컨퍼런스에서도 PWA 얘기가 빠지지 않았습니다. 구글 본사 디벨로퍼프로덕트그룹의 개발자관계총괄 담당자 벤 갈브레이스가 직접 나섰죠. 구글I/O 내용을 요약하면서PWA라는 신개념 웹으로 브라우저에서 네이티브 앱처럼 보이는 걸 자유롭게 활용할 수 있고, 백그라운드 알림을 받을 수 있으며, 초당 60프레임 수준의 UI 성능도 구현할 수 있다고 강조했습니다. 또 알리익스프레스가 PWA 개념과 크리덴셜매니지먼트API라는 기술을 써서 회원들이 로그인할 필요 없이 오프라인 캐싱 데이터로 앱 경험을 구현한 게 유용했다는 피드백을 줬다고 첨언했습니다. 여기에 앞으로 추가될 웹페이먼트API라는 기술로 자바스크립트 코드 기반의 간편한 온라인 결제 기능이 구현될 수 있게 될 거라고 말했죠. 이런 PWA 확산을 적극 추진해 사용자들의 웹 경험을 풍부하게 개선할 수 있을 거라고 예고했죠. 

원본보기

2016년 7월 중구 동대문디자인플라자 구글포모바일 컨퍼런스에서 2번째 기조연설을 진행한 구글 디벨로퍼프로덕트그룹 개발자관계총괄 담당자 벤 갈브레이스.

구글은 4월말 개발자서밋 현장에서 세션별로 녹화한 발표 영상을 지난 6월 14일 유튜브 채널을 통해 공개했습니다. 구글 엔지니어 샘 써로굿 씨의 PWA 세션과 도창욱 씨의 서비스워커 기반 오프라인 웹 세션 영상을 보실 수 있습니다. 7월중순 컨퍼런스 현장 녹화 영상도 지난 20일 같은 유튜브 채널에 올려 놨습니다. PWA 관련 언급이 담긴 갈브레이스의 발표는 '2016 I/O 돌아보기'라는 2번째 키노트 영상입니다. 

[☞참조링크: Google Developers Summit Korea 2016 을 영상으로 다시 만나보세요!] 
[☞참조링크: Google for Moblie 2016 을 영상으로 다시 만나보세요!] 

PWA는 그 이름처럼 발전할 여지가 많습니다. 냉정히 말하면 여전히 갈 길이 멀단 얘기죠. 지금은 몇 가지 공통적인 목표를 향해 구글과 삼성전자같은 대기업이 구체적인 그림을 그리는 데 앞장선 상황입니다. 글로벌 서비스 업체와 국내외 웹 개발자들이 여기에 관심을 보였습니다. 일부 사업자가 맛보기 사례를 만들었고 한국에선 네이버같은 회사가 그 활용 가능성을 조율하는 분위깁니다. 다른 국내 기업과 웹 업계 종사자들에게도 확산할 수 있을지 궁금합니다. 

임민철 기자(imc@zdnet.co.kr)