AMP

AMPHTML 레이아웃 시스템

개요

레이아웃 시스템의 주요 목표는 JavaScript 및 데이터 호출과 같은 원격 리소스가 완료되기 전 런타임이 요소의 크기를 추론할 수 있도록 AMP 요소가 레이아웃을 표시하게 지원하는 것입니다. 이를 통해 렌더링 및 스크롤 시 끊김 현상을 현저히 줄일 수 있으므로 중요합니다.

이를 염두에 두고 AMP 레이아웃 시스템은 우수한 성능을 보장하는 몇 가지의 유연한 레이아웃을 지원하도록 설계되었습니다. 이 시스템은 요소의 레이아웃과 크기 요건을 표현하는 데 layout, width, height, sizesheights 등의 속성 집합에 의존합니다.

동작

컨테이너가 아닌 AMP 요소(즉, layout != container)는 플레이스홀더를 제외한 모든 하위 요소가 숨김 처리된 미해결/미작성 모드에서 시작됩니다(placeholder 속성 참조). 요소를 완전히 구성하는 데 필요한 JavaScript 및 데이터 페이로드의 다운로드와 초기화가 진행 중일 시에도 AMP 런타임은 CSS 클래스와 layout, width, height,media 속성에만 의존하는 요소의 크기를 조정하고 레이아웃을 구성하는 방법을 이미 이해합니다. 대부분 사례에서 placeholder가 지정된 경우에는 요소의 전체 공간을 채우도록 크기와 위치가 정해질 것입니다.

요소가 작성되고 첫 번째 레이아웃이 완료된 직후 placeholder는 숨김 처리됩니다. 이때 요소의 모든 하위 요소 작성과 위치 지정이 적절히 완료되어야 하며 요소는 표시되고 사용자의 입력 값을 받을 준비를 마쳐야 합니다. 이것이 기본 동작입니다. 각 요소는 placeholder를 더 빨리 숨김 처리하거나 더 오래 유지하는 것처럼 재정의할 수 있습니다.

런타임의 layout, width, heightmedia 속성에 따라 요소의 크기가 설정되고 요소가 표시됩니다. 모든 레이아웃 규칙은 내부적으로 CSS를 통해 구현됩니다. 요소의 크기가 CSS를 통해 추론 가능하며 하위 요소에 따라 변경(즉시 제공되거나 동적으로 삽입)되지 않는 경우 요소가 "크기를 정의"한다고 볼 수 있습니다. 그렇다고 요소의 크기를 변경할 수 없는 것은 아닙니다. 이 레이아웃은 responsive, fixed-height, fillflex-item 레이아웃처럼 완전히 반응형으로 동작할 수 있습니다. 다만 명시적 사용자 액션 없이 크기가 변경되지 않는다는 것을 의미할 뿐입니다(예: 렌더링 또는 스크롤 중, 다운로드 후).

PROD에서 요소가 잘못 구성된 경우 렌더링되지 않으며 DEV 모드에서 런타임이 오류 상태의 요소를 렌더링합니다. 가능한 오류에는 잘못되거나 지원되지 않는 layout, width, height 속성 값이 포함됩니다.

레이아웃 속성

widthheight

layout 속성 값에 따라 AMP 컴포넌트 요소에는 정수 픽셀 값을 포함하는 widthheight 속성이 있어야 합니다. 실제 레이아웃 동작은 하단에 명시된 바와 같이 layout 속성에 따라 결정됩니다.

종종 width 또는 height 속성이 지정되지 않은 경우 AMP 런타임은 다음과 같이 기본 값을 설정할 수 있습니다.

  • amp-pixel: widthheight 속성의 기본 값이 모두 0으로 설정됩니다.
  • amp-audio: widthheight 속성의 기본 값은 브라우저에서 추론됩니다.

layout

