Home
AMP
Guide

구글 AMP – 소개

Google Accelerated Mobile Pages (Google AMP)는 amp html을 사용하여 경량 웹 페이지를 구축하도록 특별히 설계된 Google의 새로운 오픈 소스 프로젝트입니다. 이 프로젝트의 주요 목표는 AMP 코드가 제대로 작동하고 스마트폰 및 태블릿과 같은 가능한 모든 장치에서 빠르게 로드되는지 확인하는 것입니다.

AMP는 표준 HTML의 확장입니다. AMP는 HTML 태그가 거의 변경되지 않았으며 부분적으로 사용 제한을 추가했습니다. 이 글에서는 변경된 html 태그와 추가된 제한 사항을 나열합니다. Image, CSS, JS, Form, Video, Audio 등과 같은 외부 리소스 로드를 처리하는 태그가 변경됩니다.

또한 amp-date-picker, amp.facebook, amp-ad, ampanalytics, amp-ad, amp-lightbox 등과 같이 html 페이지에서 직접 사용할 수 있는 많은 새로운 기능이 amp에 추가되었습니다. 나머지는 이전과 같이 그대로 사용됩니다.

이러한 모든 변경 사항과 새로운 기능을 통해 AMP는 라이브 환경에서 사용할 때 페이지에 더 빠른 로드와 더 나은 성능을 제공합니다.

모바일에서 Google 검색에서 무엇이든 검색할 때 상단의 Google 캐러셀에 표시되는 것은 대부분 아래와 사진 같이 amp 페이지입니다.

AMP 페이지를 클릭하면 주소창에 표시되는 URL은 다음과 같습니다.

https://www.google.com/amp/s/googleblogamp.blogspot.com/%3famp=1

URL은 게시자가 직접 가져 오는 것이 아니지만 Google은 캐시된 버전인 구글 서버의 자체 사본을 가리키며 AMP가 아닌 페이지에 비해 콘텐츠를 더 빠르게 렌더링하는데 도움이 됩니다. 이는 기기 또는 구글 에뮬레이터 모드에서만 발생합니다.

AMP 페이지에서해야 할 일과하지 말아야 할 일

프로그래머가 AMP 페이지에서 따라야 할 일과하지 말아야 할 일을 이해하겠습니다.

필수 태그

아래와 같이 amp 페이지에 포함되어야하는 몇 가지 필수 태그가 있습니다.

  • 아래와 같이 html 태그에 amp 또는 ⚡가 추가되었는지 확인해야 합니다. 
    <html amp>
OR 
<html ⚡>
  • <head> 및 <body> 태그는 html 페이지에 추가되어야 합니다.
  • 페이지의 헤드 섹션에 다음 필수 메타 태그를 추가해야 합니다. 그렇지 않으면 amp 유효성 검사에 실패합니다. 
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  • head 태그 안에 추가할 rel="canonical"의 링크입니다. 
    <link rel="canonical" href="original-html-page.html">
  • amp-boilerplate가있는 스타일 태그입니다. 
    <<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가 추가된 amp 스크립트 태그가 매우 중요합니다. 
    <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 구성 요소 스크립트

src 및 type="text/javascript"가 포함된 스크립트는 amp 페이지에서 엄격히 허용되지 않습니다. async 및 amp 구성 요소와 관련된 스크립트 태그만 head 섹션에 추가할 수 있습니다.

이 섹션에는 아래와 같이 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는 비동기 및 사용자 지정 요소 속성을 기반으로 스크립트 태그의 유효성을 검사하고 다른 스크립트가 로드되는 것을 허용하지 않습니다. 아래와 같이 type=application/json을 사용합니다. 

<script type=application/json>{
  "vars": {
    "uid": "23870",
    "domain": "dummyurl.com",
    "sections": "ko",
    "authors": "Hello World"
  }
}
</script>

위 스크립트는 필요한 경우 다른 amp 구성 요소 (예 : amp-analytics)와 함께 사용할 수 있습니다.

