구글 AMP – 데이터 바인딩 - 구글 블로그 AMP

Amp-bind는 데이터 바인딩 및 JS 유사 표현식을 사용하는 작업을 기반으로 amp 구성 요소 및 html 태그에 상호 작용을 추가하는데 도움이 됩니다. 이 글에서는 데이터 바인딩에 대해 자세히 설명합니다.

Amp-bind를 사용하려면 페이지에 다음 스크립트를 추가해야 합니다.

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

다음과 같은 실제 예제의 도움으로 이것을 완전히 이해합시다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Bind</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-data-binding.html">
  <meta name="viewport" content="width=device-width,minimum-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 custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp-custom>
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<p [text]="'Hello ' + world + '.'">
  Click on the button to change the text
</p>

<button on="tap:AMP.setState({world: 'This is amp-bind example'})">
  Click Here
</button>
</body>
</html>

결과

버튼을 클릭하면 아래와 같이 변경되는 텍스트를 볼 수 있습니다.

따라서 위에 표시된 예에서는 amp-bind를 사용하여 버튼 클릭시 텍스트를 변경했습니다.

Amp-bind에는 세 가지 구성 요소가 있습니다.

State: 처음에는 상태가 비어 있습니다. 버튼을 클릭하면 상태가 변경됩니다. 예를 들면
```
<button on="tap:AMP.setState({world: 'This is amp-bind example'})">Click 
Here</button>
```
AMP.setState 메서드는 상태를 변경하는데 사용됩니다. 변수 world에는 'This is amp-bind example'값이 할당됩니다. 변수 world는 html 태그 내에서 사용됩니다.
```
<p [text]="'Hello ' + world + '.'">Click on the button to change the 
text</p>
```
버튼을 클릭하면 world에 "This is amp-bind example"이라는 새 값이 할당됩니다. 아래와 같이 바인딩과 함께 amp-state를 사용할 수도 있습니다.
```
<amp-state id="myState">
  <script type="application/json">
    {
      "foo": "bar"
    }
  </script>
</amp-state>
```
바인딩 중에 표현식에 myState.foo가 할당됩니다.
Expressions: 작동할 amp-bind의 표현식은 다음과 같습니다.
```
'Hello ' + world
```
world는 상태 변수라고합니다.
Bindings: 바인딩은 [attributes] 형식의 특수 속성에 적용됩니다. 예를 들면
```
<p [text]="'Hello ' + world + '.'">Click on the button to change the 
text</p>
```
위의 예에서 [text]에는 p 태그를 바인딩하는 데 사용되는 표현식이 있습니다.
바인딩에 다음 속성을 사용할 수 있습니다.
- [text]
- [class]
- [hidden]
- [width]
- [height]
바인딩은 amp-components에서도 수행할 수 있으며 특정 속성만 허용됩니다. 다음 목록은 구성 요소 및 속성을 보여줍니다.

Amp 구성 요소	속성	설명
<amp-carouseltype=slides>	[slide]*	이 바인딩 동작을 사용하여 슬라이드 변경
<amp-date-picker>	[min] [max]	min - 선택 가능한 가장 빠른 날짜 설정 max - 최근 선택 가능한 날짜 설정
<amp-iframe>	[src]	iframe의 src 변경
<amp-img>	[alt] [attribution] [src] [srcset]	alt, attribute, src 및 srcset을 변경할 수 있습니다. src가 변경되면 캐싱에 사용되는 srcset을 변경하십시오.
<amp-lightbox>	[open]*	open에 바인딩하여 라이트 박스를 표시하거나 숨길 수 있습니다.
<amp-list>	[src]	expression이 문자열이면 문자열 URL에서 JSON을 가져와 렌더링합니다. expression이 객체 또는 배열 인 경우 표현식 데이터를 렌더링합니다.
<amp-selector>	[selected]* [disabled]	option 속성 값으로 식별되는 현재 선택된 하위 요소를 변경합니다. 다중 선택을 위해 쉼표로 구분된 값 목록을 지원합니다.

