AMP 및 PWA 가이드

AMP와 PWA는 내년에 가장 많이 논의되는 두 가지 콘텐츠 마케팅 주제가 될 것입니다. 이 가이드에서는 AMP 및 PWA의 간결한 정의와 이를 사용하여 콘텐츠를 제공하는 방법을 포함하여 두 가지에 대한 주요 정보를 제공합니다. 또한 특히 SEO와 관련하여 마케팅 목표를 달성하는 데 AMP 및 PWA를 사용할 수 있는 고유한 방법에 대해서도 논의할 것입니다.

AMP 프로젝트(Accelerated Mobile Pages Project)란 무엇입니까?

AMP 는 가속 모바일 페이지 를 의미하며 기본적으로 이것이 바로 여러분에게 제공하는 것 입니다 .

AMP 페이지는 기본적으로 온라인 기사와 같은 기존 웹페이지와 동일한 콘텐츠를 제공합니다. HTML과 CSS의 단순한 요소를 결합하고 JavaScript 사용을 제한하는 AMP HTML이라는 고유 언어를 기반으로 콘텐츠를 간소화된 형식으로 모바일 사용자에게 전달합니다. 즉, AMP 페이지는 일반적으로 기반으로 하는 원본 웹페이지보다 훨씬 빠르게 로드됩니다.

모바일 검색 사용자는 Google이 검색 결과에 AMP 버전의 웹페이지를 제공하기 시작한 2016년 2월에 처음으로 AMP 콘텐츠에 액세스할 수 있었습니다. 작성 당시 모바일 검색 결과 페이지 내의 AMP 콘텐츠는 캐러셀 및 추천 스토리 형식으로 제공되며, 각 경우에 사용자는 여러 소스의 관련 콘텐츠를 스와이프할 수 있습니다. 콘텐츠는 파란색 원 안에 흰색 번개 모양으로 표시된 AMP 아이콘과 함께 Google 검색 결과에 표시됩니다.

Google AMP 검색 기능에서 전달하기에 적합한 AMP 콘텐츠를 생성하는 가장 쉬운 방법은 기존 콘텐츠의 HTML을 AMP HTML로 편집한 다음 페이지의 유효성을 검사하고 검색 가능성을 위해 준비하는 것입니다. Amp.dev는 개발자에게 HTML 페이지를 AMP HTML 페이지로 변환하는 방법에 대한 간단한 자습서를 제공합니다.

AMP 페이지는 거의 항상 다른 페이지와 정식으로 관련됩니다. 이는 해당 URL에 검색 엔진에 페이지가 웹사이트의 페이지와 동일하다는 '표준' rel 태그가 있음을 의미합니다. 페이지의 비 AMP 버전이 SEO 관점에서 우선합니다.

이 규칙에는 현재 일부 온라인 게시자가 만들고 있는 AMP 전용 웹사이트 형태의 주요 예외가 있습니다.

Google 웹마스터 트렌드 분석가인 John Mueller는 웹마스터에게 AMP 전용 웹사이트가 좋을 수 있다고 조언했습니다.

“AMP 전용 사이트를 사용하는 데 문제가 있다고 생각하지 않습니다. AMP는 빠른 사이트를 비교적 쉽게 만들 수 있는 훌륭한 프레임워크입니다. 기본적으로 HTML이므로 다른 HTML 페이지와 동일하게 작동합니다. 각 콘텐츠에 대해 하나의 URL만 있으면 더 많은 AMP 전용 사이트가 표시되는 것을 보고 정말 기쁩니다(일반적인 크롤링, 인덱싱 및 SEO).”

AMP 전용 사이트를 직접 테스트하려면 WordPress에서 설정하고 AMP for WP – Accelerated Mobile Pages 플러그인을 사용하는 것이 좋습니다.

AMP는 웹 콘텐츠는 물론 이메일과 광고의 애플리케이션이 포함된 지속적인 오픈 소스 프로젝트입니다. 프로젝트에 대한 완전한 최신 정보를 보려면 Amp.dev를 방문하십시오.

PWA는 무엇이며 왜 사용을 시작해야 합니까?

프로그레시브 웹 앱(PWA)은 전통적으로 주로 네이티브 앱에서 찾아볼 수 있었던 기능 및 사용자 경험(UX) 요소로 웹페이지를 보강하는 웹 앱입니다. 즉, 웹 콘텐츠가 앱 콘텐츠처럼 작동하도록 합니다.

PWA 사용자 환경에는 다음 단계가 있습니다.

