brunch

브런치북 생활속의 IT 기술 알아보기 15화

라이킷 9 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 테크유람 Sep 12. 2018

AMP(Accelerated Mobile Pages)

빠른 웹을 위한 오픈소스 프로젝트 - AMP

AMP는 무엇인가요?
AMP(Accelerated Mobile Pages)는 Google이 시작한 빠른 성능을 보장하는 웹 사이트를 만들어주는 오픈소스 라이브러리입니다. 기존의 웹 페이지 저작 기술을 그대로 사용하며, 다양한 브라우저에서 지원되고 있습니다.

구글이 이야기하는 AMP의 목적은 다음과 같습니다.

AMP (Accelerated Mobile Pages) 프로젝트는 퍼블리셔, 소비자 플랫폼, 제작자 및 유저 모두를 대상으로 모바일 생태계 전체를 개선해야 한다는 퍼블리셔와 기술 회사 간의 논의에서 시작한 오픈 소스 이니셔티브입니다. 최근의 콘텐츠는 매우 빠른 로딩과 손쉬운 탐색이 기대되고 있습니다만, 콘텐츠 로딩에 몇 초가 걸리거나 사용자가 느린 페이지를 포기해버림으로 인해 콘텐츠가 완전한 로딩이 전혀 이루어지지 않는 것이 현실입니다. AMP는 최대한 순식간에 로딩하기 위해 설계된 웹 페이지로 모두가 더 나은 모바일 웹으로 나아가기 위한 한걸음입니다.

AMP의 핵심 기능은 무엇인가요?

기본적으로 빠른 웹 페이지 렌더링을 위한 프론드 엔드 최적화 기술과 CDN 캐싱을 무료로 지원합니다.

웹 개발자는 AMP tag들을 HTML에 삽입하여 이 기술을 사용할 수 있습니다.

AMP는 어떻게 구성되어 있나요?
다음 3가지 핵심 컴포넌트로 구성되어 있습니다.

AMP HTML: AMP 페이지임을 선언하여 Google Bot으로 하여금 AMP 적용 여부를 확인하고, AMP 기술을 적용하게 만듭니다.

AMP JS: AMP JS 라이브러리는 AMP HTML 페이지의 빠른 렌더링을 보장합니다. AMP 사용자 지정 태그를 제공하고, 페이지의 빠른 렌더링을 만드는 역할을 합니다.

AMP Cache: AMP HTML 페이지를 가져와서 동적 콘텐츠를 캐싱하여 페이지 성능을 자동으로 개선해 줍니다. Google CDN과 CloudFlare CDN을 사용하며 기본적으로 HTTP/2를 지원합니다. 사용자는 자체 CDN을 사용할 수도 있습니다.

AMP의 대표적 프론트 엔드 최적화 기술은 무엇인가요?

비동기 JavaScript만 지원하여, DOM 생성과 페이지 렌더링에 악영향을 주는 원인을 원천 봉쇄합니다.

모든 리소스의 크기를 정적으로 지정: 이미지 광고, iframe, 웹 폰트 등의 외부 리소스 크기를 지정하며, 렌더링 속도와 순서를 제어합니다.

외부 리소스가 렌더링을 차단하지 않도록 함: Instagram과 같은 SNS 요소의 렌더링 방해가 없도록 합니다.

타사 JavaScript를 CRP(Critical Rendering Path)에서 제거: 주요 렌더링 경로에서 타사 JS를 제거하여, 빠른 렌더링에 방해가 없도록 합니다.

CSS 크기 한정 및 인라인 지원: CSS파일은 페이지당 1개만 지원하고, 크기를 50KB로 제한하며, 인라인 삽입합니다.

웹 폰트 다운로드: 웹 페이지 렌더링에 영향을 주는 무거운 웹 폰트 다운로드를 비동기 요청하여 CRP에 영향을 주지 않습니다.

GPU 가속 애니메이션만 실행: 애니메이션 웹 레이어는 GPU에서만 실행합니다. 리소스 로드 우선순위화: 각 리소스의 다운로드 순서를 지정하여, 가장 최적화된 웹 로딩을 지원합니다.

즉시 페이지 로드: Pre-connect API를 사용하여, HTML 내 동적 콘텐츠를 미리 로드합니다.

비동기 JavaScript만 지원하여, DOM 생성과 페이지 렌더링에 악영향을 주는 원인을 원천 봉쇄합니다.

왜 사용자들은 AMP를 선호하나요?

무료로 CDN을 제공합니다.

무료로 웹 사이트 성능 최적화를 지원합니다.

AMP가 적용된 웹 사이트는 Google 검색 순위에서 우선적으로 노출합니다.

무료로 웹 사이트 저작 도구 및 다양한 템플릿을 지원합니다. 5분이면 멋진 웹 사이트가 개발됩니다.

광고 플랫폼과 연계하여, 다양한 광고를 사용자 사이트에 쉽게 싣고 수익을 만들 수 있도록 지원합니다.

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

