AMP

AMP 웹사이트

페이지 환경을 확장하는 프레임워크.

AMP is a simple and robust web components framework that makes it easy to build fast websites that are user-first and make money. AMP provides long-term success for your web strategy with distribution across popular platforms and reduced operating costs.

AMP 이용방법 안내
amp-sidebar가 표시된 스크린샷

Grab-and-go components

Quickly build pages with AMP’s extensive component library. These components are copy-and-pastable and meet a wide range of UI and functionality needs. They are customizable in behavior and style through attributes and CSS. Best of all, they have a team of engineers working full-time behind the scenes to guarantee a great performance.

See the full component library

Want just the components without the AMP ecosystem? Check out Bento AMP!

<amp-carousel layout="fill" type="slides" role="region" aria-label="Basic carousel">
  <amp-img src="/static/inline-examples/images/image1.jpg" layout="fill"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg" layout="fill"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg" layout="fill"></amp-img>
</amp-carousel>
All about this component
<div class="scale-image-window">
  <amp-img id="animatedImage" width="450" height="300" layout="responsive" src="/static/samples/img/elephant.jpg"
    alt="Picture of an elephant"></amp-img>
</div>
<button on="tap:scaleUpAnimation.restart" class="ap-button anim-button">Click to scale up the image'</button>
<amp-animation id="scaleUpAnimation" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "0.5s",
      "fill": "both",
      "direction": "normal",
      "animations": [
        {
          "selector": "#animatedImage",

          "keyframes": [
            { "transform": "scale(1)" },
            { "transform": "scale(1.2)" },
            { "transform": "scale(1)" }
          ]
        }
      ]
    }
  </script>
</amp-animation>
All about this component
<amp-accordion disable-session-states>
  <section expanded>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Content in section 2.</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <p>Content in section 3.</p>
  </section>
</amp-accordion>
All about this component

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

Content in section 3.

<amp-autocomplete filter="substring" id="myAutocomplete">
  <p>Search for</p>
  <form class="sample-form" method="post" action-xhr="https://amp.dev/documentation/examples/api/echo" target="_top">
    <amp-autocomplete filter="substring" src="/static/samples/json/amp-autocomplete-cities.json">
      <input>
    </amp-autocomplete>
  </form>
</amp-autocomplete>
All about this component

Search for

How AMP works for you

AMP meets you exactly where you are. Whether you're building a site from scratch, using a CMS or optimizing an in-house solution, AMP can help! AMP’s built-in validation system guides your development process, ensuring your page is performant and user-first. AMP comes with built-in accessibility and compatibility across browsers.

Learn how AMP works

Lightning Speed

AMP pages load near instantly – across all devices and platforms.

Easy Building

You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.

Maintain flexibility

You can use CSS to customize your styling and dynamic data to fetch the freshest data where needed.

Ensure performance

It takes a lot of time and effort to build a great website. AMP components are already optimized for the best performance.

Various web touch points

Used by global platforms like Google, Bing and Twitter, AMP allows users a native-feeling experience across all platforms by defaulting to AMP pages when available.

Open web

The AMP Project is an open source initiative to protect the future of the web by delivering a better, faster and more user-friendly experience.

Lightning Speed

AMP pages load near instantly – across all devices and platforms.

Easy Building

You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.

Maintain flexibility

You can use CSS to customize your styling and dynamic data to fetch the freshest data where needed.

Ensure performance

It takes a lot of time and effort to build a great website. AMP components are already optimized for the best performance.

Various web touch points

Used by global platforms like Google, Bing and Twitter, AMP allows users a native-feeling experience across all platforms by defaulting to AMP pages when available.

Open web

The AMP Project is an open source initiative to protect the future of the web by delivering a better, faster and more user-friendly experience.

프레임 워크 및 CMS

Select a ready-to-go framework or integration-enabled CMS to get an AMP valid site up and running, fast. These platforms give you all the benefits of AMP without all the built-from-scratch hassle.

지원되는 플랫폼 보기

Check out AMP in action

Exemplary websites built with AMP out in the wild.

Get involved

AMP is open source! This means it’s built by the community, for the community with the OpenJS foundation. There are many ways to contribute, including implementing features, fixing bugs and writing documentation!

Start contributing

시작하기

Ready to start building websites with AMP? Click the button below to find step one of your AMP journey!

AMP 이용방법 안내