[팀 껌딱지] PWA(프로그레시브 웹 앱)이란?

시작하며

안녕하세요. 팀 껌딱지 백엔드팀 박건우입니다.

팀에 들어오고 처음 블로그를 작성해보는데 많이 부족하지만 재밌게 봐주시면 감사하겠습니다!

 

웹 기술의 발전은 사용자들에게 다양한 디바이스에서 웹에 접속할 수 있는 환경을 만들어냈습니다.

초기에는 주로 데스크톱 컴퓨터를 통한 웹 사용이 주를 이루었지만,

현재는 스마트폰, 태블릿, 심지어 TV와 같은 다양한 디바이스에서도 웹에 접속할 수 있는 환경이 확장되어 있습니다.  그러나 모바일 환경에서는 대부분의 사람이 웹보다는 앱을 사용하고 있으며, 이는 주로 앱이 더 빠르고 사용성이 좋기 때문입니다.

PWA(Progressive Web Application)는 이러한 환경에서 웹과 앱의 강점을 결합한 형태로, 사용자에게 뛰어난 경험을 제공하는 방식으로 주목받고 있습니다.

이번 글에서는 PWA(Progressive Web Application)에 대해서 포스팅 해보겠습니다.

 

PWA란?

PWA는 'Progressive Web Apps'의 줄임말로 모바일 사이트를 네이티브 앱과 같이 사용할 수 있도록 만들어 줍니다.
일반적인 네이티브 앱보다 빠르게 개발이 가능하며 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징을 모두 제공합니다.

즉 PWA는 아래 그림과 같이 앱이 가지고 있는 기능과 웹의 넓은 범위를 결합한 개발 형태입니다.

 

PWA의 장점

1) 앱 개발 생산성 증가
앱 개발을 위한 안드로이드, iOS 개발 기술이 필요하지 않으며,

웹 개발만을 통해서 여러 플랫폼에서 동작하는 앱을 빠르게 개발이 가능합니다.

이는 개발자들이 별도의 플랫폼에 대한 개발작업을 최소화하고 생산성을 높일 수 있게 해줍니다.

2) 자동 업데이트
PWA는 백그라운드에서 자동으로 업데이트되기 때문에 사용자가 앱을 열 때마다 항상 최신버전을 사용할 수 있습니다.

사용자들이 추가적인 업데이트 과정이나 버전 체크를 거치지 않고도 최신 기능을 자동으로 활용할 수 있게 합니다.

3) 푸시 알림
PWA에서도 네이티브 앱과 동일하게 푸시 알림을 사용할 수 있습니다.

 

PWA를 적용 기업

PWA는 이미 여러 기업들에서 사용하고 있으며, 

대표적으로 트위터 X에 대해 PWA와 네이티브 앱에 비교를 진행해보았습니다.

모바일 기기에서 (https://twitter.com) 에 접속한 후 홈 화면에 추가로 간단하게 설치가 가능합니다

 

아래는 비교한 예시입니다.

 

왼쪽이 PWA 오른쪽이 앱스토어에서 설치한 앱입니다.

 

 

앱 내부의 언어와 아이콘 등 약간의 차이는 있지만 전반적으로는 비슷한 모습을 띄고 있습니다.

트위터 X는 PWA 적용을 통해 세션 당 페지이수 65% 증가, 트윗 75%증가 이탈률 20% 감소 등 PWA 도입을 통해 사용자들에게 더 나은 웹 앱 환경을 제공하고 서비스의 효율성을 높였습니다.

 

마치며

슬축생 프로젝트는 앱을 개발하는 데 필요한 비용과 기술적인 측면을 고려하여 현재 웹 기반으로 구축되어 있습니다. 사용자들은 모바일 기기를 활용하여 웹에 접속하며 시스템을 이용하고 있습니다. PWA를 도입함으로써, 앱 개발에 대한 비용과 기술적인 문제를 해결하고 사용자의 편의성을 높여 슬축생 프로젝트가 더 나은 서비스를 제공하는 데 도움이 될 것으로 생각됩니다.