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 요소를 추가하고 이미지가 크기 720x1280 픽셀의 반응형(즉, 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 그리드 기반). 하위 요소의 배치 방식을 지시하려면 다음 레이아웃 템플릿 중 하나를 지정해야 합니다.

템플릿: 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 템플릿을 사용하면 하위 요소가 Y축을 따라 배치됩니다. 요소는 화면 상단에 정렬되며 x축을 따라 전체 화면을 차지합니다. 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 템플릿을 사용하면 하위 요소가 X축을 따라 배치됩니다. 요소가 화면 시작 부분에 정렬되고 Y축을 따라 전체 화면을 차지합니다. 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의 이름을 지정하여 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의 경우 제목과 바이라인이 상단에 위치하고 그 아래에 다른 요소가 이어져야 하므로 vertical 템플릿을 지정합니다. 두 번째 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>

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