Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

아름답고 대화형 표준 AMP 페이지

AMP를 사용하면 안정적이고 응답성이 우수한 성능의 웹페이지를 더 쉽게 빌드할 수 있습니다. AMP를 사용하면 자바스크립트를 작성하지 않고도 일반적인 사이트 상호작용을 만들 수 있습니다. amp.dev 웹사이트에는 미리 디자인된 빠른 시작 템플릿이 포함되어 있습니다.

빌드할 항목

이 Codelab에서는 다음과 같이 많은 AMP 기능과 확장된 구성요소를 통합하는 완전한 반응형 대화형 AMP 페이지를 빌드합니다.

반응형 탐색
전체 페이지 히어로 커버 이미지
반응형 이미지
자동재생 동영상
Instagram과 같은 삽입 항목
작업 및 선택기
amp-bind를 사용한 데이터 결합
amp-fx-collection 및 amp-animation를 사용한 시각 효과

필요한 항목

최신 웹브라우저
Node.js 및 텍스트 편집기 또는 CodePen이나 그와 비슷한 온라인 플레이그라운드에 대한 액세스
HTML, CSS, 자바스크립트, Chrome 개발자 도구에 관한 기본 지식

콘텐츠 제공 도구

Node.js를 사용하여 로컬 HTTP 서버를 실행하고 AMP 페이지를 제공합니다. Node.js 웹사이트를 확인하여 설치 방법을 알아보세요.

Node.js 기반 정적 콘텐츠 서버인 serve가 로컬에서 콘텐츠를 게재하는 도구 차트를 설치하려면 다음 명령어를 실행합니다.

npm install -g serve

amp.dev에서 템플릿 다운로드하기

AMP 템플릿은 최신 반응형 AMP 페이지를 빠르게 만드는 데 도움이 되는 빠른 시작 AMP 템플릿 및 구성요소의 저장소입니다.

AMP 템플릿을 방문하여 '올해를 빛낸 동물 사진' 템플릿의 '간단한 기사'를 위한 코드를 다운로드합니다.

템플릿 코드 실행

ZIP 파일의 콘텐츠를 추출합니다.

article 폴더 내에서 명령어 serve를 실행하여 로컬에서 파일을 제공합니다.

브라우저에서 http://localhost:5000/templates/article.amp.html로 이동합니다. (포트는 3000이거나 serve 버전에 따라 다른 번호일 수 있습니다. 정확한 주소는 콘솔을 확인하세요.)

여기에 있는 동안 Chrome DevTools를 열고 기기 모드도 전환합니다.

템플릿 코드 자르기

이제 우리는 대부분 작동하는 AMP 페이지를 진전시켰지만, 이 Codelab의 목적은 여러분이 배우고 연습할 수 있는 것입니다.

<body></body> 내부의 모든 내용을 삭제합니다.

이제 상용구 코드만 포함된 빈 페이지가 남아 있습니다.

이 Codelab 전반에 걸쳐 이 빈 페이지에 많은 구성요소를 추가하여 더 많은 기능을 갖춘 템플릿을 부분적으로 다시 만듭니다.

AMP 페이지는 추가 태그를 포함하고 안정적인 성능을 위한 몇 가지 제한사항이 있는 HTML 페이지입니다.

AMP 페이지에 있는 대부분의 태그는 일반 HTML 태그이지만 일부 HTML 태그는 AMP 전용 태그로 대체됩니다. 이러한 AMP 요소(AMP HTML 구성요소)를 사용하면 일반적인 패턴을 성능 측면에서 쉽게 구현할 수 있습니다.

가장 간단한 AMP HTML 파일은 다음과 같습니다 (AMP 상용구라고도 함).

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>
 </head>
 <body>Hello World!</body>
</html>

설정 중에 만든 빈 페이지의 코드를 살펴보세요. 상용구 코드에는 몇 가지 추가 항목이 포함되어 있습니다. 중요한 것은 축소된 CSS가 많이 포함된 <style amp-custom> 태그입니다.

