Home
AMP

AMP란?

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

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 요소를 제공합니다.

Post a Comment