PWA란 무엇인가?
pwa (progressive web application)의 줄임말이다. PWA는 웹이지만 네이티브 앱(모바일 앱)와 같은 역할을 할 수 있다. 네이티브 앱을 개발하는 속도보다 PWA의 개발 속도가 더 빠르다. 또한 푸쉬 알림, 오프라인 시에도 지원하기 때문에 네이티브 앱과 똑같다고 할 수 있다.
starbucks, twitter 등의 웹페이지가 PWA이다. 아이폰이든 안드로이드 폰이든 상관없이, 설치 및 실행하는 것에 차이가 없다. 단순히 스마트폰으로 PWA 웹 사이트에 들어가면, 홈 화면에 설치할 수 있고, 실행 시 브라우저 앱이 아닌 실제 네이티브 앱처럼 보인다.
네이트브앱과 PWA의 차이
보통 네이티브 앱의 경우, 안드로이드는 플레이스토어, ios의 경우는 앱스토어에서 다운받을 수 있다. 각각의 앱은 해당 os에 특화된 프로그래밍 언어로 만들어진다. 따라서 여러 플랫폼을 지원하는 하나의 앱을 만들기란 쉽지 않은 일이다. 여러 플랫폼에서 모두 실행되는 앱을 개발하는 방법 중 하나가 PWA이다.(react native 등 다른 방법도 있음) 하지만 애플의 경우 사파리에서 PWA에 필요한 기술들을 지원하지 않는 경우들도 있다. 만능은 아니란 소리다.
PWA의 장점
- 다양한 앱스토어에 출시하기 위해 별도의 과정이 필요하지 않다.
- 일반적인 웹 기술을 활용해서 PWA를 만들 수 있다.
- 일반적으로 개발 비용이 더 저렴하다.
- 기존의 웹사이트를 앱으로 만들 수 있어, 추가로 유지 관리해야하는 소스코드가 적다.
- PWA는 웹을 어떻게 개발하냐에 따라서 반응형 layout이기 때문에 화면의 크기에 상관없이 잘 동작한다.
- PWA는 부드럽고 빠르고 가볍다.
- 앱스토어에 돈을 들이지 않아도 된다.
- PWA는 검색 엔진을 통해서 찾을 수 있다. (당연히 앱스토어를 통해서도 배포가 가능하다)
- 푸쉬 알림을 통해서 사용자들에게 관심을 끌 수 있다.
- PWA를 설치하게 함으로써 높은 참여율을 이끌어낼 수 있다.
이러한 장점에도 불구하고, 아직은 네이티브 앱이 PWA에 비해 우위를 보이고 있다.
- PWA가 스마트폰의 운영 체제에 접근할 수 있지만 네이티브 앱이 훨씬 더 깊숙히 접근할 수 있다.
- PWA가 할 수 있는 작업에 한계가 있다. (ex. 고성능 게임 개발)
PWA에서 SEO와 관련해서 고려해야할 부분들
PWA를 위한 환경을 설정할 때는, 검색엔진이 자바스크립트에 엑세스 할 수 있어야 한다. 검색 엔진의 봇이 파일에 접근하는 것을 막아 놓으면 안되고, 링크도 유효한 것인지 확인해야 한다. 렌더링 프로세스를 개선하려면 자바스크립트 프레임워크가 SSR을 사용하도록 하는 것이 좋다.
PWA의 세 가지 주요 구성요소
- 보안 연결 (https) : PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 한다.
- 서비스 작업자 (service worker) : service worker는 백그라운드에서 실행되는 스크립트이다. service worker는 네트워크와 관련된 요청의 처리를 도와준다.
- 매니페스트 파일 (manifest file, 설정 파일) : 이것은 json 형식의 파일이며 PWA가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있다. 여기에서 PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있다.