AMP는 디자인에 관해 독단적이지 않으며 특정 스타일 모음을 적용하지 않습니다. 대부분의 AMP 구성요소에는 매우 기본적인 스타일 지정이 있습니다. 맞춤 CSS를 제공하는 것은 페이지 작성자의 책임입니다. <style amp-custom>이(가) 필요합니다.

그러나 AMP 템플릿은 아름답게 디자인되고, 교차 브라우저 및 반응형, 세련된 AMP 페이지를 빠르게 빌드하는 데 도움이 되는 독자적인 CSS 스타일을 제공합니다. 다운로드한 템플릿 코드에는 <style amp-custom>.에서 독자적인 CSS 스타일이 포함되어 있습니다.

먼저 템플릿에서 삭제한 일부 구성요소를 다시 추가하여 탐색 메뉴, 페이지 헤더 이미지, 제목 등 페이지의 셸을 만듭니다.

AMP 시작 UI 구성요소 페이지에서 지원을 받을 수 있지만 구현 세부정보를 자세히 살펴보지는 않을 예정입니다. 이 Codelab의 후반부 단계에서 이를 위해 많은 기회를 제공합니다.

https://ampstart.com/components#navigation으로 이동하여 반응형 메뉴용으로 제공된 HTML 코드를 복사하여 페이지의 body에 붙여넣습니다.

AMP Start에서 제공하는 코드에는 페이지의 반응형 탐색 메뉴를 구현하는 데 필요한 HTML 및 CSS 클래스 구조가 포함됩니다.

직접 해보기: 창 크기를 조절하여 다양한 화면 크기에 어떻게 반응하는지 확인합니다.

이 코드는 CSS 미디어 쿼리 및 amp-sidebar 및 amp-accordion AMP 구성요소를 사용합니다.

히어로 이미지 및 제목 추가

AMP Start는 멋진 반응형 히어로 이미지와 타이틀을 위한 즉시 사용 가능한 스니펫입니다.

https://ampstart.com/components#media로 이동하여 전체 페이지 히어로에 제공된 HTML 코드를 복사하여 body.의  comment 바로 뒤에 붙여넣습니다.

이제 이미지와 제목을 업데이트하겠습니다.

보시다시피 코드 스니펫에 두 개의 다른 amp-img 태그가 있습니다. 하나는 작은 너비에 사용되고 저해상도 이미지를 가리켜야 하며, 다른 하나는 더 큰 디스플레이에 사용됩니다. AMP는 모든 AMP 요소에서 지원하는 media 속성에 따라 자동으로 전환됩니다.

src, width, height를 다른 이미지로 업데이트하고 제목을 "MOST 아름다운 등산객 태평양 북서부'로 업데이트합니다. 기존 <figure>...</figure>를 다음으로 바꿉니다.

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

이제 페이지를 살펴보겠습니다.

요약

반응형 탐색과 히어로 이미지와 제목을 포함하여 페이지의 셸을 만들었습니다.
AMP 템플릿에 관해 자세히 알아보고 AMP 시작 UI 구성요소를 사용하여 페이지 셸을 빠르게 구성하기 위해

이 섹션의 완성된 코드는 http://codepen.io/aghassemi/pen/RpRdzV에서 찾을 수 있습니다.

이 섹션에서는 반응형 이미지, 동영상, 삽입 기능, 텍스트 몇 개를 페이지에 추가합니다.

페이지의 콘텐츠를 호스팅할 main 요소를 추가해 보겠습니다. body: 끝에 추가합니다.

<main id="content">

</main>

제목 및 단락 추가

main 내에 다음을 추가합니다.

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

AMP는 HTML일 뿐이므로 CSS 클래스 이름을 제외하고는 이 코드에 관해 특별한 점이 없습니다. px3, mb2, ampstart-dropcap이란 무엇인가요? 동영상의 출처는 어디인가요?

이러한 클래스는 AMP HTML의 일부가 아닙니다. AMP Start 템플릿은 베이스 클래스를 사용하여 하위 수준의 CSS 툴킷을 제공하고 AMP Start와 관련된 클래스를 추가합니다.

