PWA 대 AMP: 어느 것이 더 낫고 서로 어떻게 다릅니까?

게시 됨: 2018-06-06

첫 번째 iPhone이 출시된 지 약 10년이 지난 지금, 모바일 웹은 마침내 사용자의 라이프스타일을 따라잡고 있습니다. 반응형 페이지에서 핀치 및 줌 기능이 사라졌습니다. AMP 및 기본 앱은 느린 로드 시간과 싸웁니다…

그러나 모바일 웹에는 여전히 중요한 문제 영역이 있습니다. 바로 참여입니다. 상위 1,000개의 모바일 웹사이트는 상위 1,000개의 기본 앱보다 4배 더 많은 사람들에게 도달합니다. 그러나 이러한 웹 사이트는 모바일 앱보다 평균 20배 더 짧은 시간 동안 사용자의 참여를 유도합니다.

모바일 웹사이트는 방문자를 유치할 수는 있지만 유지하지는 못하는 것 같습니다. 이 문제를 해결하는 최신 기술 중 하나는 프로그레시브 웹 앱입니다.

프로그레시브 웹 앱이란 무엇입니까?

프로그레시브 웹 앱은 기본 모바일 앱과 같은 모양, 느낌 및 작동 방식으로 설계된 모바일 웹 사이트 경험입니다. 사용자는 모든 모바일 웹사이트에서와 마찬가지로 브라우저에서 이를 접합니다. 해당 사이트에 참여한 후 사용자는 장치에 웹 앱을 설치하라는 메시지가 표시됩니다. 설치를 선택하면 앱이 기본 앱과 같은 방식으로 기기에 다운로드됩니다.

"프로그레시브 웹 앱"이라는 용어는 2015년 Google에 의해 만들어졌습니다. 회사는 프로그레시브 웹 앱이 세 가지 기준을 충족한다고 말합니다.

  • 신뢰성 – 불확실한 네트워크 조건에서도 즉시 로드하고 다운사우르스를 표시하지 않습니다.

  • 빠름 – 매끄럽고 부드러운 애니메이션과 버벅거림 없는 스크롤로 사용자 상호 작용에 빠르게 응답합니다.

  • 참여 - 느낌을 장치에서 자연 응용 프로그램처럼, 몰입 형 사용자 경험.

이러한 요구 사항을 충족하면 모바일 웹 앱을 사용자에게 다운로드 가능한 것으로 제공할 수 있습니다. 프로그레시브 웹 앱에 대해 자세히 알아보기 전에 표면으로 다시 돌아가 기본 앱과 모바일 웹 속도를 높이는 또 다른 기술인 AMP(Accelerated Mobile Pages)를 정의해 보겠습니다.

네이티브 앱이란 무엇입니까?

기본 앱은 App Store 또는 Google Play와 같은 마켓플레이스를 통해 설치되며 기기의 홈 화면에 아이콘으로 표시됩니다. 그들은 특정 장치를 위해 특별히 설계되었으며 GPS, 카메라, 연락처 목록 등과 같은 모든 기능을 사용할 수 있습니다. Google 지도, Gmail 또는 Instagram과 같이 현재 기기에 있을 가능성이 높은 앱입니다.

AMP란?

오픈 소스 Accelerated Mobile Pages 프로젝트(줄여서 AMP)를 통해 개발자는 고유한 코딩 언어로 거의 즉시 로드되는 웹 페이지를 구축할 수 있습니다. 그 언어는 JavaScript의 사용을 제한하는 HTML 및 CSS의 제거된 버전입니다. 이러한 페이지는 사용자가 방문할 때 페이지의 캐시된 버전을 제공하는 CDN에서 호스팅됩니다.

프로그레시브 웹 앱과 네이티브 앱

네이티브 앱은 즉각적이고 원활한 사용자 경험을 제공하며 App Store 및 Google Play와 같은 대규모 마켓플레이스에서 지원합니다. 그렇다면 기존의 네이티브 버전 대신 프로그레시브 웹 앱을 선택하는 이유는 무엇입니까? Forbes의 기사에서 Andrew Gazdecki는 높은 수준의 설명을 제공합니다.

