PWA(Progressive Web Apps)란 무엇인가? 장점과 구현 사례

모바일 사이트의 개선을 고려할 때, 지금 가장 주목받고 있는 기술 중 하나가 'PWA'입니다. PWA는 '모바일 기기에서 웹사이트를 볼 때 마치 네이티브 앱과 같은 동작을 가능하게 하는 방법'입니다. 사이트에 유입을 증가시킬 시책으로는 SEO 대책 및 콘텐츠 마케팅 등을 생각할 수 있지만, PWA를 도입하면 사이트 자체의 개선(표시속도 등의 기술적인 개선)으로 연결되어, 더욱 큰 효과를 확인할 수 있습니다.

PWA란 무엇인가?

PWA는 'Progressive Web Apps'의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과 앱 모두의 장점을 결합한 제품입니다.

설치할 필요가 없지만 홈 화면에 아이콘 추가 및 푸시 알림도 가능하여 사용자와의 접촉 기회를 늘릴 수 있습니다. 그것뿐만 아니라 읽기 속도와 표시의 고속화, 오프라인 열람 등 다양한 이점을 얻을 수 있습니다.

PWA에서 구현할 수 있는 기능

◆ 푸시 알림
일반적인 앱처럼 푸시 알림을 보낼 수 있습니다. 브라우저를 닫고 있는 상태의 사용자에게 푸시 알림을 보낼 수 있기 때문에, 웹사이트와 비교하면 현격히 접촉 횟수를 늘릴 수 있습니다.

푸시 알림을 보내기 위해서는 사이트 열람시 표시되는 메시지로 사용자의 허가를 받아야 합니다. 화면에 팝업되는 형태로 'http : // ~~~ (사이트 URL)가 통지를 보내려고 합니다'라고 표시되어 사용자가 '차단' 또는 '허용'을 선택합니다.

◆ 아이콘을 홈 화면에 추가
스마트폰의 홈 화면에 아이콘을 추가할 수 있습니다. 네이티브 앱과 마찬가지로 홈 화면에서 직접 액세스를 할 수 있으므로 사용자에게는 매우 유용한 기능입니다. 아이콘을 탭하는 것만으로 액세스를 할 수 있어 재방문 증가가 예상됩니다.

홈 화면에 추가하려면 사이트 열람시 나타나는 팝업에서 허가하거나 브라우저 메뉴에서 사용자가 직접 추가할 필요가 있습니다.

◆ 설치 불필요, 네이티브 앱과 같은 사용감
PWA는 앱이 아니기 때문에 사용자는 스토어에서 다운로드 및 설치하는 수고를 할 필요가 없습니다. 그러나 앱과 같은 외형과 사용감을 제공할 수 있습니다.

전체화면 모드로 표시되기 때문에 외형도 앱에 가깝습니다. API를 복수연계하여 보다 수준높은 사용자 인터페이스를 제공할 수 있습니다.

◆ 표시속도의 고속화
페이지의 표시속도를 향상시킬 수 있습니다. PWA에는 프리캐시 기능이 있어, 사용자가 페이지를 읽고있는 동안 다음 페이지의 데이터를 읽어들일 수 있습니다.

◆ 오프라인에서 열람이 가능
미리 페이지 정보를 읽어들이기 때문에 오프라인 상태에서도 캐시 데이터를 사용하여 사이트의 열람을 할 수 있게 됩니다.

일반 모바일 브라우저 및 앱과 어떻게 다른가?

PWA는 모바일 브라우저와 네이티브 앱 모두의 장점을 도입한 기술입니다.

◆ 모바일 브라우저와의 차이점

읽기 속도
최대치에 가까운 읽기 속도입니다. PWA는 프리캐시 기능이 있어 페이지를 보고있는 동안 다음 페이지를 읽어들입니다. 네트워크의 품질에 관계없이 빠르게 표시되기 때문에 사용자는 스트레스없이 사이트를 열람할 수 있습니다. 또한 백그라운드에서 업데이트하기 때문에 다시 로드할 필요도 없습니다.

앱과 같은 인터페이스
기존의 모바일 브라우저에 비해 사용자 인터페이스의 자유도가 높아집니다. 전체화면 모드 표시가 가능하여 앱과 같이 사용자의 몰입감을 높일 수 있습니다. 등록 및 주문, 결제, 연락처 등의 도선을 원활하게 구축할 수 있습니다.

사용자와의 접촉 기회 증가
사용자의 허가가 있으면 앱과 같이 홈 화면에 아이콘 추가 및 푸시 알림도 가능하기 때문에, 접촉 빈도 증가로 연결됩니다.

◆ 앱과의 차이점

설치가 필요없다
가장 큰 차이점은 앱스토어를 통해 다운로드 및 설치를 할 필요가 없다는 점입니다.

개발의 자유도
앱스토어를 통할 필요가 없다는 것은 Apple과 Google의 정책에 구속될 필요가 없다는 의미입니다. 심사를 통과할 필요가 없어 개발의 자유도도 증가하고 즉시 공개할 수 있습니다.

또한 개발자의 관점에서 볼 때, 플랫폼별로 앱을 개발할 필요가 없다는 점도 매력적입니다. 하나의 PWA를 구축하는 것만으로 장치에 상관없이 일관된 내용을 표시할 수 있습니다.

PWA를 도입할 때 주의할 점

SSL화가 필요하다
PWA는 https를 전제로 한 기술입니다. HTTP를 통해 구축된 웹사이트라면 전체를 https로 할 필요가 있으므로 도입의 시간이 예상보다 걸릴지도 모릅니다.

도입 사례

◆ Twitter

Google Developers https://developers.google.com/web/showcase/2017/twitter

대표적인 SNS 중 하나인 Twitter도 PWA에 대응하고 있습니다. 브라우저로 열어 메뉴에서 '홈 화면에 추가'를 클릭하여 홈 화면에 아이콘을 표시할 수 있습니다. 마치 앱처럼 사용할 수 있으므로, 사용자로서는 매우 편리합니다.

Google에서 공개하고 있는 사례 연구에 따르면, PWA의 도입에 따라 아래의 성과를 얻을 수 있습니다.

· 1세션당 페이지뷰가 65% 증가
· 앱 사용자와 비교하여 트윗 수가 75% 증가
· 앱 사용자와 비교하여 이탈률이 20% 감소

Facebook도 PWA에 대응을 하는 등 SNS에서도 PWA 도입을 추진하는 서비스가 많아지고 있습니다. 통신 환경이 좋지 않은 지역에서는 앱 다운로드보다 PWA 사이트에 액세스하는 것이 편리성이 좋아 보다 많은 사용자의 방문을 쾌적하게 하기 위해 필요한 기술입니다.