AMP는 문서 레이아웃에서 AMP 컴포넌트의 동작 방식을 지정하는 레이아웃 집합을 제공합니다. 아래 표에서 명시된 값 중 하나를 포함하는 layout 속성을 추가하여 컴포넌트 레이아웃을 지정할 수 있습니다.

예시: 가로세로비를 결정하는 데 너비와 높이가 사용되는 간단한 반응형 이미지.

<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"

> </amp-img>
> 

layout 속성에 지원되는 값:

동작 및 요구 사항
없음 값이 지정되지 않았거나 컴포넌트 레이아웃이 다음과 같이 추론된 경우:
  • height는 있지만 width가 없거나 auto로 설정된 경우에는 fixed-height 레이아웃이 추정됩니다.
  • widthheight 속성이sizes 또는 heights 속성과 함께 있을 경우 responsive 레이아웃이 추정됩니다.
  • widthheight 속성이 있으면 fixed 레이아웃이 추정됩니다.
  • widthheight 속성이 없으면 container 레이아웃이 추정됩니다.
container 일반적인 HTML div처럼 하위 요소가 크기를 정의합니다. 컴포넌트 자체는 특정 레이아웃을 갖지 않지만 컨테이너 역할만 하는 것으로 추정됩니다. 하위 요소가 즉시 렌더링됩니다.
fill 요소는 너비와 높이 모두 사용 가능한 공간에 위치합니다. 즉 fill 요소의 레이아웃과 크기는 상위 요소와 일치해야 합니다. 요소가 상위 컨테이너를 채우려면 "fill" 레이아웃을 지정하고 상위 컨테이너가 position:relative 또는 position:absolute를 지정해야 합니다.
fixed 요소의 너비와 높이가 고정되어 있으며 반응성은 지원되지 않습니다. widthheight 속성이 있어야 하며 유일한 예외는 amp-pixelamp-audio 컴포넌트입니다.
fixed-height 요소는 사용 가능한 공간에 위치하지만 높이는 변하지 않습니다. 이 레이아웃은 수평으로 위치한 콘텐츠를 포함하는 amp-carousel과 같은 요소에 적합합니다. height 속성은 반드시 필요하지만width 속성은 존재하지 않거나 auto와 동일해야 합니다.
flex-item 상위 요소가 유연한 컨테이너인 경우(예: display: flex) 요소 및 레이아웃 유형이 flex-item로 지정된 상위 요소의 기타 요소는 상위 컨테이너의 나머지 공간에 위치합니다. widthheight 속성은 필요하지 않습니다.
intrinsic 요소는 사용 가능한 공간에 위치하며 amp-img로 전달된 `width` 및 `height`를 통해 정의된 요소의 크기에 도달하거나 `max-width`와 같은 CSS 제한에 도달할 때까지 widthheight 속성으로 제공된 가로세로비에 맞춰 높이를 자동으로 변경합니다. 너비 및 높이 속성은 반드시 필요합니다. 이 레이아웃은 amp-img, amp-carousel 등을 비롯한 대부분의 AMP 요소에 적합합니다. 사용 가능한 공간은 상위 요소에 따라 다르며 max-width CSS를 사용하여 맞춤 설정할 수도 있습니다. 이 레이아웃은 고유 높이 및 너비가 있다는 점에서 responsive와 구별됩니다. responsive 레이아웃이 0x0을 렌더링하고 intrinsic 레이아웃이 실제 크기 또는 CSS 제한 중 더 작은 쪽에 맞춰 커지는 플로팅 요소 내에서 가장 분명하게 나타납니다.
nodisplay 요소가 표시되지 않으며 디스플레이 스타일이 none으로 지정된 것처럼 화면에서 공간을 차지하지 않습니다. 이 레이아웃은 모든 AMP 요소에 적용할 수 있습니다. 사용자 액션에 따라 요소가 스스로 화면에 표시되는 것으로 추정합니다(예: amp-lightbox). widthheight 속성은 필요하지 않습니다.
responsive 요소는 사용 가능한 공간에 위치하며 widthheight 속성으로 제공된 가로세로비에 맞춰 높이를 자동으로 변경합니다. 이 레이아웃은 amp-img, amp-video 등을 비롯한 대부분의 AMP 요소에 적합합니다. 사용 가능한 공간은 상위 요소에 따라 다르며 max-width CSS를 사용하여 맞춤 설정할 수 있습니다. widthheight 속성은 반드시 필요합니다.