1. 사용자는 모바일 장치를 통해 PWA 페이지를 엽니다. 일반 웹페이지처럼 작동합니다.
2. 사용자는 장치의 홈 화면에 페이지를 추가하라는 메시지를 받습니다.
3. 사용자가 프롬프트를 수락합니다. 그러면 페이지가 나타나 홈 화면에 앱 역할을 합니다.
4. 웹사이트/PWA의 지속적인 UX는 네이티브 앱 UX에 전형적인 요소를 가지고 있습니다.

웹 콘텐츠를 PWA로 변환하는 것은 웹 개발자의 작업이며 HTML 및 JavaScript에 대한 역량이 필요합니다.

Google에는 '기준' PWA 또는 '예시' PWA를 구성하는 항목에 대한 광범위한 기준이 있습니다.

기준 PWA:

• HTTPS를 통해 제공됨
• 태블릿 및 모바일 장치에서 반응합니다.
• 모두 오프라인으로 로드되는 URL 포함
• '홈 화면에 추가'에 대한 메타데이터 제공
• 3G에서도 빠르게 로드
• 브라우저 간 작업(Chrome, Edge, Firefox 및 Safari 포함)
• 페이지 간 빠른 전환 제공
• 각 페이지에 대한 전용 URL 보유

이러한 기준을 충족하는 것은 PWA(또는 PWA가 될 예정)의 실행 가능성과 Google Chrome에서의 잠재적 도달 범위에 매우 중요합니다.

예시적인 PWA에 대한 기준은 보다 심층적입니다. 전체 정보는 Google의 Progressive Web Apps 체크리스트를 참조하십시오.

PWA는 많은 이점을 제공합니다. 첫 번째 로드 후에는 일반적으로 대부분의 기존 웹 페이지보다 빠르게 콘텐츠를 로드합니다. 이렇게 하면 콘텐츠 로드 속도가 느려 사용자가 다른 곳으로 이동할 수 있는 시간 창을 좁히므로 여러 콘텐츠 항목을 탐색할 때 사용자의 주의를 유지하는 데 도움이 됩니다. 사용자가 일련의 콘텐츠 항목을 연속적으로 사용하도록 권장하려면 PWA를 통해 해당 콘텐츠를 전달하는 것이 현명한 방법입니다.

또 다른 주요 이점은 PWA가 사용자 모바일 장치의 홈 화면에서 브랜드에 지속적인 존재감을 줄 수 있다는 것입니다. 많은 퍼블리셔가 90일 후 앱 유지율이 4%만큼 낮고 사용자가 상위 3개 앱에서 전체 앱 사용 시간의 77%를 소비하는 복잡한 네이티브 앱 시장에서 경쟁하기 위해 고군분투하고 있기 때문에 이 기회는 시기적절합니다(출처: 앱 다운로드 및 사용 통계(2019) – 앱 비즈니스).

PWA는 사용자가 오프라인일 때 콘텐츠를 로드할 수 있기 때문에 제트족이나 시골 독자를 대상으로 하는 퍼블리셔에게 게임 체인저가 될 수 있습니다.

PWA의 한 가지 잠재적인 단점은 때때로 Google 검색 결과에서 예측할 수 없는 성능을 보인다는 것입니다.

Ignite Visibility에 따르면 SEO 목적으로 PWA에서 콘텐츠 인덱싱을 목표로 하는 사이트는 "HTML 기반이 있고 그 위에 프로그레시브 웹 앱을 로드하거나 [또는] prerender.io 및/또는 pushstate와 같은 도구를 사용해야 합니다."

커뮤니티 주도 웹사이트 PWA Stats는 Tinder의 로드 시간 감소에서 Best Western의 수익 증가에 이르기까지 브랜드가 PWA로 전환하여 생성한 결과에 대한 실시간 통계 목록을 유지 관리합니다.

AMP와 PWA의 차이점은 무엇입니까?

AMP와 PWA가 동일한 목적을 수행하는 라이벌 기술이라는 일반적인 오해가 있습니다.

두 기술의 핵심 역할은 사용자를 위해 콘텐츠를 더 빠르게 로드하는 것인 반면, AMP와 PWA는 마케터의 관점에서 뚜렷한 강점, 약점 및 전술적 용도를 가지고 있습니다.

