2017.06.27

세력 넓혀가는 프로그레시브 웹 앱, 모바일 앱에 도전장

Paul Krill | InfoWorld
리프트나 트위터 같은 웹 업체는 웹 애플리케이션을 모바일 앱처럼 보기 좋고 네트워크 독립적으로 만드는 기술을 도입하고 있다.

모바일 앱은 일반적으로 사용자 경험 측면에서 웹 기반 앱을 능가하는 강점을 가지고 있다. 하지만 프로그레시브 웹 앱(Progressive Web Apps)의 등장으로 판도가 바뀌고 있다. 이 기술은 구글과 모질라가 선봉에 서 이끌고 있는데, 주요 웹 업체들로부터 인기를 얻으며 개발자 툴도 확산되고 있다.

구글 크롬 팀의 엔지니어링 관리자 애디 오스마니는 “많은 대형 업체가 웹으로 돌아오고 있는데, 마찰이 적기 때문이다”라고 말했다.

트위터의 프로그레시브 웹 앱인 트위트 라이트(Twitter Lite)는 1MB 미만의 메모리를 사용하는데, iOS 앱의 100MB나 안드로이드 앱의 23MB와 비교해 현저히 적은 용량이다. 오스마니는 클라이언트 측의 자바스크립트 앱은 데이터를 적게 사용하고 푸시 알림과 오프라인 사용을 지원한다고 설명했다.

이들 앱의 핵심은 자바스크립트 기반의 클라이언트 측 프록시인 ‘서비스 작업자(Service Worker)’로, 네트워크 상태에 관계없이 앱을 즉각 로드한다. 서비스 작업자는 브라우저에서 백그라운드 스크립트로 실행되며, 핵심 자원을 사전 캐싱하기 때문에 네트워크 의존도를 줄일 수 있다.

오스마니는 이 기술이 아직은 발전 중이라는 사실을 인정했다. 예를 들어, 애플의 사파리 브라우저는 서비스 작업자를 사용할 수 없다.

웹 개발자가 프로그레시브 웹 앱을 개발할 수 있도록 지원하는 툴도 늘어나고 있는데, 성능 감사용 오픈소스 툴인 라이트하우스(Lighthouse)가 대표적이다. 프로그레시브 웹 앱 개발용으로 사용할 수 있는 리액트(React) 자바스크립트 UI 라이브러리의 경량화된 대안인 프리액트(Preact)도 주목할만하다.

HNPWA(Hacker News readers as Progressive Web Apps) 프로젝트는 관련 레퍼런스 자원으로, 앵귤러나 리액트, Vue.js 같은 기술을 이용해 구축한 프로그레시브 웹 앱 예제를 제공한다.  editor@itworld.co.kr


2017.06.27

세력 넓혀가는 프로그레시브 웹 앱, 모바일 앱에 도전장

Paul Krill | InfoWorld
리프트나 트위터 같은 웹 업체는 웹 애플리케이션을 모바일 앱처럼 보기 좋고 네트워크 독립적으로 만드는 기술을 도입하고 있다.

모바일 앱은 일반적으로 사용자 경험 측면에서 웹 기반 앱을 능가하는 강점을 가지고 있다. 하지만 프로그레시브 웹 앱(Progressive Web Apps)의 등장으로 판도가 바뀌고 있다. 이 기술은 구글과 모질라가 선봉에 서 이끌고 있는데, 주요 웹 업체들로부터 인기를 얻으며 개발자 툴도 확산되고 있다.

구글 크롬 팀의 엔지니어링 관리자 애디 오스마니는 “많은 대형 업체가 웹으로 돌아오고 있는데, 마찰이 적기 때문이다”라고 말했다.

트위터의 프로그레시브 웹 앱인 트위트 라이트(Twitter Lite)는 1MB 미만의 메모리를 사용하는데, iOS 앱의 100MB나 안드로이드 앱의 23MB와 비교해 현저히 적은 용량이다. 오스마니는 클라이언트 측의 자바스크립트 앱은 데이터를 적게 사용하고 푸시 알림과 오프라인 사용을 지원한다고 설명했다.

이들 앱의 핵심은 자바스크립트 기반의 클라이언트 측 프록시인 ‘서비스 작업자(Service Worker)’로, 네트워크 상태에 관계없이 앱을 즉각 로드한다. 서비스 작업자는 브라우저에서 백그라운드 스크립트로 실행되며, 핵심 자원을 사전 캐싱하기 때문에 네트워크 의존도를 줄일 수 있다.

오스마니는 이 기술이 아직은 발전 중이라는 사실을 인정했다. 예를 들어, 애플의 사파리 브라우저는 서비스 작업자를 사용할 수 없다.

웹 개발자가 프로그레시브 웹 앱을 개발할 수 있도록 지원하는 툴도 늘어나고 있는데, 성능 감사용 오픈소스 툴인 라이트하우스(Lighthouse)가 대표적이다. 프로그레시브 웹 앱 개발용으로 사용할 수 있는 리액트(React) 자바스크립트 UI 라이브러리의 경량화된 대안인 프리액트(Preact)도 주목할만하다.

HNPWA(Hacker News readers as Progressive Web Apps) 프로젝트는 관련 레퍼런스 자원으로, 앵귤러나 리액트, Vue.js 같은 기술을 이용해 구축한 프로그레시브 웹 앱 예제를 제공한다.  editor@itworld.co.kr


X