AMPHTML 레이아웃 시스템

개요

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

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

동작

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

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

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

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

레이아웃 속성

width 및 height

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

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

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

layout

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

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

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

> </amp-img>
> 

layout 속성에 지원되는 값:

sizes

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

sizes 속성이 width 및 height 속성과 함께 지정되면 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> 요소의 너비는 영향받지 않으며 sizes는 srcset의 출처 중 하나를 선택하는 데만 사용됩니다.

<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 속성이 width 및 height와 함께 지정될 경우 layout은 기본적으로 responsive로 설정됩니다.

예시: heights 속성 사용

이 예시에서 이미지의 높이는 기본적으로 너비의 80%로 지정되지만 뷰포트 너비가 500px보다 클 경우 최대 높이는 200px입니다. heights 속성이 width 및 height와 함께 지정되므로 레이아웃은 기본적으로 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. 표에서 width 및 height 속성이 필수 사항으로 지정되었더라도 amp-pixel 및 amp-audio 사례처럼 기본 규칙이 적용될 수 있습니다.