[Web] Next.js 로 PWA(Progressive Web App)를 적용해보자!

온보딩을 진행중인데, Next.js 를 사용한 PWA 페이지를 만드는 태스크를 받게 되었다.

이에 진행을 하면서 PWA 란 무엇이고 어떻게 만들 수 있는지 알아보며 정리를 해보려고 한다. 

PWA 의 정의

Progressive Web App 이란 쉽게 말하면 웹 기술로 네이티브 앱과 같은 유저 경험을 제공하는 기술이다. (전혀 쉽지 않은데?)

다시 말하면, 웹을 만드는 기술(Html, CSS, JS) 로 네이티브 앱처럼 홈 화면에 아이콘을 추가하거나, 푸시 알림을 보내는 등의 기능을 하게끔 만들 수 있다. (실행은 브라우저에서...) 브라우저에서 보안상의 이유로 접근하지 못하는 시스템 하드웨어 등에도 접근이 가능하다는 장점이 있다. 

 

왜 사용하는가

웹 기술로 네이티브 앱처럼 만드는 것의 장점을 가지고 있기 때문이다. 네이티브 앱을 만들게 되면 앱스토어나 구글 플레이스토어에 등록을 해야하는데, 해당 플랫폼에 특화된 언어(코틀린, 스위프트, 플러터 등..)로 만드는 경우가 많고, 또 출시를 위해 심사도 받아야 한다.

 

PWA 는 잘 만들면 네이티브 앱처럼 빠릿빠릿한데 개발에 필요한 비용도 비교적 적다는 장점도 가지고 있다. 또 PWA 가 브라우저와 URL을 통해 제공되기 때문에 검색 엔진에 노출될 수 있고, 설치를 유도해서 사용자들의 높은 참여를 이끌 수 있다는 장점도 있다고 함. 

 

PWA 에 대해서 알아보기 전엔 몰랐는데, youtube 나 youtube music 처럼 내가 자주 사용하는 서비스에서도 이런 기능을 제공하고 있었다. 가끔 브라우저를 통해 접속하면 검색창 옆에 이렇게 아래와 같은 팝업 창이 뜰 때가 있는데, 이걸 클릭하면 바탕화면에 바로가기 아이콘이 생기고 브라우저와는 약간 다른 생김새의 창에서 실행이 되는 것을 확인할 수 있다. 

어떻게 만들고 적용할 수 있는가

기존 앱을 PWA 로 동작하게 만들기 위해서는 세 가지 선행 작업이 필요하다.

 

1. HTTPS 보안 연결. PWA 앱은 localhost 나 HTTPS 환경에서만 동작한다. (서비스 워커가 https 상에서만 동작하기 때문에 그렇다.) 

2. Service Worker

3. Manifest 파일

 

Service Worker란 웹 앱과 브라우저 사이에 위치하는 프록시 서버의 역할을 수행한다. PWA 에서 오프라인 캐시, 푸시 알림, 백그라운드 동기화 (오프라인 상태에서 멈춰있다가, 온라인 상태가 되었을 때 다시 작업을 재개함) 과 같은 역할을 담당한다. PWA 에서 네이티브 앱스러움을 담당하는 파트라고 보면 된다.

 

Manifest 파일은 PWA 의 동작에 대한 정보 즉 app의 이름, description, icon 등이 정의된 파일이다. json 형식으로 만들어서 link 태그를 통해 브라우저에게 알려줄 수 있다. 

 

처음에는 Service worker 를 직접 작성해서 설정해야 했는데, next-pwa 와 같은 라이브러리가 있어서 쉽게 적용할 수 있다. 해당 링크를 참조해 라이브러리를 설치하고, manifest.json 과 meta tag 등을 적용해주면 아래와 같이 PWA 가 적용됨을 확인할 수 있다. 

와 100점 나왔다..

참고로 Next.13의 app 디렉토리를 사용할 경우 Service worker가 정상적으로 작동되지 않는 오류가 있다. No matching service worker detected... 라는 메시지가 출력되면서 pwa 가 활성화 되지 않는데, 구글링을 해도 명쾌한 해답이 없어서 pages 디렉토리로 변경한 후 적용하니 정상 동작했다. server components 관련 문제 같은데 아직 이런 부분에서 next-pwa가 대응을 하고 있지는 않은듯. 

build 후 public 디렉토리를 확인하면 위와 같이 js 파일이 생성된 것을 볼 수 있음. public 경로에 manifest.json 과 robots.txt, sitemap 을 추가해주었다. public/assets 경로에는 icon 과 splash 이미지가 저장되어 있다. ios, 안드로이드 대응을 위해서 크기별로 준비한 뒤 manifetst.json 과 index.html 에 link 태그로 연결해주어야 하는데, pwa-asset-generator 라는 라이브러리가 있어서 쉽게 적용할 수 있었다. 명령어를 어떻게 써야하는지 readme에 작성이 되어있긴 하지만 잘 모르겠어서 유튜브 영상도 참고했다. ㅋㅋ

 

manifest.json 파일은 정보를 입력하면 자동으로 생성해주는 사이트가 있다. 그리고 상세 항목은 해당 문서를 통해 파악할 수 있다. 적용하기 크게 어렵지 않은 수준이고, icon 같은 경우 위에 링크를 건 pwa-asset-generator 의 옵션을 통해 경로와 옵션을 자동으로 작성할 수 있는 기능을 제공하고 있다. 추가적으로 해당 라이브러리를 통해 splash screen을 생성할 수도 있다. 관련 문서의 Splash screens 항목을 살펴보면, 안드로이드는 manifest에 정의된 내용을 바탕으로 자동으로 스플래시 스크린을 생성하지만, ios 는 기기의 사이즈에 맞게 대응을 해줘야 한다는 항목이 나온다. 

robots.txt , sitemap.xml

두 파일 모두 SEO 를 위해서 제공했다. 검색엔진은 크롤링과 인덱싱을 통해 웹페이지 정보를 수집하고 이를 토대로 분석해 검색 결과를 띄운다. 검색엔진 최적화란 결국 검색을 했을 때 나의 사이트가 상위에 노출되도록 만드는 것을 의미하는데, 올바른 정보를 많이 제공했을 때 제대로 분석되어서 상위에 노출이 될 것이 아닌가. 

 

robots.txt 는 검색 엔진 로봇의 접근을 제어하고, 웹사이트의 사이트맵(xml파일) 이 어디에 위치해있는지 알려주는 역할을 말한다. 구글 문서를 살펴보니 robots.txt 파일이 없다고 해서 크롤러가 접근하지 못하는 것은 아니고, txt 파일 내에서 Disallow 속성을 통해 검색 결과에 노출시키지 않을 페이지를 설정할 수 있다. 또한 웹사이트 내에서 여러 페이지가 중복 콘텐츠를 제공한다면, 중복된 내용이 검색엔진최적화에 부정적인 영향을 줄 수 있기 때문에 이를 robots.txt 를 통해 조절할 수 있다는 장점이 있다.

 

sitemap이란 이름처럼 우리 사이트는 이렇게 생겼어요- 라는 목차와 같은 역할을 한다. 이 아티클에 따르면 크롤러가 쉽게 발견하지 못하는 페이지도 이 사이트맵을 통해서 알 수 있기 때문에 있는게 더 좋다.

정리

* Next.js 에서 pwa 를 만드는 방법은 next-pwa 라이브러리를 사용하면 된다.

* app directory 를 사용하면 service worker가 정상 적용되지 않으니 pages 디렉토리를 사용할 것.

* 가이드에 따라 meta tag 와 manifest.json 등을 설정한다.