Accelerated Mobile Pages 고급 개념

1. 개요

이 Codelab은 Accelerated Mobile Pages Foundations에서 소개된 개념을 이어갑니다. 이 실습을 시작하기 전에 이전 코드 랩을 완료했거나 AMP의 핵심 개념을 이미 기본적으로 이해하고 있어야 합니다.

이 Codelab에서는 AMP가 광고, 분석, 동영상 삽입, 소셜 미디어 통합, 이미지 캐러셀 등을 처리하는 방법을 알아봅니다. 이를 위해 다양한 AMP 구성요소를 통해 이러한 기능을 추가하여 기초 Codelab의 예시를 기반으로 빌드합니다.

학습할 내용

amp-ad로 디스플레이 광고를 게재합니다.
YouTube 동영상, 트위터 카드, 반응형 텍스트 요소를 삽입합니다.
amp-carousel을 사용하여 이미지와 콘텐츠 조합으로 캐러셀을 빌드합니다.
amp-analytics를 사용한 간단한 추적 패턴
페이지에 사이트 탐색을 추가하는 방법
AMP에서 글꼴이 작동하는 방식

필요한 항목

샘플 코드
Chrome (또는 JavaScript 콘솔을 검사할 수 있는 동등한 브라우저)
Python (2.7 권장) 또는 Chrome 200 OK 웹 서버 확장 프로그램
코드 편집기 (예: Atom, Sublime, Notepad++)

2. 샘플 코드 가져오기

컴퓨터에 모든 샘플 코드를 다운로드할 수 있습니다.

...또는 명령줄에서 GitHub 저장소를 클론합니다.

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

여러 예시 리소스 파일과 시작 article.html 페이지가 포함된 ZIP 파일이 다운로드됩니다.

폴더의 압축을 풀고 컴퓨터의 명령줄을 통해 디렉터리로 이동합니다.

3. 샘플 페이지 실행

샘플 페이지를 테스트하려면 웹 서버에서 파일에 액세스해야 합니다. 테스트에 사용할 임시 로컬 웹 서버를 만드는 방법에는 여러 가지가 있습니다. 이 Codelab에서는 다음 3가지 옵션에 대한 안내를 제공합니다.

Google Chrome 앱 'Chrome용 웹 서버' - 가장 간단하고 크로스 플랫폼 솔루션이므로 이 방법을 권장합니다. 참고: 이 방법을 사용하려면 Google Chrome이 설치되어 있어야 합니다.
Firebase 호스팅 - 새로운 정적 애셋 호스팅 플랫폼인 'Firebase 호스팅'을 살펴보고 싶다면 이 옵션을 사용하세요. 기본적으로 SSL이 사용 설정되어 있습니다.
로컬 HTTP Python 서버 - 명령줄에 액세스해야 합니다.

옵션 1: Chrome용 웹 서버

Chrome 웹 스토어의 이 링크에서 'Web Server for Chrome' 앱을 찾을 수 있습니다.

Chrome 앱을 설치한 후 '폴더 선택' 버튼을 통해 앱이 특정 폴더를 가리키도록 해야 합니다. 이 Codelab에서는 Codelab 예제 파일의 압축을 해제한 폴더를 선택해야 합니다.

또한 'Automatically show index.html'(index.html 자동 표시) 옵션을 선택하고 포트를 '8000'으로 설정해야 합니다. 이러한 변경사항을 적용하려면 웹 서버를 다시 시작해야 합니다.

다음을 통해 이 URL에 액세스합니다.

http://localhost:8000/article.amp.html

위 URL이 로드되면 다음 섹션으로 계속 진행할 수 있습니다.

옵션 2: Firebase 호스팅

새로운 Firebase 정적 웹 호스팅을 살펴보고 싶다면 여기에서 확인할 수 있는 안내에 따라 AMP 사이트를 Firebase 호스팅 URL에 배포하세요.

Firebase 호스팅은 HTML, CSS, JavaScript 파일 등 정적 웹사이트와 애셋을 빠르게 배포하고 호스팅하는 데 사용할 수 있는 정적 호스팅 제공업체입니다. 정적 콘텐츠가 전 세계에 있는 접속 지점 (PoP)이 있는 콘텐츠 전송 네트워크 (CDN)에 캐시되므로 사용자는 지연 시간 감소의 이점을 누릴 수 있습니다.

