구글 가속 모바일 페이지(Google Accelerated Mobile Pages, Google AMP)는 구글의 오픈 소스 프로젝트로 amp-html을 사용하여 가벼운 웹 페이지를 빌드합니다. 구글의 새로운 오픈 메인 프로그램인 AMP는 스마트폰과 태블릿같은 가능한 모든 장치에서 빠르게 로드하는 것을 목표로 합니다.
AMP HTML은 표준 HTML의 확장된 버전입니다. AMP는 HTML 태그가 거의 변경되지 않았고 HTML 태그 중에서 일부 요소를 제한합니다. 이 포스팅에서는 AMP에서 변경된 HTML 태그와 제한 사항에 대해 설명합니다.
AMP HTML에서 이미지, CSS, JS, form, video, audio 등과 같은 외부 리소스 로드를 처리하는 태그가 변경됩니다. 또한 amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-lightbox 등과 같이 HTML 페이지에서 직접 사용할 수 있는 많은 새로운 기능이 AMP에 추가되었습니다.
이러한 모든 변경 사항과 새로운 기능을 통해 AMP는 모바일 환경에서 사용할 때 페이지에 더 빠른 로드와 더 나은 성능을 제공합니다.
모바일 환경에서 Google에 검색 할 때 AMP 페이지를 클릭하면 주소창에 나타나는 URL은 다음과 같습니다.
URL은 게시자가 직접 제공하지 않고 캐시된 버전인 Google 서버의 복사본을 가리키며 AMP가 아닌 페이지에 비해 콘텐츠를 더 빠르게 렌더링하는 데 도움이 됩니다. 이는 모바일 기기 또는 개발자 모드 에뮬레이터에서만 실행됩니다.
Amp Sample Page
AMP 페이지의 예는 다음과 같습니다.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Amp Sample Page</title>
<link rel="canonical" href="sample.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-custom> h1 {color: red} </style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
</head>
<body>
<h1>Amp Sample Page</h1>
<amp-img src="imgurl.jpg" width="300" height="300" layout="responsive"></amp-img>
<p>
<amp-ad width="300" height="250" type="doubleclick" data-slot="/4119129/no-ad">
<div fallback>
<p style="color:green; font-size:25px;">No ads to Serve!</p>
</div>
</amp-ad>
</p>
</body>
</html>
AMP 페이지 규칙
AMP 페이지에서 해야 할 일과 하지 말아야 할 일을 살펴봅니다.
필수 태그
아래와 같이 AMP 페이지에 포함되어야 하는 몇 가지 필수 태그가 있습니다.
-
아래와 같이 html 태그에 amp 또는 ⚡가 추가되어 있는지 확인해야
합니다.
<html amp> or <html ⚡>
-
<head>및<body>태그는 HTML 페이지에 포함되어야 합니다. -
페이지 헤드 섹션에 다음과 같은 필수 meta 태그를 추가해야 합니다.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1">
-
head 태그 내부에 rel="canonical"의 링크가 추가됩니다.
<link rel="canonical" href="sample.html">
-
amp-boilerplate가 있는 style 태그.
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> -
amp-boilerplate가 있는 noscript 태그.
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> -
아래와 같이 async가 추가 된 script 태그는 매우 중요합니다.
<script async src="https://cdn.ampproject.org/v0.js"></script>
-
페이지에 사용자 정의 CSS를 추가하려는 경우 AMP 페이지에서 외부 스타일 시트를
호출할 수 없다는 점에 유의해야 합니다. 사용자 정의 CSS를 추가하려면 모든
CSS가 아래의 주석 표시된 곳으로 이동해야 합니다.
<style amp-custom> //all your styles here </style>
- 스타일 태그에는 amp-custom 속성이 추가되어 있어야 합니다.
AMP 구성 요소 스크립트
amp-ad
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
amp-iframe
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
스크립트에는 로드 할 AMP 구성 요소의 이름이 포함된 비동기 및 사용자 지정 요소 속성이 있습니다. AMP는 비동기 및 사용자 지정 요소 속성을 기반으로 스크립트 태그의 유효성을 검사하고 다른 스크립트가 로드되는 것을 허용하지 않습니다. AMP는 아래와 같이 type=aplication/json을 사용합니다.
<script type="application/son">
{
"vars": {
"uid": "23870",
"domain": "dummyurl.com",
"sections": "ko",
"authors": "Hello World"
}
}
</script>
위 스크립트는 필요한 경우 다른 AMP 구성 요소 (예를 들면 amp-analytics)와 함께 사용할 수 있습니다.
HTML 태그
지금까지 AMP 페이지에 필요한 필수 태그를 살펴 보았습니다. 이제 허용 / 비허용되는 HTML 요소와 제한 사항에 대해 살펴볼 것입니다.
허용되는 HTML 태그 목록과 허용되지 않는 HTML 태그 목록은 다음과 같습니다.
| No | HTML 태그 & 설명 |
|---|---|
| 1 |
img amp-img로 대체됨. AMP 페이지에서는 직접 img 태그를 사용할 수 없습니다. |
| 2 | video amp-video로 대체됨. |
| 3 | audio amp-audio로 대체됨. |
| 4 | iframe amp-iframe으로 대체됨. |
| 5 | object 허용되지 않음. |
| 6 | embed 허용되지 않음. |
| 7 |
form<form>으로 사용할 수 있습니다. AMP
페이지에서 form을 사용하려면 스크립트를 추가해야 합니다.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> |
| 8 |
input 허용됨. <input[type=image]>,
<input[type=button]>,
<input[type=password]>,
<input[type=file]>는 허용되지 않음
|
| 9 | <fieldset> 허용됨. |
| 10 | <label> 허용됨. |
| 11 | p, div header, footer, section 허용됨. |
| 12 | button 허용됨. |
| 13 |
a<a> 태그는 다음 조건에서 허용되며
href는 javascript로 시작하면 안됩니다. 현재
target 속성 값은 _blank 여야 합니다.
|
| 14 | svg 허용됨. |
| 15 | meta 허용됨. |
| 16 |
link 허용됨. 그러나 외부 스타일 시트를 로드할 수 없습니다. |
| 17 |
style 허용됨. amp-boilerplate 또는 amp- custom 속성이 있어야 합니다. |
| 18 | base 허용됨. |
| 19 | noscript 허용됨. |
주석
조건부 HTML 주석은 허용되지 않습니다. 예를 들면
<!--[if Chrome]> This browser is chrome (any version) <![endif]-->
HTML 이벤트
onclick, onmouseover와 같은 HTML 페이지에서 사용하는 이벤트는 AMP 페이지에서 허용되지 않습니다.
다음과 같이 이벤트를 사용할 수 있습니다.
on="eventName:elementId[.methodName[(arg1=value, arg2=value)]]"
다음은 input 요소에 사용되는 이벤트의 예입니다
<input id="txtname" placeholder="Type here" on="inputthrottled: AMP.setState({ name: event.value!)">
사용된 이벤트는 input-throlled입니다.
Class
페이지에 -amp- 또는 i-amp-와 같은 접두사가 있는 클래스는 사용할 수 없습니다. 그 이외엔 필요에 따라 클래스 이름을 사용할 수 있습니다.
ID
HTML 요소에 대한 -amp- 또는 i-amp- 접두사가 붙은 ID를 가질 수 없습니다. 그 이외엔 필요에 따라 HTML 요소에 ID를 사용할 수 있습니다.
링크
AMP 페이지에서는 href에 자바스크립트를 사용할 수 없습니다. 예를 들면,
<a href="javascript:callfunc();">click</a>
스타일 시트
AMP 페이지에서는 외부 스타일 시트를 사용할 수 없습니다. 내부 페이지에 필요한 스타일을 추가할 수 있습니다.
<style amp-custom> //all your styles here </style>
스타일 태그에는 amp-custom 속성이 추가되어 있어야 합니다.
@-rules
다음 @-rules은 스타일 시트에서 허용됩니다.
- @font-face, @keyframes, @media, @page, @supports는 허용됩니다. @import는 허용되지 않습니다.
-
@keyframes는
<style amp-custom>내부에서 사용할 수 있습니다. @keyframe이 너무 많으면<style amp-keyframes>태그를 만들고 AMP 문서의 끝에서 이 태그를 호출하는 것이 좋습니다. - 클래스 이름, ID, 태그 이름 및 속성에 -amp- 및 i-amp- 접두사를 붙이면 안됩니다. AMP 런타임시 내부적으로 사용되므로 페이지 내에서 충돌을 일으킬 수 있습니다.
- !important 속성은 내부 스타일에서 허용되지 않습니다. AMP는 필요할 때마다 요소 크기를 제어하려고 하기 때문입니다.
사용자 정의 글꼴
사용자 정의 글꼴을 위한 스타일 시트는 AMP 페이지에서 허용됩니다. 예를 들면,
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nanum+Gothic">
다음 출처의 글꼴은 AMP 페이지 내에서 사용할 수 있습니다.
- Fonts.com
- Google Fonts
- Font Awesome
- Adobe Fonts
참고 — @font-face 사용자 정의 글꼴 AMP 페이지에서 허용됩니다. @import 사용자 정의 글꼴은 허용되지 않습니다.
예를 들면,
@font-face {
font-family: myFirstFont;
src: url(dummyfont.woff);
}
AMP 런타임
AMP의 핵심인 스크립트 파일이 로드되면 AMP 런타임 환경이 결정됩니다.
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMP의 핵심인 이 스크립트 파일은 외부 리소스를 로드하고 우선 순위를 결정합니다. 또한 URL에 #development=1을 추가하면 AMP 문서의 유효성을 검사하는 데 도움이 됩니다.
http://localhost:8080/googleamp/amppage.html#development=1
브라우저 개발자 도구 콘솔에서 위의 URL은 AMP 유효성 검사에 실패하면 오류를 나열하고 오류가 없으면 amp validation successful 메시지를 표시합니다.
AMP 구성 요소
AMP에는 많은 구성 요소가 추가되었습니다. 이는 기본적으로 리소스 로드를 효율적으로 처리하는 데 사용됩니다. 또한 애니메이션, 디스플레이 데이터, 광고 표시, 소셜 위젯 등을 처리하는 구성 요소가 포함되어 있습니다.
AMP에는 두 가지 유형의 구성 요소가 있습니다.
- 내장되어 있는 구성 요소(Built-in components)
- 외부 구성 요소(External components)
참고 — 예를 들어 amp-img는 기본 제공 구성 요소로 바로 사용할 수 있습니다. amp-ad, amp-facebook, amp-video 등의 외부 구성 요소는 각각의 구성 요소와 관련된 파일이 포함된 스크립트 태그를 추가합니다.
공통 속성
width, height, layout, placeholder 및 fallback과 같은 속성은 거의 모든 AMP 구성 요소에서 사용할 수 있습니다. 이러한 속성은 AMP 페이지에서 구성 요소의 표시를 결정하므로 모든 AMP 구성 요소에 매우 중요합니다.