IT트렌드

프로그레시브 웹 앱스(Progressive Web Apps, PWA)를 이해하기 위한 신기술들

도경태 프로

2018-04-23

프로그레시브 웹 앱스(Progressive Web Apps, PWA)를 이해하기 위한 신기술들

지난 연재에서는 프로그레시브 웹 앱스(Progressive Web Apps)의 등장과 사용 중인 사이트, 그리고 속성들에 대해 알아보았습니다. 이번 연재에서는 PWA를 이해하기 위한 신기술들에 대해 알아보고, 그 개발 방법을 살펴보겠습니다.

잘 알려지지 않은 기술들

1. W3C Manifest (https://w3c.github.io/manifest/)
web 메타태그의 진화형으로, web app을 염두에 두었기 때문에 installable web applications에 대한 spec이 있습니다. 한 파일로 지정해두고 볼 수 있도록 정의하고 있으며, link rel 태그로 지정할 수도 있습니다. 심지어 루리웹(http://m.ruliweb.com)도 적용 중입니다!
루리웹 AppManifest 루리웹 AppManifest

{
"short_name": "루리웹",
"name": "루리웹",
"icons": [
{
"src": "/assets/img/icon/ruliweb_icon_48_48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/assets/img/icon/ruliweb_icon_96_96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/assets/img/icon/ruliweb_icon_192_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"background_color": "#1A70DC", // 화면이 뜰 때
"theme_color": "#1A70DC", // 툴바
"display": "standalone", // 브라우저의 UI를 숨기고 띄울 때
"prefer_related_applications": true,
"orientation":"portrait", // portrait, landscape
"related_applications": [
{
"platform": "play",
"id": "com.ruliweb.www.ruliapp"
}
],
"start_url": "/"
}
소스코드에 PWA가 적용된 부분


2. Service Worker
브라우저가 백그라운드에서 실행되는 스크립트입니다. 웹페이지와는 별개로 작동하죠. 웹페이지와의 상호작용이 필요 없는 푸시 알림, 백그라운드 동기화 등의 기능에 사용됩니다. Service Worker는 프로그래밍이 가능한 네트워크 프록시(proxy)로, DOM(document object mode)을 직접 다룰 수는 없지만 postMessage를 통해서는 가능합니다. 브라우저가 닫혀도 백그라운드에서 돌아간다는 특징이 있지만 프로세스를 종료했을 때에는 해당되지 않습니다. 또, Service Worker는 offline application을 위한 대안인 App Cache를 대체할 수 있습니다. 자세한 관련 정보는 아래 링크들을 통해 확인하시기 바랍니다.


2.1 알아두면 좋은 Service Worker Tip
- Service Worker vs Web Worker vs Web Socket
서비스 워커와 웹 워커 그리고 웹 소켓은 굉장히 비슷한 콘셉트이면서도 분명히 다릅니다.
위 링크를 따라가면 그 차이를 확인할 수 있습니다.

- pouchdb
pouchdb는 couchdb의 브라우저 버전입니다. 서비스 워커를 이용한 오프라인 프로그램이 생겨남에 따라 애플리케이션 내부에 데이터 베이스를 만들고, 온라인이 될 때에 couchdb와 dbsync(데이터 베이스 동기화)를 하는 패턴의 개발들도 늘어나고 있습니다.
pouchdb 홈페이지 화면 pouchdb 홈페이지 화면 - Push API on Web
Web 브라우저를 통해 푸시 서비스를 등록할 수 있습니다.

- Manifest Web App install banner
매니페스트를 통해 인스톨 여부의 생성 방법을 확인할 수 있습니다.


3. App Shell Model
오프라인에서 캐시를 통해 Static File들을 볼 수 있도록 하는 방법을 알았으니 AppShell을 이해하기는 더더욱 용이합니다. AppShell은 레이아웃 및 정적 리소스들을 모두 캐시화하며 다음과 같은 특징을 갖고 있습니다.

  • 빠른 로드
  • 최소 데이터 사용
  • 로컬 캐시에서 정적 자산 사용
  • 내비게이션과 콘텐츠 분리
  • 페이지별 콘텐츠(예: HTML, JSON) 검색 및 표시
  • 선택적으로 동적 콘텐츠 캐싱

App Shell의 활용 – Shell과 Content의 분리 App Shell의 활용 – Shell과 Content의 분리

AppShell의 조건을 만족시키는 앱을 손쉽게 개발하기 위해 sw-precache 툴을 사용합니다.
상세한 내용은 sw-toolbox를 참고하시기 바랍니다.

웹과 앱의 구현 방식 비교

Ajax을 시작으로 Hybrid Web App, React-Native-Script 등 웹과 앱을 구현하는 다양한 방식들과 PWA의 기능을 비교해 보겠습니다.

comparison Ajax Native App Hybrid
Web App
React Native PWA
인스톨 디바이스 x Machine Machine Machine Browser Cache
인스톨방법 X App Store, Google Play App Store, Google Play App Store, Google Play Browser
앱 독자적실행 X O O O O
Native Component X O X O X
참고로, 현재 Ionic도 PWA를 적용한 앱임을 자처하고 있습니다.

성능의 문제

일단 브라우저 캐시를 이용하고, 오프라인에서도 동일하게 작동하며, 웹 자체의 성능을 저하시키는 대부분의 문제를 제거한다는 점에서는 PWA가 네이티브만큼의 성능을 보인다고 이야기되고 있습니다. 하지만 애니메이션의 경우는 웹의 성능과 동일합니다. 이 부분에 대해서는 Progressive Rendering이라는 주제로 활발하게 논의되고 있으며, PWA와 더불어 잘 적용될 경우에는 네이티브만큼의 효과를 보인다고 합니다.

Progressive rendering의 효과 Progressive rendering의 효과

생산성의 문제

개발의 러닝커브가 있을 듯하지만, 한 번 배워서 패턴을 만들고 나면 완전히 분리될 것으로 보입니다. 프런트 엔드 자체 내에서도 UI와 로직이 분리되는 일들이 본격적으로 일어나기 시작했는데, 이는 앞으로 더 세분화될 것으로 보입니다. pouchDB 같은 원격 DB가 좋은 힌트가 될 수 있으며, 실제로 많이 사용되고 있습니다. 또, Firebase와 같은 개발 툴이 점점 웹 앱으로의 전환에 속도를 내고 있습니다.

프로그래머들

어떻게 개발할 것인가

DBP(Digital Business Platform) 혹은 DEP(Digital Enterprise Platform)와 같은 클라우드 환경이 B2B 회사에도 필수가 되어 갑니다. 현재의 흐름대로라면, UI를 담당하는 부분은 철저하게 AppShell로 감싸지고, 데이터는 모바일 앱처럼 가져와서 업데이트되는 형태로 많은 웹들이 진화할 것으로 보입니다. 이렇듯 개발 방식의 펀더멘털 자체가 바뀌고 있는 상황에서 우리는 그 흐름에 적응해야 개발자로 살아남을 수 있지 않을까 생각해 봅니다.



▶   해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에 저작권이 있습니다.
▶   해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.

프로그레시브 웹 앱스 Progressive Web Apps, PWA

도경태 프로
도경태 프로
삼성SDS 개발실
SCP(SDS Certified Professional)로 삼성SDS에서 테크리드를 담당하고 있습니다. OSGeo에서 오픈소스 활동을 하고 있습니다. 잘 모르는 기술에 대해서 낯선 사람들과 이야기 하면서 배워 나가는 것을 좋아합니다.
Contact : insight.sds@samsung.com