구글 AMP 기본 구성 요소 유형

1 min read

AMP는 HTML 태그와 유사한 기능을 하는 대체 가능한 AMP HTML 태그를 제공하지만, 이는 제한적이고 성능에 최적화된 방식으로 제공합니다. 이를 AMP Components 또는 AMP Custom Elements라고 합니다.

AMP 구성 요소에는 세 가지 유형이 있습니다.

내장(Built-in) 구성 요소

내장 구성 요소는 AMP-HTML 페이지에서 바로 사용할 수 있습니다. AMP 자바스크립트 라이브러리와 함께 제공되므로 문서 헤드에 추가할 필요가 없습니다. 여기에는 가장 기본적으로 사용되는 태그인 amp-img, amp-video, amp-pixel 등이 포함됩니다.

확장(Extended) 구성 요소

확장 구성 요소는 일반적인 구성 요소의 기능을 넘어 확장합니다. 이 기능을 페이지에서 사용하기 전에 문서 헤드에 반드시 해당 구성 요소가 포함된 스크립트 태그를 추가해야 합니다. 예를 들어 유튜브를 사용하려면 AMP 문서의 헤드에 다음을 추가해야 합니다.

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

실험(Experimental) 구성 요소

공개적으로 출시되었지만 아직 확정되지 않았고 아직 검증되지 않은 구성 요소입니다. 실험적 기능은 선택 가능하며, 문서 또는 기능 수준에서 활성화할 수 있습니다. AMP 실험 기능은 여기에 온라인으로 잘 설명되어 있습니다.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • HTML에서와 마찬가지로 CSS는 AMP에서 레이아웃 및 디자인의 핵심입니다. AMP 페이지의 사용자 지정 CSS 스타일을 추가하는 경우 일부 작업에 대한 제한 사항이 있습니다. 다음과 같은 사항을 주의해야 합니다. 모든 스타일은 문서의 head에 정의되어야 합니다. 최대 75KB의 CSS가 허용…
  • 구글 페이지스피드 인사이트(Google PageSpeed Insights)는 사용하기 쉬운 웹 성능 테스트 도구입니다. Google에서 운영하는 무료 서비스이며 사이트에 점수를 매겨 웹 페이지에 대한 빠르고 간단한 분석을 제공합니다. 입력창에 URL주소를 입력하면 테스트가 진행되며, 페이지 내 콘텐츠…
  • 최신 Chrome 브라우저는 훌륭한 소프트웨어입니다. 무엇보다 프로파일링을 제공하여 웹 페이지에 대한 심층적인 분석과 성능 데이터를 제공합니다. 요즘은 Chrome 브라우저뿐만 아니라 대부분의 최신 웹 브라우저에서 개발자 도구를 사용할 수 있습니다. 이 개발자 도구를 사용하면 USB를 통해 모바일 기기를 …
  • 왜 모든 AMP 페이지에 <style amp-boilerplate> 코드를 포함해야 하는지에 대해 궁금할 수 있습니다. 이것은 AMP 페이지가 로드되는 동안 스타일이 정해지지 않은 콘텐츠가 페이지에 미치는 악영향을 방지하기 위해 AMP 프로젝트 팀이 개발한 방법으로 페이지 렌더링에 꼭 필요한…
  • Pre-rendering은 사용자가 방문을 결정하기도 전에 이미 숨겨진 iframe을 사용하여 백그라운드에서 AMP를 다운로드하고 렌더링 하는 방식입니다. 가능하면 AMP는 백그라운드에서 사전에 미리 로드됩니다. Pre-rendering은 AMP 캐시에서 페이지 로드 시간을 향상시키는데 사용됩니다. …
  • AMP 프로젝트 팀은 성과을 달성하기 위해 분산된 개방형 웹에 제대로 호환이 되지 않으며 자신들의 측면만 생각한 설계 결정을 내렸습니다. 이 중 가장 논란이 되는 부분은 다음과 같습니다. AMP 캐시는 Google이 소유하고 관리 AMP 페이지는 Google이 제…

댓글 쓰기