Google Accelerated Mobile Pages (Google AMP)는 amp-html을 사용하여 웹 페이지를 경량화하여 구현할 수 있도록 특별히 만들어진 Google의 새로운 오픈 소스 프로젝트입니다. 이 프로젝트의 주요 목표는 AMP 코드를 잘 적용하여 스마트폰, 태블릿 등과 같은 가능한 모든 장치에서 웹 페이지를 빠르게 로드하는 것입니다.
AMP란?
AMP (Accelerated Mobile Pages)는 모든 브라우저에서 콘텐츠를 더 빠르고 원활하게 로드하고 렌더링하며, 웹 페이지를 모바일 친화적으로 만들도록 특별히 만들어진 Google의 오픈 소스 프로젝트입니다. Google AMP의 공식 사이트는 amp.dev입니다.
AMP를 선택하는 이유는 무엇일까요?
모든 사용자는 웹 사이트의 콘텐츠가 매우 빠르게 로드되기를 원합니다. 그러나 이미지, 비디오, 애니메이션, 자바스크립트 등으로 거의 가득 차서 페이지가 너무 무거워지면 로딩 시간이 늘어날 수 있습니다. 이러한 경우 장기적으로 보았을 때 웹 사이트 방문자 수가 감소하는 결과를 초래할 수 있습니다.
Google 검색에 우선 순위 지정
오늘날 우리는 구글에서 무언가를 검색할 때 페이지 상단에 위치한 콘텐츠를 가장
먼저 클릭하게 됩니다. Google 뉴스 캐러셀은 페이지 상단에 표시되고 이에 대한
페이지의 목록이 나타납니다. 표시된 뉴스 캐러셀은 모두 유효한 AMP 사이트입니다.
이는 Google이 AMP 페이지에 우선 순위를 부여하고 뉴스 캐러셀의 순위에 따라
표시한다는 것을 의미합니다.
'연합 뉴스'라는 키워드를 사용하여 Google에서 검색한 예시가 아래에 있습니다.
Google AMP 페이지는 위의 이미지와 같이 Google 캐러셀로 검색 결과 상위 노출됩니다. 또한 AMP 페이지에는 Google AMP 로고인 ⚡ 번개 마크 ⚡ 표시가 있습니다.
더 빠른 로딩 시간
페이지가 AMP로 변환되면 AMP가 아닌 페이지에 비해 로딩 시간이 훨씬 더 빠릅니다. 더 빠른 로딩은 Google 검색에서 페이지 순위를 결정하는 중요한 요소입니다.
팝업창 없음
Google AMP를 사용하면 사용자가 Google AMP로 만들어진 페이지에서 원하지 않는 팝업창이 표시되지 않으므로 쾌적한 웹 브라우징 환경을 제공합니다.
트래픽 증가
페이지 로딩 속도가 빠르면 방문자 수가 늘어나고 페이지 트래픽이 증가합니다.
AMP는 어떻게 작동하나요?
웹 사이트를 구축하는 데 사용되는 가장 중요한 구성 요소는 자바스크립트, 이미지, 동영상, 글꼴, CSS 등입니다. AMP 페이지는 이러한 요소들을 고유한 방식으로 처리합니다. 페이지 속도를 높이기 위해 AMP가 정확히 무엇을 하는지 간략하게 설명하겠습니다.
비동기 JavaScript
JavaScript는 애니메이션, DOM 등의 형태로 페이지에서 사용자와 상호 작용하는 데 도움이 되므로 페이지에서 중요한 역할을 합니다. 그러나 페이지 속도를 느리게 하며 다른 콘텐츠가 페이지에서 렌더링되는 것을 방해할 수 있습니다. 따라서 AMP는 페이지 렌더링을 방해하지 않도록 비동기 JavaScript를 사용합니다.
AMP가 JavaScript를 다루는 방법
AMP는 JavaScript를 비동기적으로 로드합니다. 사용자 정의 JavaScript는 AMP 페이지 내에서 완전 금지됩니다. AMP-JS 라이브러리에는 충분히 많은 구성 요소가 추가되어 있으며 이것으로 기존 html 태그를 대체할 수 있습니다. 예를 들어 amp- img, amp-iframe, amp-video, amp-lightbox, amp-animations 등.
이 구성 요소 각각에 대해 비동기 속성이 있는 JavaScript 파일이 있어 스크립트 태그로 문서 헤드에 추가할 수 있습니다. AMP 구성 요소와 관련된 JavaScript 파일만 페이지에서 허용되며 외부 JavaScript 파일 내의 스크립트 태그는 허용되지 않습니다. AMP는 Google AMP 캐시를 사용하므로 파일이 캐시에서 미리 로드되어 로딩 속도가 빨라집니다.
HTML 태그의 크기
AMP 페이지가 리소스를 로드하지 않고도 페이지에서 공간을 찾아서 배치될 수 있도록 이미지, iframe, 동영상 태그의 크기를 지정해야 합니다. 리소스 로드는 amp 페이지에서 우선 순위가 지정됩니다. 콘텐츠는 리소스 로드보다 우선 순위가 높습니다.
소셜 위젯 / 광고
AMP는 페이지에서는 SNS 공유 및 광고를 위해 amp-facebook, amp-twitter, amp-ad, amp-sticky라는 특수한 구성 요소를 제공합니다. Amp-ad 구성 요소는 페이지에 광고를 게재하는 데 사용됩니다. AMP는 구성 요소 사용에 특별히 주의가 필요하며, 우선 순위에 따라 콘텐츠를 로드합니다.
CSS
AMP 페이지에서는 외부 CSS가 허용되지 않습니다. 그러나 amp-custom 속성을 사용하여 스타일 태그 내에 추가 할 수 있는 경우 사용자 정의 CSS, 인라인 CSS도 허용됩니다. AMP는 가능한 모든 방법으로 http 요청을 줄이기 위해 노력합니다.
글꼴
글꼴 변경은 AMP 페이지에서 허용되며, 글꼴을 로드하는 우선 순위는 AMP에 의해 결정됩니다.
애니메이션
AMP는 amp-animation 구성 요소를 지원하고, 최신 브라우저에서는 transition을 허용합니다.
위에서 설명된 모든 사항을 고려할 때 AMP는 글꼴, 이미지, iframe, 광고 등에 대한 HTTP 요청에 대해 매우 특별한 주의를 기울입니다. 스크롤 없이 볼 수 있는 부분에서 리소스가 먼저 렌더링되고 나중에 스크롤 없이 볼 수 있는 부분에서 사용 가능한 리소스에 대한 우선 순위가 제공됩니다.
기타 사항
Google AMP 캐시는 콘텐츠를 가져올 때 콘텐츠를 더 빠르게 렌더링하는 데 도움이 되는 중요한 요소입니다. 페이지 관리자는 amp 및 non-amp 페이지의 두 사이트를 유지해야 합니다. 예를 들어 사이트의 주소가 https://www.example.com이라고 가정하면 AMP가 아닌 데스크톱(PC) 용 페이지의 주소는 https://www.example.com/news가 됩니다. 모바일 기기 또는 AMP 용 주소는 https://www.example.com/news/amp/가 됩니다.
Google은 AMP와 AMP가 아닌 페이지를 어떻게 구별하나요?
이제 Google이 AMP 및 AMP가 아닌 페이지를 어떻게 구별하는지를 살펴보겠습니다.
-
Google 검색이 페이지를 크롤링 할 때
<html>또는<html amp>또는<html ⚡>에서 AMP 페이지임을 구별할 수 있습니다. -
또한 Google이 AMP가 아닌 페이지를 발견하는 경우 먼저 AMP 페이지인지 확인하기
위해 AMP 페이지와 AMP가 아닌 페이지 모두에 대해 html 페이지의 헤드에 다음과
같은
<link>태그를 추가해야 합니다.
AMP가 아닌 페이지의 URL
<link rel="amphtml" href="https:/www.example.com/news/amp/myfirstnews_amp.html">
여기서 rel="amphtml"은 AMP가 아닌 페이지가 AMP 버전을 가리키게
되므로 Google은 올바른 AMP 페이지를 표시할 수 있습니다.
AMP 페이지의 URL
<link rel="canonical" href="https://www.example.com/news/myfirstnews.html">
여기서 rel="canonical"은 표준 html 버전을 가리키도록 AMP 페이지에
지정되어 있으므로 Google이 올바른 AMP 버전을 표시할 수 있습니다.
<link rel="canonical" href="https://www.example.com/news/amp/myfirstnews_amp.html">
사이트에 amp 페이지가 하나만 있는 경우에도 자기 자신을 가리키는
rel="canonical"을 추가하는 것을 잊지 말아야 합니다.
Google AMP의 기능
Google AMP에서 사용할 수 있는 중요한 기능에 대해 살펴보겠습니다.
AMP 캐시
Google AMP 캐싱은 AMP에 추가된 핵심 기능 중 하나입니다. AMP 페이지를 구현하기 위해 프록시 기반의 콘텐츠 전송 네트워크를 제공합니다. 모든 유효한 AMP 페이지에서 기본적으로 AMP 캐시를 사용할 수 있습니다. AMP가 아닌 페이지에 비해 페이지를 더 빠르게 렌더링하는 데 도움이 됩니다. 현재 2개의 AMP 캐시 제공 업체가 있습니다. Google AMP 캐시와 Cloudflare AMP 캐시. 사용자가 페이지를 클릭하여 amp 페이지로 이동하면 Google 캐시에서 콘텐츠가 로드됩니다.
AMP 구성 요소
AMP에는 다양한 목적으로 설계된 구성 요소들이 많이 있습니다. 그 중 몇 가지가 아래에 나열되어 있습니다.
- amp-img — amp 페이지에 이미지를 표시하는 데 사용됩니다.
- amp-iframe — 페이지에 표시 할 외부 콘텐츠와 함께 iframe을 표시하는 데 사용됩니다. 사용된 iframe은 샌드 박스이므로 amp 페이지에 데이터를 표시하려면 권한이 필요합니다. 따라서 sandbox 속성에 대해 세부 속성을 따로 지정해야 합니다.
- amp-video — 페이지에 비디오를 표시합니다.
- amp-audio — 페이지에 오디오를 표시합니다.
- amp-date-picker — 페이지에 날짜 위젯을 표시하는 데 사용됩니다. AMP로 직접 사용할 수 있으므로 다른 datepicker 라이브러리를 사용할 필요가 없습니다.
- amp-story — 페이지에 스토리를 표시하는 매체입니다.
- amp-selector — 옵션 메뉴를 표시하고 사용자가 옵션 중에서 선택할 수 있는 AMP 구성 요소입니다. 표시되는 옵션은 텍스트, 이미지 또는 또 다른 AMP 구성 요소가 될 수도 있습니다.
- amp-list — CORS json 엔드 포인트와 템플릿 내부에 표시된 json 파일의 데이터를 호출하는 AMP 구성 요소입니다.
광고
광고 수익은 페이지에 게재된 광고에 전적으로 의존하기 때문에 광고 게시자에게 매우 중요합니다. AMP는 외부 자바스크립트를 추가하는 것을 허용하지 않지만 페이지에 광고를 게재하기 위해 amp-ad라는 특별한 AMP 구성 요소를 도입하였습니다.
페이지에 게재하려는 광고는 amp-ad의 지원을 받아야 합니다. 예를 들어 페이지에 더블 클릭 광고를 게재하려면 더블 클릭이 지원되는 amp-ad 구성 요소를 사용해야 합니다. 다음 코드는 더블 클릭이 지원되는 amp-ad를 보여줍니다.
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot = "/1234567/ad-layout">
<div placeholder>
<b>여기에 표시됨!!</b>
</div>
</amp-ad>
AMP는 AMP 구성 요소와 html에서 개발된 순수 ampads인 amp-html-ads도 지원합니다. AMP는 페이지 하단에 표시되는 푸터 광고 인 amp-sticky-ads도 지원합니다. amp의 광고에 대한 자세한 내용은 나중에 다시 다루겠습니다.
소셜 위젯
Facebook, Twitter, Instagram과 같은 소셜 위젯은 게시자 페이지에 표시되는 것이 매우 중요하여 페이지가 SNS에 공유됩니다. AMP는 amp-facebook, amp-twitter, amp- instagram, amp-pinterest 등과 같은 AMP 구성 요소를 개발하여 페이지에서 사용되는 모든 중요한 소셜 미디어 위젯에 대한 지원을 확장했습니다.
AMP 미디어
페이지의 또 다른 중요한 구성 요소는 동영상을 표시하고 동영상 사이에 미드 롤 광고를 게재할 수 있는 미디어입니다. AMP는 amp-jwplayer, amp-youtube 등을 사용하여 이를 수행하는 매체를 제공합니다. JW Player, YouTube를 페이지에 표시하기 위해 추가 타사 파일을 로드할 필요가 없습니다.
AMP Analytics
Amp-analytics는 특정 페이지에서 데이터를 추적하는 데 사용되는 AMP 구성 요소입니다. 페이지의 모든 사용자 상호 작용을 기록하고 저장하여 개선 사항 또는 비즈니스 목적을 위해 데이터를 분석할 수 있습니다.
AMP Animations
Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 AMP 구성 요소입니다. IT는 최신 브라우저에서 잘 작동하는 animation, transition을 지원합니다. 애니메이션을 수행하기 위해 외부 CSS 라이브러리를 사용할 필요가 없으며 amp-animation 구성 요소를 사용할 수 있습니다.
AMP Layouts
Amp-layout은 Google AMP에서 사용할 수 있는 중요한 기능 중 하나입니다. AMP 레이아웃은 페이지가 로드될 때 깜박임이나 스크롤 문제없이 AMP 구성 요소가 올바르게 렌더링 되도록 합니다.
Google AMP는 이미지에 대한 http 요청, 데이터 호출과 같은 다른 원격 리소스가 수행되기 전에 페이지에서 레이아웃 렌더링이 수행되는지 확인합니다. 레이아웃에 사용할 수 있는 속성은 모든 AMP 구성 요소에 대한 width, height, responsive, fill, fixed 등과 같은 값이 있는 layout 속성, 리소스가 로드하는 데 시간이 걸리거나 오류가 있을 때 표시되는 placeholder 속성, 리소스에 오류가 있을 경우 표시되는 fallback 속성입니다.
AMP Display Layouts
AMP는 타사 라이브러리나 페이지에 무거운 CSS를 만들지 않고도 페이지에 콘텐츠를 표시하는 데 사용되는 많은 구성 요소를 지원합니다.
- Accordion — Amp-accordion은 확장-축소 형식으로 콘텐츠를 표시하는 데 사용되는 AMP 구성 요소입니다. 사용자는 아코디언에서 선택한 섹션을 선택할 수 있는 모바일 장치에서 쉽게 볼 수 있습니다.
- Carousel — Amp-carousel은 콘텐츠 사이를 이동하기 위해 화살표를 사용하여 유사한 콘텐츠 세트를 표시하는 AMP 구성 요소입니다.
- Lightbox — Amp-lightbox는 전체 뷰포트를 차지하고 오버레이처럼 표시되는 AMP 구성 요소입니다.
- Slider — Amp-image-slider는 이미지 위로 수직으로 움직일 때 슬라이더를 추가하여 두 이미지를 비교하는 데 사용되는 AMP 구성 요소입니다.
- Sidebar — Amp-sidebar는 버튼을 탭할 때 페이지 측면에서 슬라이드하는 콘텐츠를 표시하는 데 사용되는 AMP 구성 요소입니다.
AMP의 장점
- AMP 페이지는 가볍고 더 빠르게 로드됩니다.
- Google은 Google 검색에서 AMP 페이지에 우선 순위를 부여합니다. AMP 페이지는 페이지 상단의 캐러셀 형식으로 나열됩니다. 더 높은 순위를 얻으려면 페이지에 AMP를 적용하는 것이 좋습니다.
- AMP 페이지는 콘텐츠가 반응형이고 추가 스타일링 없이 모든 브라우저에서 잘 조정되므로 모바일 친화적입니다.
- AMP 페이지가 아닌 페이지에 비해 페이지 로드 속도가 빠르기 때문에 AMP 페이지에 대한 사용자 만족도가 높아져 대역폭과 모바일 배터리가 절약됩니다.
AMP의 단점
AMP에는 다음과 같은 단점이 있습니다.
- 게시자는 amp 및 non-amp에 대해 두 가지 버전을 유지해야 합니다.
- 사용자는 AMP가 아닌 페이지를 AMP로 변환하는 데 추가적인 노력을 기울여야 합니다. AM는 사용자 정의 자바스크립트 또는 외부 자바스크립트 로드를 지원하지 않으므로 AMP에서 사용할 수 있는 모든 항목에서 동일한 작업을 수행해야 합니다.