AMP란?

Google AMP(Accelerated Mobile Pages)에 대한 기본 지식.
2 min read

AMP(Accelerated Mobile Pages)는 모바일 페이지 최적화를 위해 사용자 경험 및 로딩 속도를 개선하기 위해 2015년 10월에 출시된 모바일 장치에서 더 빠르게 로드되는 웹 페이지를 제공하는 데 사용되는 오픈 소스 프로젝트입니다.

AMP HTML은 기존 웹 구조로 구성되지만 CSS, HTML 및 JS를 제한하여 웹 사이트에 더 빠르게 액세스할 수 있습니다.

AMP HTML은 어떻게 작동합니까?

AMP HTML은 AMP JS 라이브러리를 추가하고 웹의 기본 구조를 변경하지 않는 방식으로 작동합니다. 웹 구조는 기존과 같고 AMP HTML의 유효성을 확인을 위한 AMP JS 라이브러리만 추가합니다. 다음은 이와 같은 AMP HTML이 있는 간단한 코드입니다.

<!doctype html>
<html amp='amp' dir='ltr' lang='ko'>
  <head>
    <meta charset='utf-8'/>
    <link rel='canonical' href='hello-world.html'/>
    <meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1'/>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async='async' src='https://cdn.ampproject.org/v0.js'></script>
  </head>
  <body>Hello World!</body>
</html>

AMP JS 라이브러리를 추가하면 다음이 포함됩니다.

  • AMP JS 라이브러리: 페이지가 더 빨리 렌더링 되도록 외부 리소스 로드를 관리합니다.
  • AMP 유효성 검사기: 웹 개발자가 AMP HTML 코드가 유효한지 쉽게 확인할 수 있는 방법을 제공합니다.
  • AMP HTML 구성요소: 몇 가지 맞춤 요소로 기존의 웹 구조를 쉽게 구현할 수 있습니다.

AMP JS 라이브러리

AMP JS 라이브러리에는 기본 제공 구성 요소인 amp-ad, amp-video, amp-img가 포함되어 있으므로 렌더링 속도를 높이기 위해 추가 스크립트가 필요하지 않습니다.

AMP 유효성 검사기

AMP 유효성 검사기를 사용하면 웹 개발자가 웹 페이지가 AMP HTML 유효성을 충족하는지 쉽게 확인할 수 있습니다.

AMP 유효성 검사기 페이지 방문하기

AMP HTML 구성요소

AMP HTML 구성요소는 추가적인 맞춤 구성 요소를 제공하고, 기존의 HTML5 요소의 기능을 대체할 수 있습니다.

  • AMP 유효성 검사에서 허용되지 않는 HTML5 요소(예: img, video)를 amp-img 및 amp-video으로 재정의합니다.
  • amp-youtube, amp-ad, amp-twitter와 같은 타사 콘텐츠를 구현합니다.
  • amp-lightbox, amp-carousel과 같은 이미지를 꾸밀 수 있는 디자인 요소를 제공합니다.
  • 웹 개발자가 브라우저 호환성에 따라 애니메이션 이미지 (GIF) 또는 비디오 파일 (WebM 또는 MP4)을 표시할 수 있도록 하는 amp-anim 요소를 제공합니다.

You may like these posts

  • 사전 준비 AMP 페이지에 Youtube 비디오을 표시하려면 블로그에 amp-youtube 용 JS 라이브러리를 추가해야 합니다. 먼저 아래 스크립트를 <head> 섹션에 붙여 넣습니다. <script async custom-element='amp-youtube' sr…
  • 다음은 AMP에 광고를 추가하기 전에 있어야 하는 필수 JS 라이브러리입니다. <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/> 위의 스크립트는 Google…
  • AMP와 비 AMP와의 가장 분명한 차이점은 amp-img 태그를 사용하여 이미지 코드를 작성하는 것입니다. 페이지가 유효성 검사를 통과하려면 모든 img 이미지 태그가 amp-img로 바뀌었는지 확인합니다. 다음은 AMP에서 올바른 이미지 코드 작성 예시입니다. <div&g…
  • 잘못된 AMP 문제 해결 애드센스 코드를 블로그에 설치하면 유효성 검사 오류가 나타날 수 있습니다. 가장 자주 발생하는 오류은 블로그 상단에 --> 코드가 나타나 AMP 유효성 검사에서 오류가 발생하는 것입니다. 블로그에 이 오류가 있는 경우 아래 코드를 찾아 표시된 부분을 삭제하세요…
  • AMP(Accelerated Mobile Pages)는 모바일 페이지 최적화를 위해 사용자 경험 및 로딩 속도를 개선하기 위해 2015년 10월에 출시된 모바일 장치에서 더 빠르게 로드되는 웹 페이지를 제공하는 데 사용되는 오픈 소스 프로젝트입니다. AMP HTML은 기존 웹 구조로 구성되…

Post a Comment