Google Accelerated Mobile Pages (Google-AMP)는 구글의 새로운 오픈 소스 프로젝트입니다. 특별히 amp html을 사용하여 경량 웹 페이지를 구축하도록 설계되었습니다. 이것의 주요 목적 프로젝트는 amp 코드가 잘 작동하고 스마트 폰, 태블릿 등 가능한 모든 장치에서 빠르게 로드되는지 확인하는 것입니다.
AMP 란?
Accerated Mobile Pages (AMP)는 구글의 오픈 소스 프로젝트로 모든 브라우저에서 콘텐츠를 더 빠르고 매끄럽고 반응 형으로 렌더링하여 웹 페이지를 모바일 친화적으로 만듭니다.
구글 Amp의 공식 사이트는 https://amp.dev/입니다.
왜 AMP인가?
모든 사용자는 웹 사이트의 콘텐츠가 매우 빠르게 로드되기를 기대합니다. 그러나 페이지가 이미지, 비디오, 애니메이션, 소셜 위젯으로 거의 넘쳐 페이지가 매우 무거워져 로딩 시간이 늘어날 때는 그렇지 않을 수 있습니다. 이러한 시나리오는 장기적으로 웹 사이트에 대한 사용자의 손실을 초래할 수 있습니다.
구글 AMP는 이 문제를 해결하도록 설계되었습니다. AMP에는 이미지, iframe, 자바 스크립트, 광고, 동영상, 애니메이션, CSS, 글꼴로드 등을 처리하는 특별한 방법이 있습니다. AMP 페이지의 콘텐츠는 구글 측에 캐시되므로 사용자가 검색 결과를 클릭할 때마다 콘텐츠는 캐시에서 제공됩니다. 캐시 버전도 적시에 업데이트되므로 사용자는 항상 새로 업데이트된 페이지를 얻을 수 있습니다.
AMP를 선택해야 하는 이유
이 섹션에서는 사이트에 AMP를 선택해야하는 이유를 설명합니다.
구글 검색에서 우선 순위 지정
오늘날 구글에서 무언가를 검색할 때 페이지 상단에 구글 캐러셀이 표시되고 검색에 대한 응답으로 페이지 목록이 표시됩니다. 표시된 뉴스 캐러셀은 모두 유효한 AMP 사이트입니다. 즉, 구글은 amp 페이지에 우선 순위를 부여하고 뉴스 캐러셀의 순위에 따라 표시합니다.
다음은 "뉴스" 키워드로 구글에서 검색한 예입니다.
위의 이미지와 같이 AMP 페이지인 모든 상위 페이지는 구글 캐러셀에서 처음에 표시됩니다.
구글 AMP 페이지는 사용자가 Google 검색에서 무언가를 검색 할 때 아래와 같이 보입니다. AMP 페이지에는 구글 AMP 로고가 있습니다.
더 빠른 로딩 시간
페이지가 AMP로 변환되면 AMP가 아닌 페이지에 비해 로드 시간이 훨씬 더 좋습니다. 더 빠른 로드 시간은 구글 검색에서 페이지 순위를 결정하는 중요한 요소입니다.
팝업 없음
구글 AMP를 사용하면 사용자가 구글 AMP로 디자인 된 페이지에 대해 원치 않는 팝업이 표시되지 않으므로 즐거운 웹 브라우징 환경을 제공합니다.
트래픽 생성
페이지 로딩 속도가 빠르면 자동으로 방문자 수를 늘려 페이지 트래픽이 증가합니다.
AMP는 어떻게 작동하나요?
웹 사이트 구축에 사용되는 가장 중요한 구성 요소는 자바스크립트, 이미지, 동영상, 글꼴, CSS 등입니다. AMP 페이지 디자인은 이러한 모든 요소를 고유한 방식으로 처리하여 이루어집니다. 이 섹션에서는 페이지 속도를 높이기 위해 AMP가 정확히 무엇을하는지 간략하게 설명하겠습니다.
비동기 JavaScript
자바스크립트는 애니메이션, DOM 변경 등의 형태로 페이지에 상호 작용을 추가하는데 도움이 되므로 페이지에서 중요한 역할을 합니다. 또한 페이지에 속도를 추가하고 다른 콘텐츠가 페이지에서 렌더링되는 것을 차단할 수 있습니다.
AMP는 자바스크립트를 어떻게 다루나요?
AMP는 자바스크립트를 비동기적으로 로드합니다. 맞춤 자바 스크립트는 AMP 페이지 내에서 엄격히 허용되지 않습니다. AMP에는 많은 구성 요소가 추가되어 있으며 그 중 일부는 기존 html 태그를 대체합니다. 예 : amp-img, amp-iframe, amp-video, amp-lightbox, amp-animations 등.
이 컴포넌트 각각에 대해 스크립트 태그에 추가된 비동기 속성이 있는 로드할 자바스크립트 파일이 있습니다. amp-components와 관련된 자바스크립트 파일만 페이지에서 허용되며 AMP 페이지 또는 타사 자바스크립트 파일 내의 다른 자바스크립트는 허용되지 않습니다. AMP는 구글 AMP 캐시를 사용하므로 파일이 캐시에서 미리 로드되어 로드 속도가 빨라집니다.
HTML 태그의 크기
AMP 페이지가 리소스를 로드하지 않고도 페이지에서 공간을 찾을 수 있도록 이미지, iframe, 동영상 태그의 크기를 지정해야 합니다. 로드할 리소스는 amp 페이지에 의해 우선 순위가 지정됩니다. 콘텐츠는 로드할 리소스보다 우선 순위가 높습니다.
소셜 위젯 / 광고
AMP는 페이지에 표시될 소셜 위젯을 처리하기 위해 amp-facebook, amp-twitter, amp-ad, amp-sticky라는 특수 구성 요소를 제공합니다. AMP 광고 구성 요소는 페이지에 광고를 게재하는데 사용됩니다. AMP는 구성 요소 처리에 특별한 주의를 기울이고 요구 사항에 따라 우선 순위에 따라 콘텐츠를 로드합니다.
CSS
AMP 페이지에서는 외부 CSS가 허용되지 않습니다. amp-custom 속성을 사용하여 스타일 태그 내에 추가할 수 있는 경우 사용자 정의 CSS, 인라인 CSS도 허용됩니다. AMP는 가능한 모든 방법으로 http 요청을 줄입니다.
폰트
폰트는 amp 페이지에서 허용되며 글꼴 로드 우선 순위는 AMP에서 결정합니다.
애니메이션
AMP는 amp-animation 구성 요소를 지원하고 transition을 허용합니다.
위에 나열된 모든 사항을 고려할 때 AMP는 글꼴, 이미지, iframe, 게재할 광고 등에 대한 HTTP 요청에 대해 매우 특별한 주의를 기울입니다. 페이지 스크롤 없이 볼 수 있는 부분에 사용 가능한 리소스가 먼저 렌더링되고 나중에 스크롤없이 볼 수 있는 부분에 사용 가능한 리소스에 대한 우선 순위가 제공됩니다.
기타
구글 AMP 캐시는 캐시에서 콘텐츠를 가져올 때 콘텐츠를 더 빠르게 렌더링하는데 도움이 되는 또 다른 중요한 요소입니다.
게시자는 amp 및 non-amp 페이지의 두 사이트를 유지해야 합니다. 예를 들어 사이트의 주소가 https://www.mypage.com이라고 가정합니다. 그런 다음 데스크톱에 게재될 비 AMP의 내부 페이지는 https://www.mypage.com/news가 됩니다. 기기 또는 AMP의 경우 https://www.mypage/com/news/amp/입니다.
구글은 AMP와 비 AMP 페이지를 어떻게 식별하나요?
이제 Google이 AMP 및 비 AMP 페이지를 식별하는 방법을 살펴보겠습니다.
-
Google 검색이 페이지를 크롤링 할 때 html 또는
<html amp>또는<html ⚡>에서 amp가 발생하면 해당 페이지가 AMP 페이지임을 인식합니다. - 또한 구글이 AMP가 아닌 페이지를 발견하는 경우 먼저 AMP 페이지에 대해 알기 위해서는 AMP 및 비 AMP 페이지 모두에 대해 html 페이지의 헤드 섹션에 다음 링크 태그를 추가해야 합니다.
비 AMP 페이지의 페이지 URL :
<link rel="amphtml"
href="https://www.mypage.com/news/amp/myfirstnews_amp.html">
여기서 rel="amphtml"은 AMP가 아닌 페이지가 amp 버전을 가리 키도록
지정되어 Google이 플랫폼에 따라 올바른 페이지를 표시하도록 합니다.
amp-page의 페이지 URL :
<link rel="canonical"
href="https://www.mypage.com/news/myfirstnews.html">
여기서 rel="canonical"은 html의 표준 버전을 가리 키도록 amp
페이지에 지정되므로 Google은 플랫폼에 따라 올바른 버전을 표시합니다.
사이트에 amp 페이지가 하나만있는 경우에도 자신을 가리키는 rel="canonical"을 추가하는 것을 잊지 말아야 합니다.
<link rel="canonical"
href="https://www.mypage.com/news/amp/myfirstnews_amp.html">
다음은 amp 페이지를 가리키는 rel ="amphtml"및 표준 html 페이지를 가리키는 rel ="canonical"에 대한 참조를 보여줍니다.
구글 AMP의 기능
이 섹션에서는 Google AMP에서 사용할 수 있는 중요한 기능에 대해 설명합니다.
Amp 캐시
구글 Amp 캐싱은 amp에 추가된 핵심 기능 중 하나입니다. 순수 AMP 페이지를 제공하기 위해 프록시 기반 콘텐츠 전송 네트워크를 제공합니다. 모든 유효한 AMP 페이지에서 기본적으로 AMP 캐시를 사용할 수 있습니다. AMP가 아닌 페이지에 비해 페이지를 더 빠르게 렌더링하는데 도움이 됩니다. 현재 2개의 AMP 캐시 제공 업체가 구글에 있습니다. AMP 캐시 및 Cloudflare AMP 캐시. 사용자가 클릭하여 amp 페이지로 리디렉션되면 콘텐츠가 구글 캐시에서 제공됩니다.
Amp 구성 요소
Amp에는 다양한 목적으로 설계된 구성 요소 목록이 있습니다. 그중 일부는 다음과 같습니다.
- amp-img: amp 페이지에 이미지를 표시하는데 사용됩니다.
- amp-iframe: 페이지에 표시 할 외부 콘텐츠와 함께 iframe을 표시하는데 사용됩니다. 사용된 iframe은 샌드 박스 처리되어 있으므로 amp 페이지에 데이터를 표시하려면 권한이 필요합니다. 따라서 샌드 박스 속성에 대해 원본 간 세부 정보를 지정해야 합니다.
- amp-video: 페이지에 비디오를 표시합니다.
- amp-audio: 페이지에 오디오를 표시합니다.
- amp-datepicker: 페이지에 날짜 위젯을 표시하는데 사용됩니다. Amp를 직접 사용할 수 있으므로 타사 datepicker를 사용할 필요가 없습니다.
- amp-story: 페이지에 스토리를 표시합니다.
- amp-selector: 옵션 메뉴를 표시하는 amp 구성 요소로 사용자가 옵션을 선택할 수 있습니다. 표시되는 옵션은 텍스트, 이미지 또는 기타 amp 구성 요소일 수 있습니다.
- amp-list: CORS json 끝점을 호출하는 amp 구성 요소이며 json 파일의 데이터가 템플릿 내부에 표시됩니다.
Advertising
게시자의 수익은 페이지에 게재되는 광고에 전적으로 의존하기 때문에 광고는 게시자에게 매우 중요합니다. Amp는 페이지에 외부 자바스크립트를 추가하는 것을 허용하지 않지만 페이지에 광고를 게재하는 amp-ad라는 특수한 amp 구성 요소가 도입되었습니다.
게시자가 페이지에 게재하려는 광고 네트워크는 amp-ad가 지원되어야 합니다. 예를 들어 페이지에 doubleclick 광고를 게재하려면 doubleclick이 amp-ad 구성 요소를 사용하여 게재할 광고를 지원해야 합니다. 다음 코드는 doubleclick의 amp-ad 태그를 보여줍니다.
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/ad-layout">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>
Amp는 AMP 구성 요소와 html에서 개발된 순수 ampads 인 amphtmlads도 지원합니다. Amp는 페이지 하단에 표시되는 바닥 글 광고 인 amp-sticky-ads도 지원합니다. amp의 광고에 대한 자세한 내용은 amp 광고에서 설명합니다.
소셜 위젯
Facebook, Twitter, Instagram과 같은 소셜 위젯은 게시자 페이지에 표시되는 것이 매우 중요하여 페이지가 소셜 미디어에서 공유됩니다. AMP는 amp-facebook, amp-twitter, amp-instagram, amp-pinterest 등과 같은 AMP 구성 요소를 개발하여 페이지에서 사용되는 모든 중요한 소셜 미디어 위젯에 대한 지원을 확장했습니다.
Amp 미디어
페이지의 또 다른 중요한 구성 요소는 동영상을 표시하고 동영상 사이에 미드 롤 광고로 광고를 게재하는 미디어입니다. AMP는 amp-jwplayer, amp-youtube 등을 사용하여 이를 수행 할 수 있는 매체를 제공합니다. 페이지에 jwplayer, youtube를 표시하기 위해 추가 타사 파일을 로드할 필요가 없습니다.
Amp 애널리틱스
Amp 애널리틱스는 특정 페이지에서 데이터를 추적하는데 사용되는 AMP 구성 요소입니다. 페이지의 모든 사용자 상호 작용을 기록하고 저장하여 추가 개선 또는 비즈니스 목적을 위해 데이터를 분석할 수 있습니다.
Amp 애니메이션
Amp 애니메이션은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. IT는 최신 브라우저에서 잘 작동하는 animation, transition을 지원합니다. 애니메이션을 수행하기 위해 외부 CSS 라이브러리를 사용할 필요가 없으며 amp-animation 구성 요소를 사용할 수 있습니다.
Amp 레이아웃
AMP-Layout은 구글 amp에서 사용할 수 있는 중요한 기능 중 하나입니다. Amp Layout은 페이지가 로드될 때 깜박임이나 스크롤 문제없이 amp 구성 요소가 올바르게 렌더링되도록 합니다.
구글 AMP는 이미지에 대한 http 요청, 데이터 호출과 같은 다른 원격 리소스가 수행되기 전에 페이지에서 레이아웃 렌더링이 수행되는지 확인합니다. 레이아웃에 사용할 수 있는 속성은 모든 amp 구성 요소에 대한 width / height, responsive, fill, fixed 등과 같은 값이 있는 layout 속성, 리소스가 로드하는데 시간이 걸리거나 오류가있을 때 표시되는 placeholder 속성, 리소스에 오류가 있는 경우에 표시되는 fallback 속성입니다.
Amp 디스플레이 레이아웃
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 페이지는 가볍고 더 빠르게 로드됩니다.
- 구글은 구글 검색에서 AMP 페이지에 우선 순위를 부여합니다. AMP 페이지는 페이지 상단의 캐러셀 형식으로 나열됩니다. 더 높은 순위를 얻으려면 페이지를 AMP에 두는 것이 좋습니다.
- AMP 페이지는 콘텐츠가 반응형이고 추가 스타일링없이 모든 브라우저에서 잘 조정되므로 모바일 친화적입니다.
- AMP가 아닌 페이지에 비해 페이지 로드 속도가 빠르기 때문에 AMP 페이지에 대한 사용자 만족도가 높아져 대역폭과 모바일 배터리가 절약됩니다.
Amp 단점
Amp에는 다음과 같은 단점이 있습니다.- 게시자는 amp 및 non-amp 페이지에 대해 두 가지 버전을 유지해야 합니다.
- 사용자는 AMP가 아닌 페이지를 amp로 변환하는데 추가적인 노력을 기울여야 합니다. amp는 사용자 정의 자바스크립트 또는 외부 자바스크립트 로드를 지원하지 않으므로 amp에서 사용할 수 있는 모든 항목에서 동일한 작업을 수행해야 합니다.