마지막으로 Firebase 호스팅은 항상 SSL을 통해 제공되므로 AMP 및 일반 웹에 적합합니다. AMP에만 집중하고 싶다면 이 옵션을 무시하세요.

옵션 3: HTTP Python 서버

Chrome을 사용하지 않거나 Chrome 확장 프로그램을 설치하는 데 문제가 있는 경우 명령줄에서 Python을 사용하여 로컬 웹 서버를 실행할 수도 있습니다.

명령줄에서 Python의 내장 HTTP 서버를 실행하려면 다음을 실행하면 됩니다.

python -m SimpleHTTPServer

이 URL에 액세스합니다.

http://localhost:8000/article.amp.html

4. 핵심 AMP 구성요소 알아보기

AMP의 구성요소 시스템을 사용하면 최소한의 노력으로 효율적이고 반응형 기능을 기사에 빠르게 빌드할 수 있습니다. <head> 태그의 핵심 AMP JavaScript 라이브러리에는 다음과 같은 여러 핵심 구성요소가 포함되어 있습니다.

amp-ad - 광고를 표시하는 컨테이너입니다.
amp-img - HTML img 태그의 대체입니다.
amp-pixel - 페이지 조회수를 계산하는 추적 픽셀로 사용됩니다.
amp-video - HTML5 동영상 태그의 대체 태그입니다.

위의 모든 핵심 구성요소는 AMP 문서에서 즉시 사용할 수 있습니다. 예제 코드에서는 이미 페이지에서 amp-img를 사용하고 AMP 기본사항 코드 랩에서 AMP 레이아웃 시스템과의 관계를 살펴봤으므로 다음 장에서 amp-ad를 살펴보겠습니다.

5. 광고 추가

샘플 article.amp.html 페이지는 다음과 같아야 합니다.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

위는 간단한 페이지로, 이 페이지의 가장 흥미로운 사실은 AMP 유효성 검사와 Schema.org 검색엔진 메타 데이터 유효성 검사를 모두 통과한다는 것입니다. 이 페이지가 뉴스 웹사이트에 배포되면 AMP 콘텐츠 전용의 새로운 Google 검색 캐러셀에 포함될 수 있으므로 작업의 좋은 시작점이 됩니다.

페이지를 변경하기 전에 Chrome 개발자 도구를 열어 보겠습니다. 웹사이트 (특히 모바일 중심 웹사이트)를 작업할 때는 브라우저에서 테스트할 때 모바일 환경을 시뮬레이션하는 것이 좋습니다. Menu > More Tools > Developer Tools를 통해 Chrome에서 개발자 콘솔을 열어 시작합니다.

이제 개발자 콘솔에서 JavaScript 출력을 검사합니다. 콘솔 탭이 선택되어 있는지 확인합니다.

이제 개발자 콘솔에서 기기 시뮬레이션 버튼을 클릭합니다. 휴대전화와 태블릿이 나란히 놓여 있는 모습으로 표현됩니다.

표시되는 메뉴에서 기기를 'Nexus 5X'로 설정합니다.

이제 페이지 자체에 대한 작업을 시작할 수 있습니다. AMP 기사에 광고를 추가해 보겠습니다.

AMP의 모든 광고는 amp-ad 구성요소를 사용하여 구성됩니다. 이 구성요소를 사용하면 너비, 높이, 레이아웃 모드 등 다양한 방식으로 광고를 구성할 수 있습니다. 하지만 많은 광고 플랫폼에서는 광고 네트워크의 계정 ID, 게재할 광고, 광고 타겟팅 옵션과 같은 추가 구성이 필요합니다. amp-ad의 경우 HTML 속성으로 필요한 다양한 옵션을 입력하면 됩니다.

더블클릭 광고의 예를 살펴보세요.

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

보시다시피 매우 간단한 구성입니다. type 속성을 확인하세요. 이 속성은 amp-ad 구성요소에 사용할 광고 플랫폼을 알려줍니다. 이 경우 Double Click 플랫폼을 원했으므로 유형 값은 doubleclick였습니다.