AMP 페이지는 첫 번째 클릭 시 매우 빠른 로드 시간을 제공합니다. 따라서 느린 로딩으로 인해 사용자가 이탈할 가능성이 줄어들기 때문에 새로운 독자를 유치하는 데 이상적으로 적합합니다. 또한 Google 검색 결과 내에서 검색 가능성이 뛰어납니다. 그러나 AMP는 동적 콘텐츠 및 푸시 알림과 같은 고급 플랫폼 기능을 지원하지 않습니다.

PWA 페이지는 첫 번째 로드 시 비교적 느리게 로드되지만 두 번째 로드부터는 매우 빠르게 로드되므로 독자와 콘텐츠 간의 지속적인 관계에서 로드 시간이 더 빨라지고 이탈률이 감소할 수 있습니다. 또한 PWA는 동적 콘텐츠, 오프라인 탐색 및 푸시 알림과 같은 고급 플랫폼 기능을 지원할 수 있으므로 마케터에게 사용자 여정에 영향을 미치고 전환율을 높일 수 있는 더 많은 방법을 제공할 수 있습니다.

온라인 게시자는 두 기술을 함께 사용하여 AMP와 PWA의 이점을 결합할 수 있습니다. Instapage는 PWA 대 AMP에 대한 기사에서 이러한 접근 방식 중 하나를 설명합니다.

“[생각] AMP 페이지를 웹사이트에 연결하는 고리로 생각하세요. 즉각적인 로드로 사용자를 포착한 다음 프로그레시브 웹 애플리케이션으로 끌어들입니다. 이를 통해 빠르게 로드되는 AMP 페이지를 [..] 동적 PWA와 결합할 수 있습니다.”

또 다른 옵션은 AMP 페이지 내에서 PWA 기능을 활성화하는 것입니다.

또는 AMP를 사용하여 PWA를 개발할 수도 있습니다. 이 방법은 AMP HTML로 PWA를 작성하고 고급 PWA 기능을 활성화하기 위해 amp-install-serviceworker라는 구성요소를 사용하는 방법을 기반으로 합니다.

SEO 및 검색 순위에 AMP 또는 PWA 중 어느 옵션이 더 낫습니까?

AMP와 PWA는 모두 다른 방식으로 SEO에 도움이 되기 때문에 답은 둘 다입니다.

PWA는 사이트 콘텐츠를 보다 매력적으로 만들어 사용자의 콘텐츠 소비 수준을 높일 수 있습니다. 한편 AMP는 모바일 페이지 로딩 속도를 크게 높여 이탈률을 줄입니다.

두 경우 모두 검색 순위와 페이지 및 해당 도메인에 대한 전반적인 검색 가시성을 결정하는 역할을 하는 주요 웹 페이지 순위 요소에 대한 피드백이 개선되었습니다.

따라서 SEO 관점에서 가장 좋은 접근 방식은 이 기사의 이전 섹션에서 설명한 것처럼 AMP와 PWA를 함께 사용하는 것일 수 있습니다.

AMP를 둘러싼 논쟁에 대해 내가 들은 이 모든 것은 무엇입니까?

AMP가 웹 콘텐츠를 배포하고 더 빠르게 로드할 수 있는 강력한 도구라는 점에는 의심의 여지가 없지만 프로젝트를 둘러싼 상당한 논란이 있다는 점을 염두에 두어야 합니다.

일부 평론가는 AMP를 Google이 온라인 게시자의 웹사이트를 무효화하고 콘텐츠를 강탈하여 사용자를 Google에 최적화되고 Google에 기반을 둔 경험에 가두는 방법으로 봅니다.

레지스터 작가인 Scott Gilbertson은 다음과 같이 말합니다.

“속도에 관한 것이 아닙니다. 자체 수정 버전에 대한 표준을 피하는 모든 것과 마찬가지로 종속성에 관한 것입니다. Google AMP 마크업의 수많은 페이지는 Google에 특별히 최적화되고 주로 Google에서 색인을 생성하고 주로 Google 사용자에게 표시되는 수많은 페이지를 의미합니다. 페이스북의 플랫폼에 맞추려는 구글의 시도다. 그리고 그렇습니다. Facebook은 AMP보다 훨씬 못하지만 Google AMP를 좋은 생각으로 만들지는 않습니다. 적어도 페이스북은 열려 있는 척 하지 않습니다.”

또한 AMP 페이지는 게시자 고유의 URL 및 자체 브랜딩 요소 없이 표시되어 게시자와 콘텐츠를 효과적으로 연결 해제합니다.

