PWA 대 AMP: 올바른 결정을 내리는 방법?

게시 됨: 2019-07-26

목차

최신 통계에 따르면 46억 8천만 명의 모바일 사용자가 활발하게 웹 서핑과 탐색을 하고 있는 것으로 확인되었습니다. 약 3년 전, 모바일 트래픽이 인터넷 사용자의 51.3%를 모바일 장치 사용자라고 주장하면서 처음으로 데스크톱 트래픽을 추월했으며 그 수는 지속적으로 증가하고 있습니다. 지난 10년 동안 이 용어가 떠돌아다니던 만큼 이제 진정한 모바일 퍼스트 시대가 시작된 것이다.

따라서 조직이 모바일 사용자에게 더 나은 서비스와 경험을 먼저 제공하기 위해 노력하는 것을 보는 것은 놀라운 일이 아닙니다. 하지만 구글은 2년 전 PWA와 AMP가 등장하면서 모바일 대세에 뛰어들었다.

PWA와 AMP는 모두 모바일 장치 호환 플랫폼을 사용하면서 사용자의 웹 경험을 향상시키도록 설계되었습니다. 그러나 사용자는 종종 PWA와 AMP를 혼동합니다.

시간을 절약하고 PWA와 AMP의 차이점을 이해하는 데 도움을 드리겠습니다.

PWA 란 무엇입니까?

Starbuck 프로그레시브 웹 앱 예제
Starbuck – 최고의 PWA 사례 중 하나

PWAProgressive Web App 의 약자로, 사용자에게 브라우저에서 웹 페이지에 액세스하여 모바일 애플리케이션의 모양과 느낌, 경험을 제공하도록 설계되었습니다.

즉, PWA는 앱과 같은 기능을 제공하도록 최적화된 웹 페이지입니다. 또한 PWA는 플랫폼 또는 해당 서비스가 모바일 웹에서 액세스되지만 모바일 앱을 설치하지 않을 때 작동합니다.

언급했듯이 PWA는 앱과 유사한 기능을 제공하는 데 중점을 둡니다. 여기에는 다음이 포함됩니다.

  • 페이지 간 더 빠른 전환
  • 완벽한 앱과 유사한 인터페이스
  • 푸시 알림 전송 기능(사용자의 권한 필요)
  • 오프라인 콘텐츠 접근성 등.

"PWA"라는 용어에 익숙하지 않은 사용자를 위해 모든 요구 사항을 충족해야 하는 PWA에 대한 포괄적인 가이드가 있습니다.

우리는 이미 모바일 애플리케이션을 가지고 있는데 왜 프로그레시브 웹 애플리케이션이 필요했을까요?

우리 모두는 모바일 장치를 통해 사용자가 기본 앱(App Store 또는 Google Play에서 응용 프로그램)을 다운로드할 수 있지만 PWA가 더 낫다는 것을 알고 있습니다. 왜 그리고 어떻게?

Andrew Gazdecki는 Forbes 기사에서 “ PWA는 기본 앱보다 더 효율적 입니다. 스마트폰의 소중한 메모리나 데이터를 차지하지 않고 주문형으로 작동하며 항상 액세스할 수 있습니다. 동일한 응용 프로그램의 기본 버전보다 PWA를 사용하도록 선택하면 사용자가 더 적은 데이터를 소비합니다. 그러나 이것이 사용자가 기본 앱의 편의성을 희생해야 함을 의미하지는 않습니다. 그들은 여전히 ​​PWA를 홈 화면에 저장할 수 있습니다. 실제로 다운로드하는 번거로움 없이 설치할 수 있습니다.”

아마존 앱 대 PWA

최근 우리가 사용하는 가장 인기 있는 기본 모바일 앱은 PWA, 특히 전자 상거래 및 소셜 미디어 포털을 사용하여 플랫폼에 더 쉽게 액세스할 수 있도록 하고 있습니다.

 추천 자료: 프로그레시브 웹 앱 vs 네이티브 앱: 어느 것이 더 잘 어울리나요?

네 차례 야:

만능의 완벽한 프로그레시브 웹 앱 솔루션 을 찾고 있는 Magento 판매자를 위해 여기 SimiCart에서 귀하와 귀하의 상점을 위한 완전한 패키지를 제공합니다. 지금 탐색하세요!

다음으로 AMP란?

AMP 가속 모바일 페이지

AMP 또는 Accelerated Mobile Page는 Google에서 2015년에 도입하여 모바일 장치용으로 더 빠르게 로드되는 웹 페이지를 만들었습니다. Google은 개발자가 이러한 웹 페이지를 구축할 수 있도록 'AMP 프로젝트'를 오픈 소스로 제공했습니다.