data-slot 속성이 더 고유합니다. amp-ad에서 data-로 시작하는 속성은 공급업체별 속성입니다. 즉, 모든 공급업체에 이 속성이 필요한 것은 아니며, 제공되더라도 반응하지 않을 수 있습니다. 예를 들어 위의 Double Click 예시를 A9 플랫폼의 테스트 광고와 비교해 보세요.

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

<header> 태그 바로 뒤에 위의 두 예시를 모두 추가해 보세요. 페이지를 새로고침하면 두 개의 테스트 광고가 표시됩니다.

Double Click에서 사용할 수 있는 몇 가지 옵션을 더 살펴보겠습니다. 다음 두 가지 지역 타겟팅 광고 구성을 페이지에 추가해 보세요.

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

아쉽게도 페이지 자체의 코드에서는 지역 타겟팅을 제어할 수 없습니다. 하지만 이러한 테스트 광고는 이미 더블클릭 대시보드에서 특정 국가(영국 및 미국)에만 표시되도록 구성되어 있습니다.

페이지를 새로고침하고 확인해 보세요. 다음 스크린샷은 오스트레일리아에서 캡처한 것으로, 광고가 로드되지 않습니다.

위의 지역 타겟팅 예는 amp-ad가 모든 종류의 광고 플랫폼 기능에 충분히 유연함을 보여줍니다.

현재 지원되는 광고 네트워크는 다음과 같습니다.

최신 지원 광고 플랫폼에 관한 정보는 AMP 광고 구성요소 문서 페이지를 참고하세요.

다음 장에서는 고급 AMP 구성요소와 AMP 문서에 이를 포함하는 방법을 자세히 살펴보겠습니다.

6. 확장된 구성요소로 콘텐츠 확장

이제 텍스트, 이미지, 광고가 페이지에 삽입된 기본 AMP 문서가 있습니다. 이는 스토리를 전달하고 콘텐츠로 수익을 창출하는 데 필요한 모든 핵심 요소입니다. 그러나 오늘날의 웹사이트에는 대부분 사진이나 텍스트 외에도 다양한 기능이 포함됩니다.

이제 AMP 문서를 한 단계 업그레이드하고 앞에서 언급한 핵심 구성요소 외에 어떤 구성요소를 사용할 수 있는지 살펴보겠습니다.

이 장에서는 뉴스 기사에서 흔히 볼 수 있는 고급 웹 기능을 추가해 보겠습니다.

YouTube 동영상
트윗
기사 인용

YouTube 동영상 삽입하기

문서에 YouTube 동영상을 삽입해 보겠습니다. 다음 코드는 동영상을 삽입하고 페이지에 추가합니다.

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

페이지를 새로고침하고 페이지를 확인합니다. 동영상 대신 '동영상을 로드할 수 없습니다.'라는 텍스트가 표시됩니다.

브라우저에서 YouTube 동영상을 문제없이 표시할 수 있더라도 이 오류가 표시됩니다. 왜냐하면 동영상이 실제로 로드되지 않은 것이 아니라 구성요소 자체가 실패한 것입니다.

핵심 AMP 라이브러리 자바스크립트 파일에 모든 구성요소가 포함되어 있지는 않다는 점을 기억하세요. 특히 YouTube 구성요소에 대한 추가 JavaScript 요청을 포함해야 합니다. 핵심 세트를 제외한 모든 구성요소에는 이러한 추가 JavaScript 참조가 필요합니다.

<head> 태그에 다음 요청을 추가합니다.

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

페이지를 새로고침하면 YouTube 동영상이 표시됩니다.

AMP 레이아웃 시스템에서 가로세로 비율을 계산할 수 있도록 동영상의 너비와 높이를 다시 지정했습니다. 또한 레이아웃 유형이 반응형으로 설정되어 있어 이 동영상이 상위 요소의 너비를 채웁니다.

YouTube 구성요소에 대해 자세히 알아보세요.

트윗 표시

트위터에서 사전 형식화된 트윗을 삽입하는 것은 뉴스 기사의 일반적인 기능입니다. AMP Twitter 구성요소를 사용하면 이 기능을 쉽게 제공할 수 있습니다.

먼저 문서의 <head> 태그에 다음 JavaScript 요청을 추가합니다.

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

