눈이 즐거운 앰프 스토리(AMP Story)를 만들어보자. (1)
중요 - 본 튜토리얼은 AMP Project의 Create a Visual AMP Story를 비공식적으로 번역한 것입니다. 영어 원문에 바뀐 내용이 있거나 번역된 내용중에 오류가 포함될수 있으니 제대로된 내용은 영문 페이지를 참고하십시오.
본 튜토리얼은 AMP 규격에서 시각적으로 아름다운 이야기를 만들수 있는 amp-story 콤포넌트에 대해서 소개한다. 튜토리얼을 끝내면 정보와 시각효과를 잘 어우러진 독자들이 읽기편한 “애완동물이 주는 기쁨”이라는 제목의 이야기가 완성되어 있을 것이다.
학습 목표:
zip파일을 푼다. Amp-pets-story 디렉토리에 이번에 만들 스토리에 대한 이미지, 비디오, 오디오 및 관련 데이터 파일이 들어있다. pets.html을 가지고 스토리를 만들어볼텐데, 완성된 스토리는 pets-completed.html에 있으니 궁금하면 한번 열어봐도 좋다.
로컬 웹서버 설정을 완료했다면 튜토리얼을 마치고 완성된 스토리가 어떻게 보일지 한번 보자. URL은 다음과 같다.
http://localhost:8000/pets-completed.html
이제 완성된 스토리 페이지가 어떻게 보이는지 클릭을 하면서 감상해보자.
앰프 스토리를 구성하는 기본 단위는 페이지(page)이다. 여러개의 페이지가 모여서 하나의 앰프 스토리가 되는데 페이지는 여러 레이어(layer)들이 모인것이고 레이어안에는 HTML 또는 AMP 엘리먼트(element)들이 들어있다.
앰프 스토리를 구성하는 요소는 AMP 콤포넌트로 표현되는데, 앰프 스토리는 amp-story, 페이지는 amp-story-page, 그리고 레이어는 amp-story-grid-layer로 프로그램할 수 있다.
amp-story는 다른 AMP 콤포넌트처럼 커스텀 AMP 콤포넌트라서 해당 AMP 문서에서 미리 필요한 스크립트를 추가해주어야 한다. 예를 들어, pets.html 파일을 텍스트 편집기에서 열어서 <head> 섹션안에 다음과 같은 스크립트를 추가해야 한다.
<head>
<script async custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
</head>
이제 <amp-story> 엘리먼트를 <body>안에 추가해보자. 참, standalone 속성을 추가하는 것을 잊지 말자.
<body>
<amp-story standalone>
</amp-story>
</body>
여기서 중요한 것 한가지. <body> 엘리먼트는 <amp-story> 콤포넌트를 딱 하나만 포함해야만 한다. 그리고 다른 엘리먼트들은 모두 <amp-story> 콤포넌트안에 들어있어야 한다.
여기까지 왔으면 껍데기는 만들어진 셈인데 아직 유효(valid)하지는 않다. amp-story 콤포넌트는 최소한 하나 이상의 페이지를 갖고 있어야한다. 그럼 이제 페이지를 만들어보자.
<amp-story standalone>
<amp-story-page id="cover">
</amp-story-page>
</amp-story>
커버 페이지의 껍데기가 만들어졌다. 아직 끝이 아니다. 여기까지만 가지고는 작성한 이야기가 유효하지 않다. 페이지안에는 최소한 하나의 레이어(layer)가 들어있어야 한다.
지금 작성하게 될 커버 페이지는 두개의 레이어를 쓸 계획이다
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="assets/cover.jpg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
자, 여기까지 왔으면 지금까지 작성한 이야기가 어떻게 보이는지 확인하자. 다음의 페이지를 웹브라우저에서 열어보자: http://localhost:8000/pets.html
아래와 같은 화면이 보이면 성공한 것이다!
템플릿으로 엘리먼트들을 배치하기
<amp-story-grid-layer> 엘리먼트는 자식 엘리먼트를 그리드(CSS grid 참고, 영문)안에 배치한다. 다음의 레이아웃 템플릿 중 하나를 지정하여 자식 엘리먼트들을 배치할 수 있다.
Fill 템플릿
Fill 템플릿은 레이어안의 첫번째 엘리먼트를 화면에 채운다. 다른 자식 엘리먼트들은 가려진다. Fill 템플릿은 대체로 배경에 많이 사용한다. 그리고 배경으로 이미지나 비디오를 사용할 수 있다.
<amp-story-grid-layer template="fill">
<amp-img src="dog.png"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
Vertical 템플릿
Vertical 템플릿은 자식 엘리먼트를 세로로 배치한다. 엘리먼트들은 상단에서부터 시작하여 배치되고 가로 화면쪽으로는 길게 채우는 형태가 된다.
Vertical 템플릿은 수직으로 엘리먼트를 차곡차곡 나열하고 싶을때 사용한다.
<amp-story-grid-layer template="vertical">
<p>element 1</p>
<p>element 2</p>
<p>element 3</p>
</amp-story-grid-layer>
Horizontal 템플릿
Horizontal 템플릿은 자식 엘리먼트를 가로축을 기준으로 배치한다. 왼쪽부터 시작해서 배치가 되는데 세로 화면쪽으로는 길게 채우는 형태가 된다.
Horizontal 템플릿은 수평으로 엘리먼트를 차곡차곡 배치하고 싶을때 사용한다.
<amp-story-grid-layer template="horizontal">
<p>element 1</p>
<p>element 2</p>
<p>element 3</p>
</amp-story-grid-layer>
Thirds 템플릿
Thirds 템플릿은 화면으로 수직으로 3등분으로 나눈 다음에 콘텐츠를 각 영역(grid-area)에 배치한다.
엘리먼트가 3등분 영역중 어느 부분에 나올지를 grid-area 속성으로 지정할 수 있다. 상단은 upper-third, 중앙은 middle-third, 하단은 lower-third로 지정한다. grid-area를 명시적으로 지정해주면 원래 순서대로 배치되지 않고 지정된 grid-area로 배치할 수 있다. 예를 들어, 첫번째 엘리먼트는 상단 (grid-area=”upper-third”)으로 두번째 엘리먼트는 하단 (grid-area=”lower-third”)으로 지정할 수 있다.
<amp-story-grid-layer template="thirds">
<h1 grid-area="upper-third">element 1</h1>
<p grid-area="lower-third">element 2</p>
</amp-story-grid-layer>
<amp-story-grid-layer>
<!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The Joy of Pets</h1>
<p>By AMP Tutorials</p>
</amp-story-grid-layer>
커버 페이지의 작성이 끝났다. 아까 띄워둔 웹브라우저가 그대로 있으면 새로고침 버튼을 눌러서 커버 페이지가 어떻게 보이는지 확인하자.
예고: 다음 포스팅에서는 좀 더 다양하고 화려한 페이지를 만들어볼 것이다.
본 튜토리얼은 AMP 규격에서 시각적으로 아름다운 이야기를 만들수 있는 amp-story 콤포넌트에 대해서 소개한다. 튜토리얼을 끝내면 정보와 시각효과를 잘 어우러진 독자들이 읽기편한 “애완동물이 주는 기쁨”이라는 제목의 이야기가 완성되어 있을 것이다.
학습 목표:
- amp-story 콤포넌트를 가지고 여러 페이지로 구성된 이야기를 작성할 수 있다.
- 하나의 페이지안에서 여러개의 레이어로된 시각효과를 구현할 수 있다.
- 레이어 템플릿으로 한 페이지안에서 엘리멘트를 배치할 수 있다.
- 페이지가 보여질때 재생되는 오디오를 추가할 수 있다.
- 페이지안에서 애니메이션 효과를 줄 수 있다.
- 이야기가 끝나면 독자들이 관심있을만한 다른 콘텐츠로의 링크를 추가할 수 있다.
- 앰프 스토리로 만든 이야기가 잘 구현되었는지 확인할 수 있다.
| 참고 - amp-story 콤포넌트는 현재 실험용이다. 이 콤포넌트를 가지고 실제로 웹페이지를 서비스하려면, bit.ly/amp-story-signup에서 간단하게 등록을 하는게 좋다. 앰프 스토리 문서를 서비스할 도메인주소와 새로운 소식을 받을 이메일 등의 간단한 정보만 입력하면 된다. 인증절차가 따로 있지는 않지만 “Name of requestor”란에 “[Pilot] 홍길동” (홍길동은 적절한 영문 이름으로 바꾸자)으로 입력하자. |
준비 작업
선행 사항
본 튜토리얼을 진행하기 위해 필요한 사항은 다음과 같다:- HTML, CSS 그리고 JavaScript에 대한 기본 지식
- AMP의 핵심 개념에 대한 기본적인 이해(“HTML을 AMP로 변환하기" 튜토리얼 참고)
- 현재 사용하는 웹브라우저
- 현재 사용하는 개발용 텍스트 편집프로그램
개발 환경 준비하기
1 단계. 튜토리얼용 코드 다운받기
다음의 URL에서 본 튜토리얼용 코드를 다운받는다. zip으로 압축되어 있다. https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zipzip파일을 푼다. Amp-pets-story 디렉토리에 이번에 만들 스토리에 대한 이미지, 비디오, 오디오 및 관련 데이터 파일이 들어있다. pets.html을 가지고 스토리를 만들어볼텐데, 완성된 스토리는 pets-completed.html에 있으니 궁금하면 한번 열어봐도 좋다.
2 단계. 예제 페이지를 돌려보기
예제로 만든 스토리를 테스트하려면 웹서버에 관련 파일을 올려놔야 한다. 테스트를 위해서 임시로 로컬 웹서버를 운영할 수 있는 방법이 몇 개 있다. 여기 몇가지 방법을 소개할텐데 마음에 드는 것을 선택하자:로컬 웹서버 설정을 완료했다면 튜토리얼을 마치고 완성된 스토리가 어떻게 보일지 한번 보자. URL은 다음과 같다.
http://localhost:8000/pets-completed.html
| 중요 - localhost에서 해당 페이지(위의 URL참고)를 제공하도록 하자. 앰프 스토리가 제대로 동작하지 않을 수 있다. 예를 들어, 다음과 같은 에러가 날 수 있다. "source" "must start with "https://" or "//" or be relative and served from either https or from localhost. |
| 중요 - amp-story 콤포넌트는 실험용이기 때문에 이런 메시지가 나올수도 있다. "You must enable the amp-story experiment to view this content" 여기에서 스토리를 보려면 ENABLE이라는 버튼을 클릭해서 해당 도메인에 대해서 amp-story 콤포넌트를 켜고 해당 스토리 페이지를 새로고침하자. 필수 사항은 아니지만 여러분이 사용하는 웹브라우저에서 신기능이나 실험용 버전의 AMP 자바스크립트 라이브러리를 사용할 수 있도록 AMP Dev Channel을 켜보자.
amp-story 콤포넌트를 가지고 웹페이지를 서비스하려면, bit.ly/amp-story-signup를 통해 등록하자. |
이제 완성된 스토리 페이지가 어떻게 보이는지 클릭을 하면서 감상해보자.
앰프 스토리를 구성하는 요소를 이해하자.
앰프 스토리는 화면 전체를 이용하여 이야기를 시각적으로 경험할 수 있도록 한다. 여기에는 이미지, 비디오, 그래픽, 오디오 등의 정보를 포함할 수 있다. 간단하게 읽기 쉽고 시각적으로 풍부한 콘텐츠를 원하는 사용자에게 안성맞춤이다.앰프 스토리를 구성하는 기본 단위는 페이지(page)이다. 여러개의 페이지가 모여서 하나의 앰프 스토리가 되는데 페이지는 여러 레이어(layer)들이 모인것이고 레이어안에는 HTML 또는 AMP 엘리먼트(element)들이 들어있다.
앰프 스토리를 구성하는 요소는 AMP 콤포넌트로 표현되는데, 앰프 스토리는 amp-story, 페이지는 amp-story-page, 그리고 레이어는 amp-story-grid-layer로 프로그램할 수 있다.
본격적으로 이야기(앰프 스토리)를 시작해보자.
이제부터 작성할 이야기는 amp-story콤포넌트로 둘러쌓일텐데 amp-story는 이야기를 구성하는 모든 페이지(page)를 포함하는 컨테이너역할을 한다. amp-story 콤포넌트는 사용자의 동작(gesture)과 이동(navigation)을 처리하는 UI상의 껍데기 역할도 한다.amp-story는 다른 AMP 콤포넌트처럼 커스텀 AMP 콤포넌트라서 해당 AMP 문서에서 미리 필요한 스크립트를 추가해주어야 한다. 예를 들어, pets.html 파일을 텍스트 편집기에서 열어서 <head> 섹션안에 다음과 같은 스크립트를 추가해야 한다.
<head>
<script async custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
</head>
이제 <amp-story> 엘리먼트를 <body>안에 추가해보자. 참, standalone 속성을 추가하는 것을 잊지 말자.
<body>
<amp-story standalone>
</amp-story>
</body>
여기서 중요한 것 한가지. <body> 엘리먼트는 <amp-story> 콤포넌트를 딱 하나만 포함해야만 한다. 그리고 다른 엘리먼트들은 모두 <amp-story> 콤포넌트안에 들어있어야 한다.
여기까지 왔으면 껍데기는 만들어진 셈인데 아직 유효(valid)하지는 않다. amp-story 콤포넌트는 최소한 하나 이상의 페이지를 갖고 있어야한다. 그럼 이제 페이지를 만들어보자.
커버 페이지를 만들어보자.
앰프 스토리의 페이지는 <amp-story-page>로 표현한다. <amp-story> 콤포넌트는 하나 이상의 페이지, 즉 <amp-story-page> 콤포넌트를 포함한다. 페이지는 이야기의 한 장면을 말한다. 앰프 스토리의 여러개의 페이지 중에 먼저 기술된 순서대로 사용자에게 보여진다. 예를 들면, 처음 기술된 페이지가 사용자가 가장 먼저 보게되는 페이지다. <amp-story-page> 엘리먼트를 <amp-story>의 자식으로 추가하여 페이지를 만들어보자. 그리고 해당 페이지에 고유한 id를 부여하자. 첫 번째 페이지는 커버가 되는 페이지이므로 “cover”라는 id를 붙이자.<amp-story standalone>
<amp-story-page id="cover">
</amp-story-page>
</amp-story>
커버 페이지의 껍데기가 만들어졌다. 아직 끝이 아니다. 여기까지만 가지고는 작성한 이야기가 유효하지 않다. 페이지안에는 최소한 하나의 레이어(layer)가 들어있어야 한다.
페이지 안의 레이어
그래픽 저작도구를 다뤄보았다면 이해하기 쉬운데 앰프 스토리에서 레이어는 시각적 효과를 표현하기 위한 장치이다. 레이어는 말그대로 다른 레이어위에 쌓는 형태로 표현된다. 예를 들어, 첫번째 레이어가 맨 밑의 레이어가 되고 그 다음 레이어가 그위에 쌓이는 식으로 말이다.지금 작성하게 될 커버 페이지는 두개의 레이어를 쓸 계획이다
- 레이어 1: 배경이 될 이미지가 들어있는 레이어
- 레이어 2: 이야기의 제목과 부제가 들어갈 레이어
레이어 1 작성하기
커버 페이지에 첫번째 레이어를 추가하자. 해당 레이어는 이미지 하나로 화면전체를 채운다. <amp-story-grid-layer> 엘리먼트를 <amp-story-page>안에 추가하자. 화면전체를 채우는 레이어이기 때문에 template=”fill” 속성을 <amp-story-grid-layer>에 명기하자. 레이어안에 cover.jpg 이미지 파일을 <amp-image> 엘리먼트로 추가하자. 이미지의 크기는 720 x 1280 픽셀로하되 해당 amp-image가 반응형(responsive)임을 layout=”responsive”속성으로 알려주자. 여기까지 왔으면 다음과 같은 코드가 나왔을 것이다.<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="assets/cover.jpg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
자, 여기까지 왔으면 지금까지 작성한 이야기가 어떻게 보이는지 확인하자. 다음의 페이지를 웹브라우저에서 열어보자: http://localhost:8000/pets.html
아래와 같은 화면이 보이면 성공한 것이다!
레이어 2 작성하기
배경은 그럴듯하게 나왔다. 이제 두번째 레이어를 추가하자. 두번째 레이어는 제목과 부제가 들어있고 배경 위에 올릴 것이다. 첫번째 레이어를 만든것과 똑같이 하되 이번에는 fill 템플릿 대신 vertical 템플릿을 사용하자. 이쯤에서 <amp-story-grid-layer>에 들어있는 AMP 또는 HTML 엘리먼트들을 템플릿을 사용하여 배치하는 방법에 대해서 알아보자.템플릿으로 엘리먼트들을 배치하기
<amp-story-grid-layer> 엘리먼트는 자식 엘리먼트를 그리드(CSS grid 참고, 영문)안에 배치한다. 다음의 레이아웃 템플릿 중 하나를 지정하여 자식 엘리먼트들을 배치할 수 있다.
Fill 템플릿
Fill 템플릿은 레이어안의 첫번째 엘리먼트를 화면에 채운다. 다른 자식 엘리먼트들은 가려진다. Fill 템플릿은 대체로 배경에 많이 사용한다. 그리고 배경으로 이미지나 비디오를 사용할 수 있다.<amp-story-grid-layer template="fill">
<amp-img src="dog.png"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
Vertical 템플릿
Vertical 템플릿은 자식 엘리먼트를 세로로 배치한다. 엘리먼트들은 상단에서부터 시작하여 배치되고 가로 화면쪽으로는 길게 채우는 형태가 된다.Vertical 템플릿은 수직으로 엘리먼트를 차곡차곡 나열하고 싶을때 사용한다.
<amp-story-grid-layer template="vertical">
<p>element 1</p>
<p>element 2</p>
<p>element 3</p>
</amp-story-grid-layer>
Horizontal 템플릿
Horizontal 템플릿은 자식 엘리먼트를 가로축을 기준으로 배치한다. 왼쪽부터 시작해서 배치가 되는데 세로 화면쪽으로는 길게 채우는 형태가 된다.Horizontal 템플릿은 수평으로 엘리먼트를 차곡차곡 배치하고 싶을때 사용한다.
<amp-story-grid-layer template="horizontal">
<p>element 1</p>
<p>element 2</p>
<p>element 3</p>
</amp-story-grid-layer>
Thirds 템플릿
Thirds 템플릿은 화면으로 수직으로 3등분으로 나눈 다음에 콘텐츠를 각 영역(grid-area)에 배치한다.엘리먼트가 3등분 영역중 어느 부분에 나올지를 grid-area 속성으로 지정할 수 있다. 상단은 upper-third, 중앙은 middle-third, 하단은 lower-third로 지정한다. grid-area를 명시적으로 지정해주면 원래 순서대로 배치되지 않고 지정된 grid-area로 배치할 수 있다. 예를 들어, 첫번째 엘리먼트는 상단 (grid-area=”upper-third”)으로 두번째 엘리먼트는 하단 (grid-area=”lower-third”)으로 지정할 수 있다.
<amp-story-grid-layer template="thirds">
<h1 grid-area="upper-third">element 1</h1>
<p grid-area="lower-third">element 2</p>
</amp-story-grid-layer>
커버 페이지를 마무리하자
자, 레이어 템플릿에 대해서 배웠으니 커버 페이지의 레이어 2를 완성하자. 레이어 2는 페이지의 위쪽에 제목과 부제만 보여주면 된다. 엘리먼트를 위에서부터 차례로 배치하면 되므로 vertical 템플릿을 쓰면 되겠다. 그리고 레이어 2, 즉 두번째 amp-story-grid-layer는 첫번째 레이어에 이어서 작성한다. 다음과 비슷하게 작성하면 맞다.<amp-story-grid-layer>
<!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The Joy of Pets</h1>
<p>By AMP Tutorials</p>
</amp-story-grid-layer>
커버 페이지의 작성이 끝났다. 아까 띄워둔 웹브라우저가 그대로 있으면 새로고침 버튼을 눌러서 커버 페이지가 어떻게 보이는지 확인하자.
예고: 다음 포스팅에서는 좀 더 다양하고 화려한 페이지를 만들어볼 것이다.
Comments
Post a Comment