모바일 친화적인 웹사이트를 만들기 위해 불필요한 (인라인) 자바스크립트를 제거합니다. 또한 CSS는 인라인 사용을 위해 50KB로 제한되며 Google은 웹사이트 콘텐츠를 캐시하여 CDN과 같은 기능을 제공합니다. 다른 기능 중에서 AMP 웹 구성요소는 지연 위험 없이 모바일 웹페이지에 애니메이션을 추가할 수 있는 AMP 라이브러리의 일부로 JavaScript 삽입을 제한적으로 제공합니다.

AMP 가속 모바일 페이지 예

현재 시나리오에서 AMP는 더 이상 웹사이트에 국한되지 않습니다. AMP 광고, AMP 이메일, AMP 스토리까지 있습니다. 이 모든 것의 AMP 버전은 모바일 장치에서 빠르게 렌더링되도록 제작되었습니다.

이미지 크레딧: 배너스낵

“요즘은 즉각적이지 않으면 충분히 빠르지 않습니다. 가장 기억에 남는 크리에이티브라도 광고가 느리고 UX를 방해한다면 그 목적을 달성하지 못할 것입니다.” AMP 사이트를 설명합니다.

광고에서 예상한 대로 AMP 광고는 CTR을 높여 ROI를 극대화합니다. 그들은 동일한 것을 제공하는 것으로 입증되었습니다. 네이티브 광고 기술 회사인 Triplelift는 AMP 광고를 사용하여 6배 더 빠른 광고 로드 덕분에 수익이 13% 증가했습니다.

PWA 대 AMP: 차이점

AMP와 PWA 비교

AMP와 PWA를 함께 사용할 수 있습니까?

예, AMP와 PWA를 함께 사용 하여 우아한 사용자 경험을 제공할 수 있습니다. 다음과 같이 표시됩니다.

먼저 사용자가 서비스를 검색하면 AMP 지원 결과가 화면에 나타납니다. 이것은 가볍고 미리 캐시된 웹사이트가 사용자가 클릭하기를 기다리고 있음을 의미합니다. 사용자가 웹사이트를 클릭하면 게시자는 푸시 알림을 보내도록 요청하는 앱과 유사한 웹 페이지(PWA)로 사용자를 참여시킬 수 있습니다. 이 웹 페이지를 통해 사용자는 다음과 같은 기능을 사용할 수 있습니다.

  • 콘텐츠 및 서비스의 오프라인 탐색
  • 느린 인터넷 연결 중에도 부드러운 전환
  • 앱과 같은 경험

우리가 이 아이디어를 채택하는 것을 막는 것은 무엇입니까?

글쎄요, 가장 큰 도전은 개발입니다. AMP가 HTML과 CSS만 사용하고 JavaScript를 완전히 피하는 규칙에 따라 작동하지만(대부분) PWA 페이지는 주로 JavaScript 지원 서비스 작업자를 사용하여 설계됩니다.

그러나 이는 트래픽이 PWA 페이지로 전송되는 게시물인 SERP에 사용되는 별도의 AMP 페이지를 생성하여 대응할 수 있습니다. 이것이 의미하는 바는 AMP 페이지를 사용하여 검색 엔진에서 좋은 순위를 매길 수 있으며 사용자가 클릭하여 AMP 페이지를 열면 브라우저가 사용자 참여 및 유지를 위해 PWA 페이지를 시작한다는 것입니다.

요약하자면

PWA와 AMP는 휴대폰용으로 서로 다른 기술입니다. AMP는 웹 페이지를 더 빠르게 로드하는 데 사용되며 PWA는 네이티브 앱의 모양과 느낌을 제공하는 데 사용되어 m-커머스 사이트에 매우 유용합니다.

Adobe의 조사에 따르면 2018년 11월 1일부터 12월 31일까지 매출의 40%가 모바일 장치에서 발생했습니다. 전환율이 7.4%인 데스크톱 트래픽과 달리 10.5%의 모바일 트래픽이 전환으로 이어짐에 따라 비즈니스, 크든 작든 모바일 청중을 진지하게 생각하고 필요에 따라 AMP, PWA 및/또는 둘 다에 투자를 시작해야 합니다.

마지막으로 둘 다 사이트 성능과 사용자 경험을 향상시키는 강력한 도구입니다. 두 가지 기술 중 하나를 선택하거나 두 기술을 모두 구현하여 두 기술의 장점을 모두 누릴 수 있습니다. 선택은 당신의 것입니다.

추천 게시물: 프로그레시브 웹 앱(PWA)이 SEO에 도움이 되나요? (통계 및 예제 포함)

SimiCart PWA 살펴보기