Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

커버 페이지 만들기

AMP 스토리 내의 페이지는 <amp-story-page> 구성요소로 표현됩니다. amp-story 내에 스토리의 각 화면을 담고 있는 <amp-story-page> 구성요소를 하나 이상 둘 수 있습니다. 문서 순서에서 가장 먼저 지정하는 페이지가 스토리에서 표시되는 첫 번째 페이지입니다.

페이지를 만들려면 <amp-story-page> 요소를 amp-story의 하위 요소로 추가합니다. 페이지에 고유 ID를 할당합니다. 첫 번째 페이지인 커버 페이지에는 다음과 같이 cover라는 고유 ID를 할당해 보겠습니다.

<amp-story standalone
    title="Joy of Pets"
    publisher="AMP tutorials"
    publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
    poster-portrait-src="assets/cover.jpg">
   <amp-story-page id="cover">
   </amp-story-page>
</amp-story>

이제 커버 페이지를 위한 셸이 생겼습니다. 하지만 아직도 스토리가 유효하지 않습니다. 페이지 내에서 레이어를 하나 이상 지정해야 합니다.

cover page has two layers

페이지의 레이어

그래픽 분야에서처럼 AMP 스토리 페이지에서도 레이어를 사용해 시각적 효과를 낼 수 있습니다. 레이어는 서로 겹쳐지므로 첫 번째 레이어가 바닥 레이어가 되고 그다음 레이어부터 그 위에 쌓인다고 생각하면 됩니다.

우리가 만들 커버 페이지는 다음과 같은 두 개의 레이어로 구성됩니다.

  • 레이어 1: 배경화면 역할을 하는 이미지
  • 레이어 2: 스토리의 제목 및 바이라인

레이어 1 만들기

커버 페이지에 첫 번째 레이어를 추가하겠습니다. 이 레이어에는 화면을 채우는 이미지가 들어 있습니다.

<amp-story-grid-layer> 요소를 <amp-story-page>의 하위 요소로 추가하여 레이어를 만듭니다. 이미지가 화면을 채워야 하니 amp-story-grid-layertemplate="fill" 속성을 지정합니다. 레이어 안에서 cover.jpg 파일에 amp-img 요소를 추가하고 이미지 크기가 720x1280px인 반응형(즉, 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 만들기

이제 배경화면이 생겼지만, 배경화면 위에 제목과 바이라인을 포함하는 두 번째 레이어가 필요합니다. 두 번째 레이어를 추가하기 위해 레이어 1에서 했던 것과 같은 작업을 반복하되, 이번에는 fill 템플릿 대신 vertical 템플릿을 사용합니다. 더 진행하기 전에 우선 템플릿이 무엇인지 알아보고 <amp-story-grid-layer>에서 AMP 및 HTML 요소를 정리하는 방법을 알아봅시다.

템플릿으로 요소 레이아웃하기

<amp-story-grid-layer> 요소를 사용하면 하위 요소가 그리드에 배치됩니다([CSS 그리드] 기반(https://www.w3.org/TR/css-grid-1/)). 하위 요소 배치 방식을 지시하려면 다음 레이아웃 템플릿 중 하나를 지정해야 합니다.

Template: Fill
채우기 템플릿을 사용하면 레이어의 첫 번째 하위 요소가 화면을 채웁니다. 이 레이어의 다른 하위 요소는 표시되지 않습니다.

채우기 템플릿은 이미지와 동영상을 포함한 배경에 효과적입니다.

<amp-story-grid-layer template="fill">
  <amp-img src="dog.png"
      width="720" height="1280"
      layout="responsive">
  </amp-img>
</amp-story-grid-layer>
Template: Vertical
세로 템플릿을 사용하면 하위 요소가 Y축을 따라 배치됩니다. 요소가 화면 상단에 정렬되고 X축을 따라 전체 화면을 차지합니다.

수직 템플릿은 요소를 수직으로 바로 쌓아 올릴 때 적합합니다.

<amp-story-grid-layer template="vertical">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Template: Horizontal
가로 템플릿을 사용하면 하위 요소가 X축을 따라 배치됩니다. 요소가 화면 시작 부분에 정렬되고 Y축을 따라 전체 화면을 차지합니다.

가로 템플릿은 요소를 수평으로 바로 연결할 때 적합합니다.

<amp-story-grid-layer template="horizontal">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Template: Thirds
3등분 템플릿을 사용하면 화면을 가로로 3등분하여 각 영역에 콘텐츠를 배치할 수 있습니다.

이름이 있는 grid-area를 지정하여 콘텐츠를 upper-third, middle-third, lower-third 중 어디에 배치할지 지정할 수 있습니다. 이름이 있는 격자 영역은 요소가 나타나는 위치의 기본 동작을 바꿀 때 유용합니다. 예를 들어 레이어에 요소가 2개 있다면 첫 번째 요소를 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의 경우 제목과 바이라인이 위에 위치하고 그 아래에 다른 요소가 이어져야 하므로 세로 템플릿을 지정합니다. 두 번째 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>

브라우저를 새로고침하고 작업 결과를 확인하세요. 커버 페이지가 완성되었습니다.