Amp-State를 사용하여 바인딩

Html 요소 또는 amp-component에서 사용하려는 모든 데이터로 amp-state를 정의할 수 있습니다.

amp-state 내부에서 사용되는 데이터는 아래와 같이 json 형식이어야 합니다.

<amp-state id="myCarsList">
<script type="application/json">
  {
    "currentcar" : "bmw",
    "audi": {
      "imageUrl": "images/audi.jpg" 
    },
    "bmw": {
      "imageUrl": "images/bmw.jpg" 
    }
  }
</script>
</amp-state>

따라서 우리는 자동차 이름과 자동차에 사용된 이미지로 key-value 쌍을 정의했습니다.

텍스트 및 이미지의 Amp-Bind

다음은 amp-bind와 함께 amp-state를 사용하는 실제 예제입니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Bind</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-data-binding.html">
  <meta name="viewport" content="width=device-width,minimum-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 custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp-custom>
    button  {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<amp-state id="myCarsList">
  <script type="application/json">
    {
      "currentcar" : "bmw",
      "audi": {
        "imageUrl": "images/audi.jpg",
        "style": "greenBackground"
      },
      "bmw": {
        "imageUrl": "images/bmw.jpg",
        "style": "redBackground"
      }
    }
  </script>
</amp-state>
<amp-img width="300"
         height="200"
         src="images/bmw.jpg" 
         [src]="myCarsList[currentcar].imageUrl">
</amp-img>
<p [text]="'This is a ' + currentcar + '.'">
  This is a BMW.
</p>
<br/>
<button on="tap:AMP.setState({currentcar: 'audi'})">
  Change Car
</button>
</body>
</html>

결과

버튼을 클릭하면 변경되는 자동차 이미지와 아래 텍스트를 볼 수 있습니다.

비디오 및 IFrame의 Amp-Bind

이제 amp-iframe 및 amp-video src를 변경하는 작업 예제를 볼 수 있습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Bind</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-data-binding.html">
  <meta name="viewport" content="width=device-width,minimum-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 custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <style amp-custom>
    button  {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on="tap:AMP.setState({currentlist: 'list1'})">Click Here</button>
<br/>
<br/>
<amp-state id="myList">
  <script type="application/json">
    {
      "currentlist" : "",
      "list1": {
        "url": "video/m.mp4",
        "style": "greenBackground",
        "iframeurl":"https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
      }
    }
  </script>
</amp-state>

<h3>AMP - IFRAME</h3>
<amp-iframe width="600"
            title="Google map"
            height="400"
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-popups"
            frameborder="0"
            src="https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"
            [src]="myList[currentlist].iframeurl">
  <amp-img layout="fill"
           src="images/loading.jpg"
           placeholder>
  </amp-img>
</amp-iframe>

<h3>AMP - VIDEO</h3>
<amp-video id="amp-video"
           src="video/samplevideo.mp4"
           layout="responsive"
           [src]="myList[currentlist].url"
           width="300"
           height="170"
           autoplay
           controls>
</amp-video>
</body>
</html>

여기에서는 iframesrc 및 video src와 함께 amp-state를 사용했습니다.

<amp-state id="myList">
  <script type="application/json">
    {
      "currentlist" : "",
      "list1": {
        "url": "video/m.mp4",
        "style": "greenBackground",
        "iframeurl":"https://maps.google.com/maps?q=hyderabad&t=&z=13&ie=UTF8&iwloc=&output=embed"
      }
    }
  </script>
</amp-state>

currentlist는 빈 상태로 설정되고 버튼을 탭하면 list1로 설정됩니다. currentlist 변수는 아래와 같이 iframe 및 동영상의 src에 사용됩니다.

<amp-iframe width="600"
            title="Google map"
            height="400"
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-popups"
            frameborder="0"
            src="https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"
            [src]="myList[currentlist].iframeurl">
  <amp-img layout="fill"
           src="images/loading.jpg"
           placeholder>
  </amp-img>
</amp-iframe>

<amp-video id="amp-video"
           src="video/samplevideo.mp4"
           layout="responsive"
           [src]="myList[currentlist].url"
           width="300"
           height="170"
           autoplay
           controls>
</amp-video>

결과

버튼을 클릭하면 비디오와 iframe src가 변경되는 것을 볼 수 있습니다.

Amp-Lightbox를 사용한 Amp-Bind

이제 바인딩과 amp-lightbox를 함께 사용할 때의 작동 방식을 살펴보겠습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Bind</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-data-binding.html">
  <meta name="viewport" content="width=device-width,minimum-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 custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <style amp-custom>
    button  {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    .lightbox {
      background: rgba(211,211,211,0.8);
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on="tap:AMP.setState({displaylightbox: true})">Click Here</button>
<br/>
<br/>
<h3>AMP - Lightbox</h3>
<amp-lightbox id="my-lightbox"
              [open]="displaylightbox"
              layout="nodisplay"
              close-button>
  <div class="lightbox" on="tap:AMP.setState({displaylightbox: false})">
    <amp-img alt="Beautiful Flower"
             src="images/loreal.gif"
             width="246"
             height="205">
    </amp-img>
  </div>
</amp-lightbox>
</body>
</html>

Amp-lightbox에서 바인딩을 사용하기 위해 아래와 같이 amp-lightbox에서 [open]을 사용했습니다.

<amp-lightbox id="my-lightbox"
              [open]="displaylightbox"
              layout="nodisplay"
              close-button>
  <div class="lightbox"
    on="tap:AMP.setState({displaylightbox: false})">
    <amp-img alt="Beautiful Flower"
             src="images/loreal.gif"
             width="246"
             height="205">
    </amp-img>
  </div>
</amp-lightbox>

[open]="displaylightbox"는 버튼을 클릭하고 라이트 박스 div를 탭할 때 true / false로 변경되는 변수 상태입니다.

<button on="tap:AMP.setState({displaylightbox: true})">
  Click Here
</button>

<div class="lightbox"
     on="tap:AMP.setState({displaylightbox: false})">
  <amp-img alt="Beautiful Flower"
           src="images/loreal.gif"
           width="246"
           height="205">
  </amp-img>
</div>

결과

Input 요소에 대한 Amp-Bind

다음과 같은 작업 예제를 통해 입력 요소에 대한 amp-binding의 작동을 이해하겠습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Bind</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-data-binding.html">
  <meta name="viewport" content="width=device-width,minimum-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 custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <style amp-custom>
    button  {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    .lightbox {
      background: rgba(211,211,211,0.8);
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    } 
    #txtname{
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    div {
      font-size:25px;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Bind</h3>
<button on="tap:AMP.setState({displaylightbox: true})">
  Click Here
</button>
<br/>
<br/>
<h3>AMP - Input Element</h3>
<input id="txtname"
       placeholder="Type here"
       on="input-throttled:AMP.setState({name: event.value})"/> 
<div [text]="name"></div> 
</body>
</html>

결과

텍스트 상자에 입력된 데이터는 하단에 표시됩니다. 다음과 같이 input 이벤트에서 상태 변수 이름을 변경하여 수행할 수 있습니다.

<input id="txtname"
       placeholder="Type here"
       on="input-throttled:AMP.setState({name: event.value})"/> 
<div [text]="name"></div>

구글 블로그 AMP

이 블로그 검색

구글 AMP – 데이터 바인딩

결과

Amp-State를 사용하여 바인딩

텍스트 및 이미지의 Amp-Bind

결과

비디오 및 IFrame의 Amp-Bind

결과

Amp-Lightbox를 사용한 Amp-Bind

결과

Input 요소에 대한 Amp-Bind

결과

댓글 쓰기

Live Blogger