AMP HTML 라이브러리에서 제공하는 구성요소는 다음과 같이 분류됩니다.

  • 기본 제공: 기본 라이브러리에 포함된 amp-imgamp-pixel 등의 구성요소입니다.
  • 확장: 기본 라이브러리의 확장 프로그램이며, 맞춤 요소로 문서에 분명히 포함되어야 합니다(예: <script async custom-element="amp-audio"...).
  • 실험용: 이미 출시되었지만 아직 일반적으로 사용할 수 없는 구성요소입니다.

다음은 구성요소를 카테고리별로 분류한 것입니다.

광고 및 애널리틱스

구성요소 설명
amp-ad 광고를 표시하는 컨테이너입니다.
amp-ad-exit A4A(AMP for Ads)에 구성 가능한 광고 이탈 동작을 제공합니다.
amp-analytics AMP 문서에서 애널리틱스 데이터를 캡처합니다.
amp-auto-ads 원격으로 게재되는 구성 파일을 사용하여 AMP 페이지에 동적으로 광고를 삽입합니다.
amp-call-tracking 통화 추적이 가능하도록 하이퍼링크의 전화번호를 동적으로 교체합니다.
amp-experiment AMP 문서에서 사용자 환경 실험을 실시할 때 사용할 수 있습니다.
amp-pixel 페이지 조회수를 계산하는 추적 픽셀입니다.
amp-sticky-ad 페이지 하단에 광고 콘텐츠를 표시하고 고정할 수 있습니다.

동적 콘텐츠

구성요소 설명
amp-access-laterpay 게시자가 소액결제 플랫폼인 LaterPay와 손쉽게 통합할 수 있습니다.
amp-access AMP 페이월 및 구독 지원을 제공합니다.
amp-bind 사용자 작업 또는 데이터 변경에 따라 데이터 바인딩 및 JS와 같은 단순한 표현식을 통해 요소가 변경되도록 허용합니다.
amp-form 양식 지원을 제공합니다.
amp-gist GitHub Gist를 표시합니다.
amp-install-serviceworker ServiceWorker를 설치합니다.
amp-list 동적으로 데이터를 다운로드하고 템플릿을 사용하여 목록 항목을 생성합니다.
amp-live-list 콘텐츠를 실시간으로 표시하고 업데이트할 수 있습니다.
amp-mustache Mustache.js 템플릿의 렌더링을 허용합니다.
amp-selector 사용자가 선택할 수 있는 옵션 메뉴를 표시하는 컨트롤을 나타냅니다.
amp-user-notification 닫을 수 있는 알림을 사용자에게 표시합니다.
amp-web-push 사용자가 [웹 푸시 알림]https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/)을 수신할 수 있습니다.

레이아웃

구성요소 설명
amp-accordion 조회하는 사용자가 콘텐츠의 윤곽을 한눈에 파악하고 원하는 섹션으로 이동할 수 있습니다.
amp-app-banner 앱 설치를 위한 클릭 유도문안을 보여주는 교차 플랫폼 고정 위치 배너의 래퍼 및 간단한 UI입니다.
amp-carousel 가로축을 따라 여러 개의 유사한 콘텐츠를 표시합니다.
amp-fx-flying-carpet 전체 표시 영역을 차지하지 않고도 전체화면 광고를 표시할 수 있도록 고유한 전체화면 스크롤 컨테이너에 하위요소를 래핑합니다.
amp-fx-parallax 특정 요소에 3D 효과를 줄 수 있는 속성입니다.
amp-iframe iframe을 표시합니다.
amp-lightbox '라이트박스' 또는 이와 유사한 환경을 허용합니다.
amp-position-observer 사용자가 스크롤할 때 표시 영역에 있는 요소의 위치를 모니터링하고 다른 구성요소와 함께 사용할 수 있는 이벤트를 표시합니다.
amp-sidebar 탐색, 링크, 버튼, 메뉴 등 임시 액세스용 메타 콘텐츠를 표시할 수 있습니다.

미디어

구성요소 설명
amp-3q-player 3Q SDN. 동영상을 삽입합니다.
amp-anim 애니메이션 이미지(일반적으로 GIF)를 관리합니다.
amp-apester-media Apester 스마트 단위를 표시합니다.
amp-audio HTML5 audio 태그를 대체합니다.
amp-brid-player Brid.tv 플레이어를 표시합니다.
amp-brightcove Brightcove Video Cloud 또는 Perform 플레이어를 표시합니다.
amp-dailymotion Dailymotion 동영상을 표시합니다.
amp-google-vrview-image VR 이미지를 표시합니다.
amp-hulu 간단하게 삽입된 Hulu 동영상을 표시합니다.
amp-ima-video IMA SDK와 통합된 스트림 내 광고용 동영상 플레이어를 삽입합니다.
amp-image-lightbox '이미지 라이트박스' 또는 이와 유사한 환경을 허용합니다.
amp-img HTML5 img 태그를 대체합니다.
amp-imgur Imgur 게시물을 표시합니다.
amp-izlesene Izlesene 동영상을 표시합니다.
amp-jwplayer 클라우드에 호스팅된 JW Player를 표시합니다.
amp-kaltura-player Kaltura's Video Platform에 사용된 Kaltura Player를 표시합니다.
amp-nexxtv-player nexxOMNIA 플랫폼의 미디어 스트림을 표시합니다.
amp-o2-player AOL O2Player를 표시합니다.
amp-ooyala-player Ooyala 동영상을 표시합니다.
amp-playbuzz Playbuzz 콘텐츠(예: 목록, 설문조사 등)를 표시합니다.
amp-reach-player Beachfront Reach 동영상 플레이어를 표시합니다.
amp-soundcloud Soundcloud 클립을 표시합니다.
amp-springboard-player Springboard Platform 동영상 플레이어를 표시합니다.
amp-video HTML5 동영상 태그를 대체합니다.
amp-vimeo Vimeo 동영상을 표시합니다.
amp-youtube YouTube 동영상을 표시합니다.

프레젠테이션

구성요소 설명
amp-animation 애니메이션을 정의하고 표시합니다.
amp-dynamic-css-classes 여러 동적 CSS 클래스 이름을 HTML 요소에 추가합니다.
amp-fit-text 글꼴 크기를 주어진 공간 내에 있는 콘텐츠에 맞도록 늘이거나 줄입니다.
amp-font 맞춤 글꼴 로드를 트리거하고 모니터링합니다.
amp-timeago '시간 전(예: 3시간 전)'으로 날짜의 서식을 지정하여 불명확한 타임스탬프를 제공합니다.
amp-viz-vega Vega 시각화 문법을 사용하여 제작한 시각화를 표시합니다.

소셜

구성요소 설명
amp-facebook-comments Facebook 댓글 플러그인을 삽입합니다.
amp-facebook-like Facebook 좋아요 버튼 플러그인을 삽입합니다.
amp-facebook Facebook 게시물 또는 동영상을 표시합니다.
amp-gfycat Gfycat 동영상 GIF를 표시합니다.
amp-instagram Instagram 퍼가기를 표시합니다.
amp-pinterest Pinterest 위젯 또는 Pin It 버튼을 표시합니다.
amp-reddit Reddit 댓글 또는 게시물 퍼가기를 표시합니다.
amp-social-share 소셜 공유 버튼을 표시합니다.
amp-twitter Twitter 트윗을 표시합니다.
amp-vine Vine으로 간단하게 퍼가기를 표시합니다.