새로운 AMP 로드쇼
AMP Roadshows

모두를 위해 콘텐츠 생태계를 개선하는 오픈소스 프로젝트

AMP는 매력적이고 부드럽고 사용자가 거의 즉시 로드할 수 있는 웹페이지를 만들기 위한 단순한 방법을 제공하는 오픈소스 라이브러리입니다. AMP 페이지는 링크를 연결하고 사용자가 직접 관리할 수 있는 단순한 웹페이지입니다.

AMP는 기존 기술과 프레임워크를 바탕으로 웹페이지를 만듭니다. AMP는 여러 플랫폼에서 지원되며 다양한 브라우저에서 호환됩니다.

AMP의 생태계에는 출판, 광고, 전자상거래, 현지 및 중소기업 등에 걸친 2,500만 개의 도메인, 100개 이상의 기술 제공업체 및 주요 플랫폼이 포함되어 있습니다.

소개 동영상에서 자세히 알아보기

AMP 페이지는 세 가지 핵심 구성요소로 이루어집니다.

AMP HTML

AMP HTML은 안정적인 성능을 제공을 위해 몇 가지 제한사항이 있는 HTML입니다.

AMP HTML은 기본적으로 맞춤 AMP 속성으로 확장된 HTML입니다. AMP HTML 파일의 가장 간단한 예는 다음과 같습니다.

<!doctype html>
<html >
 <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 amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

AMP HTML 페이지에 있는 대부분 태그는 일반 HTML 태그이지만 일부 HTML 태그는 AMP 관련 태그로 대체할 수 있습니다 AMP 사양의 HTML 태그 참조). AMP HTML 구성요소라고 하는 맞춤 요소는 효율적인 방식으로 구현하기 쉽게 일반적인 패턴을 만듭니다.

예를 들어 amp-img 태그는 아직 srcset를 지원하지 않는 브라우저에서도 완전히 지원합니다. 첫 AMP HTML 페이지 만들기에 대해 알아보세요.

검색엔진 및 기타 플랫폼은 <link rel=""> HTML 태그를 통해 AMP 페이지를 검색합니다. AMP 버전이 아닌 페이지, AMP 버전 페이지 또는 일반 AMP 버전을 선택할 수 있습니다. 페이지를 검색 가능하게 만들기에서 자세히 알아보세요.

AMP JS

AMP JS 라이브러리는 AMP HTML 페이지를 빠르게 렌더링합니다.

AMP JS 라이브러리AMP 성능 우수사례를 모두 구현하고, 리소스 로드를 관리하고 위에서 언급한 맞춤 태그를 제공함으로써 페이지가 빠르게 렌더링될 수 있게 합니다.

대규모 최적화에서는 외부 리소스가 출처인 모든 항목을 비동기화하므로 페이지에 있는 어떤 요소도 무언가 렌더링되지 못하도록 차단할 수 없습니다.

다른 성능 관련 기술에는 모든 iframe 샌드박스, 리소스가 로드되기 전에 페이지 내 모든 요소의 레이아웃 사전 계산, 느린 CSS 선택 도구 사용 중지가 있습니다.

최적화 및 제한사항을 자세히 알아보려면 AMP HTML 사양 읽기를 참조하세요.

AMP 캐시

Google AMP 캐시를 사용하면 캐시된 AMP HTML 페이지를 게재할 수 있습니다.

Google AMP 캐시는 유효한 모든 AMP 문서를 게재하기 위한 프록시 기반 콘텐츠 전송 네트워크입니다. AMP HTML 페이지를 가져와 캐시하여 자동으로 페이지 성능을 개선합니다. Google AMP 캐시를 사용할 때는 효율을 최대화하기 위해 모든 JS 파일, 모든 이미지가 HTTP 2.0을 사용하는 같은 출처에서 로드됩니다.

캐시는 페이지가 작동할 수 있도록 보장하고 외부 리소스에 의존하지 않는 내장 유효성 검사 시스템이 함께 제공됩니다. 유효성 검사 시스템은 일련의 확인을 실행하여 페이지의 마크업이 AMP HTML 사양을 충족하는지 확인합니다.

다른 버전의 유효성 검사 도구는 모든 AMP 페이지에 번들로 제공됩니다. 이 버전은 페이지가 렌더링될 때 유효성 검사 오류를 브라우저의 콘솔에 직접 기록하여 코드의 복잡한 변경사항이 성능 및 사용자 환경에 어떠한 영향을 미치는지 알려줍니다.

AMP HTML 페이지 테스트를 자세히 알아보세요.

AMP의 설계 원칙 알아보기

설계 원칙 탐색

AMP의 기능 알아보기