최근 프로그레시브 웹 앱에 관한 논의가 활발하게 이루어지고 있습니다. 아직 비교적 새로운 모델이지만, 그 원칙은 바닐라 JS, React, Polymer, Angular 또는 기타 프레임워크로 빌드된 앱을 동일하게 개선할 수 있습니다. 이 게시물에서는 지금 바로 프로그레시브 웹 앱을 시작하는 데 도움이 되는 몇 가지 옵션과 참조 앱을 요약해 드리겠습니다.
프로그레시브 웹 앱이란 무엇인가요?
프로그레시브 웹 앱은 어디서나 작동하지만 최신 브라우저에서 더욱 강력하게 작동한다는 점을 기억해야 합니다. 점진적 개선은 모델의 핵심입니다.
아론 구스타프슨은 점진적 개선을 피넛 M&M에 비유했습니다. 땅콩은 콘텐츠, 초콜릿 코팅은 프레젠테이션 레이어, JavaScript는 단단한 사탕 껍질입니다. 이 레이어는 색상이 다를 수 있으며, 사용하는 브라우저의 기능에 따라 환경이 달라질 수 있습니다.
사탕 껍질은 많은 프로그레시브 웹 앱 기능이 있을 수 있는 곳이라고 생각하면 됩니다. 웹과 앱의 장점을 결합한 환경입니다. 설치할 필요 없이 브라우저 탭에서 처음 방문할 때부터 사용자에게 유용합니다.
사용자가 반복 사용을 통해 이러한 앱과 관계를 구축함에 따라, 느린 네트워크 연결에서도 매우 빠르게 로드되고(서비스 워커 덕분) 관련 푸시 알림을 전송하며 사용자의 홈 화면에 전체 화면 앱 환경으로 로드할 수 있는 일류 아이콘을 표시하는 등 사탕 껍질을 더욱 달콤하게 만듭니다. 스마트 웹 앱 설치 배너를 활용할 수도 있습니다.
프로그레시브 웹 앱은
- 점진적 - 점진적 개선을 핵심 원칙으로 삼아 빌드되므로 브라우저 선택과 관계없이 모든 사용자에게 적합합니다.
- 반응형 - 데스크톱, 모바일, 태블릿 등 모든 폼 팩터에 적합합니다.
- 연결 독립성 - 서비스 워커를 통해 오프라인이나 저품질 네트워크에서도 작동하도록 개선되었습니다.
- 앱과 유사 - 앱 셸 모델을 사용하여 앱 스타일의 탐색 및 상호작용을 제공합니다.
- 최신 - 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.
- 안전 - TLS를 통해 제공되어 스누핑을 방지하고 콘텐츠가 변조되지 않도록 합니다.
- 검색 가능 - W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 검색엔진에서 찾을 수 있는 '애플리케이션'으로 식별할 수 있습니다.
- 재참여 가능 - 푸시 알림과 같은 기능을 통해 쉽게 재참여를 유도합니다.
- 설치 가능 - 사용자가 앱 스토어의 번거로움 없이 홈 화면에서 가장 유용하다고 생각하는 앱을 '유지'할 수 있습니다.
- 연결 가능 - URL을 통해 쉽게 공유할 수 있으며 복잡한 설치가 필요하지 않습니다.
프로그레시브 웹 앱은 Android용 Chrome에만 국한되지 않습니다. 아래에서는 Android용 Firefox(베타)에서 실행되는 Pokedex 프로그레시브 웹 앱을 볼 수 있습니다. 초기 홈 화면에 추가 및 서비스 워커 캐싱 기능이 제대로 작동합니다.
이 모델의 '점진적' 특성의 장점 중 하나는 브라우저 공급업체가 더 나은 지원을 제공함에 따라 기능을 점진적으로 사용할 수 있다는 것입니다. Pokedex와 같은 프로그레시브 웹 앱은 Android용 Opera에서도 잘 작동하지만 구현에 몇 가지 주목할 만한 차이점이 있습니다.
프로그레시브 웹 앱에 대해 자세히 알아보려면 알렉스 러셀의 소개 블로그 게시물을 읽어보세요. Paul Kinlan은 프로그레시브 웹 앱에 대한 매우 유용한 Stack Overflow 태그도 시작했습니다.
원칙
웹 앱 매니페스트
매니페스트를 사용하면 웹 앱이 사용자의 홈 화면에서 더 네이티브 앱과 같은 존재감을 가질 수 있습니다. 이를 통해 앱을 전체 화면 모드로 실행할 수 있고(URL 표시줄이 표시되지 않음), 화면 방향을 제어할 수 있으며, Android용 Chrome의 최신 버전에서는 주소 표시줄의 스플래시 화면 및 테마 색상을 정의할 수 있습니다. 또한 앞서 언급한 스플래시 화면 및 홈 화면 아이콘에 사용되는 크기 및 밀도별 아이콘 집합을 정의하는 데도 사용됩니다.
샘플 매니페스트 파일은 Web Starter Kit 및 Google Chrome 샘플에서 찾을 수 있습니다. Bruce Lawson은 Manifest Generator를 작성했으며 Mounir Lamouri는 확인해 볼 만한 편리한 Web Manifest validator를 작성했습니다.
개인 프로젝트에서는 realfavicongenerator를 사용하여 웹 앱 매니페스트와 iOS, 데스크톱 등에서 사용할 수 있는 올바른 크기의 아이콘을 생성합니다. favicons Node 모듈은 빌드 프로세스의 일부로 유사한 출력을 얻을 수도 있습니다.
Chromium 기반 브라우저(Chrome, Opera 등)는 현재 웹 앱 매니페스트를 지원하고 있으며, Firefox는 지원을 적극적으로 개발하고 있고 Edge는 검토 중으로 표시하고 있습니다. WebKit/Safari는 아직 이 기능을 구현하려는 의도에 관한 공개 신호를 게시하지 않았습니다.
자세한 내용은 웹 기초에서 Android용 Chrome에서 웹 앱 매니페스트를 사용하여 설치 가능한 웹 앱을 참고하세요.
'홈 화면에 추가' 배너
Android용 Chrome은 한동안 홈 화면에 사이트를 추가하는 기능을 지원해 왔지만, 최근 버전에서는 네이티브 웹 앱 설치 배너를 사용하여 사이트를 추가하도록 능동적으로 제안하는 기능도 지원합니다.
앱 설치 프롬프트를 표시하려면 앱이 다음을 충족해야 합니다.
- 유효한 웹 앱 매니페스트가 있어야 합니다.
- HTTPS를 통해 제공되어야 합니다(무료 인증서는 letsencrypt 참고).
- 유효한 서비스 워커가 등록되어 있음
- 방문 간격이 5분 이상인 상태로 두 번 방문해야 합니다.
기본 배너부터 관련 애플리케이션 표시와 같은 더 복잡한 사용 사례에 이르기까지 다양한 앱 설치 배너 샘플을 사용할 수 있습니다.
오프라인 캐싱을 위한 서비스 워커
서비스 워커는 웹페이지와 별개로 백그라운드에서 실행되는 스크립트입니다. 서비스 워커는 자신이 제공하는 페이지에서 이루어진 네트워크 요청을 비롯한 이벤트에 응답합니다. 서비스 워커의 수명은 의도적으로 짧습니다.
이벤트를 수신하면 활성화되고 이벤트를 처리하는 데 필요한 시간 동안만 실행됩니다. 서비스 워커를 사용하면 Cache API를 사용하여 리소스를 캐시할 수 있으며 사용자에게 오프라인 환경을 제공하는 데 사용할 수 있습니다.
서비스 워커는 오프라인 캐싱에 강력하지만 사이트 또는 웹 앱을 반복적으로 방문할 때 즉시 로드하는 형태로 상당한 성능 향상을 제공합니다. 앱 셸을 캐시하여 오프라인에서 작동하도록 하고 JavaScript를 사용하여 콘텐츠를 채울 수 있습니다.
Google Chrome 샘플에서 포괄적인 서비스 워커 샘플을 사용할 수 있습니다. Jake Archibald의 오프라인 설명서는 반드시 읽어야 하며, 서비스 워커를 처음 사용하는 경우 Paul Kinlan의 첫 번째 오프라인 웹 앱 둘러보기를 사용해 보는 것이 좋습니다.
Google팀은 서비스 워커 설정의 오버헤드를 줄이는 데 유용한 여러 서비스 워커 도우미 유틸리티와 빌드 도구도 유지관리합니다. 서비스 워커 라이브러리에 나열되어 있습니다. 두 가지 주요 방법은 다음과 같습니다.
- sw-precache: 웹 앱 셸을 미리 캐시하는 데 유용한 서비스 워커 스크립트를 생성하는 빌드 시간 도구
- sw-toolbox: 자주 사용되지 않는 리소스에 런타임 캐싱을 제공하는 라이브러리
Jeff Posnick은 sw-precache 모듈을 사용한 오프라인 우선, 빠른 속도라는 sw-precache에 관한 간단한 입문서와 동일한 도구에 관한 Codelab을 작성했습니다. 유용하게 활용하시기 바랍니다.
Chrome, Opera, Firefox는 모두 서비스 워커에 대한 지원을 구현했으며 Edge는 이 기능에 대한 관심을 나타내는 긍정적인 공개 신호를 보냈습니다. Safari는 한 엔지니어가 제안한 5개년 계획을 통해 이에 대한 관심을 간략하게 언급했습니다.
재참여 유도를 위한 푸시 알림
사용자가 탭 외부에서 상호작용할 수 있는 웹 앱을 효과적으로 빌드할 수 있습니다. 브라우저를 닫을 수 있으며, 웹 앱을 적극적으로 사용하지 않아도 환경에 참여할 수 있습니다. 이 기능을 사용하려면 서비스 워커와 웹 앱 매니페스트가 모두 필요하며, 앞서 요약한 일부 기능을 기반으로 합니다.
Push API는 Chrome에서 구현되고 Firefox에서 개발 중이며 Edge에서 검토 중입니다. Safari에서는 아직 이 기능을 구현할 의도가 있다는 공개적인 신호가 없습니다.
Push Notifications on the Open Web은 Matt Gaunt가 푸시 설정을 종합적으로 소개하는 자료이며, 푸시 알림 Codelab은 웹 기초에서도 제공됩니다.
Chrome팀의 Michael van Ouwerkerk도 동영상에 관심이 있는 경우 푸시에 대한 6분 소개를 제공합니다.
고급 기능 레이어링
웹 앱을 보는 데 사용되는 브라우저에 따라 사용자 경험의 만족도가 달라질 수 있습니다. 단단한 사탕 껍질을 제어하는 것은 여러분입니다.
백그라운드 동기화(웹 앱이 닫혀 있어도 서버와 데이터 동기화) 및 웹 블루투스(웹 앱에서 블루투스 기기와 통신)와 같이 웹 플랫폼에 추가되는 추가 기능도 이러한 방식으로 프로그레시브 웹 앱에 계층화할 수 있습니다.
Chrome에서 원샷 백그라운드 동기화가 사용 설정되었으며, 제이크 아치볼드가 오프라인 위키피디아 앱의 동영상과 작동 방식을 보여주는 도움말을 제공합니다. 프랑수아 보포르도 이 API를 사용해 보고 싶은 경우 사용할 수 있는 여러 Web Bluetooth 샘플을 제공합니다.
프레임워크 친화적
위의 원칙을 기존 애플리케이션이나 빌드 중인 프레임워크에 적용하는 데 아무런 제약이 없습니다. 프로그레시브 웹 앱을 빌드할 때 염두에 두어야 할 다른 원칙으로는 RAIL 사용자 중심 성능 모델과 FLIP 기반 애니메이션이 있습니다.
2016년에는 프로그레시브 웹 앱을 핵심 기능으로 지원하는 상용구 및 시드 프로젝트가 유기적으로 증가할 것으로 기대합니다. 그때까지는 이러한 기능을 앱에 추가하는 데 큰 어려움이 없으며, 제 생각에는 노력할 만한 가치가 충분히 있습니다.
아키텍처
프로그레시브 웹 앱 모델에 얼마나 '올인'하는지에 따라 다양한 수준이 있지만, 일반적으로 취하는 접근 방식은 앱 셸을 중심으로 아키텍처를 설계하는 것입니다. 이는 필수 요구사항은 아니지만 여러 이점이 있습니다.
앱 셸 아키텍처는 앱 셸(사용자 인터페이스)을 캐싱하여 오프라인에서 작동하도록 하고 JavaScript를 사용하여 콘텐츠를 채우도록 권장합니다. 반복 방문 시 네트워크 없이도 화면에 의미 있는 픽셀을 매우 빠르게 표시할 수 있습니다. 콘텐츠가 결국 네트워크에서 가져오는 경우에도 마찬가지입니다. 이렇게 하면 성능이 크게 향상됩니다.
제레미 키스는 최근 이러한 유형의 모델에서 서버 측 렌더링을 대체로 간주해서는 안 되며 클라이언트 측 렌더링을 개선사항으로 간주해야 한다고 언급했습니다. 타당한 의견입니다.
앱 셸 모델에서는 서버 측 렌더링을 최대한 사용해야 하며, 서비스 워커가 지원될 때 환경을 '개선'하는 것과 동일한 방식으로 클라이언트 측 점진적 렌더링을 개선사항으로 사용해야 합니다. 궁극적으로 이 문제에 접근하는 방법은 다양합니다.
아키텍처에 관한 Google의 자료를 읽고 유사한 원칙을 자체 애플리케이션과 스택에 가장 잘 적용할 수 있는 방법을 평가하는 것이 좋습니다.
시작하기 상용구
앱 셸
app-shell 저장소에는 거의 완전한 앱 셸 아키텍처 구현이 포함되어 있습니다. Express.js로 작성된 백엔드와 ES2015로 작성된 프런트엔드가 있습니다.
모델의 클라이언트 측과 서버 측 부분을 모두 다루고 있으며 많은 작업이 진행되므로 코드베이스에 익숙해지는 데 시간이 걸릴 수 있습니다. 그 외에는 현재 가장 포괄적인 프로그레시브 웹 앱 시작점입니다. 이 프로젝트의 다음 중점 사항은 Docs입니다.
Polymer 스타터 키트
Polymer 웹 앱의 공식 시작점은 다음과 같은 프로그레시브 웹 앱 기능을 지원합니다.
- 웹 애플리케이션 매니페스트
- Android용 Chrome 스플래시 화면
- Platinum SW 요소를 사용한 서비스 워커 오프라인 캐싱
- Platinum 푸시 요소를 사용한 푸시 알림(수동 설정 필요)
현재 버전의 PSK는 일부 프로그레시브 폴리머 웹 앱에서 볼 수 있는 고급 성능 패턴(예: 앱 셸 모델, 비동기 로드)을 지원하지 않습니다.
2016년에는 이러한 패턴을 PSK에 적용하는 것을 목표로 하고 있지만, 이와 관련된 초기 실험은 Rob Dodson의 Polymer Zuperkulblog 앱과 Eric Bidelman의 훌륭한 Polymer Perf Patterns 강연에서 확인할 수 있습니다.
웹 스타터 키트
새로운 바닐라 프로젝트를 위한 Google의 독자적인 시작점에는 다음과 같은 프로그레시브 웹 앱 기능이 포함되어 있습니다.
- 웹 애플리케이션 매니페스트
- Android용 Chrome 스플래시 화면
- sw-precache를 통한 서비스 워커 사전 캐싱
바닐라 JS/ES2015를 사용하고 싶지만 Polymer를 사용할 수 없는 경우, Web Starter Kit는 코드 스니펫을 재사용하거나 가져올 수 있는 참조 지점으로 유용할 수 있습니다.
프레임워크가 있는 프로그레시브 웹 앱과 프레임워크가 없는 프로그레시브 웹 앱
JS 라이브러리 및 프레임워크를 사용하거나 사용하지 않고 커뮤니티 구성원이 이미 여러 오픈소스 프로그레시브 웹 앱을 빌드했습니다. 아이디어를 얻고 싶다면 아래 저장소를 참고하세요. 또한 매우 훌륭한 앱입니다.
Vanilla JavaScript
- 폴 루이스의 음성 메모는
app-shell(설명)와 유사한 아키텍처를 사용하여 빌드되었습니다. - 오프라인 위키백과 - Jake Archibald(동영상)
- Air Horner(폴 킨란)
- 폴 루이스의 기타 튜너(설명)
Polymer
- Zuperkulblog(롭 도슨, 슬라이드)
React
가상 DOM
- Pokedex(Nolan Lawson) - 점진적 렌더링을 지원하기 위해 '웹 작업자에서 모든 작업 수행' 접근 방식을 적용하는 우수한 프로그레시브 웹 앱입니다. (write-up)
Angular.js
- Kenneth Auchenberg의 Timey.in - 리소스 미리 캐싱에
sw-precache도 사용합니다.
맺음말
앞서 언급했듯이 프로그레시브 웹 앱은 아직 초기 단계에 있지만, 그 이면의 방법론을 살펴보고 자신의 웹 앱에 얼마나 잘 적용할 수 있는지 확인해 볼 수 있는 흥미로운 시기입니다.
폴 킨란은 현재 프로그레시브 웹 앱에 관한 웹 기초 가이드를 계획하고 있으며, 다루었으면 하는 영역에 관한 의견이 있으면 언제든지 스레드에 댓글을 남겨 주세요.