PWA에 대해 알아보자
이번에 프로젝트로 웹 애플리케이션를 개발하면서 PWA(Progressive Web App) 라는 개념에 대해 접하게 되었다.
웹 애플리케이션, 프론트엔드를 공부하는 입장에서 처음 접하는 용어에 대한 호기심이 생겼고, 이번 시간을 통해 PWA 에 대해 함께 알아보려고 한다.
모바일 앱
PWA 에 대해 알아보기 전에 PWA 가 등장하기 전의 모바일 앱에 대해 이해할 필요가 있었다.
-
네이티브 앱(Native App)
네이티브 앱은 모바일 기기에서 가장 흔하게 사용하는 형태의 앱으로 안드로이드의 플레이 스토어 혹은 ios의 앱 스토어에서 다운받아서 사용하는 앱을 생각하면 된다.네이티브 앱은 각 OS에 최적화되어 동작하며, OS의 자원을 최대한 활용할 수 있다는 장점이 있다. 하지만 각 OS에 맞는 환경에서 개발을 해야하기 때문에 더 많은 시간과 비용이 필요하고, 앱을 사용하기 위해서 설치를 해야한다는 집입 장벽이 존재한다. -
모바일 웹 앱(Mobile Web App)
모바일 웹 앱은 모바일 기기에 설치된 웹 브라우저를 기반으로 동작하는 앱으로 모바일을 통해 접근한 웹 사이트라고 생각하면 된다.모바일 웹 앱은 별도의 설치 없이 대부분의 기기에서 사용이 가능하며 시간과 비용적인 측면에서 장점이 있다. 오프라인 상태에서는 서비스 이용이 제한되며, 브라우저 상에서 동작하기 때문에 OS의 자원을 활용하는 데에도 제약이 있다. -
하이브리 드 앱(Hybrid App)
하이브리드 앱은네이티브 앱과모바일 웹 앱의 장점을 살리면서 단점을 보완하고자 두 가지 방식을 결합한 형태의 앱이다.하이브리드 앱은모바일 웹 앱기술을 통해 개발을 하기 때문에 시간과 비용적인 측면에서네이티브 앱보다 좋을 수 있지만, 여전히네이티브 앱만큼 성능이 최적화 되거나 OS의 자원을 활용하는 데에는 제약이 있다.
PWA(Progressive Web App)
그럼 이제 PWA 에 대해 알아보자. PWA 는 Google I/O 2016 에서 소개된 개념으로 모바일 웹 앱을 마치 네이티브 앱스럽게 만들고자하는 방법론이다. 이 설명만 보았을 때는 하이브리드 앱와 비슷하게 느껴진다.
MDN 에서는 PWA 는 새로운 기술이 아닌 웹 앱을 개발하는 새로운 방법론이라는 것을 여러 차례에 걸쳐 말하고 있다. 기존의 기술들을 활용하여 모바일 웹 앱을 네이티브 앱처럼 사용할 수 있도록하는 것이다.
반면 하이브리드 앱은 모바일 웹 앱 기술로 앱을 개발하고, 프레임워크를 사용해서 네이티브 앱으로 패키징을 해주어야한다는 차이가 있다.
PWA는 모바일 웹 앱과 구분되기 위한 몇 가지 원칙있다.
- 발견 가능, 컨텐츠를 검색 엔진을 통해 찾을 수 있다.
- 설치 가능, 홈 화면에서 사용할 수 있다.
- 연결 가능, 간단하게 URL을 전송해 공유할 수 있다.
- 네트워크 독립적, 오프라인이나 불안한 네트워크 연결에서 동작한다.
- 점진적, 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기능은 여전히 사용할 수 있다.
- 재 참여 가능, 알림을 보낼 수 있다.
- 반응형, 모든 기기의 화면이나 브라우저에서 사용할 수 있다
- 안전, 민감한 데이터에 접근하려는 모든 제3자로부터 안전하다.
설치를 통해 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동이 가능하고 오프라인에서 동작할 수 있어야한다. 또한 푸시 메시지를 통해 사용자에게 알림을 제공해야한다.
이러한 기능은 확실히 모바일 웹 앱보다는 네이티브 앱에서 많이 볼 수 있던 기능으로 서비스를 편리하게 사용하는데 도움을 주는 기능이다.
PWA에서 이를 가능하게 해주는 것은 서비스 워커와 웹 앱 매니페스트이다.
서비스 워커는 캐싱을 통해 오프라인 상태에서도 사용자가 모바일 웹 앱을 사용할 수 있도록 도와주는 역할을 한다. 웹 앱 매니페스트는 사용자의 홈 화면에 설치할 수 있는 웹사이트를 구성하는 역할을 한다. 모바일 웹 앱의 정보를 제공하여, 홈 화면 설치를 통한 더 빠른 접근을 가능하게 한다.
마무리
이번에 모바일 앱의 종류와 PWA에 대해 공부하면서, 모바일 앱은 성능적인 측면 뿐만아니라 사용자의 관점에서 사용성을 고려하며 발전해 나가고 있다는 걸 알 수 있었다.