모바일 웹사이트는 빠르고 쉽게 접근할 수 있지만 사용자 경험에 관해서는 덜 유쾌한 경향이 있습니다. 기본 앱은 최고의 사용자 경험을 제공하지만 특정 장치에 국한되고 채택 장벽이 높습니다. 기본 앱은 다운로드가 필요합니다. 즉, 먼저 소비자로부터 상당한 구매를 유도하고 충동 행동의 이점을 잃게 됩니다. 이러한 옵션 사이에 있는 것이 최신 모바일 솔루션인 PWA입니다.

좀 더 세분화된 설명을 위해 기본 앱과 프로그레시브 웹 앱 간의 가장 큰 차이점을 살펴보겠습니다.

  • 기능 사용: 현재 웹 앱은 장치의 기능을 활용할 수 있지만 기본 앱은 더 많이 사용할 수 있습니다. GPS, 푸시 알림 및 제스처와 같은 기능은 기본 앱에서 더 쉽게 사용할 수 있습니다.

  • 콘텐츠 제한: 앱이 Google Play 또는 App Store에서 경쟁할 수 있는 기회를 제공하려면 시장의 규칙에 따라야 합니다. 콘텐츠 제한 및 수수료로 인해 일부 웹사이트에서는 성공적인 네이티브 앱을 만들기가 어렵습니다. 하지만 웹 앱의 경우 콘텐츠 제한이나 수수료가 부과되지 않아 콘텐츠 유형에 관계없이 누구나 쉽게 앱을 만들 수 있습니다.

  • 오프라인 연결: 여기서 엣지는 HTML5로 구축된 프로그레시브 웹 앱보다 더 완벽한 캐싱을 제공하는 네이티브 앱으로 이동합니다. 앱이 오프라인에서 작동해야 하는 경우 현재 더 나은 선택은 기본입니다.

  • 설치: 기본 앱을 설치하려면 사용자를 대신하여 중요한 조치가 필요합니다. 마켓플레이스를 열고 앱을 검색한 다음 다운로드해야 합니다. 진지한 의도가 있어야 합니다. 프로그레시브 웹 앱 설치의 경우 마찰이 훨씬 적습니다. 장치에 책갈피를 추가하는 것은 홈 화면에 책갈피를 만드는 것과 같습니다. 프로그레시브 웹 앱을 설치하는 것이 더 쉽지만 프로세스가 훨씬 익숙하지 않아 조기 채택을 방해할 수 있습니다.

  • 속도: 현재 프로그레시브 웹 앱은 기본 애플리케이션보다 뒤쳐져 있습니다. 그러나 그들은 계속해서 격차를 좁히고 있습니다. 다음 비교를 고려할 때 특히 그렇습니다.

프로그레시브 웹 앱과 AMP

Gazdecki와 같은 사람들은 프로그레시브 웹 앱이 결국 기본 애플리케이션을 대체할 것이라고 생각하지만 AMP는 어떻습니까? 가속 모바일 페이지는 어디에서 제공되며 둘 모두를 위한 장소가 있습니까? 이 두 가지의 몇 가지 주요 차이점은 다음과 같습니다.

  • 발견 가능성: AMP가 이 전투에서 승리합니다. AMP는 Google 검색 결과에서 캐러셀의 도움을 받습니다. 여기서 프로그레시브 웹 앱은 검색 엔진 검색 가능성을 높일 수 없습니다.

  • 참여: 프로그레시브 웹 앱은 AMP HTML 또는 CSS 사용으로 제한되지 않으므로 AMP보다 훨씬 더 매력적인 콘텐츠를 포함할 수 있습니다. JavaScript가 필요한 모든 대화형은 AMP 프레임워크를 사용하여 만들 수 없습니다. AMP의 경우 동적 콘텐츠가 제외됩니다.

  • 속도: 프로그레시브 웹 앱이 참여를 얻는 것과 같은 이유로 여기에서 AMP가 우위를 점합니다. AMP는 가벼운 콘텐츠만 지원할 수 있지만 로드 시간이 빨라집니다.

Smashing Magazine에서 Paul Bakaus는 두 형식 간의 균형을 잘 요약합니다.

경험을 안정적으로 빠르게 만들려면 AMP 페이지를 구현할 때 몇 가지 제약 조건을 감수해야 합니다. AMP는 푸시 알림 또는 웹 결제와 같은 매우 동적인 기능이나 추가 JavaScript가 필요한 기능이 필요한 경우에는 유용하지 않습니다.

또한 AMP 페이지는 일반적으로 AMP 캐시에서 제공되므로 서비스 워커를 실행할 수 없으므로 첫 번째 클릭에서 가장 큰 프로그레시브 웹 앱 이점을 얻을 수 없습니다. 반면에 프로그레시브 웹 앱은 플랫폼이 AMP 페이지를 안전하고 저렴하게 미리 렌더링할 수 있기 때문에 첫 번째 클릭에서 AMP만큼 빠를 수 없습니다.

그러나 결국, 우리는 정말로 다른 것보다 하나를 선택해야 합니까?

경쟁보다 협력

빠르고 간단한 경험을 만들기 위해 AMP만 사용하도록 선택할 수 있습니다. 프로그레시브 웹 앱에 의존하여 동적이고 느린 사용자 경험을 만들 수 있습니다. 또는 웹 디자인에 두 가지를 모두 통합하여 빠르게 시작하고 빠르게 유지할 수 있습니다.

오늘날에는 개발자가 세 가지 방식으로 두 가지를 모두 활용하면서 프로그레시브 웹 앱과 함께 AMP를 사용하는 경우가 늘어나고 있습니다.

1. 프로그레시브 웹 앱으로서의 AMP

콘텐츠가 주로 정적이고 AMP의 제한된 기능으로 만족할 수 있는 경우 이 옵션을 사용하면 프로그레시브 웹 앱으로 번개처럼 빠른 경험을 만들 수 있습니다. 예를 들어 AMP는 다음과 같이 구축됩니다. 프로그레시브 웹 앱은 완전히 AMP로 충전됩니다. 오프라인 액세스를 허용하는 서비스 작업자와 "홈 화면에 추가" 배너를 표시하는 매니페스트가 있습니다.

2. AMP를 프로그레시브 웹 앱으로

AMP와 프로그레시브 웹 앱을 함께 사용하는 또 다른 방법은 AMP 페이지를 웹사이트의 후크로 생각하는 것입니다. 즉각적인 로드로 사용자를 포착한 다음 프로그레시브 웹 애플리케이션으로 끌어들입니다. 이를 통해 빠른 로드 AMP 페이지를 첫 번째 옵션보다 더 동적인 PWA와 결합할 수 있습니다.

3. 프로그레시브 웹 앱의 AMP

AMP 대 PWA의 경우와 마찬가지로 전부 또는 전무일 필요는 없습니다. AMP로 모든 페이지를 구축할 필요는 없습니다. 또한 AMP와 PWA를 후크와 로드로 분리할 필요도 없습니다. 이제 실제로 단일 페이지의 작은 하위 섹션만 AMP할 수 있으므로 동적 기능을 완전히 절충하지 않고도 크기를 줄이고 로드 시간을 줄일 수 있습니다.

여기에는 "Shadow AMP"라고 하는 다른 형태의 AMP를 사용하는 것이 포함되며, 이를 통해 AMP가 웹페이지 영역 내에 중첩될 수 있습니다. 결과는 프로그레시브 웹 애플리케이션의 셸 내에서 AMP입니다. 실제로 작동하는 모습을 보려면 Google에서 ShadowReader라는 이름으로 만든 데모를 확인하세요.

자신만의 프로그레시브 웹 앱을 만들 준비가 되셨습니까?

웹의 검색 가능성을 통해 빠르고 기본 앱과 같은 경험을 만드는 것이 여기에서 시작됩니다. 여기에서 PWA에 대한 Google의 기준을 충족하기 위해 확인해야 하는 모든 상자를 배울 수 있습니다. AMP와 PWA를 함께 사용하는 방법에 대한 자세한 내용은 다음을 확인하세요.

  • Ben Morss의 이 연설
  • Eric Lindley의 이 강연

준비가 되면 Instapage에서 AMP 클릭 후 방문 페이지 빌더를 사용하여 가장 빠른 사용자 경험을 제공하세요.