이 스니펫에서 px3 및 mb2은 Basscss에 의해 정의되며 padding-left-right 및 profit-Bottom으로 각각 변환됩니다. ampstart-dropcap은 AMP 시작에서 제공하고 단락의 첫 번째 글자를 크게 합니다.

사전 정의된 CSS 클래스에 관한 문서는 http://basscss.com/ 및 https://ampstart.com/components에서 확인할 수 있습니다.

이제 페이지가 어떻게 표시되는지 살펴보겠습니다.

이미지 추가하기

AMP에서 반응형 페이지를 만드는 방법은 간단합니다. 대부분의 경우 AMP 구성요소를 반응형으로 만드는 것은 layout="responsive" 속성을 추가하기만 하면 됩니다. HTML img 태그와 마찬가지로 amp-img도 srcset를 지원하여 다양한 표시 영역 너비와 픽셀 밀도에 맞는 여러 이미지를 지정합니다.

다음과 같이 amp-img를 main에 추가합니다.

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

이 코드로 layout="responsive"를 지정하고 width 및 height.를 제공하여 반응형 이미지를 만듭니다.

반응형 레이아웃을 사용할 때 너비와 높이를 지정해야 하는 이유는 무엇인가요?

두 가지 이유:

AMP는 너비와 높이를 사용하여 가로세로 비율을 계산하고 상위 컨테이너에 맞게 너비가 변경될 때 올바른 높이를 유지합니다.
AMP는 모든 요소에 정적 크기 지정을 적용하여 우수한 사용자 환경 (페이지를 점프하지 않음)을 보장하고 리소스가 다운로드되기 전에 각 요소의 크기와 위치를 결정하여 페이지를 배치합니다.

이제 페이지를 살펴보겠습니다.

자동재생 동영상 추가

AMP는 YouTube 및 Vimeo와 같은 여러 동영상 플레이어를 지원합니다. AMP에는 amp-video 확장 구성요소 아래에 자체 버전의 HTML5 video 요소가 있습니다. amp-video 및 amp-youtube를 비롯한 이러한 동영상 플레이어 중 일부는 모바일에서도 음소거된 자동재생을 지원합니다.

amp-img와 마찬가지로 amp-video은 layout="responsive"를 추가하여 반응형이 될 수 있습니다.

자동재생 동영상을 페이지에 추가해 보겠습니다.

다른 단락과 다음 amp-video 요소를 main:에 추가

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

한번 살펴보겠습니다.

퍼가기 추가

AMP에는 Twitter 및 Instagram 등 많은 타사 삽입의 확장 구성요소가 있습니다. AMP 구성요소가 없는 삽입의 경우 항상 amp-iframe이 있습니다.

페이지에 Instagram 삽입을 추가해 보겠습니다.

amp-img, amp-video와 달리 amp-instagram는 내장 구성요소가 아닙니다. AMP 스크립트의 가져오기 스크립트 태그를 구성요소를 사용할 수 있으려면 AMP 페이지의 head에 이를 명시적으로 포함해야 합니다.

사용 중인 AMP Start 상용구에는 여러 가져오기 스크립트 태그가 포함되어 있습니다. head 태그의 시작 부분에서 다음을 살펴보고 다음과 같은 가져오기 스크립트 행이 포함되어 있는지 확인합니다.

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

다른 단락과 다음 amp-instagram 요소를 main:에 추가

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

한번 살펴보겠습니다.

지금으로서는 충분한 콘텐츠일 것입니다.

요약

AMP의 반응형 구성요소에 관해 배웠습니다.
다양한 유형의 미디어 및 텍스트 콘텐츠를 추가했습니다.

이 섹션의 완성된 코드는 http://codepen.io/aghassemi/pen/OpXGoa에서 확인할 수 있습니다.

지금까지는 페이지에 정적 콘텐츠만 만들었습니다. 이 섹션에서는 캐러셀, 라이트박스, AMP 작업 등의 구성요소를 사용하여 대화형 사진 갤러리를 만듭니다.

AMP는 맞춤 자바스크립트를 지원하지 않지만 사용자 작업을 수신하고 처리하는 여러 구성 요소를 계속 노출합니다.

