AMP

Improving the interactivity

시작 코드는 매우 기본적인 사용자 환경을 제공합니다. 몇 가지 방법을 통해 사용자 환경을 개선할 수 있습니다.

  • 현재 슬라이드 및 슬라이드의 총 개수를 표시하는 표시기를 추가합니다.
  • 사용자가 다른 셔츠 색상을 선택하면 이미지 캐러셀을 변경하여 선택된 색상의 셔츠 이미지를 표시합니다.

amp-bind 컴포넌트가 도입되기 전에는 이와 같은 기능을 추가할 수 없었습니다. amp-bind를 직접 경험하고 신규 기능을 샘플 코드에 추가해 보겠습니다!

amp-bind 컴포넌트 설치

amp-bind는 AMP 데이터 바인딩과 JS와 유사한 표현식을 통해 사용자 지정의 상호작용을 제공하는 컴포넌트입니다. amp-bind를 사용하려면 페이지에 설치해야 합니다.

static/index.html 파일을 열고 다음 스크립트를 페이지 <head> 섹션의 AMP 컴포넌트 목록에 추가합니다.

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

슬라이드 표시기 추가

amp-bind는 요소 속성을 사용자 지정 표현식에 바인딩하여 작동합니다. 이 표현식은 "상태"(변경 가능한 JSON 데이터)를 참조할 수 있습니다. 이 상태는 amp-bind에 포함된 <amp-state> 컴포넌트를 통해 초기화할 수 있습니다.

슬라이드 상태 초기화

이제 상태 변수를 초기화하여 이미지 캐러셀에 현재 표시된 슬라이드의 색인을 추적해 보겠습니다. static/index.html을 열고 페이지 <body> 상단(<header> 이전)에 다음을 추가하세요.

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0
    }
  </script>
</amp-state>

<amp-state> 요소 내의 데이터는 연결된 ID로 액세스할 수 있습니다. 예를 들어 다음 표현식 조각으로 해당 변수를 참조할 수 있습니다.

selected.slide; // Evaluates to 0.

슬라이드 상태 업데이트

다음으로 사용자가 캐러셀의 슬라이드를 변경하는 경우 기존 amp-carousel 요소에 다음의 "on" 작업을 추가하여 이 변수를 업데이트해 보겠습니다.

<amp-carousel
  type="slides"
  layout="fixed-height"
  height="250"
  id="carousel"
  on="slideChange:AMP.setState({selected: {slide: event.index}})"
></amp-carousel>

이제 표시된 amp-carousel 슬라이드가 변경될 때마다 AMP.setState 작업은 다음 인수를 사용하여 호출됩니다.

{
  selected: {
    slide: event.index;
  }
}

event.index 표현식은 새 슬라이드 색인을 평가하고 AMP.setState() 작업으로 이 객체 리터럴이 현재 상태로 병합됩니다. 이렇게 하면 selected.slide의 현재 값이 event.index 값으로 대체됩니다.

도움말 – AMP.setState()는 중첩된 객체 리터럴을 완전히 병합합니다. 자세한 내용은 amp-bind 문서를 참조하세요.

표시기 요소 바인딩

다음으로 현재 표시된 슬라이드를 추적하는 이 상태 변수를 활용하여 슬라이드 표시기를 만들어 보겠습니다. 슬라이드 표시기 요소를 찾고(<!-- TODO: "Add a slide indicator" -->) 다음 바인딩을 하위 요소에 추가합니다.

<!-- TODO: "Add a slide indicator" -->
<p class="dots">
  <!-- The <span> element corresponding to the current displayed slide
       will have the 'current' CSS class. -->
  <span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
  <span [class]="selected.slide == 1 ? 'current' : ''"></span>
  <span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>

[class]class 속성을 변경하는 바인딩이며 이를 사용하여 모든 요소에 CSS 클래스를 추가하거나 삭제할 수 있습니다.

직접 해보기: 페이지를 새로고침하고 슬라이드를 변경해 보세요.

캐러셀의 슬라이드를 변경하면 다음과 같은 작업이 실행됩니다.

  1. slideChange event를 트리거하며 ...
  2. AMP.setState 작업이 호출되고 ...
  3. 상태 변수 selected.slide가 업데이트되고 ...
  4. 표시기 <span> 요소의 [class] 바인딩이 업데이트됩니다.

