2.2 웹 페이지의 점수는?!

우리는 이미 PWA의 요건을 알고 있습니다. 하지만 우리가 만든 웹이 PWA의 요건을 충족하는지 어떻게 확인할 수 있을까요?

첫 번째 방법은 Chrome DevTools에서 제공하는 Lighthouse를 사용하는 것이고, 다른 하나는 PWA Builder를 사용하는 방법입니다. 본 강의에서는 PWA Builder를 사용하여 실습을 진행할 것입니다.

1. Lighthouse

Lighthouse(라이트 하우스)는 웹 페이지의 품질을 개선하기 위한 자동 오픈 소스 도구로, 성능, 접근성, PWA, SEO 등에 대한 검사를 진행할 수 있습니다.

먼저, Lighthouse를 통해 웹 페이지 검사를 진행하도록 하겠습니다.

개발자 도구를 여는 단축키는 Mac에서는 Option + Command + i이고, Windows에서는 Ctrl + Shift + i입니다. F12를 통해서도 개발자 도구를 열 수 있습니다.

아래는 단축키를 사용하지 않고 개발자 도구를 여는 방법입니다.

개발자 도구 상단에 있는 메뉴에서 Lighthouse를 클릭합니다.

Generate report 버튼을 클릭하여 검사를 시작합니다.

검사가 완료되면 아래와 같이 5개 항목에 대한 결과가 나옵니다. 개발자 도구에서 아래로 스크롤을 내리면 각 항목에 대해 어떤 점을 충족했고, 충족하지 않았는지 상세하게 설명되어 있습니다.

PWA Builder에서는 PWA의 3가지 요건을 만족하는지에 대한 점수를 매기고, Manifest와 Service Worker를 쉽게 작성할 수 있도록 도와줍니다.

PWA Builder 페이지에서 웹 페이지 주소를 입력한 후 Start 버튼을 클릭하면 테스트가 진행됩니다. 이때 URL은 https로 연결된 URL이어야 합니다.

테스트 완료 후에는 Manifest, Service Worker, Security에 대한 점수를 확인할 수 있습니다. 현재 우리는 테스트할 URL이 없기 때문에 URL을 먼저 생성한 후 검사를 진행해 보도록 하겠습니다.