사진 캐러셀 추가하기

사진 중심의 AMP 페이지에 모든 이미지가 표시되도록 하면 사용자 환경이 개선되지 않습니다. 다행히 amp-carousel을 사용하여 가로로 스와이프할 수 있는 사진 슬라이드를 만들 수 있습니다.

먼저 head의 스크립트 태그가 amp-carousel에 포함되어 있는지 확인해 보겠습니다.

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

이제 여러 이미지가 있는 slides 유형의 반응형 amp-carousel를 main:에 추가합니다.

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides"는 한 번에 이미지 하나만 표시되도록 하고 사용자가 스와이프할 수 있게 합니다.

캐러셀 내의 이미지에는 layout="fill"가 사용됩니다. 슬라이드 캐러셀은 항상 하위 요소로 크기를 채우므로 너비와 높이가 필요한 다른 레이아웃을 지정할 필요가 없기 때문입니다.

한번 사용해 보겠습니다.

썸네일 캐러셀 추가하기

이제 이 이미지의 썸네일에 수평으로 스크롤 가능한 컨테이너를 추가해 보겠습니다. type="slides"를 사용하지 않고 고정 높이 레이아웃으로 <amp-carousel>를 다시 사용합니다.

이전 amp-carousel 요소 뒤에 다음을 추가합니다.

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

참고로 썸네일 이미지는 layout="fixed"과 저해상도 버전의 동일한 사진을 사용했습니다.

한번 살펴보겠습니다.

사용자가 미리보기 이미지를 탭할 때 이미지 변경하기

이렇게 하려면 tap과 같은 이벤트를 슬라이드 변경과 같은 작업에 연결해야 합니다.

이벤트: on 속성을 사용하여 요소에 이벤트 핸들러를 설치할 수 있으며 tap 이벤트는 모든 요소에서 지원됩니다.

action: amp-carousel은 각 썸네일 이미지의 탭 이벤트 핸들러에서 호출할 수 있는 goToSlide(index=INTEGER) 작업을 노출합니다.

이벤트 및 작업에 대해 알게 되었으니 이제 함께 살펴보겠습니다.

먼저 썸네일의 탭 이벤트 핸들러에서 참조할 수 있도록 슬라이드 캐러셀에 id를 제공해야 합니다.

기존 코드를 수정하여 슬라이드 캐러셀 (첫 번째 캐러셀)에 id 속성을 추가합니다.

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

이제 각 썸네일 이미지에 이벤트 핸들러를 on="tap:imageSlides.goToSlide(index=<slideNumber>)")" 설치합니다.

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

또한 tabindex을 제공하고 접근성을 위해 ARIA role를 설정해야 합니다.

이것으로 이제 각 썸네일 이미지를 탭하면 슬라이드 캐러셀 내의 해당 이미지가 표시됩니다.

사용자가 탭할 때 썸네일을 강조표시합니다.

이것이 가능한가요? 탭 이벤트 핸들러에서 호출할 요소의 CSS 클래스를 변경할 작업이 없는 것 같습니다. 그러면 선택한 썸네일을 강조표시하려면 어떻게 해야 하나요?

<amp-selector>를 구해야 합니다.

amp-selector는 지금까지 사용한 구성요소와 다릅니다. 이 레이아웃은 페이지의 레이아웃에 영향을 주지 않으므로 프레젠테이션 구성요소가 아닙니다. AMP 구성요소가 사용자가 선택한 옵션을 알 수 있도록 하는 구성요소가 됩니다.

amp-selector의 기능은 매우 단순하며 강력합니다.

amp-selector에는 임의의 HTML 요소 또는 AMP 구성요소가 포함될 수 있습니다.
amp-selector의 하위 요소는 option=<value> 속성이 있다면 모든 옵션이 될 수 있습니다.
사용자가 옵션인 요소를 탭하면 amp-selector는 그 요소에 selected 속성을 추가하고 단일 선택 모드의 다른 옵션 요소에서 제거합니다.
CSS 속성 선택기를 사용하여 selected 속성을 타겟팅하여 맞춤 CSS에서 선택한 요소의 스타일을 지정할 수 있습니다.