이제 트윗 자체를 삽입하려면 추가할 코드를 기사에 추가합니다.

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

data-tweetid 속성은 특정 플랫폼 공급업체에서 요구하는 맞춤 속성의 또 다른 예입니다. 이 경우 Twitter는 data-tweetid 속성을 페이지에 삽입할 특정 트윗에 해당하는 것으로 인식합니다.

브라우저를 새로고침하고 페이지를 살펴봅니다. 트윗이 표시됩니다.

Twitter 구성요소에 대해 자세히 알아보세요.

기사 인용구 강조 표시

뉴스 기사의 일반적인 요소는 기사에서 특히 흥미로운 텍스트 스니펫을 강조 표시하는 것입니다. 예를 들어 특정 출처의 인용문이나 중요한 사실이 독자의 관심을 끌기 위해 더 큰 글꼴로 반복될 수 있습니다.

하지만 모든 인용구 또는 텍스트 스니펫의 문자열 길이가 반드시 동일하지는 않으므로 큰 글꼴 크기와 특정 텍스트가 페이지에서 차지하는 공간의 균형을 맞추기가 어려울 수 있습니다.

AMP에는 이러한 상황을 위해 특별히 설계된 amp-fit-text라는 다른 구성요소가 포함되어 있습니다. 고정 너비 및 고정 높이 요소와 최대 글꼴 크기를 정의할 수 있습니다. 구성요소는 사용 가능한 너비와 높이 내에 인용문의 텍스트가 맞도록 글꼴 크기를 지능적으로 조정합니다.

시작해 볼게요 먼저 구성요소의 라이브러리를 <head> 태그에 추가합니다.

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

페이지에 다음을 추가합니다.

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

페이지를 새로고침하고 결과를 확인하세요.

이제 추가로 실험해 보세요. 인용문이 훨씬 짧으면 어떻게 될까요?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

아니면 더 긴 인용문은 어떠세요?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

