AMP

강력하고 매끄러우며 즉각적인 로딩 환경

AMP와 함께 사용자 중심의 웹사이트를 간편하게 구축하세요.

시작하기
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

AMP란
무엇인가요?

강력하고 매끄러우며 즉각적으로 로드되는 웹 페이지입니다

AMP는 단순하고 강력한 형식을 제공하여 웹사이트에서 신속하고 사용자 중심인 서비스를 운영하고 수익을 창출하는 데 도움을 줍니다. AMP는 인기 플랫폼 배포 및 운영과 개발 비용 감소를 통해 웹 전략에 장기적 성공을 제시합니다.

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

오픈 웹 전반의 사용자에게 우수한 웹 경험을 제공합니다

AMP를 통해 여러 기기 및 배포 플랫폼에서 꾸준히 빠른 속도의 멋진 고성능 웹사이트와 광고를 제작하세요. 퍼블리셔 및 광고주가 사용자 중심 경험이 강조되는 콘텐츠를 어떻게 선보일지 결정할 수 있습니다.

AMP를 사용 중인 웹사이트 스크린샷
AMP를 사용 중인 웹사이트 스크린샷
유연함과 제어 가능성을 유지하며 코드 복잡성 개선 CSS를 활용해 스타일 및 동적 데이터를 사용자 정의하고 필요한 경우 최신 데이터를 불러올 수 있습니다.
실적을 보장하는 블록 구축 훌륭한 웹사이트 제작에는 많은 시간과 노력이 필요합니다. AMP 컴포넌트는 최고의 성능에 맞춰 최적화된 기능을 선보입니다.
모두를 위한 오픈 웹의 지속 가능한 미래 실현 AMP 프로젝트는 웹의 미래를 지키기 위한 오픈 소스 이니셔티브로, 개선된 성능과 더 빠른 속도 및 한층 사용자 친화적인 환경을 지원합니다.
웹 페이지 속도로 사용자 경험과 핵심 비즈니스 평가 지표 개선 AMP 페이지는 모든 기기와 플랫폼에서 거의 즉각적으로 로딩됩니다.
간편한 AMP 페이지 구축 수일 내에 전체 아카이브 전환이 가능합니다. 특히 WordPress나 Drupal처럼 자주 사용되는 CMS는 그 과정이 더욱 간편합니다.
다양한 터치 포인트에 적용 가능한 AMP AMP는 Google, Bing 및 Twitter 등의 글로벌 플랫폼에서 사용됩니다. 따라서 가능한 곳에 AMP 페이지를 기본값으로 설정하면 어떤 플랫폼에서든 사용자에게 네이티브 앱과 같은 경험을 선사합니다.

저희는 전면적인 속도 개선을 위해 노력하고 있습니다. 사이트 로딩이 오래 걸리면 아무리 뛰어난 저널리즘을 선보여도 별 소용이 없지요. 어떤 사람들은 내용을 보기 전에 페이지를 떠날 테니까요.

David Merrell, 선임 제품 관리자

우수 사례 읽기

AMP HTML 구성 요소

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width">
  <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>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

기본 컴포넌트

AMP HTML은 안정적 성능을 위해 일부 제한을 가한 HTML입니다.

AMP HTML 페이지의 대다수 태그는 일반 HTML 태그이지만, 일부 HTML 태그는 AMP 전용 태그로 대체됩니다(AMP 사양의 HTML 태그 참조). AMP HTML 컴포넌트라고 부르는 이러한 사용자 지정 구성 요소를 통해 성능을 우선하는 방식으로 일반 패턴을 쉽게 구현할 수 있습니다.

예를 들어 amp-img 태그는 아직 srcset가 지원되지 않는 브라우저에서도 완전한 srcset 지원을 제공합니다. AMP HTML 페이지 작성법을 배워보세요.

AMP 페이지는 HTML 태그를 통해 검색 엔진 및 기타 플랫폼에서 검색됩니다. 페이지에서 비 AMP 버전과 AMP 버전 또는 AMP 버전만 사용하도록 선택할 수 있습니다.

AMP 캐시

AMP 페이지는 웹에 거의 즉각적으로 로딩되도록 캐시할 수 있습니다. Google과 같은 플랫폼에서는 AMP 캐시를 실행하여 서비스 콘텐츠의 빠른 로딩을 실현합니다.

Google AMP 캐시는 유효한 AMP 문서를 제공하기 위한 프록시 기반 CDN(Content Delivery Network)입니다. AMP 캐시가 AMP HTML 페이지를 가져와 캐싱하여 페이지 성능을 자동으로 개선합니다. Google AMP 캐시 사용 시에는 효율성 극대화를 위해 문서, 모든 JS 파일 및 모든 이미지가 HTTP 2.0을 사용하는 동일한 출처에서 로딩됩니다.
또한, 캐시는 내장된 유효성 검증 시스템을 탑재하여 페이지가 확실히 작동하고 외부 리소스에 의존하지 않는지를 확인합니다. 검증 시스템은 일련의 어설션을 실행하여 페이지 마크업이 AMP HTML 사양을 충족하는지 확인합니다.

다른 버전의 유효성 검사기가 모든 AMP 페이지와 함께 제공됩니다. 이 버전은 페이지가 렌더링 될 때 유효성 검사 오류를 브라우저 콘솔에 직접 기록하여 코드의 복잡한 변경 사항이 실적 및 사용자 경험에 미치는 영향을 확인할 수 있습니다.

AMP 웹사이트 활용 사례를 살펴보세요