PWA(Progressive Web Application)에 대해서 알아보기

네이티브앱개발 힘들죠?

PWA에 대해서 알아봅시다.

일을 하다 보면 클라이언트에서 요구하는 경우가 있습니다. 지금 일 하는 곳의 특성상 정보와 관련하여 현장에서 사용하는 경우가 많기 때문에 PC에 중점적인 상황을 맞춰 개발을 하는 경우가 있습니다. 그럴 때 클라이언트는 요구를 합니다. "아 우리 모바일에서도 볼 수 있었으면 좋겠는데.." 이런 요구에 다양한 방법으로 대응을 할 수 있습니다. 예를 들어 반응형이라던지 모바일용으로 다시 개발을 하는 방법 등이 있는데 그중 한 가지 방법은 바로 PWA방법이 있습니다. 아마 개발을 조금이라도 들어보셨던 분이라면 PWA에 대해서 대략적으로 알고 있으리라 생각을 합니다. 모르는 분들도 이 글을 보시면 조금이라도 이해를 할 수 있으리라 생각을 합니다.

목차

PWA(Progressive Web Application)

PWA 소개

Progressive라는 뜻은 한국말로 하면 '진보적'이라는 뜻이라고 말을 할 수 있습니다. 진보적인 웹이라고 생각을 하시면 됩니다. 웹 개발을 한다고 하면 보편적으로 흔히 사용하고 있는 PC를 기준으로 개발하는 경우가 많습니다. 그런데 모바일을 대응을 하기 위해 Android, iOS 등을 다시 만들려면 다양한 기술에 접목하여 만들어야 하는데 PWA라는 것을 활용하여한다면 모바일에선 마치 앱과 같이 만들 수 있다는 장점이 있습니다. 특별한 것은 아니지만 기능이 푸시알림이나 오프라인지원 등과 같은 네이티브 앱의 특징들도 똑같이 지원을 할 수 있습니다.

PWA가 적용된 사이트는?

우리가 일상생활 속에서 PWA를 사용하는 사이트는 어떤 사이트가 있을까요? 제일 쉽게 볼 수 있었던 사이트는 현재 X(구 트위터)가 PWA로 지원을 하고 있었습니다. 그리고 지금은 많이 사용을 안 하고 계시지만 페이스북도 PWA로 지원이 되고 있습니다. 현재 접속을 해보니 페이스북은 아직 PWA를 지원을 하고 있고 X는 현재 확인을 할 수 없었습니다. PWA를 지원을 하냐 안 하냐를 볼 수 있는 간단한 방법은 위 사진과 같이 홈페이지를 접속을 했을 때 설치를 할 수 있는 아이콘이 표시가 됩니다.

크롬 Lighthouse로 분석하면 PWA사용을 확인을 할 수 있습니다.

PWA 핵심 구성요소는?

첫 번째는 바로 서비스 작업자(Service Worker)라는 것이 필요합니다. 서비스 작업자는 백그라운드에서 실행되는 스크립트라는 것으로 이해를 하시면 됩니다. 해당 서비스 작업자는 네트워크와 관련된 요청의 처리를 도와주는 것입니다.

두 번째는 가장 기본적으로 필요하다고 생각하는 HTTPS 연결이 필요합니다. PWA를 실행을 하기 위해서 사실 제일 기본적으로 필요한 방법 중 하나입니다. 로컬에서 개발할 때 사용을 하는 것은 큰 문제는 없지만 사용자에게 사용을 하게 하기 위해선 반드시 필요 요소 중 하나입니다.

세 번째는 매니페스트 파일입니다.  이것은 저희가 개발할 때 흔하게 접하는 JSON 파일이며 PWA가 실행하며 가능한 표시하는 방법에 대한 기능들 그러니깐 이름, 설명, 아이콘, 색상 등을 해줄 수 있는 것입니다.

PWA 조건과 함께 장점/단점이 있나요?

모든 브라우저 동작, 빠른 로드 및 유지, HTTPS 제공, WEB API 네이티브 앱 제공, 오프라인 제공, 이용자 기기 설치 등의 조건이 필요합니다.

PWA의 가장 큰 장점은 사실 앞서 이야기했듯이 네이티브 앱을 따로 구현하지 않아도 기능을 그대로 사용을 하여 개발을 할 수 있다는 것입니다. 그러닌깐 개발자는 Andorid, iOS 등을 따로 개발을 진행을 하지 않아도 마치 앱과 같이 설치를 진행을 하면 사용을 할 수 있다는 것이 가장 큰 장점입니다. 일반 반응형 등과 다르게 네이티브 앱의 기능을 사용을 할 수 있는 거죠 그러면 단점이 무엇이 있을까요? 바로 인지도라는 것이 저의 생각입니다. 사실 여러분들이 스마트폰을 사용을 하시든 PC를 이용하여 웹을 이용을 하면서 얼마큼 PWA를 이용하여 앱설치를 하고 사용을 해보셨나요? 사용율이 극히 저조할 것이라고 생각합니다. 또 문제는 네이티브 앱처럼 사용을 할 수 있으나 그만큼 하드웨어에 대한 자원을 활용을 할 수 없다는 것입니다. 이 말은 즉 성능에도 제한이 분명 있다는 것입니다.

PWA 간단소스 둘러보기

// 서비스 워커 [MDN WEB DOCS] 등록
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/pwa-examples/js13kpwa/sw.js");
}

// 설치
self.addEventListener("install", function (e) {
  console.log("[Service Worker] Install");
});

// SERVICE WORKER FETCH
self.addEventListener("fetch", function (e) {
  console.log("[Service Worker] Fetched resource " + e.request.url);
});

MDN WEB ODCS[예시참고 #]

마무리

간단하고 쉽게 PWA에 대해서 알아봤습니다. 여러분은 어떻게 생각하시나요? 저의 경우 일 할 때 클라이언트의 요구에 부합하다는 생각으로 개발을 하게 되어 배포까지 진행을 했는데 일단 생소했던 서비스워커에 대해서 알아보고 하는 것이 조금 번거롭다는 생각을 했지만 네이티브 앱의 기능을 별도로 추가를 할 필요 없이 사용을 할 수 있다는 것은 굉장히 매력적으로 다가왔습니다. 이 글을 보고 수정할 내용이나 추가할 내용이 있다면 댓글을 통해 남겨주시면 추가 또는 수정하도록 하겠습니다 또 궁금한 내용이 있다면 댓글을 남겨주시면 답변드리도록 하겠습니다!