amp-fit-text의 마지막 실험으로 높이가 훨씬 큰 짧은 텍스트(예: #YOLO)를 만들고 max-font-size 속성 값을 42로 유지해 보세요. 결과 페이지가 어떻게 표시될까요? 텍스트가 세로로 가운데에 배치되나요? 아니면 amp-fit-text 태그의 높이가 최대 글꼴 크기에 맞게 축소되나요? AMP의 레이아웃 시스템에 대해 알고 있는 내용을 바탕으로 문서를 수정하기 전에 질문에 답해 보세요.

7. 복잡한 캐러셀

웹 개발의 또 다른 일반적인 기능은 캐러셀입니다. AMP에는 이 요구사항을 충족하도록 설계된 일반 구성요소가 포함되어 있습니다. 이미지 캐러셀과 같은 간단한 예시부터 시작해 보겠습니다.

문서의 <head> 태그에 다음 JavaScript 요청을 추가하여 캐러셀 구성요소 라이브러리를 포함해야 합니다.

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

다음으로 반응형 레이아웃과 사전 정의된 너비 및 높이가 있는 간단한 이미지 캐러셀을 삽입합니다. 페이지에 다음을 추가합니다.

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

페이지를 새로고침하면 페이지에 캐러셀이 표시됩니다.

캐러셀 구성요소는 다양한 방식으로 구성할 수 있습니다. 대신 유형을 slides로 변경하고 결과를 확인해 보세요. amp-carousel 및 그 안에 있는 이미지의 layout 속성도 responsive로 변경해야 합니다.

이제 요소의 스크롤 목록 대신 한 번에 하나의 요소가 표시됩니다. 가로로 스와이프하여 요소를 이동해 보세요. 세 번째 요소로 스와이프하면 더 이상 스와이프할 수 없습니다.

그런 다음 loop 속성을 추가합니다. 페이지를 새로고침하고 즉시 왼쪽으로 스와이프합니다. 캐러셀이 끝없이 계속됩니다.

마지막으로 이 캐러셀이 2초마다 자동 재생되도록 하겠습니다. 페이지에 autoplay 속성을 추가하고 지연 속성을 값 2000과 함께 추가합니다(delay="2000").

최종 결과는 다음과 같을 것입니다.

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

페이지를 새로고침하고 사용해 보세요.

이미지 캐러셀도 좋지만, 캐러셀에 더 복잡한 콘텐츠를 표시하려면 어떻게 할까요? 광고, 텍스트, 이미지를 모두 하나의 캐러셀에 배치하여 약간의 변화를 줘 보겠습니다. amp-carousel이 이렇게 복잡하게 섞여 있는 콘텐츠를 한 번에 처리할 수 있을까요? 물론입니다.

먼저 amp-fit-text 및 amp-carousel 구성요소가 안전하게 함께 작동하도록 페이지에 이 스타일을 추가합니다.

amp-fit-text {
    white-space: normal;
}

이제 다음 캐러셀 코드를 페이지에 넣어 보세요.

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

페이지를 새로고침하면 다음과 같이 표시됩니다.

캐러셀 구성요소에 대해 자세히 알아보세요.

8. amp-analytics로 추적

애널리틱스 플랫폼은 일반적으로 애널리틱스 시스템으로 다시 전송되는 이벤트를 트리거하는 인라인 JavaScript 스니펫과 함수 호출을 통해 웹사이트에 통합됩니다. AMP는 여러 분석 파트너를 대상으로 이 프로세스를 복제할 수 있도록 유연한 JSON 구성 구문을 제공합니다.

다음은 amp-analytics의 JSON 형식으로 다시 작성할 기존 JavaScript 기반 Google 애널리틱스 추적의 예입니다. 먼저 기존 JavaScript 접근 방식은 다음과 같습니다.

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

위의 코드는 매우 간단하며 추적할 페이지 조회 이벤트에 대한 알림을 전송합니다.

amp-analytics 구성요소에서 위 내용을 모두 복제하려면 먼저 문서의 <head>에 구성요소 라이브러리를 포함합니다.

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

그런 다음 다음과 같이 구성요소를 포함합니다.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

더 복잡해 보일 수 있지만 실제로 여러 유형의 이벤트를 설명하는 데 매우 유연한 형식입니다. 또한 JSON 형식에는 실수로 변경될 경우 오류가 발생할 수 있는 기존 예의 JavaScript 코드 블롭이 포함되어 있지 않습니다.

JSON 형식에서 트리거 키에는 추적할 모든 이벤트 트리거를 나타내는 키 집합이 포함됩니다. 이러한 트리거의 키는 이벤트에 대한 설명입니다(예: 위의 '기본 페이지 조회'). 제목 키 값은 조회 중인 페이지의 이름과 관련이 있습니다.

위의 예시를 확장하여 '#header 트리거 클릭'이라는 트리거를 추가할 수 있습니다.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

이 트리거는 이름 그대로입니다. DOM 선택기 '#header'를 사용하여 ID가 'header'인 태그를 쿼리하고, 기기에서 '클릭'하거나 탭하는 이벤트가 발생하면 카테고리 라벨이 'examples'인 이벤트 작업 'clicked-header'를 분석 플랫폼으로 전송합니다.

통합하려는 맞춤 추적 플랫폼이 있는 경우에도 amp-analytics를 사용하여 추적 정보에 대한 맞춤 URL 엔드포인트를 정의할 수 있습니다. amp-analytics 구성요소에 대해 자세히 알아보려면 여기를 참고하세요.

9. 사이트 탐색

모바일 웹사이트의 일반적인 요구사항은 사이트 탐색 메뉴를 포함하는 것입니다. 탐색 메뉴는 형식이 매우 다양합니다. 다음은 AMP 문서에서 탐색을 표시하는 방법의 몇 가지 예입니다.

홈페이지로 다시 연결하는 방법이 가장 간단합니다.
캐러셀 구성요소를 통한 하위 제목 메뉴

홈페이지 링크

사용자가 웹사이트의 일반 탐색 옵션에 액세스하도록 하는 가장 간단한 방법은 사용자를 일반 웹사이트 인터페이스로 다시 유도하는 것입니다.

<header> 태그에 다음 HTML 링크를 추가해 보세요.

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

다음 규칙을 인라인 CSS에 추가합니다.

.home-button {
  float: left;
}

이제 페이지를 새로고침합니다. 페이지의 왼쪽 상단에 homepage.html를 가리키는 링크가 표시됩니다. 이 링크를 클릭하면 아무 데도 연결되지 않는 것을 알 수 있습니다.

이 링크는 웹사이트 홈페이지의 URL로 대체하여 사용자가 일반 웹사이트 탐색을 통해 사이트의 다른 부분으로 이동할 수 있도록 할 수 있습니다.

앞서 언급한 바와 같이 기존 웹사이트 탐색을 활용하는 것이 가장 간단한 접근 방식입니다. 다음으로 두 가지 대안을 살펴보겠습니다.

이 문제에 대한 또 다른 접근 방식은 AMP 문서 내에 사이트의 탐색 메뉴를 표시하는 것입니다. 페이지의 작은 섹션에 포함되도록 캐러셀을 사용하여 사이트 헤더 아래에 스크롤 가능한 메뉴를 표시할 수 있습니다.

캐러셀 구성요소가 필요하므로 페이지의 <head> 태그에 구성요소의 JavaScript를 추가해야 합니다.

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

<header> 태그 바로 아래에 이 HTML 스니펫을 추가해 보세요.

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

다음 규칙을 인라인 CSS에 추가합니다.

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

이제 페이지를 새로고침합니다. 기사 제목 아래에 링크 메뉴가 표시됩니다. 이 메뉴는 가로로 스크롤하여 많은 탐색 링크를 저장할 수 있습니다.

이 하위 메뉴 탐색은 페이지에서 너무 많은 공간을 차지하지 않고 많은 링크를 저장할 수 있는 좋은 방법입니다.

10. 글꼴 추가

앞서 설명한 것처럼 AMP 문서에서는 외부 스타일시트 요청이 허용되지 않습니다. 하지만 이 규칙에는 예외가 있습니다. 바로 글꼴입니다.

글꼴은 웹 사용자의 글 읽기 환경에서 중요한 부분이며 웹브라우저가 외부 스타일시트 요청을 통해 글꼴 파일을 가져오므로 AMP에서 이 제외가 필요합니다.

문서에 Raleway 글꼴에 대한 참조를 추가해 보겠습니다.

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

이제 Raleway에 대한 참조를 포함하도록 CSS를 업데이트합니다.

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

페이지를 새로고침하고 페이지의 새로운 모습을 확인하세요. 또한 유효성 검사기의 출력을 검사하면 이 외부 요청과 관련하여 불만이 없음을 알 수 있습니다.

참고: 문서에 글꼴을 포함하는 데는 추가 구성요소가 필요하지 않습니다. 하지만 실제로 amp-font라는 구성요소가 있습니다. 실제로 웹 글꼴을 로드하는 데 사용되지는 않지만 웹 글꼴이 성공적으로 로드되었는지 감지하고 필요한 경우 적절하게 응답하는 데 사용할 수 있습니다.

이 기능을 사용하면 글꼴이 완전히 로드될 때까지 텍스트를 숨겨 사용자가 임시 글꼴에서 실제 글꼴로 텍스트가 스냅되는 것을 보지 않도록 할 수 있습니다. 이후 글꼴이 실패하는 경우 임시 글꼴을 대신 표시하는 것이 좋습니다. 사용자가 텍스트를 읽지 못하는 것이 최악의 시나리오이기 때문입니다. amp-font에 대해 자세히 알아보려면 여기를 참고하세요.

11. 축하합니다.

고급 AMP Codelab을 완료하고 AMP의 여러 주요 구성요소를 살펴봤습니다.

amp-ad와 amp-analytics를 사용하여 다양한 광고 플랫폼과 분석 공급업체를 지원하는 방법을 이해하셨기를 바랍니다. 사용 가능한 AMP 구성요소의 전체 목록을 살펴보세요.

다음은 기술을 더욱 강화하는 데 도움이 되는 추가 주제와 링크입니다.

AMP By Example - AMP 구성요소 및 구성요소 패턴의 광범위한 예시 카탈로그입니다.
Double Click 광고 예시 - amp-ad 예시의 광범위한 카탈로그입니다.
페이지 검색에 관한 모든 정보
허용되지 않는 HTML 태그
제한된 CSS 규칙 및 애니메이션
iframe 자세히 알아보기
AMP CDN
사용 가능한 AMP 구성요소 목록