HTML 태그

지금까지 amp 페이지에 필요한 필수 태그를 살펴 보았습니다. 이제 허용 / 불가 HTML 요소와 이에 부과되는 제한에 대해 논의할 것입니다. 허용 / 불가 HTML 태그 목록은 다음과 같습니다.

HTML 태그 설명
img 이 태그는 amp-img로 대체됩니다. AMP 페이지에서는 직접 img 태그를 사용할 수 없습니다.
video amp-video
audio amp-video로 대체되었습니다.
iframe amp-iframe로 대체되었습니다.
object 허용되지 않음
embed 허용되지 않음
form amp-form으로 사용할 수 있습니다. AMP 페이지에서 양식을 사용하려면 스크립트를 추가해야 합니다./td>
Input 요소 허용됨. <input[type=image]>, <input[type=button]>, <input[type=password]>, <input[type=file]>은 허용되지 않습니다.
fieldset 허용됨
label 허용됨
P, div, header,footer,section 허용됨
button 허용됨
a 허용됨
svg 허용됨
meta 허용됨
Link 허용됨
style 허용됩니다. 그러나 외부 스타일 시트를 로드할 수 없습니다.
base 허용됨
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="input-throttled:AMP.setState({name: event.value})">

사용된 이벤트는 input-throlled 입니다.

Classes

페이지에 -amp- 또는 i-amp-와 같은 접두사가 있는 클래스를 가질 수 없습니다. 게다가, 요구 사항에 따라 Class 이름을 사용할 수 있습니다.

IDs

-amp 또는 i-amp-로 시작하는 html 요소에 대한 ID를 가질 수 없습니다. 게다가 요구 사항에 따라 html 요소에 ID를 사용할 수 있습니다.

Links

AMP 페이지에서는 href에 자바 스크립트를 사용할 수 없습니다.

예제

<a href="javascript:callfunc();">click me</a>

Style Sheets

AMP 페이지에서는 외부 스타일 시트를 사용할 수 없습니다. 내부 페이지에 필요한 스타일을 추가할 수 있습니다. 

<style amp-custom>
//all your styles here
</style>

스타일 태그에는 amp-custom 속성이 추가되어 있어야 합니다.

@-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
  • External

참고 — 예를 들어 amp-img는 기본 제공 구성 요소로 바로 사용할 수 있습니다. amp-ad, amp-facebook, amp-video 등의 외부 구성 요소는 각각의 구성 요소와 관련된 파일이 포함된 스크립트 태그를 추가합니다.

공통 속성

width, height, layout, placeholder 및 fallback과 같은 속성은 거의 모든 AMP 구성 요소에서 사용할 수 있습니다. 이러한 속성은 AMP 페이지에서 구성 요소의 표시를 결정하므로 모든 AMP 구성 요소에 매우 중요합니다.

구글 모바일 에뮬레이터

구글 모바일 에뮬레이터를 사용하려면 Chrome 브라우저를 열고 마우스 오른쪽 버튼을 클릭한 다음 아래와 같이 개발자 콘솔을 엽니다.

위와 같이 Chrome 용 개발자 도구를 볼 수 있습니다. 브라우저에서 테스트하려는 링크를 누르십시오. 페이지가 데스크탑 모드로 표시되는지 확인하십시오.

장치를 테스트하기 위해 위의 페이지를 가져오려면 아래와 같이 장치 도구 모음 토글을 클릭하십시오.

단축키 Ctrl + Shift + M을 사용할 수도 있습니다. 그러면 아래와 같이 데스크탑 모드가 장치 모드로 변경됩니다.

장치 목록은 아래와 같이 볼 수 있습니다.

페이지를 테스트할 장치를 선택할 수 있습니다. 이들의 모든 페이지를 참고하십시오. 튜토리얼은 위와 같이 구글 에뮬레이터 모드에서 테스트되었습니다. Firefox 및 최신 브라우저에서도 같은 기능을 사용할 수 있습니다.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

댓글 쓰기