저희가 현재 작업을 수행하는 데 어떤 도움이 되는지 알아보겠습니다.

amp-selector의 스크립트 태그를 head에 추가합니다.

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

amp-selector에서 썸네일 캐러셀을 래핑합니다.
option=<value> 속성을 추가하여 모든 썸네일을 옵션으로 만듭니다.
selected 속성을 추가하여 첫 번째 미리보기 이미지를 기본으로 선택합니다.

<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

이제 선택한 썸네일을 강조표시하기 위한 스타일을 추가해야 합니다.

AMP 시작에서 축소된 CSS 상용구 뒤에 <style amp-custom>에 다음 맞춤 CSS를 추가합니다.

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

한번 살펴보겠습니다.

문제가 해결되었지만 버그가 발견되었나요?

사용자가 슬라이드 캐러셀을 스와이프하면 선택한 썸네일이 업데이트되지 않도록 업데이트되지 않습니다. 캐러셀의 현재 슬라이드를 선택한 썸네일과 결합하려면 어떻게 해야 하나요?

다음 섹션에서는 그 방법을 살펴보겠습니다.

요약

여러 유형의 캐러셀과 사용 방법을 알아봤습니다.
사용자가 썸네일 이미지를 탭할 때 AMP 작업과 이벤트를 사용하여 이미지 캐러셀에 표시되는 슬라이드를 변경했습니다.
amp-selector과 이를 흥미로운 사용 사례를 구현하기 위한 빌딩 블록으로 사용하는 방법을 알아봤습니다.

이 섹션의 완성된 코드는 http://codepen.io/aghassemi/pen/gmMJMy에서 확인할 수 있습니다.

이 섹션에서는 amp-bind를 사용하여 이전 섹션에서 이미지 갤러리의 상호작용을 개선합니다.

`amp-bind`의 정의

핵심 AMP 구성요소 amp-bind를 사용하면 데이터 결합 및 표현식을 사용하여 맞춤 상호작용을 만들 수 있습니다.

amp-bind는 세 가지 주요 부분으로 구성됩니다.

상태
binding
변형

상태는 단일 값부터 복잡한 데이터 구조에 이르기까지 모든 것이 포함된 애플리케이션 상태 변수입니다. 모든 구성요소가 이 공유 변수에 대해 읽기 및 쓰기를 수행할 수 있습니다.

결합은 HTML 속성 또는 요소의 콘텐츠와 상태를 연결하는 표현식입니다.

변형은 일부 사용자 작업 또는 이벤트로 인해 상태의 값을 변경하는 작업입니다.

변형이 발생하면 amp-bind의 힘이 시작됩니다. 해당 상태에 바인딩된 모든 구성요소에는 알림이 전송되며 새 상태가 자동으로 업데이트되도록 자동으로 업데이트됩니다.

실제 작동 과정을 살펴보세요.

`amp-bind`를 사용하여 이미지 갤러리 다시 구현

이전에는 AMP 작업 (예: goToSlide())을 사용하여 전체 이미지 슬라이드 캐러셀을 썸네일 이미지에 tap 이벤트와 연결하고 amp-selector를 사용하여 선택한 썸네일을 강조표시했습니다.

데이터 결합에 amp-bind 접근 방식을 사용하여 이 코드를 완전히 다시 구현하는 방법을 알아보겠습니다.

그러나 코딩을 시작하기 전에 다음과 같은 접근 방식을 설계해보겠습니다.

1. YouTube의 상태는 무엇인가요?

이 사례에서 우리가 중요하게 생각하는 유일한 값은 현재 슬라이드 번호뿐입니다. 따라서 selectedSlide는 상태입니다.

2. 바인딩은 무엇인가요?

selectedSlide가 변경되면 무엇을 변경해야 하나요?

전체 이미지 캐러셀의 보이는 slide:

<amp-carousel [slide]="selectedSlide" ...

amp-selector의 selected 항목도 변경해야 합니다. 이렇게 하면 이전 섹션에서 발생한 버그가 수정됩니다.

<amp-selector [selected]="selectedSlide" ...

