프로그레시브 웹 앱(Progressive Web Application) 이란?
Progressive Web Application 즉, PWA는 최근 웹 개발의 중요한 트렌드로 떠오르고 있는 기술로 전통적인 웹 앱과 네이티브 앱의 장점을 결합하여 사용자에게 웹에서 네이티브 앱과 유사한 경험을 제공할 수 있습니다. PWA는 네이티브 앱과 같이 오프라인에서도 작동하며, 푸시 알림을 제공하고, 홈 화면에 아이콘 역시 추가할 수 있습니다. 또한 반응형 디자인을 통해 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있습니다. 오늘은 이렇듯 사용자들에게는 네이티브 앱 수준에서의 경험을 제공하고 개발자에게는 동일하 코드베이스로 여러 플랫폼에서 앱을 배포하여 개발 생산성 역시 높여줄 수 있는 PWA에 대해 보다 자세히 알아보겠습니다.
프로그레시브 웹 앱(Progressive Web Application) 장점
PWA는 네이티브 앱을 대부분 개발자들이 알고 있는 HTML, CSS, 자바스크립트와 같은 웹 기술로 구현하며 앱의 사용자 경험을 제공하지만 웹이 가진 아래 장점들을 제공합니다.
첫 번째 PWA의 가장 큰 장점은 접근성이 좋다는 것입니다. PWA는 웹 브라우저를 통해 쉽게 접근할 수 있어 사용자가 앱 스토어에서 앱을 다운로드하거나 설치할 필요가 없습니다. 별도 설치가 없기 때문에 사용자들은 쉽게 앱을 사용할 수 있으며 이는 사용자의 앱 진입 장벽을 낮춰주는 효과를 갖다 줄 수 있습니다.
두번째 PWA는 서비스 워커 및 캐싱과 같은 최신 웹 기술을 활용하여 빠른 로드 시간과 매끄러운 사용자 경험을 제공할 수 있습니다.
세 번째 가용성이 뛰어납니다. PWA의 주요 기능 중 하나는 오프라인이거나 네트워크가 불량한 조건에서도 작동할 수 있다는 것입니다. 콘텐츠와 리소스를 캐싱함으로써 사용자는 오프라인 상태일 때도 앱의 핵심 기능을 사용할 수 있습니다.
네 번째로 검색 엔진 가시성이 있습니다. PWA는 전통적인 웹사이트와 마찬가지로 검색 엔진에서 인덱싱 될 수 있어 사용자가 검색을 통해 해당 앱에 접근할 수 있습니다. 이는 추가적인 마케팅 없이도 유기적으로 트래픽을 만들고 대중들에게 노출할 수 있는 효과를 줄 수 있습니다.
다섯 번째 장점은 비용 효율성입니다. HTML, CSS 및 자바스크립트와 같은 웹 기술을 이용해 개발할 수 있기 때문에 단일 코드로 여러 플랫폼에서 배포할 수 있으며 이는 장기적으로 개발 및 유지 보수 비용을 줄 일 수 있습니다.
프로그레시브 웹 앱(Progressive Web Application) 단점
PWA는 웹 기술을 이용해 구현하면서 웹의 장점을 갖고 올 수 있지만 그렇기 때문에
아래와 같은 단점들이 파생될 수 있습니다.
첫 번째로 네이티브 앱에서 제공하는 고급 기능을 지원하지 않을 수 있습니다. 특정 하드웨어 기능 및 시스템 수준의 기능에 대한 액세스가 제한될 수 있고 이는 네이티브 앱과 비교했을 때 기능면에서 떨어지는 것처럼 보일 수 있습니다.
두번째로 푸시 알림을 지원할 수 있지만 일부 브라우저는 푸시 알림에 제한을 두고 있으며, 사용자 경험이 다양한 플랫폼 및 장치에서 다를 수 있습니다.
세번쨰로 브라우저 호환성이 있습니다. 최신 브라우저는 PWA 기능을 지원하지만 오래된 브라우저는 호환성 문제가 발생할 수 있습니다.
네번째로 PWA의 장점인 웹사이트 검색을 통한 접근과 반대되는 것으로 결국 웹사이트이기 때문에 앱스토어 노출되지 않으며 이는 앱 스토어에서 앱을 다운로드하고 사용하는 것이 익숙해진 사용자들에게는 불편한 요소로 작용할 수 있습니다.
마지막으로 캐싱을 통해 오프라인에서도 앱을 사용할 수 있지만 네이티브 앱과 비교하여 기능이 본질적으로 제한될 수 있습니다. 복잡한 오프라인 작업 또는 상호 작용은 네트워크의 연결 없이는 불가능하기 때문에 결국 오프라인에서의 사용자 시나리오에 불편함을 줄 수 있습니다.
프로그레시브 웹 앱(Progressive Web Application) 구현 방법
다음으로 그렇다면 PWA 기술 방식을 통해 앱을 구현한다면 어떤 방식으로 구현하는지 알아보겠습니다.
첫번째로 웹 앱 manifest파일을 생성합니다. PWA에 대한 메타데이터를 포함하는 매니페스트 파일(manifest.json)은 브라우저가 PWA를 응용 프로그램으로 인식하고 사용자가 홈화면에 설치할 수 있도록 하는 역할을 수행합니다.
두번째로 서비스 워커를 구현합니다. 서비스 워커는 백그라운드에서 실행되는 JavaScript파일로 오프라인 캐싱, 푸시 알림 및 백그라운드 동기화와 같은 기능들을 가능하게 합니다. 서비스워커를 PWA에 통합하여 오프라인 시나리오에서도 신뢰성과 성능을 향상합니다. 오프라인 지원 활성화를 위해 서비스 워커를 사용하여 필수 자산 및 데이터를 캐싱하여 PWA가 오프라인에서도 작동할 수 있도록 구현합니다. HTML, CSS, JavaScript 및 미디어파일과 같은 리소스를 사전 캐싱하여 네트워크 연결 상태에 관계없이 원활한 사용자 경험을 제공할 수 있습니다.
네번째로 HTTPS 보안을 구현합니다. 데이터 보안을 보장하고 잠재적인 보안 위협으로부터 보호하기 위해 PWA를 HTTPS로 제공합니다. 브라우저는 서비스 워커를 안전한 출처에서만 허용하므로 HTTPS는 서비스워커 및 기타 PWA 기능이 작동하는데 필수적입니다.
다섯번째로 다양한 장치, 브라우저 및 네트워크 상태에서 PWA를 테스트하고 호환성과 성능을 테스트합니다.
마지막으로 테스트가 끝난 후 PWA를 호스팅 제공업체에 배포합니다. 호스팅 환경이 HTTPS를 지원하고 성능과 보안을 최적화하기 위한 서버 측 설정을 구성합니다.
기업의 PWA 채택 사유
많이 알다시피 Twitter, 스타벅스, 핀터레스트 등 유명한 업체에서도 이미 PWA 방식을 통한 앱을 구현하고 있고 채택하고 있습니다. 이는 앞서 말했듯 소비자들에게 설치라는 불편한 과정을 없애면서도 네이티브 앱과 유사한 경험을 제공하여 사용자들의 만족도와 충성도를 높일 수 있기 때문입니다. 또한 여러 플랫폼에서 제공가능하기 때문에 접근성이 높으며 웹 기술 기반에 따른 검색 엔진 최적화로 사용자들이 더 쉽게 앱을 발견할 수 있도록 도와줍니다. 마지막으로 네이티브 앱 개발에 비해 상대적으로 적은 비용으로 개발 및 유지 보수 할 수 있다는 장점 또한 최근 기업들이 PWA 방식을 채택하는데 많은 영향을 주고 있습니다. 이렇듯 많은 장점들이 있는 방식이지만 결국 사용자들에게 제공하고 싶은 서비스와 이에 따라 필요한 기능이 무엇인지 파악한 후 네이티브 앱 개발 방식을 채택할지 PWA방식을 채택할지 선택해야 하며 이는 곧 서비스 제공자의 판단일 수밖에 없습니다.