구글 AMP – Story - 구글 블로그 AMP

Amp-story는 사용자가 스토리에 계속 참여할 수 있도록 콘텐츠를 표시하는 데 사용되는 amp 구성 요소입니다. 예를 들어 브랜드에 대해 소개하는 일련의 이미지를 사용할 수 있습니다.

amp-story로 작업하려면 아래와 같이 스크립트를 포함해야 합니다.

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

이 글에서는 amp-story가 무엇이며 어떻게 작동하는지 이해하겠습니다. 이미지 갤러리가 있고 페이지에 동일하게 표시하고 싶다고 가정합니다. amp 페이지에서 amp-story 구성 요소를 사용하여 사용자에게 멋지고 상호 작용하는 UI로 보이도록 만들 수 있습니다.

amp-story 태그의 형식은 다음과 같습니다.

<amp-story standalone> ---> 메인 스토리 태그
  <amp-story-page id="page-1"> ---> 스토리 내부 페이지 (예 : page1)
    <amp-story-grid-layer template="fill"> --> 페이지 레이어 1. 둘 이상의 레이어를 가질 수 있습니다.
      //여기에 html 요소 또는 amp 구성 요소 추가
    </amp-story-grid-layer>
    <amp-story-grid-layer template="fill"> --> 페이지 레이어 1. 둘 이상의 레이어를 가질 수 있습니다.
      //여기에 html 요소 또는 amp 구성 요소 추가
    </amp-story-grid-layer>
    ...
  </amp-story-page>
  <amp-story-page id="page-2"> ---> 스토리 내부 페이지 (예 : page2)
    <amp-story-grid-layer template="fill"> --> 페이지에 대한 레이어 2. 둘 이상의 레이어를 가질 수 있습니다.
      //여기에 html 요소 또는 amp 구성 요소 추가
    </amp-story-grid-layer>
    ...
  </amp-story-page>
  ...
</amp-story>

다음과 같이 amp-story에 추가된 몇 가지 추가 속성이 있습니다.

<amp-story standalone title="My Story"
           publisher="The AMP Team"
           publisher-logo-src="publisherlogo image here"
           poster-portrait-src="poster portrait here"
           poster-square-src="poster square image here"
           poster-landscape-src="poster landscape image here">

이 기능은 amp를 사용하여 스토리텔링을 매우 인터렉티브하게 만듭니다.

다음 코드는 amp-story의 작동 예를 보여줍니다. 동일한 출력은 데스크톱 및 모바일 모드에 대해 표시됩니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Story</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-story.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>
  <style amp-custom>
    amp-story {
      font-family: Roboto, Helvetica, Arial, sans-serif;
    }
    amp-story-page * {
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <amp-story standalone
             title="Stories in AMP - Hello World"
             publisher="AMP Project">
    <amp-story-page id="page-1">
      <amp-story-grid-layer template="fill">
        <amp-img src="images/christmas1.jpg"
                 width="300" height="250" 
                 layout="responsive">
        </amp-img>
      </amp-story-grid-layer>
      <amp-story-grid-layer template="vertical">
        <h1>Hello World</h1>
        <p>This is an AMP Story.</p>
      </amp-story-grid-layer>
    </amp-story-page>
    <amp-story-page id="page-2">
      <amp-story-grid-layer template="fill">
        <amp-img src="images/christmas5.jpg"
                 width="300" height="250" 
                 layout="responsive">
        </amp-img>
      </amp-story-grid-layer>
      <amp-story-grid-layer template="vertical">
        <h1>Hello World</h1>
        <p>This is an AMP Story.</p>
      </amp-story-grid-layer>
    </amp-story-page>
    <amp-story-page id="page-3">
      <amp-story-grid-layer template="fill">
        <amp-img src="images/christmas3.jpg"
                 width="300" height="250" 
                 layout="responsive">
        </amp-img>
      </amp-story-grid-layer>
      <amp-story-grid-layer template="vertical">
        <h1>Hello World</h1>
        <p>This is an AMP Story.</p>
      </amp-story-grid-layer>
    </amp-story-page>
    <amp-story-page id="page-4">
      <amp-story-grid-layer template="fill">
        <amp-img src="images/christmas4.jpg"
                 width="300" height="250" 
                 layout="responsive">
        </amp-img>
      </amp-story-grid-layer>
      <amp-story-grid-layer template="vertical">
        <h1>Hello World</h1>
        <p>This is an AMP Story.</p>
      </amp-story-grid-layer>
    </amp-story-page> 
    <amp-story-bookend src="ampstory.json" layout="nodisplay">
    </amp-story-bookend> 
  </amp-story> 
</body>
</html>

ampstory.json

{
  "bookendVersion": "v1.0",
  "shareProviders": [
    "email",
    "twitter",
    "tumblr",
    {
      "provider": "facebook",
      "app_id": "254325784911610"
    }
  ],
  "components": [
    {
      "type": "heading",
      "text": "Introduction"
    },
    {
      "type": "small",
      "title": "Next Story is on Car Brands",
      "url": "ampcarbrand.html",
      "image": "images/audi.jpg"
    }
  ]
}

데스크탑

이것이 스토리 섹션이 표시되는 방식입니다. 동영상이나 기타 amp 구성 요소를 추가하여 스토리를보다 상호 작용할 수도 있습니다.

스토리의 끝에 도달하면 아래와 같이 amp-bookend에 주어진 내용이 표시됩니다.

<amp-story-bookend src="ampstory.json" layout="nodisplay">
</amp-story-bookend>

amp-bookend에 ampstory.json 파일을 제공했습니다. json 파일에는 아래와 같이 다음 스토리의 미리보기에 대한 세부 정보가 있습니다. 사용자가 오른쪽에 표시된 세 개의 점을 클릭하면 다음 화면이 표시됩니다.

스토리를 다시 로드하는 리플레이 버튼을 제공합니다. 자동차 브랜드의 스토리를 보여주는 자동차 이미지를 클릭하면 됩니다.

모바일 모드는 다음과 같습니다.

구글 블로그 AMP

이 블로그 검색

구글 AMP – Story

예제

ampstory.json

데스크탑

관심 있을 만한 글

댓글 쓰기

Live Blogger