참고: "layout=responsive"를 사용하는 요소는 고유 크기가 없습니다. 요소의 크기는 컨테이너 요소에 따라 결정됩니다. AMP 요소를 표시하려면 포함하는 요소의 너비와 높이를 지정해야 합니다. 포함하는 요소에 "display:table"을 지정하지 않습니다. 지정할 경우 AMP 요소 표시가 재정의되어 AMP 요소가 표시되지 않게 렌더링됩니다.

sizes

responsive 레이아웃을 지원하는 모든 AMP 요소는 sizes 속성도 지원합니다. 이 속성의 값은 img 크기에서 설명된 것처럼 크기를 표시하지만 이미지뿐이 아닌 모든 요소로 확장됩니다. 즉 sizes 속성은 미디어 조건에 따라 요소의 너비가 계산되는 방식을 설명합니다.

sizes 속성이 widthheight 속성과 함께 지정되면 layout은 기본적으로 responsive로 설정됩니다.

예시: sizes 속성 사용

다음 예시에서 뷰포트 너비가 320px보다 클 경우 이미지 너비는 320px이며 이외의 경우 100vw입니다(뷰포트 너비의 100%).

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"

> </amp-img>
> 

disable-inline-width

sizes 속성 자체는 요소에 인라인 width 스타일을 설정합니다. sizes 속성이 disable-inline-width과 함께 사용될 경우, AMP의 일반적인 sizes 속성과 달리 width를 자체적으로 설정하지 않고도 AMP 요소가 amp-img에 중첩된 img와 마찬가지로 sizes 값을 요소의 기본 태그로 전달합니다.

예시: disable-inline-width 속성 사용

다음 사례에서 <amp-img> 요소의 너비는 영향받지 않으며 sizessrcset의 출처 중 하나를 선택하는 데만 사용됩니다.

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
disable-inline-width

> </amp-img>
> 

heights

responsive을 지원하는 모든 AMP 요소는 heights 속성도 지원합니다. 이 속성의 값은 img sizes attribute와 유사하게 미디어 표현에 따라 크기를 표시하지만 두 가지 주요한 차이점이 있습니다.

  1. 요소의 너비가 아닌 높이에 적용됩니다.
  2. 퍼센트 값이 허용됩니다(예: 86%). 퍼센트 값을 사용할 경우 요소의 너비 %를 나타냅니다.

heights 속성이 widthheight와 함께 지정될 경우 layout은 기본적으로 responsive로 설정됩니다.

예시: heights 속성 사용

이 예시에서 이미지의 높이는 기본적으로 너비의 80%로 지정되지만 뷰포트 너비가 500px보다 클 경우 최대 높이는 200px입니다. heights 속성이 widthheight와 함께 지정되므로 레이아웃은 기본적으로 responsive로 설정됩니다.

<amp-img
src="https://acme.org/image1.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"

> </amp-img>
> 

media

대부분의 AMP 요소는 media 속성을 지원합니다. media의 값은 미디어 쿼리입니다. 쿼리가 일치하지 않을 경우 요소는 렌더링되지 않으며 관련 리소스나 잠재적으로는 하위 요소의 리소스도 가져올 수 없습니다. 브라우저 창의 크기나 방향이 변경되면 미디어 쿼리가 재평가되며 새 결과에 따라 요소가 숨겨지거나 표시됩니다.

예시: media 속성 사용