3. 우리의 변이는 무엇인가요?

selectedSlide는 언제 변경해야 하나요?

사용자가 스와이프하여 전체 이미지 캐러셀에서 새 슬라이드를 변경하는 경우:

<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...

사용자가 썸네일을 선택할 경우:

<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

AMP.setState를 사용하여 변형을 트리거할 수 있습니다. 즉, 더 이상 썸네일에 있는 모든 on="tap:imageSlides.goToSlide(index=n)" 코드가 필요하지 않습니다.

종합해 봅시다.

amp-bind의 스크립트 태그를 head에 추가합니다.

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

기존 갤러리 코드를 새로운 접근 방식으로 바꿉니다.

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

테스트해 보세요. 썸네일을 탭하면 이미지 슬라이드가 변경됩니다. 이미지 슬라이드를 스와이프하면 강조표시된 미리보기 이미지가 변경됩니다.

갤러리에 텍스트 추가

이미 수행 중인 슬라이드의 상태를 정의하고 변경하는 많은 작업을 했습니다. 이제 추가 슬라이드를 쉽게 제공하여 현재 슬라이드 번호에 따라 다른 정보를 업데이트할 수 있습니다.

갤러리에 이미지 x/of y" 텍스트를 추가하겠습니다.

슬라이드 캐러셀 요소 위에 다음 코드를 추가합니다.

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

이번에는 HTML 속성에 결합하는 대신 [text]=를 사용하여 요소의 내부 텍스트에 다시 바인딩합니다.

한번 시도해 보세요.

요약

amp-bind에 관해 배웠습니다.
amp-bind를 사용하여 개선된 버전의 이미지 갤러리를 구현했습니다.

이 섹션의 완성된 코드는 http://codepen.io/aghassemi/pen/MpeMdL에서 확인할 수 있습니다.

이 섹션에서는 두 가지 새로운 기능을 사용하여 페이지에 애니메이션을 추가합니다.

제품명에 시차 효과 추가

amp-fx-collection은 속성이 있는 모든 요소에서 쉽게 사용 설정할 수 있는 시차와 같은 미리 설정된 시각 효과 컬렉션을 제공하는 확장 프로그램입니다.

시차 효과를 사용하면 사용자가 페이지를 스크롤할 때 속성에 할당된 값에 따라 요소가 더 빠르게 또는 느리게 스크롤됩니다.

모든 HTML 또는 AMP 요소에 amp-fx="parallax" data-parallax-factor="<a decimal factor>" 속성을 추가하여 시차 효과를 사용 설정할 수 있습니다.

배율 값이 1보다 크면 사용자가 페이지를 아래로 스크롤할 때 요소가 더 빠르게 스크롤됩니다.
배율 값이 1보다 작으면 사용자가 페이지를 아래로 스크롤할 때 요소가 더 느리게 스크롤됩니다.

페이지 제목에 1.5의 인수로 패럴랙스를 추가하여 어떻게 보이는지 확인해 보겠습니다.

amp-fx-collection의 스크립트 태그를 head에 추가합니다.

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

이제 코드에서 기존 헤더 제목 요소를 찾아 amp-fx="parallax" and data-parallax-factor="1.5" 속성을 추가합니다.

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

결과를 살펴보겠습니다.

이제 제목이 페이지의 나머지 부분보다 빠르게 스크롤됩니다. 훌륭합니다.

페이지에 애니메이션 추가

amp-animation은 Web Animations API를 AMP 페이지로 가져오는 기능입니다.

이 섹션에서는 amp-animation을 사용하여 표지 이미지를 미세하게 확대하는 효과를 생성합니다.

amp-animation의 스크립트 태그를 head에 추가합니다.

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

이제 애니메이션이 적용되는 타겟 요소를 정의하고 애니메이션을 정의해야 합니다.

애니메이션은 최상위 amp-animation 태그 내에서 JSON으로 정의됩니다.

페이지에서 여는 body 태그 바로 아래에 다음 코드를 삽입합니다.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

이 코드는 지연 없이 30초 동안 실행되고 이미지 크기를 30% 로 조정하는 애니메이션을 정의합니다.

