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-byside-content BySide 서비스의 동적 콘텐츠를 표시합니다.
amp-consent UI 컨트롤을 통해 사용자의 동의를 수집하고 저장하는 기능을 제공합니다.
amp-date-picker 날짜를 선택하는 캘린더 위젯을 제공합니다.
amp-form 양식 지원을 제공합니다.
amp-geo 대략적인 국가 수준의 위치정보 인터페이스를 제공합니다.
amp-gist GitHub Gist를 표시합니다.
amp-install-serviceworker ServiceWorker를 설치합니다.
amp-list 동적으로 데이터를 다운로드하고 템플릿을 사용하여 목록 항목을 생성합니다.
amp-live-list 콘텐츠를 실시간으로 표시하고 업데이트할 수 있습니다.
amp-mustache Mustache.js 템플릿의 렌더링을 허용합니다.
amp-next-page 사용자에게 추천되는 문서를 동적으로 더 많이 로드합니다.
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-collection 시차와 같이 미리 설정된 시각 효과 집합을 제공합니다.
amp-iframe iframe을 표시합니다.
amp-image-lightbox 지정된 이미지에 라이트박스 효과를 제공합니다.
amp-layout AMP의 강력한 레이아웃을 모든 요소에 적용하는 일반적인 다목적 컨테이너 요소를 제공합니다.
amp-lightbox 전체 표시 영역 '라이트박스' 모드로 요소를 표시합니다.
amp-lightbox-gallery '라이트박스' 환경을 제공합니다. 사용자 상호작용 시 UI 구성요소가 확장되어 사용자가 닫을 때까지 표시 영역에 채워집니다.
amp-position-observer 사용자가 스크롤할 때 표시 영역에 있는 요소의 위치를 모니터링하고 다른 구성요소와 함께 사용할 수 있는 이벤트를 표시합니다.
amp-sidebar 탐색, 링크, 버튼, 메뉴 등 임시 액세스용 메타 콘텐츠를 표시할 수 있습니다.

미디어

구성요소 설명
amp-3d-gltf GL 전송 양식(gITF) 3D 모델을 표시합니다.
amp-3q-player 3Q SDN 동영상을 삽입합니다.
amp-anim 애니메이션 이미지(일반적으로 GIF)를 관리합니다.
amp-apester-media Apester 스마트 단위를 표시합니다.
amp-audio HTML5 audio 태그를 대체합니다.
amp-bodymovin-animation Adobe After Effects로 만든 JSON 애니메이션을 렌더링하는 AirBnB Bodymovin 애니메이션 플레이어를 표시합니다.
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-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-wistia-player Wistia 동영상을 표시합니다.
amp-youtube YouTube 동영상을 표시합니다.

프레젠테이션

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

소셜

구성요소 설명
amp-beopinion BeOpinion 콘텐츠를 삽입합니다.
amp-addthis AddThis 웹사이트 도구 임베딩을 표시합니다.
amp-facebook-comments Facebook 댓글 플러그인을 삽입합니다.
amp-facebook-like Facebook 좋아요 버튼 플러그인을 삽입합니다.
amp-facebook-page Facebook 페이지 플러그인을 삽입합니다.
amp-facebook Facebook 게시물 또는 동영상을 표시합니다.
amp-gfycat Gfycat 동영상 GIF를 표시합니다.
amp-instagram Instagram 퍼가기를 표시합니다.
amp-pinterest Pinterest 위젯 또는 Pin It 버튼을 표시합니다.
amp-reddit Reddit 댓글 또는 게시물 퍼가기를 표시합니다.
amp-riddle-quiz Riddle 콘텐츠(예: 퀴즈, 목록, 설문조사 등)를 표시합니다.
amp-social-share 소셜 공유 버튼을 표시합니다.
amp-twitter Twitter 트윗을 표시합니다.
amp-vine Vine으로 간단하게 퍼가기를 표시합니다.
amp-vk VK 게시물 또는 설문조사 위젯을 삽입합니다.