이야기를 만드는 앰프 스토리AMP Story

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

중요 - 본 튜토리얼은 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로 변환하기" 튜토리얼 참고) 현재 사용하는 웹브라우저 현재 사용하는 개발용 텍스트 편집프로그램 개발 환경 ...