이 글은 2019년 6월 8일 (토)에 진행 예정인 PWA 코드랩을 위한 가이드라인입니다. 비록 PWA 코드랩에 참석하지 않으셨더라도 이 글을 통해 PWA에 입문하실 수 있습니다.
이 가이드라인은 개발을 처음 접하는 사람이더라도 3시간 내외로 진행이 가능합니다. 이 가이드라인을 통해 PWA를 접하는 사람이 조금이라도 많아졌으면 좋겠습니다.
Table of Contents
- PWA (Progressive Web App)란 무엇인가?
- 어떻게 코드랩을 진행할 수 있는가?
PWA란 무엇인가?
PWA는 Progressive Web Apps의 약자로 Web App을 만드는 접근방식 중 하나입니다. Google이 가장 큰 지지자로 있는 상태이며 MS와 Apple에서도 현재는 여러 부분에서 PWA 지원을 위해 노력하고 있습니다.
PWA는 어플리케이션의 경험을 웹 기술을 이용해 구현하는 것입니다. 여러분들이 전통적으로 사용하던 어플리케이션의 경험은 아래와 같을 것입니다.
- 플레이스토어나 앱스토어에 들어간다.
- 어플리케이션을 설치한다.
- 홈스크린에 노출된 앱 아이콘을 클릭한다.
- 어플리케이션이 실행된다.
어플리케이션을 설치한다는 경험은 컴퓨터 과학 역사에서 오랫동안 존재했고 너무나 익숙한 일이기 때문에 여러분들 그 누구도 설치를 어색해하지는 않을 거라 생각합니다. 하지만 웹앱은 어땠을까요?
예를 들어 대표적인 웹앱인 Gmail을 사용한다고 가정해봅시다.
- 브라우저를 실행한다.
- mail.google.com 으로 들어가거나 검색엔진에서 Gmail을 검색한다.
- 사용한다.
웹 앱의 큰 단점 중 하나는 사용자들의 충성도를 높이기가 쉽지 않다는 점입니다. 메일 서비스를 사용하는 것이 목적이라면 Gmail 웹이 아니더라도 Mac 기본 메일, MS Outlet 등 다양한 메일 어플리케이션이 존재하고 어플리케이션을 사용하는 것이 더 나은 사용성을 제공할 때도 있기 때문입니다.
또한 브라우저를 실행해서 도메인을 입력하거나 Gmail을 검색하는 행위 자체가 반복적으로 일어나는 불필요한 작업이기 때문에 자주 사용하는 어플리케이션이라면 더더욱 이 과정은 번거로워집니다.
Mobile에서는 iOS와 Android가 둘 다 Add to Homescreen을 지원합니다. 특정한 웹 사이트를 북마크하는 대신 홈스크린에 추가하는 기능입니다. 이를 통해서 웹앱을 여는 1번 과정과 2번 과정을 생략할 수 있습니다.
Slack 같은 일부 웹 앱은 전략을 다르게 세웠습니다. 유저들이 항상 *.slack.com 을 일일히 입력해 방문하게 하는 대신, 껍데기는 앱이지만 내용물은 웹을 노출시켜주는 전략을 세웠습니다. 이런 앱들을 하이브리드 앱이라고 부르고, 보통 Electron 같은 도구를 사용해서 하이브리드 앱을 구현합니다.
대신 하이브리드 앱은 검색이 안됩니다. 앱스토어나 플레이스토어에서 해당 어플리케이션을 찾아야하고, 서비스를 제공하는 업체에서는 해당 어플리케이션을 위한 별도의 브랜딩 사이트를 구축하는 방식으로 구현하게 됩니다. 대표적인 예제를 다시 한번 말씀드리면 Slack입니다.
또한 앱의 가장 큰 장점은 오프라인에서도 사용할 수 있다는 점입니다. 사용자들이 이미 필요한 자원을 로컬에 이미 설치해두었기 때문에 일부 로컬에 남아있는 데이터들을 통해 오프라인 모드를 지원할 수 있습니다. 웹은 접속할 때마다 HTTP 리퀘스트를 날리고 리소스를 다운받아야하기 때문에 오프라인 모드 지원이 어렵습니다.
PWA는 웹의 장점과 앱의 장점을 적절히 녹여냈습니다. 사용자들은 PWA를 검색할 수 있고, 브라우저에서 PWA에 접근하여 PWA를 충분히 탐색하다가, 본인이 원한다면 홈스크린에 추가할 수 있고 홈스크린에 추가한 아이콘을 통해 PWA를 실행할 수 있습니다. 또한 원한다면 필수 리소스를 로컬에 캐싱하여 오프라인 모드를 지원할 수도 있습니다.
PWA는 결국 어떤 기술을 지칭하는 것이 아니라 웹 어플리케이션의 구현 방법에 가깝습니다. 그렇기 때문에 본인의 상황에 맞추어서 PWA로 구현하면 되며, PWA가 포함하고 있는 기술 중에서 핵심적인 부분들만 Pick해서 사용해도 괜찮습니다.
어떻게 코드랩을 진행할 수 있는가?
우선 코드를 작성하기 위한 에디터를 설치해야합니다. 개인적으로는 무료인데 기능도 가장 잘 되어있는 Visual Studio Code를 추천합니다. 이미 개발에 익숙하신 분이라면 본인이 사용하던 도구를 사용하셔도 됩니다.
Google에서 공식적으로 지원하는 코드랩은 전부 아래 링크에 있습니다. 여기서 Progressive Web App을 검색하면 PWA 관련 코드랩이 나옵니다.
https://codelabs.developers.google.com
여기서 원하는 것을 고를 수 있지만 제가 처음으로추천하는 것은 우선 Your First Progressive Web App입니다. 가장 심플하고 따라하기 쉽기 때문입니다.
이 코드랩을 통해 PWA의 핵심 기술인 Service Worker와 Web App Manifest에 대해 배우게 됩니다. 또한 Service Worker를 통해 Offline 모드를 어떻게 지원할 수 있는 지까지 친절하게 설명해줍니다.
이 코드랩을 모두 마쳤다면 기본적인 기술에 대해서는 이해한 것이기 때문에, 이제부터 여러분들이 사용하는 기술에 직접적으로 붙일 수도 있을 것입니다. 이 코드랩을 진행하는 데에 약 30분 정도가 소요됩니다.
아래 코드랩은 PWA에 대해 완벽하게 이해하기 위한 트레이닝 코스입니다.
라이브러리별로 일부 상이하기는 하지만 대부분의 라이브러리가 CLI를 사용해서 프로젝트를 생성한 경우에는 Service Worker와 Web App Manifest를 기본으로 생성해줍니다.
Service Worker와 Web App Manifest가 PWA의 핵심적인 기술이기 때문에 이 부분에 대해서만 우선적으로 설정해두아도 추후에 PWA 전략을 세우는 데 큰 도움이 됩니다.
예를 들어 react의 CLI인 create-react-app로 프로젝트를 생성하면 아래 구조의 프로젝트가 구성됩니다.
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js여기서 serviceWorker.js와 manifest.json이 각각 Service Worker와 Web App Manifest입니다. 여러분들의 입맛에 맞게 수정하면 됩니다.
Vue CLI는 PWA를 위한 플러그인을 기본적으로 제공합니다. 해당 플러그인을 설치한 후에 추가하면 되는 식이라고 설명되어 있습니다.
Angular또한 CLI에서 바로 pwa를 추가할 수 있고 다른 프로젝트에 비하면 비교적 간편한 편입니다. 아래 가이드를 따라하면 됩니다.
각각의 라이브러리에 Service Worker와 Web App Manifest 등을 넣어두셨다면 나머지는 이제 여러분들의 몫입니다. Codelabs에 있는 코드랩을 더 진행해도 상관없고, web.dev 의 가이드를 따라해보실 수도 있습니다.
Chrome의 Lighthouse라는 도구를 이용해서 현재 본인의 웹사이트가 어느정도 PWA를 지원하는 지에 대해서 알 수 있습니다. Chrome DevTools에서 Audits 탭을 열면 Lighthouse가 있습니다.
Mobile.twitter.com을 Lighthouse로 돌려보면 아래와 같은 결과가 나옵니다. (아무 사이트나 돌려볼 수 있으며, 로컬에서 돌릴 때에는 localhost에서 돌려야합니다)
Lighthouse는 또한 여러분들의 웹 사이트를 개선할 수 있는 다양한 방법을 이야기하기 떄문에 한번쯤 돌려보시는 걸 권장합니다.
끝
이 글이 여러분이 PWA를 서비스에 도입하는 데 많은 도움이 될 거라 기대합니다. 서비스에 새로운 아키텍쳐를 도입하기 위해서는 많은 시행착오와 치밀한 전략을 필요로 합니다.
PWA 도입을 통해서 충분히 이점을 얻을 수 있다면 PWA 도입을 고려해볼만 하지만, 여러분들의 웹 사이트가 PWA를 통해 이점을 얻을 수 없다면 구태여 PWA 도입을 하시는 걸 권장하지는 않습니다. 하지만 대부분의 경우에서 PWA 패러다임이 여러분들에게 큰 도움을 줄 것이라 생각합니다.
궁금한 점은 덧글로 남겨주세요.
이어지는 글:
