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

최초의 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 캐시에서 제공되므로 자체 서비스 워커를 실행할 수 없기 때문에 첫 번째 클릭에서 가장 큰 Progressive Web App 이점을 얻을 수 없습니다. 반면에 Progressive Web App은 플랫폼이 AMP 페이지를 안전하고 저렴하게 사전 렌더링할 수 있기 때문에 첫 번째 클릭에서 AMP만큼 빠를 수 없습니다. 이 기능은 삽입을 더 간단하게 만드는 기능(예: 인라인 뷰어)입니다.

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

경쟁보다 협력

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

오늘날 프로그레시브 웹 앱과 함께 AMP를 사용하는 것이 점점 보편화되고 있으며 개발자는 세 가지 방법으로 두 가지를 모두 활용합니다.

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

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

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

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

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

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

여기에는 AMP가 웹 페이지 영역 내에 중첩될 수 있도록 하는 "Shadow AMP"라는 또 다른 형태의 AMP 사용이 포함됩니다. 결과는 프로그레시브 웹 애플리케이션의 셸에 있는 AMP입니다. 작동을 확인하려면 Google에서 만든 ShadowReader라는 데모를 확인하세요.

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

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

• Ben Morss의 이 강연
• 에릭 린들리의 이 강연

준비가 되면 Instapage에서 AMP 클릭 후 랜딩 페이지 빌더를 사용하여 가장 빠른 사용자 경험을 제공하십시오.