좋습니다! 이제 슬라이드 표시기가 작동합니다.

기능을 추가하여 사용자가 슬라이드의 표시기 점을 탭하면 선택된 항목으로 이미지 캐러셀을 업데이트할 수 있는지 확인합니다. 참고로 amp-carousel에서 tap 이벤트와 [slide] 바인딩을 사용합니다.

캐러셀의 이미지 변경

선택된 색상을 변경할 때 다른 셔츠 색상의 이미지가 표시되면 좋습니다. amp-bind를 사용하여 amp-carousel 내에서 [src]amp-img 요소에 바인딩하면 가능합니다.

SKU 상태 초기화

먼저 각 색상 셔츠의 이미지 소스 URL로 상태 데이터를 초기화해야 합니다. 새 <amp-state> 요소로 이 작업을 실행해 보겠습니다.

<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
  <script type="application/json">
    {
      "1001": {
        "color": "black",
        "image": "./shirts/black.jpg"
      },
      "1002": {
        "color": "blue",
        "image": "./shirts/blue.jpg"
      },
      "1010": {
        "color": "brown",
        "image": "./shirts/brown.jpg"
      },
      "1014": {
        "color": "dark green",
        "image": "./shirts/dark-green.jpg"
      },
      "1015": {
        "color": "gray",
        "image": "./shirts/gray.jpg"
      },
      "1016": {
        "color": "light gray",
        "image": "./shirts/light-gray.jpg"
      },
      "1021": {
        "color": "navy",
        "image": "./shirts/navy.jpg"
      },
      "1030": {
        "color": "wine",
        "image": "./shirts/wine.jpg"
      }
    }
  </script>
</amp-state>

<amp-state>요소에는 셔츠 식별자 문자열(예: SKU)을 해당 셔츠의 색상 및 이미지 URL에 매핑하는 JSON 객체가 포함되어 있습니다. JSON 배열은 여기에서도 작동하지만 객체를 사용하면 다른 멋진 작업을 할 수 있습니다. 이러한 작업은 곧 제공될 예정입니다.

이제 셔츠의 식별자를 통해 이미지 URL에 액세스할 수 있습니다. 예를 들어 shirts['10014'].color"dark green"을 평가하고 shirts['10030'].image"wine" 셔츠 색상의 이미지 URL을 반환합니다.

선택된 SKU 추적

선택된 SKU를 추적하는 다른 상태 변수를 추가하면 표현식을 amp-img 요소에 바인딩하고 선택된 SKU가 변경될 경우 src 속성을 업데이트할 수 있습니다. 새 sku 키를 기존 amp-state#selected 요소의 JSON에 추가합니다.

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0,
      "sku": "1001"
    }
  </script>
</amp-state>

SKU 상태 업데이트

새 색상이 선택될 때마다 selected.sku 변수를 업데이트하는 amp-selector에 "on" 작업을 추가합니다.

<amp-selector
  name="color"
  on="select:AMP.setState({selected: {sku: event.targetOption}})"
></amp-selector>

도움말 – on="tap:AMP.setState(...) 작업을 amp-selector 내의 각 amp-img 하위 요소에 추가함으로써 실행할 수도 있습니다. amp-selector의 장점 중 하나는 이러한 방식으로 마크업을 단순화한다는 것입니다.

이미지 요소 바인딩

다음으로 amp-img 요소에 바인딩을 추가합니다.

<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img
  width="200"
  height="250"
  src="./shirts/black.jpg"
  [src]="shirts[selected.sku].image"
></amp-img>
<amp-img
  width="300"
  height="375"
  src="./shirts/black.jpg"
  [src]="shirts[selected.sku].image"
></amp-img>
<amp-img
  width="400"
  height="500"
  src="./shirts/black.jpg"
  [src]="shirts[selected.sku].image"
></amp-img>

참고 – 실제 상황에서는 캐러셀의 각 이미지에 다른 src가 있을 가능성이 높습니다. 이는 하나의 이미지를 이미지 배열로 대체함으로써 실행할 수 있습니다. 간단한 설명을 위해 이 튜토리얼에서는 하나의 이미지를 다양한 배율로 사용합니다.

직접 해보기: 페이지를 새로고침하고 다른 색상의 셔츠를 선택하세요. 다른 색상을 선택하면 캐러셀의 이미지가 업데이트되어 선택한 색상의 셔츠가 표시됩니다.