다음 예시에서는 상호배타적 미디어 쿼리가 포함된 이미지 2개를 사용합니다. 화면 너비에 따라 이미지 2개 중 하나를 가져와 렌더링합니다. media 속성은 모든 AMP 요소에서 지원되므로 광고처럼 이미지가 아닌 요소와 함께 사용될 수 있습니다.

<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355"
layout="responsive"

> </amp-img>
> <amp-img
>   media="(max-width: 649px)"
>   src="narrow.jpg"
>   width="527"
>   height="193"
>   layout="responsive"
> </amp-img>
> 

placeholder

placeholder 속성은 AMP 요소만이 아닌 모든 HTML 요소에 설정될 수 있습니다. placeholder 속성은 이 속성으로 표시된 요소가 상위 AMP 요소의 플레이스홀더 역할을 한다는 점을 나타냅니다. 지정된 경우 플레이스홀더 요소는 AMP 요소의 직접 하위 요소여야 합니다. 기본적으로 AMP 요소의 리소스가 다운로드 또는 초기화되지 않은 경우에도 AMP 요소에 플레이스홀더가 표시됩니다. 일반적으로 준비가 완료되면 AMP 요소는 플레이스홀더를 숨기고 콘텐츠를 표시합니다. 플레이스홀더와 관련한 정확한 동작은 요소의 구현에 따라 결정됩니다.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

fallback

fallback 속성은 AMP 요소만이 아닌 모든 HTML 요소에 설정될 수 있습니다. 폴백 속성이 설정되면 요소는 브라우저에서 해당 요소가 지원되지 않는다는 점을 사용자에게 알릴 수 있습니다. 지정된 경우 폴백 요소는 AMP 요소의 직접 하위 요소여야 합니다. 폴백과과 관련한 정확한 동작은 요소의 구현에 따라 결정됩니다.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">

  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

noloading

noloading 속성은 이 요소에서 "로딩 표시기" 사용이 중단되어야 하는지를 나타냅니다. 요소가 완전히 로드되지 않았음을 나타내는 기본 애니메이션인 "로딩 표시기"를 표시하도록 많은 AMP 요소가 허용 목록에 포함됩니다. 해당 요소는 이 속성을 추가하여 동작 사용을 해제할 수 있습니다.

(tl;dr) 레이아웃 요구 사항 및 동작 요약

다음 표는 허용되는 매개변수, CSS 클래스 및 layout 속성에 사용되는 스타일을 명시합니다. 다음 사항에 유의하세요.

  1. -amp-가 접두어가 표시된 모든 CSS 클래스 및 i-amp-가 접두어가 있는 요소는 AMP 내부의 클래스 및 요소로 간주되며 사용자 스타일시트에서 사용은 허용되지 않습니다. 이곳에는 정보 제공 목적으로만 표시됩니다.
  2. 표에서 widthheight 속성이 필수 사항으로 지정되었더라도 amp-pixelamp-audio 사례처럼 기본 규칙이 적용될 수 있습니다.
레이아웃 너비/
높이 필수 여부
크기 정의 여부 추가 요소 CSS "디스플레이"
container 필수 아님 정의 안 함 없음 block
fill 필수 아님 정의함. 상위 요소 크기. 없음 block
fixed 필수 정의함. widthheight로 지정. 없음 inline-block
fixed-height height만 필수. widthauto로 가능. 정의함. 상위 컨테이너 및 height로 지정. 없음 block
flex-item 필수 아님 정의 안 함 있음. 상위 컨테이너에 따름. block
intrinsic 필수 정의함. 상위 컨테이너 및 width:height 가로세로비에 따름. 있음. i-amphtml-sizer. block(대체된 요소처럼 동작)
nodisplay 필수 아님 정의 안 함 없음 none
responsive 필수 정의함. 상위 컨테이너 및 width:height 가로세로비에 따름 있음. i-amphtml-sizer. block