[PWA] 모바일에서 네이티브 앱 경험을 제공하는 Progressive Web Apps

스마트폰의 시대가 시작된지 몇년이 지났습니다. 스마트폰에서 앱은 우리 일상생활에서 큰 역할을 하고있으며 많은 비중을 차지하고 있습니다. 그렇기에 많은 기업들은 모바일 앱을 개발하고 있지만,  앱을 구축하고 유지 관리하는 것은 번거롭고 비용이 많이 듭니다. 이런 이유로 기존에 웹사이트를 운영하고 있는 기업들은 모바일 사이트로의 개선을 고려하며 모바일 기기에서 웹사이트를 볼 때 네이티브 앱과 같은 동작을 가능하게 하는 PWA를 결합합니다. 이번 포스팅에서는 모바일에서 네이티브 앱 경험을 제공하는 PWA(Progressive Web Apps)대해 알아보기로 하겠습니다. 

 

스마트 폰에서의 다양한 앱

 

PWA 란?

PWA는 프로그레시브 웹 앱의 약자입니다. 이것은 HTML, CSS, JavaScript와 같이 우리 모두가 알고 있는 웹 기술로 구축된 앱이지만 실제 기본 앱에 해당하는 느낌과 기능을 갖추고 있습니다. 몇 가지 스마트한 추가 기능 덕분에 거의 모든 웹사이트를 프로그레시브 웹 앱으로 전환할 수 있습니다. 이것은 개발하기 꽤 어려운 네이티브 앱과 관련하여 PWA를 다소 빠르게 구축할 수 있음을 의미합니다. 또한 푸시 알림,  오프라인 지원 등과 같은 기본 앱의 모든 기능을 제공할 수 있습니다.

 

온라인에서 찾은 많은 사이트는 실제로 프로그레시브 웹 앱입니다.  PWA로 제작된 웹은 해당 사이트를 스마트폰으로 방문하면 홈 화면에 설치할 수 있습니다. 그리고 해당 사이트를 열면 기본 앱처럼 보이고 작동하는 것을 볼 수 있습니다.  아이폰이나 안드로이드 스마트폰에서 실행해도 차이가 없습니다. 이것이 PWA를 염두에 두고 웹 앱을 구축할 때 얻을 수 있는 주요 이점입니다.

 

네이티브 앱과 PWA의 차이점

Apple의 App Store 또는 Google의 Play Store에서 다운로드하는 것과 같은 기본 앱은 해당 플랫폼에 특정한 프로그래밍 언어로 빌드됩니다.  따라서 iOS 앱의 경우 Swift가 되고 Android 앱의 경우 Java가 됩니다. 이러한 플랫폼을 위한 앱을 구축하려면 해당 플랫폼에 해당하는 기술을 알아야 합니다. 모든 모바일 플랫폼에서 앱을 사용한다고 하면 다양한 기술을 모두 알아야 합니다. 

 

하지만 PWA는 브라우저에서 실행되며 일단 홈 화면에 저장되면 기본 앱처럼 작동합니다. 브라우저가 안전상의 이유로 액세스할 수 없는 기본 하드웨어 및 소프트웨어에도 액세스할 수 있습니다. PWA가 수행되면 사용자는 기본 앱 대신 웹 기반 앱을 사용하고 있다는 사실을 알지 못할 것입니다.

 

PWA를 작성하면서 몇 가지 주의 사항도 있습니다. 웹 브라우저는 PWA를 위해 빠르게 기술을 채택했지만 몇 가지 제한 사항이 있습니다. iOS에서 필요한 기술은 Safari에서 제대로 작동하지 않습니다. Apple은 아직 모든 것을 지원하지 않고 익스플로어에서 PWA는 구동되지 않습니다(익스플로어는 2022년 지원중단 예정입니다).

 

PWA의 장점

모두가 앱을 개발하는 주된 이유는 사용자들에게 더 많은 참여를 제공하기 때문입니다. 앱을 설치하는 사용자는 제품에 대한 판매 또는 가입으로 전환할 가능성이 더 큽니다. 푸시 알림 덕분에 사용자가 참여하기가 훨씬 쉬워졌습니다. 앱은 브랜드에 좋은 성과를 낼 수 있는 우수한 경험을 제공할 수 있습니다.

 

아래는 PWA의 장점에 대한 간략한 개요입니다.

• 다른 앱 스토어에 들어가기 위해 프로세스를 거칠 필요가 없습니다.
• 일반적인 웹 기술로 PWA를 구축할 수 있습니다.
• 일반적인 웹 기술 사용으로  비용이 저렴합니다.
• 사이트를 앱으로 전환하기 때문에 유지 관리해야 할 코드 기반이 더 적습니다.
• PWA는 반응형이며 다양한 화면 크기에서 작동합니다.
• PWA는 부드럽고 빠르며 가볍습니다.
• 일반 사이트와 달리 오프라인에서도 작동할 수 있습니다.
• PWA는 검색 엔진을 통해 검색할 수 있습니다. (앱 스토어보다 훨씬 더 많은 잠재고객을 보유하고 있고, 원하는 경우 앱 스토어를 통해 PWA를 배포할 수 있습니다)
• 푸시 알림을 사용하여 사용자 참여시킬 수 있습니다.
• PWA를 설치하면 참여도가 높아질 수 있습니다.

하지만 네이티브 앱이 좋은 경우도 있습니다. PWA가 스마트폰의 운영 체제에 깊이 접근하지만 기본 앱은 더 깊이 들어갈 수 있습니다. 게다가 PWA가 할 수 있는 일에는 한계가 있습니다. 예를 들어 PWA는 고성능 게임을 구축하려는 경우 최선의 선택이 아닙니다.

 

PWA 주요기술

PWA를 설정하기 위해서는 많은 시간이 필요하지 않습니다. 웹사이트가 유효한 PWA로 전환되기 전에 제공해야 할 세 가지 주요기술이 있습니다.

PWA를 통한 모바일 앱

• 보안 연결(HTTPS): PWA는 HTTPS를 전제로한 기술입니다. 신뢰할 수 있는 연결에서만 작동하므로 보안 연결을 통해 제공해야 합니다. 이는 보안상의 이유일 뿐만 아니라 사용자에게 매우 중요한 신뢰 요인이기도 합니다.
• 서비스 워커(Service Worker): 서비스 워커는 백그라운드에서 실행되는 스크립트입니다. 이렇게 하면 PWA에 대한 네트워크 요청을 처리하는 방법을 결정하는 데 도움이 되어 더 복잡한 작업을 수행할 수 있습니다.
• 매니페스트(Manifest) 파일: 해당 JSON 파일에는 PWA가 표시되고 작동하는 방식에 대한 정보가 포함되어 있습니다. 여기에서 앱의 이름,  앱 설명, 아이콘, 색상 등을 설정합니다.

아래는 다음 포스팅에서 사용할 PWA 매니페스트 파일입니다. 

PWA 매니페스트 파일

위에 나열된 세 가지는 PWA를 실행하기 위한 최소 요구 사항입니다. JavaScript(프레임워크)를 통해 기능을 확장할 수 있습니다.

 

여기까지 간단하게 PWA에 대한 내용에 대해 알아보았습니다. 다음 포스팅에서는 이전 포스팅에서 Vuetify로 작업한 테스트 홈페이지를 PWA Builder를 통해 PWA사이트로 변경해보록 하겠습니다.