Front End/기타

Progressive Web App(PWA)이란?

RIEN😚 2022. 5. 10. 15:20
728x90
반응형

참고🌹

 

프로그레시브 웹 앱이란?

프로그레시브 웹 앱(PWA) 및 이를 다른 웹 앱과 차별화하는 세 가지 주요 개념에 대해 소개합니다.

web.dev

 

Progressive Web App이란?

간단히 말하자면!

모바일 앱의 장점과 웹의 장점을 가지고 있는 웹 기술입니다.

🌹하지만! 결국 웹 어플리케이션이라는 점에 유의하세요.😭

 

네이티브 APP도 아니고, 웹 앱도 아니고 왜 PWA일까?

 

네이티브 APP의 장점!

플랫폼에 특화되어 있어 기기의 특화된 다양한 기능을 제공하며 기기 내에서 네트워크 연결에 관계없이 작동하고 자체 독립 실행형 환경을 가집니다.

또한 모바일 앱은 앱 아이콘을 통해 쉽게 사용자가 원하는 앱을 실행할 수 있고, 사용자 개인에 특화된 필요한 푸시 알림(Notification)을 보내줌으로써 훨씬 좋은 UX를 제공해줍니다.

즉, 높은 성능신뢰성을 제공합니다.

 

스마트폰 시대

지금은 스마트폰 시대입니다. 모바일 사용자 수가 데스크탑 사용자 수를 넘어섰고, 많은 사람들이 웹보다는 네이티브 앱을 사용합니다.

아래 그래프에서 이를 확인할 수 있습니다.

그럼 새로운 프로그램을 만들 때 앱으로 만들면 유리하겠다! 그건 또 아닙니다.😭

월간 앱 다운로드 수를 보면 거의 50%의 사용자들이 새로운 앱을 다운로드 받는 것보다 기존의 사용하던 앱을 계속 사용하는 경향이 있는 것을 알 수 있습니다. 

 

 

무엇 때문일까요?🧐

저는 두 가지 이유가 있다고 생각합니다.

사용자는 앱 마켓에 접속하여 특정 앱 검색하고 설치해야 합니다. 여기까지만 해도 상당히 번거롭습니다.

하지만 만약 용량이 큰 앱이라면? 설치될 때까지 또 기다려야 하죠.

 

추가적으로 서비스에 새로운 기능이 추가되었다면 어떨까요? 개발자는 앱을 새로 배포해야 하고 사용자는 이를 재설치해주어야 합니다.

이들은 이외로 사용자가 해당 서비스를 알고 사용하는데 큰 장벽으로 존재합니다.

즉, 접근성이 좋지 않죠.😱

 

이에 반해 웹은

URL의 힘으로 사용자들이 쉽게 서비스에 접근할 수 있습니다.😊

또한 기능 수정/업데이트가 있어도 새로 배포하거나 설치할 필요없이 변경된 소스만 배포하면 끝이죠.(개발자에게도 정말 좋습니다.👍)

 

하지만 네이티브 APP과 다르게 스마트 폰의 시스템 서비스와 상호작용할 수 없기에 기능 제공의 제한이 있습니다.

 

앱과 웹앱을 기능과 접근성으로 비교하면 아래 그래프와 같습니다‼️🔥

🌹 앱은 높은 성능과 안정성을 보장하는 대신 접근성이 낮은 반면, 웹 앱은 사용자가 쉽게 접근하고 사용할 수 있습니다.

 

그럼 이번 글의 주제인 Progressive Web App(PWA)

PWA는 최신 API를 활용한 높은 성능과 안정성을 보장하면서도 설치를 쉽게 할 수 있고 동시에 단일 코드 베이스로 누구에게나 어느 장치(안드로이드, ios 상관 없이!)에서나 접근할 수 있도록 해줍니다.

-> 네이티브 앱의 높은 성능과 신뢰성 + 웹의 접근성

 

PWA의 세 가지 주요 개념

PWA는 아래 3가지 개념이 보장되도록 설계된 웹 어플리케이션입니다.

1. 높은 성능
2. 안정성
3. 설치 용이성

 

1. 기능성

오늘날의 웹에서는 사용자의 위치를 받아오거나 푸시 알림을 보내는 등의 앱에서만 가능했던 기능을 실제로 제공할 수 있으며 이를 앱과 같이 설치 가능한 형태로 만들어 사용할 수도 있습니다.

비록 일부 기능은 아직 웹에서 접근할 수는 없지만 새로운 API들이 꾸준히 나오고 있으며 이를 통해 시스템 엑세스, 미디어 제어와 같은 기능도 웹에서 이용할 수 있게 될 것입니다.

 

2. 신뢰성

신뢰성이란, 빠르게 동작하면서도 네트워크 상태와 관계없이 동일한 사용자 환경을 제공해준다는 의미입니다.📌

 

모두가 알고 있듯 서비스에서 속도는 정말 중요합니다.🔥

실제로 페이지 로드 시간이 1초에서 -> 10초로 늘어나면 사용자가 이탈할 확률이 123%나 증가한다고 합니다.😱

 

또한, 네트워크 연결에 관계없이 안정적인 앱을 사용할 수 있어야 합니다.

느리거나 불안정한 네트워크 연결 또는 오프라인 상태에서도 캐시 등을 이용해 사용자와 상호작용 할 수 있어야 하며, 장애가 발생하였을 때도 앱이 정지되는 것이 아닌 문제에 대해 사용자에게 안내(Notification, alert 등)를 제공해주어야 합니다.

 

3. 설치 가능성

PWA는 Service Worker와 웹 앱 매니페스트를 통해 설치될 수 있습니다.

이렇게 설치된 앱은 사용자의 홈 화면, Dock, 작업 표시줄에서 실행할 수 있습니다.

반응형