눈이 즐거운 앰프 스토리(AMP Story)를 만들어보자. (2)

페이지를 더 만들어보자

이제 앰프 스토리에 페이지를 추가하는 것은 누워서 떡 먹기 수준이 되었을 것이다. “The Joy of Pets”라는 이야기에 몇 페이지를 더 추가할텐데 특별히 어렵지는 않을것이다. 아래의 설명을 바탕으로 남은 페이지를 만들어보자. 하다가 막혀도 걱정할 필요 없다. 최종 완성본(pets-completed.html)을 보고 베끼면 되니까.
TIP - 페이지마다 고유한 “id”속성을 추가하는 것을 까먹지 말자. 예) id=”page1”
Page 1 - Cats

페이지 1: Cats

하나의 레이어에 이미지와 텍스트를 어떻게 배치하는지 보여준다.

레이어는 하나다:
  • Vertical 템플릿으로 만든다.
  • 엘리먼트가 3개다.
    • Cats라는 제목의 <h1> 엘리먼트
    • 반응형 amp-img (cat.jpg, 720 x 1280px)
    • 다음의 명언을 보여줄 <q> 엘리먼트: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly

Page 2 - Dogs페이지 2: Dogs

두개의 레이어를 두고 화면을 꽉 채우는 이미지와 그 위에 텍스트를 어떻게 배치하는지 보여준다.
레이어는 두개다:
  • 레이어 1: fill 템플릿으로 만들고 반응형 전체 이미지 amp-img (dog.jpg, 720 x 1280px) 포함.
  • 레이어 2: thirds 템플릿을 사용하고 두개의 엘리먼트가 들어있다.
    • Dogs라는 제목이 들어간 <h1> 엘리먼트.
    • grid-area는 lower-third로 지정하고 다음의 문구를 넣자: Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf.

페이지 3: Birds

Page 3 - Birds화면을 꽉 채우는 이미지와 그 위의 텍스트 그리고 배경 음향을 어떻게 배치하는지 보여준다.

레이어는 세개다:
  • 레이어 1: fill 템플릿으로 만들고 반응형 전체 이미지 amp-img (bird.jpg, 720 x 1280px) 포함.
  • 레이어 2: vertical 템플릿을 쓰고 하나의 엘리먼트를 포함.
    • Birds라는 제목의 <h1>
  • 레이어 3: vertical 템플릿을 쓰고 하나의 엘리먼트를 포함.
    • 다음의 구절을 보여주는 <p> 엘리먼트: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
    • 이번 레이어는 class="bottom"을 써서 화면의 아랫부분에 문구를 배치한다.
  • 페이지가 보여지는 동안 배경 음향을 재생한다. 배경 음향을 포함하려면 <amp-story-page> 콤포넌트의 background-audio 속성을 설정하면 된다. 예를 들어, background-audio="assets/bird-singing.mp3"
Page 4 - Rabbits

페이지 4: Rabbits

텍스트와 전체화면 동영상을 어떻게 배치하는지 보여준다.
레이어는 세개다:
  • 레이어 1: fill 템플릿으로 만들고 반응형 동영상 amp-video (rabbit.mp4). 포함.
    • <head> 섹션에 amp-video 콤포넌트를 제공하는 script를 꼭 추가하자.
    • 포스터 이미지 (rabbit.jpg)를 amp-video의 속성으로 꼭 넣자. 앰프 스토리 유효성 검사를 통과하려면 반드시 설정해야 한다.
    • 동영상이 자동재생되도록 autoplay 속성을 넣자. 앰프 스토리 유효성 검사 필수 사항.
    • loop 속성을 설정하면 자동으로 반복 재생한다.
    • 크기는 width="720" height="1280" 으로 넣고 layout="responsive"으로 설정한다.
  • 레이어 2: vertical 템플릿을 쓰고 하나의 엘리먼트를 포함.
    • Rabbits라는 제목의 <h1>
  • 레이어 3: vertical 템플릿을 쓰고 하나의 엘리먼트를 포함.
    • <p> 엘리먼트에 다음의 문구를 넣자: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
    • 이번 레이어는 class="bottom"을 써서 화면의 아랫부분에 문구를 놓자.

“Joy of Pets”이야기는 거의 마무리 단계에 왔다. 이제는 마지막 페이지를 만들텐데 지금까지의 애완동물을 모두 보여주는 애니메이션을 넣을 계획이다.

Comments

Popular posts from this blog

눈이 즐거운 앰프 스토리(AMP Story)를 만들어보자. (1)