콘텐츠가 존재하는 CMS와 연동하는 플러그인을 제공하여 쉽게 콘텐츠를 적재할 수 있습니다.
현재는 다음의 CMS 플랫폼을 지원합니다.

이미 CDN을 사용 중인데 AMP가 필요한가요?

웹 사이트 동적 콘텐츠는 일반적인 CDN, 정적 콘텐츠는 AMP를 사용하는 사례가 있습니다.
실제로 아시아권에서도 Tencent, AliExpress, Rakuten 등이 사용 중입니다.

한국 기업들도 AMP를 사용하고 있나요?

스브스 뉴스, 중앙일보 등, 현재는 주로 언론사에서 사용하고 있고, 웹 에이젼시 등에서도 쉬운 웹 저작과 빠른 로딩 속도를 선호하여, 점점 사용자가 늘고 있는 추세입니다. 오픈소스다 보니, 무료인 것도 한 몫하고 있죠;;;

AMP를 적용하려면, 웹 페이지는 어떻게 구성하나요?
다음과 같은 커스텀 HTML 메타 태그를 사용하여 작성합니다

첫 번째 화살표의 번개 아이콘은 AMP를 사용하겠다는 의미이며, <link rel="amphtml" href="https://도메인 이름/"> 으로 대체할 수 있습니다. 두 번째 화살표의 JS파일은, AMP 기술 적용을 위한 스크립트이며, 이를 통해 페이지 전체에 AMP가 적용됩니다.

아래는 실제로 AMP를 적용한 텐센트 사이트의 HTML입니다.

AMP는 어떻게 별도의 CDN 구성 작업 없이 CDN을 적용할 수 있나요?

GoogleSearch(구글 검색)은 - 아마도 구글 봇? - <html amp> 태그를 발견하면, 유효한 AMP 페이지인지를 확인 후, 그 콘텐츠를 크롤링하여, AMP Cache에 캐싱을 하게 됩니다. 이렇게 캐시 된 AMP 페이지는 플랫폼(예 : GoogleSearch, GoogleNews 및 Cloudflare) 혹은 모바일 앱들에 의해 사용됩니다. 모바일 앱들은 URL이나 Progressive Web Apps의 cross-origin XHRs를 통하여, 캐시 된 콘텐츠에 접속하는 방식입니다. 이때 사용되는 CDN(AMP Cache) 도메인은 다음과 같이 구성됩니다.

<서비스 도메인>

www.example.com/images/img.jpg

www-example-com.cdn.ampproject.org/...AMP indicators.../images/img.jpg

<CloudFlare AMP Cache 적용된 CDN 도메인>

amp.cloudflare.com/..AMP Indicator../www.example.com/images/img.jpg

적용된 CDN은 HTTPS를 지원하나요?
Forbes의 예를 들면, 다음과 같이 CNAME이 되어 있습니다.

$ dig www-forbes-com.cdn.ampproject.org +short

cdn-content.ampproject.org.

해당 사이트를 접속해보면, 다음과 같이 SNI 방식의 Wildcard SAN 인증서를 지원하는 것으로 보입니다.

CDN 서버는 국내에도 PoP이 있나요?

KT, SKT, LG U+ DNS로 각각 *. cdn.ampproject.org 조회 시, 일본과 홍콩 리젼만 조회되는 것으로 보아 아직 한국은 배포가 안된 것 같네요. (만약 그렇다면, 곧 들어오겠죠;;)

왜 클라우드 관련 기술 인력들은 AMP에 대하여 알아야 합니까?

AMP와 일반적인 클라우드 최적화/CDN 서비스 중에 고민 중인 고객이 있다면, 각각의 옵션에 대한 장단점을 이해하고 올바른 가이드 제시가 필요합니다.

일반적인 Analytics나 DPM(Digital Performance Management) 제품들의 Beacon은 JS 파일이므로, AMP 적용된 페이지는 일반적인 방법으로 이를 적용할 수 없습니다.

왜 AMP가 적용된 웹 사이트에는 일반적인 방법으로 JS 적용이 어렵나요?

AMP는 위에서 설명한 대로, 외부 도메인의 JS 실행을 허락하지 않습니다. 또한 모든 JS는 비동기(async) 여야 하는데 대부분 3rd party JS들은 async가 아닙니다. AMP가 적용된 웹 페이지에 일반적인 JS 비콘을 삽입하면 다음과 같이 Validation 에러가 발생합니다. Validation이 실패된 페이지는 AMP의 기능을 상실하게 됩니다.

그럼 어떻게 다양한 JS 비콘 적용을 해야 하나요?
Google은 고맙게도(?) mPulse와 같은 Analytics 도구 적용을 위해 다음 element를 하나 만들어 주었습니다.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

응용하면, 다음과 같은 스크립트로 mPulse 적용을 할 수 있습니다.