Progressive Web App - PWA

■ GDG Daejeon - DevFest 2018

대전에서 GDG Daejeon DevFest 2018이 진행되었다. 행사를 진행하면서도 각각의 세션내용에 관심을 가지고 나도 무언가를 배워가고자 열심히 필기를 했다. 가장 와 닿았던 세션들은 조은님의 Progressive Web Apps와 장인수님의 Flutter 세션이였다. Flutter는 최근에 React Native를 새롭게 시작해서 경쟁 플랫폼인 Flutter에 대해 관심을 가지고 있었고, PWA는 기존에 알고있던 개념이기도 하고 한번 시도는 해보고 싶은데 기회가 없어서 못해봤고, 무엇보다 조은님께서 세션을 쉽고 재미있게 진행해주셔서 기억에 많이 남았다. 그래서 이번 포스팅에선 PWA에 대해서 간단하게 정리를 해보고자 한다.

■ Progressive Web App

우선 왜 이름이 'Progressive' Web App인지가 궁금해서 찾아보았지만 결론은 내지 못했다. '점진적인 개선을 통해 작성되는...' '어떤 브라우저에서도 상관없이 돌아가는..' 등 자료마다 제각기 설명이 다르다. 구글 개발자 문서에서는 '점진적인 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관없이 모든 사용자에게 적합합니다.' 라고 되어있다. 번역된 문서라 그런지 설명이 미흡하다.. 마치 Java의 이름이 왜 Java인지 물어보는것과 같다는 생각이 들어 결론을 내지 않기로 했다.

본론으로 돌아와서 Progressive Web App에대해 간단히 소개하자면, 네이티브 어플리케이션의 장점과 웹페이지의 장점을 모두 가지는 웹 어플리케이션이라 할 수 있을 것 같다. 네이티브 앱은 설치하기가 어렵고 용량도 많이 차지하지만, 한 번 설치하면 빠르고 편리하게 쓸 수 있다는 장점이 있다. 웹 페이지는 설치가 필요하지 않지만 페이지에 접근하기 위해 브라우저를 키고 검색 또는 주소를 입력해야하기 대문에 접근 방법이 비교적 불편하다.

그래서 PWA는 FIRE라는 특징을 가지게 개발한다. 원래는 FRE뿐이였는데 I가 추가되어 FIRE라는 단어가 완성되었다고 한다.

Fast - 인터렉션이 네이티브 앱처럼 부드럽고 빠르게

Integrated - 앱처럼 접근할 수 있게

Reliable - Offline 환경, 또는 네트워크가 열악한 에서도 동작할 수 있게

Engaging - 네이티브 앱과 같이 느낄 수 있는 UX(사용자 경험)

그래서 PWA의 특징을 간단하게 요약하자면 네이티브 어플리케이션 처럼 홈 화면에 아이콘을 설치해서 네이티브 앱처럼 간단하게 접근할 수 있으며, 오프라인, 네트워크가 열악한 환경에서도 동작되는 웹 어플리케이션이다. 이러한 특징들은 구글 PWA 공식 문서에 자세하게 소개되어있다.

■ Offline Support

PWA의 핵심은 아마 Offline Support라고 볼 수 있을 것 같다. 기존 웹페이지들은 오프라인 환경이면 접근이 안되고 크롬의 경우 마치 심심함을 달래라는 듯이 공룡 게임을 보여준다. 하지만 PWA는 오프라인 환경에서도 절때 이 공룡 게임을 보여주지 않는것이 원칙이다. 이러한 것이 가능한 이유에는 Service Worker와 캐싱에 있다.

Service Worker

Service Worker는 native android의 Service개념과 비슷하다고 볼 수 있다. Service Worker를 통해 무거운 작업이나 시간이 오래 소요되는 작업등을 백그라운드로 처리할 수 있다. Service Worker의 사용예를 간단하게 들어보면 오프라인 환경일 때 사용자가 요청한 Request 들을 쌓아 두었다가 네트워크가 연결되면 그 때 처리하도록 할 수 있으며 Push Message를 받아서 처리하는대에도 활용할 수 있다.

캐싱

우선 캐싱의 경우에는 Local Storage와 Service Worker의 Cache API 두 가지를 사용할 수 있는데 대략적으로는 웹앱이 구동하기 위해 필요한 리소스나 데이터들을 미리 캐싱해두고 네트워크가 원활하지 않은 환경에서 캐싱된 정보들을 사용하는 것 이다. 예를들어 웹페이지를 보여주기 위해 사용되는 Html, Javascript 파일들을 브라우저에 캐싱해두어 Offline 환경일 때 서버에서 파일을 받아오지 못하는 대신 캐싱한 파일들을 전시하여 오프라인 환경에서도 웹페이지가 전시될 수 있게 할 수 있다.

■ PWA를 도입하기에 앞서

나도 Native, Cross-Platform, Hybrid, PWA중 무엇으로 서비스를 개발할지를 많이 고민한 경험이 있다. 결론을 미리 말하자면 서비스의 특성에 따라 결정하는 것이 좋다. 무엇이 무조건 좋다고 할수는 어렵다. 게임의 경우 최적의 성능을 뽑아내야 하기 때문에 당연히 Native로 개발을 해야 하고 비교적 성능이 떨어지지만 효율이 더 높고 Android, IOS 두 플랫폼을 동시에 빠르게 개발하기를 원한다면 Cross-Platform을, 여행, 숙박 등 흔하게 사용되지는 않아서 굳이 앱으로 깔아야 할까라는 의문이 들만한 가벼운 것들을 PWA로 개발하는게 좋을듯 하다. Hybrid는 점점 포지션이 에매해지는 듯 하다.

■ 마치며

2년 전쯤에 Web Worker라는 개념이 새로 나와서 소개 하는 글을 쓴적이 있다. Service Worker와 Web Worker가 동일한 개념인줄 알고 있었는데 엄연히 다른 개념이라고 한다. Web Worker에 대해서 소개할 당시부터 지금까지도 Web Worker를 활용하는 사례는 주변에서 잘 찾아보지 못했다. Service Worker는 Dom에 접근할 수 없지만 Dom에 접근할 수 있는 Worker Dom이라는 다른 개념도 있다고 소개해 주셨다. Worker Dom과 Web Worker의 차이점은 좀 더 조사를 해 보아야 할듯 하다.