Jello's development blog

Jello's development blog

유용한 AMP 컴포넌트 소개

웹 어플리케이션을 개발할 때에 로딩 시간은 중요한 부분을 차지한다. 이를 서비스할 때에 로딩 시간이 길어지면 사용자들은 기다리지 않고 바로 이탈해버리기 때문이다. 실제로 한 대형 이커머스 서비스를 조사한 결과, 웹 페이지의 이탈율이 초당 2.7%씩 증가하고, 15초가 넘어서면 50%까지 도달하게 된다. 이처럼 로딩 시간은 상당히 중요한 이슈인데, 구글은 모바일 페이지 로딩 시간을 획기적으로 단축시킬 수 있는 AMP(Accelerated Mobile Pages) 프로젝트를 진행하고 있기도 하다. 실제로 페이스북이나 구글에서 AMP를 이용해 만들어진 페이지를 들어가보면 웹 로딩이 아니라 네이티브로 만들어진 것처럼 로딩 시간은 거의 느껴지지 않고 빠르게 렌더링된다.

이 AMP 페이지를 개발하는 데에는 제약이 따른다. CSS는 무조건 헤더에 선언해야 하고, <link>로 가져오는 것도 안된다. inline으로 태그에 스타일을 주는 것도 안된다. Javascript 또한 외부에서 가져오는 것은 AMP에서 제공하는 컴포넌트만 가능하며, 이외의 소스는 가져올 수 없다. 또한 <amp-img>, <amp-video> 같은 전용 태그를 사용한다. 이외에도 크고 작은 제약 사항이 많이 있다.

그렇다고 AMP를 개발할 때 순수 javascript만을 사용해야 하는 것은 아니다. 물론 정적인 페이지를 빠르게 로딩하기 위해 나온 프로젝트지만 이미지 슬라이더, 모달(lightbox) 등 나쁘지 않은 컴포넌트들을 제공하고 있다. 사실 이것도 제공하지 않으면 아무도 AMP를 안 쓸 것 같다.

<amp-img><amp-video>도 컴포넌트의 일종인데, 기존 태그들과 쓰임새가 비슷하여 생략하고 몇 가지 유용한 컴포넌트를 소개해보려고 한다.

amp-accordion

문서

누르면 아래에 내용이 보이는 컴포넌트. 헤더에 다음을 추가함으로써 사용할 수 있다.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

<amp-accordion> 태그를 이용하면 아래와 같이 간편하게 accordion을 만들 수 있다.

<amp-accordion>
  <section expanded>
    <h4>Section 1</h4>
    <p>Bunch of awesome content.</p>
  </section>
  <section>
    <h4>Section 2</h4>
    <div>Bunch of even more awesome content. This time in a
      <code>&lt;div&gt;</code>.</div>
  </section>
  <section>
    <h4>Section 3</h4>
    <figure>
      <amp-img src="/img/amp.jpg"
        width="1080"
        height="610"
        layout="responsive"
        alt="an image"></amp-img>
      <figcaption>Images work as well.</figcaption>
    </figure>
  </section>
</amp-accordion>
Section 1을 누른 모습

Section 1을 누르니 아래에 그에 따른 내용이 나오는 것을 확인할 수 있다.

amp-image-lightbox

문서

이미지를 클릭 혹은 탭하면 화면에 가득 차며 크게 볼 수 있는 컴포넌트. 헤더에 다음을 추가해서 사용할 수 있다.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

아래와 같이 lightbox를 위한 태그를 추가하고, <amp-img> 태그에 on=[lightbox id]tabindex="0"를 추가하면 된다.

<amp-image-lightbox id="lightbox1"
  layout="nodisplay"></amp-image-lightbox>

<amp-img on="tap:lightbox1"
  role="button"
  tabindex="0"
  src="/img/Hovawart.jpg"
  alt="Picture of a dog"
  title="Picture of a dog, view in lightbox"
  layout="responsive"
  width="600"
  height="400"></amp-img>

사진을 누르면 확대된다

문서

간단한 이미지 슬라이더. 헤더에 다음을 추가해서 사용할 수 있다.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<amp-carousel>태그 안에 이미지 태그를 넣어주면 간단히 구현할 수 있다. 이미지 태그에 amp-image-lightbox를 적용하는 것도 가능하다.

<amp-carousel height="300"
  layout="fixed-height"
  type="carousel">
  <amp-img src="/img/image1.jpg"
    width="400"
    height="300"
    alt="a sample image"></amp-img>
  <amp-img src="/img/image2.jpg"
    width="400"
    height="300"
    alt="another sample image"></amp-img>
  <amp-img src="/img/image3.jpg"
    width="400"
    height="300"
    alt="and another sample image"></amp-img>
</amp-carousel>

amp-pixel

문서

페이지뷰 카운트를 할 때에 유용한 컴포넌트. 로드될 때마다 해당 URL로 GET 요청을 보낸다. AMP js에 내장되어있어 따로 가져올 필요가 없다.

<amp-pixel> 태그에 작성한 url으로 GET 요청을 한다.

<amp-pixel src="https://ampbyexample.com/tracker/foo"
  layout="nodisplay"></amp-pixel>

amp-var-substitutions를 이용해서 다음과 같이 url에 파라미터로 변수를 넣을 수 있다고 한다.

<amp-pixel src="https://ampbyexample.com/tracker/foo?redirectTime=REDIRECT_TIME&sourceHost=SOURCE_HOSTNAME&viewer=VIEWER"
  layout="nodisplay"></amp-pixel>

이 외에도 AMP Example에 더 많은 컴포넌트와 그에 따른 예제들이 나와있으므로 AMP 페이지를 개발할 때 찾아보면 좋을 듯하다.