Progressive Web Apps (PWA)

Progressive Web Apps 또는 PWA란 무엇입니까?

Progressive Web Apps는 네이티브 애플리케이션과 우리가 알고 있는 HTML5 기반 웹 애플리케이션의 기술적 결합입니다. PWA는 앱과 웹 페이지 사이의 기술적 격차를 메우기 위해 등장했습니다.

Google은 이러한 종류의 기술 개발을 장려하는 주요 옹호자 중 하나였습니다. 그 기능을 더 잘 이해하려면 신뢰할 수 있고, 빠르고, 매력적이어야 하는 애플리케이션에 대해 이야기해야 합니다.

Progressive Web Apps가 가져야 하는 기능

PWA 개념을 충분히 명확하게 설명하기 위해 이러한 기술이 가져야 하는 필수 기능에 뛰어들어 봅시다.

물론 일반적인 의미에서 이야기하는 것입니다. 거기에서 각 비즈니스/서비스 모델은 자체 타깃 청중의 필요에 목표를 적응시킬 것입니다.

속도

시간은 돈입니다. Google뿐만 아니라 제품의 느린 로딩이 사용자가 잠재적 구매를 포기하게 만들 수 있는 모든 비즈니스에서도 마찬가지입니다.

Google은 오랫동안 이 전제를 강조해 왔습니다. AMP 프로젝트의 탄생은 이 목적을 가졌으며, 이제 PWA가 애플리케이션의 정보에 빠르게 접근할 필요성에 합류합니다.

오늘날 사용자는 인내심이 없습니다. 사이트가 완전히 로드되기를 기다리지 않습니다. Think with Google에 따르면 사용자의 53%는 웹사이트가 로드되는 데 3초 이상 기다리지 않습니다.

신뢰성

신뢰성에 대해 이야기할 때 사이트의 작동 보장을 의미합니다. Service Workers로 알려진 것 덕분에 네트워크 연결 문제가 PWA의 로딩을 방해하지 않아야 합니다.

설치 가능성

PWA는 Chrome Store, Apple Store 또는 기존 앱 스토어에 갈 필요 없이 설치할 수 있습니다. 네이티브 애플리케이션이 아니므로 이러한 스토어를 거치지 않고 접근할 수 있다는 점을 기억하세요.

설치는 단순히 바로가기처럼 동작합니다. 다른 파일을 저장하기 위한 공간이 필요하지 않습니다.

다른 기기: 모바일 및 데스크톱

코드베이스가 두 기기 사이에 통합되어 있어 반응형 디자인 기법이 모바일과 데스크톱 모두에 적용됩니다.

PWA의 장단점

일부 장점은 점진적 애플리케이션의 기능을 설명할 때 위에서 이미 언급했습니다. 그러나 비즈니스에서 이 기술 사용을 고려할 더 많은 이유가 있습니다.

• ›리소스 절약
• ›설치 불필요
• ›매우 높은 로딩 속도
• ›스마트폰으로 직접 푸시 알림
• ›모든 운영 체제에서 실행
• ›향상된 보안
• ›네이티브 앱보다 적은 개발 및 유지 관리 작업
• ›네이티브 앱보다 경제적

단점

• ›인터넷 연결이 필요합니다.
• ›모든 브라우저가 PWA를 지원하지 않습니다.
• ›높은 배터리 소비

Service Worker란 무엇입니까?

기술적인 측면으로 잠시 돌아가서, 점진적 애플리케이션이 작동할 수 없는 특정 측면에 대해 이야기해야 합니다. Service worker는 백그라운드에서 실행되어 웹 애플리케이션, 캐시 또는 네트워크 자체에 요청을 만드는 스크립트입니다.

알아야 할 중요한 점은 Service Workers가 SSL 인증서가 있고 https로 제공해야만 작동할 수 있다는 것입니다.

이제 예제로 모든 것을 살펴봅시다: BMW의 웹사이트와 그 PWA.

PWA 예: BMW

기술적인 측면에 깊이 들어가지 않고 글을 쓰려고 했고, 이제 PWA 개념을 더 잘 이해하는 데 도움이 될 애플리케이션 예를 보겠습니다.

BMW의 웹사이트에 들어가면 매우 매력적인 디자인을 가지고 있어 비주얼을 우선시한다는 것을 볼 수 있지만, 디자인에 대해 이야기하는 것을 넘어 어떤 종류의 웹사이트를 다루고 있는지 봅시다.

겉으로는 "일반" 웹사이트지만 코드를 파헤치면 첫 번째 놀라움을 얻습니다. 사실 모바일 버전뿐만 아니라 전체적으로 AMP로 개발된 웹사이트입니다.

하지만 오늘 다룰 주제로 돌아갑시다.