애니메이션이 종료된 후에도 이미지를 계속 확대할 수 있도록 앞으로 fill를 정의합니다. target은 애니메이션이 적용되는 요소의 HTML id입니다.

amp-animation가 작업을 할 수 있도록 페이지의 히어로 이미지 요소에 id를 추가해 보겠습니다.

코드에서 기존 히어로 이미지 (layout="fixed-height"가 있는 고해상도)를 찾아 amp-img 태그에 id="heroimage"를 추가합니다.
지금은 media="(min-width: 416px)"을 삭제하고 다른 저해상도 amp-img도 삭제하므로 amp-animation에 있는 여러 애니메이션 및 미디어 쿼리를 처리할 필요가 없습니다.

<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

보시다시피 이미지를 확장하면 상위 요소가 오버플로되므로 오버플로를 숨겨 문제를 수정해야 합니다.

다음 CSS 규칙을 기존 <style amp-custom> 끝에 추가합니다.

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

한번 사용해 보겠습니다.

조심하세요!

CSS에서도 가능합니다. amp-animation의 핵심은 무엇인가?

이 경우에도 마찬가지입니다. 하지만 amp-animation은 CSS만으로는 할 수 없는 추가 기능을 지원합니다. 예를 들어 애니메이션은 가시성을 기준으로 트리거되거나 (가시성에 따라 일시중지됨) AMP 작업으로도 트리거될 수 있습니다. amp-animation은 또한 CSS 애니메이션보다 더 많은 기능을 제공하며 특히 구성 가능성 측면에서 Web Animations API에 기반합니다.

요약

amp-fx-collection를 사용하여 시차 효과를 만드는 방법을 배웠습니다.
amp-animation에 관해 배웠습니다.

이 섹션의 완성된 코드는 http://codepen.io/aghassemi/pen/OpXKzo에서 확인할 수 있습니다.

멋진 대화형 AMP 페이지를 만들었습니다.

오늘 성과를 되돌아보며 축하해 보세요.

완성된 페이지의 링크는 다음과 같습니다. http://s.codepen.io/aghassemi/debug/OpXKzo

... 최종 코드: http://codepen.io/aghassemi/pen/OpXKzo

제목 없는 GIF

이 Codelab의 CodePen 항목 모음은 https://codepen.io/collection/XzKmNB/에서 확인할 수 있습니다.

시작하기 전에...

가로 모드의 태블릿과 같은 다른 폼 팩터에서 페이지가 어떻게 표시되는지 확인하는 것을 잊었습니다.

다음을 확인하세요.

제목 없는 GIF

훌륭합니다.

멋진 하루 보내세요.

다음 단계

이 Codelab에서는 AMP에 가능한 기능을 간략하게 살펴봅니다. 훌륭한 AMP 페이지를 만드는 데 도움이 되는 리소스와 Codelab이 다양하게 마련되어 있습니다.

궁금한 점이 있거나 문제가 발생하는 경우 AMP Slack 채널에서 문의하거나 GitHub에서 토론, 버그 신고 또는 기능 요청을 만드세요.

아름답고 대화형 표준 AMP 페이지

빌드할 항목

필요한 항목

콘텐츠 제공 도구

amp.dev에서 템플릿 다운로드하기

템플릿 코드 실행

템플릿 코드 자르기

반응형 탐색 추가

히어로 이미지 및 제목 추가

요약

제목 및 단락 추가

이미지 추가하기

자동재생 동영상 추가

퍼가기 추가

요약

사진 캐러셀 추가하기

썸네일 캐러셀 추가하기

사용자가 미리보기 이미지를 탭할 때 이미지 변경하기

사용자가 탭할 때 썸네일을 강조표시합니다.

요약

amp-bind의 정의

amp-bind를 사용하여 이미지 갤러리 다시 구현

갤러리에 텍스트 추가

요약

제품명에 시차 효과 추가

페이지에 애니메이션 추가

요약

시작하기 전에...

다음 단계

`amp-bind`의 정의

`amp-bind`를 사용하여 이미지 갤러리 다시 구현