PWA를 알아야 하는 이유

안녕하세요 서비스개발팀의 Somi 입니다. 🐥 모바일 앱 시장은 끊임없는 혁신과 발전을 거듭하고 있습니다. 사용자들은 더 나은 경험과 효율성을 요구하며, 기업들은 이에 부응하기 위해 새로운 기술과 접근 방식을 모색하고 있습니다. 그 중 하나가 '프로그레시브 웹 앱(PWA)'입니다. PWA는 모바일 기기에서 네이티브 앱과 유사한 경험을 제공하는 웹 앱으로, 웹 기술의 강력한 특성과 네이티브 앱의 편의성을 결합한 혁신적인 솔루션입니다. 이번 글에서는 PWA의 개념과 장단점, 그리고 사용 사례에 대해 알아보겠습니다.

PWA(프로그래시브웹) 이란?

PWA이란 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱입니다. 기존의 전통적인 웹 앱에서 벗어나 네이티브 앱과 유사한 기능을 제공할 수 있다는 것이 큰 특징입니다. PWA를 사용하면 사용자가 앱을 다운로드 하거나 업데이트할 필요없이 웹 브라우저를 통해 앱을 바로 사용할 수 있습니다.

PWA의 장단점은?

장점

네이티브 앱 수준의 모바일 친화적 웹 개발 가능: 고전적인 모바일 환경에서의 웹은 사용자에게 푸시 알림을 보내거나 오프라인 상태에서 동작하는 기능 자체를 제공하지 않아 별도로 네이티브 앱을 개발해야 했습니다. 하지만 PWA는 네이티브 앱과 마찬가지로 웹 페이지지만 앱처럼 설치가 가능하고 푸시 알림(오프라인 중에도), 카메라, 마이크 등 모바일 기기 자체의 기능까지도 사용가능합니다.
(최근까지 ios에서만 웹 푸시 알림 사용이 불가했는데 ios 16.4 버전부터 사용 가능해짐)
생산성 극대화 및 개발 비용 절감: 네이티브 앱을 개발하려면 플랫폼에 따라 개발 방법도 다르고(IOS → swift, AOS → Java 등) 학습해야하는 부분이 어느정도 필요한데 PWA의 경우 한 번의 개발로 안드로이드, IOS 모두 호환이 가능합니다. 보통은 프론트엔드 개발자와 네이티브 앱 개발자를 따로 두는 경우가 많은데 이런 상황에서는 웹 개발 지식만으로 네이티브 앱에 준하는 웹 서비스를 만들 수 있다는 장점이 있습니다.
앱이 디바이스에 저장되는 것과 달리 웹 브라우저에서 바로 실행되므로 스토어에서 설치할 필요없이 홈 화면에 아이콘을 추가해 사용할 수 있으므로 매우 편리합니다.
PWA는 https에서만 사용이 가능합니다. 보안이 강화되어 있어 안전한 온라인 환경을 제공할 수 있습니다.
프리캐시 기능이 있어, 사용자가 페이지를 읽고 있는 동안 다음 페이지의 데이터를 읽어 들일 수 있어서 네트워크의 품질에 관계없이 빠르게 사이트를 열람할 수 있습니다. 또한 백그라운드에서 업데이트하기 때문에 다시 로드할 필요가 없습니다.
앱스토어를 통해 다운로드를 할 필요가 없습니다. 애플과 구글 정책에 구속될 필요가 없기 때문에 심사를 통과할 필요없이 즉시 공개가 가능합니다.
플랫폼별로 앱을 개발할 필요없이 하나의 PWA를 구축하므로 장치에 관계없이 일관된 내용을 제공할 수 있습니다.

단점

아직 네이티브 앱의 경험을 완벽히 지원하지 못하는 부분이 있기 때문에 큰 프로젝트 단위를 구현하기에는 어려울 수 있습니다. OS가 제공하지 않는 기능이면 PWA가 제공해도 사용하지 못한다는 의존적인 부분도 있습니다. → 하지만 계속 발전하고 있기 때문에 앞으로의 행보가 기대됩니다.

학습 가이드

구글 PWA 학습 가이드 공식 문서

Learn PWA | web.dev

→ 개발자들이 참고할 수 있도록 작성해 둔 공식 문서. PWA를 개발하고 최적화하기 위한 전체 프로세스를 다룹니다. 실전에서 바로 적용 가능한 기능과 다양한 예제와 툴을 소개하고 있습니다.

깃허브 PWA-Builder

PWABuilder

→ 개발자들이 PWA를 더 쉽게 구축할 수 있도록 지원하는 오픈 소스 도구를 모아둔 곳.

PWA Summit

PWA Summit, October 5-6

→ PWA 개발 최신 동향과 모범적인 개발 방법에 대한 정보를 제공하는 컨퍼런스

PWA 적용 사례

아직 국내에서 PWA를 활용한 기업들은 많지 않지만 다른 나라에서는 스타벅스, 우버, 트위터(라이트), 페이스북(라이트), 핀터레스트 등 다양한 플랫폼에서 PWA를 활용하여 서비스를 제공하는 것을 알 수 있습니다.

PWA를 활용한 서비스의 경우, 인터넷이 느린 환경 등에서 특히 기존 네이티브 앱들보다 용량이 적어 더 많은 사용자들이 사용할 수 있습니다.

결론

PWA는 크로스 플랫폼 지원, 설치 불필요, 오프라인 작동 등의 장점이 있지만, 브라우저 의존성, 앱스토어 부재, 성능 제한 등의 단점도 있습니다. 따라서 PWA는 단순한 웹사이트보다는 향상된 사용자 경험을 제공하여 일반적인 상황에서 매우 유용하게 사용될 수 있습니다. PWA의 기술도 점점 진화하는만큼 프론트엔드 개발자로서 개발 목적과 요구 사항에 따라 PWA 기술을 적절하게 사용하는 것도 좋을 듯 합니다.

참고 문서

릴로 - 기분좋은 앱 푸시 마케팅

PWA에 대해 알아보자

Vue.js PWA 적용하는 과정을 담은 기록🖊️

헥토데이터는 데이터 기반 다양한 서비스를 지원하는 기업입니다. 온라인에 분산된 데이터를 실시간으로 제공하기 위해 클라이언트 엔진과 웹 API를 활용합니다. 유수의 비대면 대출 핀테크 서비스가 선택한 헥토데이터의 CODEF API. 꼼꼼한 보안과 빠른 대응으로 기업이 자사 서비스에만 집중할 수 있도록 돕는 CODEF API에 대해 아래 배너를 눌러 확인해 보세요.