눈이 즐거운 앰프 스토리(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

Post a Comment

Popular posts from this blog

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

Image
중요 - 본 튜토리얼은 AMP Project의 Create a Visual AMP Story 를 비공식적으로 번역한 것입니다. 영어 원문에 바뀐 내용이 있거나 번역된 내용중에 오류가 포함될수 있으니 제대로된 내용은 영문 페이지 를 참고하십시오. 본 튜토리얼은 AMP 규격에서 시각적으로 아름다운 이야기를 만들수 있는 amp-story 콤포넌트에 대해서 소개한다. 튜토리얼을 끝내면 정보와 시각효과를 잘 어우러진 독자들이 읽기편한 “애완동물이 주는 기쁨”이라는 제목의 이야기가 완성되어 있을 것이다. 학습 목표: amp-story 콤포넌트를 가지고 여러 페이지로 구성된 이야기를 작성할 수 있다. 하나의 페이지안에서 여러개의 레이어로된 시각효과를 구현할 수 있다. 레이어 템플릿으로 한 페이지안에서 엘리멘트를 배치할 수 있다. 페이지가 보여질때 재생되는 오디오를 추가할 수 있다. 페이지안에서 애니메이션 효과를 줄 수 있다. 이야기가 끝나면 독자들이 관심있을만한 다른 콘텐츠로의 링크를 추가할 수 있다. 앰프 스토리로 만든 이야기가 잘 구현되었는지 확인할 수 있다.  참고 - amp-story 콤포넌트는 현재 실험용 이다. 이 콤포넌트를 가지고 실제로 웹페이지를 서비스하려면, bit.ly/amp-story-signup 에서 간단하게 등록을 하는게 좋다. 앰프 스토리 문서를 서비스할 도메인주소와 새로운 소식을 받을 이메일 등의 간단한 정보만 입력하면 된다. 인증절차가 따로 있지는 않지만 “Name of requestor”란에 “[Pilot] 홍길동” (홍길동은 적절한 영문 이름으로 바꾸자)으로 입력하자. 준비 작업 선행 사항 본 튜토리얼을 진행하기 위해 필요한 사항은 다음과 같다: HTML, CSS 그리고 JavaScript에 대한 기본 지식 AMP의 핵심 개념에 대한 기본적인 이해(“HTML을 AMP로 변환하기" 튜토리얼 참고) 현재 사용하는 웹브라우저 현재 사용하는 개발용 텍스트 편집프로그램 개발 환경 ...
Read more