웹사이트 안에 들어간 후 Chrome의 "사용자 정의 및 제어" 바로 가 봅시다.

보신 것처럼 BMW 웹사이트의 콘텐츠가 있는 창이 열렸습니다. 두 콘텐츠를 비교하면 거의 동일하다는 것을 봅니다.

브라우저(Chrome)의 웹사이트 이미지

PWA 데스크톱의 웹사이트 이미지

BMW의 개발자는 동일한 시각적 모양을 유지하는 데 성공했습니다. Chrome 애플리케이션 폴더에서 또는 데스크톱(OS에 따라, 현재 MacOS를 사용 중)에서 PWA의 "설치"를 수락하면 PWA에 대한 바로가기가 다운로드되었습니다.

앱 설치에 압도되어 제거하고 싶다면 PWA 버전 창으로 이동해 Chrome처럼 오른쪽을 클릭하고 제거를 선택하기만 하면 됩니다.

모바일 버전에서는 거의 비슷합니다. PWA 버전이 있는 웹사이트에 들어가면 "바로가기 만들기" 알림을 받습니다.

PWA가 있는 웹사이트에 들어갈 때 바로가기를 만들 옵션을 봅니다.

수락하면 모바일 데스크톱에 PWA 아이콘을 봅니다.

PWA에 대해 더 배우기 위한 DevTools

이 시점에서 예제로 들어가 이러한 종류의 애플리케이션의 개념과 기능을 설명하고 싶습니다.

이를 위해 Chrome이 제공하는 개발자 도구(DevTools)를 사용하겠습니다. 오른쪽 버튼으로 검사기를 열고 Application으로 이동합니다.

Chrome Devtools

App Manifest (Web Application Manifest)

manifest는 갑작스러운 변경을 피하기 위해 브라우저에 제공하는 기본 스타일 측면이 있는 작은 JSON 파일입니다.

Manifest 예 (JSON)

Service Workers

앞서 설명한 것처럼 이제 무엇인지 볼 수 있습니다. JS 파일과 그 안에 사용하는 스크립트를 봅니다. Service Worker는 브라우저에 설치됩니다. 다른 웹 애플리케이션에서 여러 개를 가질 것입니다.

이러한 종류의 코드의 주요 기능 중 하나는 다른 탭을 열어도 항상 동일한 버전이 제공되도록 보장하는 것입니다(캐시를 제어함).

WordPress에서 PWA를 어떻게 구현합니까?

자체 코드로 웹사이트를 개발했다면 상당한 수동 작업을 해야 하지만, WordPress에서 웹사이트를 개발했다면 상황은 매우 다를 것입니다. 이 경우 두 번 클릭으로 PWA 기술을 활성화할 수 있는 여러 플러그인이 우리에게 있습니다. 사실 SEOcrawl의 PWA 버전은 우리가 권장하는 이 플러그인의 결과입니다.

WordPress에서 PWA를 구현하기 위한 가장 인기 있는 플러그인.

마케팅에서의 PWA

마케팅에서 일하는 우리에게 Progressive Web Apps는 모든 마케팅 부서가 브랜드를 성장시키기 위해 염두에 두는 목표를 달성하는 데 도움이 될 수 있습니다.

충성도와 판매

일부 브랜드가 가장 잘 다루지 못하는 목표 중 하나입니다. 우리 모두는 모바일 폰 브랜드가 고객을 대할 때 갖는 낮은 참여를 알고 있습니다, 예를 들어.

PWA의 푸시 알림은 가장 잘 작동하는 행동 중 하나이며 판매 생성에 기여합니다.

Gartner가 PWA에 대해 수행한 연구는 Lancome과 Alibaba에 대한 매우 흥미로운 일련의 통계를 제공합니다. Lancome은 전환율 17% 증가, 모바일 기기로부터의 세션 51% 증가, iOS에서 52% 증가를 보고합니다. Alibaba(Aliexpress가 속한 그룹)는 전환율을 76% 개선했습니다.

2개의 글로벌 거인에 대해 이야기했지만, 모바일에 로딩과 실행 시간이 부담스럽지 않은 앱이 있고 좋은 디자인을 존중한다는 것은 전환율을 증가시킨다는 것이 입증되었습니다.

결론적으로 PWA는 주로 큰 브랜드 사이에서 점점 퍼지고 있다고 말할 수 있습니다. 스페인에서는 이 기술의 엄청난 잠재력을 깨닫는 데 약간의 시간이 걸리겠지만, 늦지 않게 구현될 것입니다.

모바일 탐색을 용이하게 하는 모든 기술은 큰 중요성을 가집니다. 우리는 스마트폰과 많은 시간을 보내며, 궁극적으로 콘텐츠와 제품 모두에 대한 접근은 비즈니스입니다.

참고

• ›PWA에 대한 Google 문서