아마도 AMP 사용에 대한 가장 강력한 주장 은 게시자를 위한 것입니다. 가디언(Guardian)과 데일리 메일(Daily Mail)과 같은 주류 뉴스 제공업체에서 와이어드(Wired) 및 소셜 미디어 투데이(Social Media Today)와 같은 특별한 관심을 가진 퍼블리셔에 이르기까지 세계 최고의 미디어 콘텐츠 제작자 중 다수가 이를 사용하고 있습니다. 이것은 다음과 같은 질문을 던집니다. 귀하의 분야에서 선도적인 게시자가 AMP를 사용하고 있다면 귀하의 출판물이 AMP를 사용하지 않을 수 있습니까?

AMP를 둘러싼 논란에 대한 자세한 내용은 Raven Tools 공동 설립자인 Jon Henshaw와의 인터뷰가 포함된 빠른 웹사이트 구축 방법에 대한 디지털 마케팅 팟캐스트 에피소드를 확인하세요.

프로그레시브 웹 애플리케이션(PWA)은 앱의 미래입니까?

2019년 12월 TechCrunch는 상위 1%의 앱 스토어 퍼블리셔가 신규 다운로드의 80%를 주도하고 있다는 놀라운 발견을 보고했습니다.

이는 사용자의 모바일 장치에 대한 지속적인 브랜드 인지도, 사용자 참여 증가, 플랫폼 소유권, 완전한 분석 액세스 및 아마도 가장 중요하게는 최적의 모바일을 포함하여 앱이 가져올 수 있는 이점에 액세스하려는 디지털 게시자에게 암울한 그림을 그립니다. UX.

기본 앱 다운로드가 감소하고 있다는 상황에서 PWA는 가장 큰 온라인 게시자를 제외한 모든 사용자가 이러한 이점에 액세스할 수 있는 가장 좋은 방법을 제공하는 것 같습니다. 그들은 웹 사용자가 앱 마켓플레이스에서 앱을 설치하는 것을 꺼리는 대신 일반 웹 페이지 경험 내에서 앱으로 전환하는 문제를 해결합니다.

네이티브 앱은 글로벌 다운로드 및 사용 시간 면에서 여전히 성장하고 있으며 그런 의미에서 앱의 미래로 남을 것입니다. 여기에는 성장을 주도하는 소수의 주요 퍼블리셔가 있다는 경고가 따릅니다.

그렇긴 하지만 PWA는 미래의 모바일 콘텐츠 소비에서 큰 역할을 할 수 있을 것 같습니다. PWA의 UX 이점이 독자와 게시자 모두에게 기술 활용을 증가시킬 수 있는 분야입니다.

결론: 마케터는 AMP 및 PWA에 대해 어떻게 행동해야 합니까?

콘텐츠 성능 및 UX 측면을 개선하기 위한 AMP 및 PWA의 입증된 잠재력은 이러한 기술이 온라인 게시자가 조사해야 하는 중요한 수단임을 시사합니다.

AMP는 제한된 규모로 테스트하기가 더 쉽습니다. 몇 개의 콘텐츠 페이지를 AMP HTML로 간단히 변환하고 결과를 관찰할 수 있습니다(Google이 AMP 게시자에게 제공하는 상대적으로 제한된 분석 범위 내에서). PWA는 게시자가 지속적으로 독자에게 앱 스타일의 경험을 제공할 것을 묵시적으로 약속하므로 가볍게 수행해서는 안 됩니다.

반대로 PWA는 AMP와 비교할 때 상대적으로 희석되지 않은 이점을 제공하는 것 같습니다. 재방문 독자는 로딩 시간이 더 빨라지고 AMP에는 없는 고급 앱 스타일 기능이 제공됩니다. 결정적으로 게시자는 콘텐츠에 대한 더 큰 통제력과 소유권을 유지합니다.

AMP 및 PWA를 고려 중인 온라인 게시자에 대한 조언은 몇 가지 콘텐츠 페이지로 AMP를 테스트하고 PWA를 대규모로 롤아웃하는 옵션을 철저히 조사하라는 것입니다. 단독으로 사용하든 조합하여 사용하든 두 기술은 모바일 사용자가 앞으로 몇 년 동안 웹 콘텐츠를 소비하는 방식을 파악할 것으로 보입니다.

지금 무료 멤버십을 받으세요 - 신용 카드가 전혀 필요하지 않습니다

• 디지털 마케팅 툴킷
• 독점 라이브 비디오 학습 세션
• 디지털 마케팅 팟캐스트의 전체 라이브러리
• 디지털 기술 벤치마킹 도구
• 무료 온라인 교육 과정

무료 회원