Google AMP란? ⚡ 구글 번개 표시 ⚡ 알아보기

구글 검색 결과에서 이 번개 표시는 무엇일까요? 이 번개 표시는 Google의 AMP 프로젝트 로고로, 빠른 모바일 웹 페이지라는 Google 인증 배지 입니다. AMP 프로젝트 로고가 번개 모양인 이유가 있습니다. 실제로 AMP 페이지는 번개처럼 빠르기 때문입니다.

이 포스팅에서는 다음을 살펴볼 것입니다.

• AMP 페이지는 어떤 모습일까?
• Google이 AMP를 만든 이유는 무엇일까?
• AMP는 모바일 웹 성능 문제를 어떻게 해결할까?
• AMP는 필요한가?

 

AMP 페이지는 어떤 모습일까?

가끔 AMP 페이지는 AMP가 아닌 페이지와 구별할 수 없습니다. 겉으로 보기에는 일반적인 웹사이트와 다를게 없습니다. 그러나 AMP 페이지는 검색 결과에서 클릭하는 즉시 로드되어 빠른 속도로 표시됩니다. 이와 관련된 실제 적용 사례를 몇 가지 살펴보고 AMP로 구현할 수 있는 다양한 요소들의 종류를 살펴보겠습니다.

AMP는 빠른 소식을 전하는 것이 목표인 뉴스 사이트에서 주로 사용되어 왔습니다. 다음은 영국의 신문사인 가디언 (The Guardian)이 AMP를 사용하고 있는 모습입니다. 데스크톱이 아닌 모바일 보기에 AMP 페이지가 적용되어 있습니다.

The Guardian의 AMP

햄버거 메뉴를 클릭하면 사이드 바에서 애니메이션이 활성화되고 사이드 바 메뉴를 클릭하면 아코디언 메뉴가 아래로 열립니다. AMP 페이지이지만 일반적인 뉴스 기사 페이지와 큰 차이는 없어보입니다.

The Washington Post의 AMP

다음은 미국의 신문사인 워싱턴 포스트 (The Washington Post)입니다. 워싱턴 포스트도 AMP 페이지를 채택했으며, 2018년부터 AMP 스토리로 뉴스를 제공하고 있습니다.

AMP 스토리는 모바일 화면을 가득 채워 옆으로 넘겨 볼 수 있는 웹 페이지입니다. 빠른 로드 속도 뿐만 아니라 사용자의 시각적인 몰입 효과가 뛰어난 것이 장점입니다.

 

한국의 뉴스 사이트들도 발 빠르게 AMP를 도입하였습니다. 그 중 연합뉴스는 국내 AMP 얼리어답터이며, 스마트폰으로 구글 검색창에 연합뉴스를 검색하면 손쉽게 AMP 페이지를 찾아볼 수 있습니다.

기본적인 뉴스 기사 콘텐츠는 가로로 스크롤되는 캐러셀에 내에 포함됩니다. 아래의 사진과 같이 캐러셀의 각 항목에는 이미지 및 텍스트 요소로 구성되어 있습니다.

연합뉴스 일반 캐러셀의 모습

연합뉴스 AMP 캐러셀의 모습

AMP가 적용된 AMP 캐러셀은 우측 상단에 번개 아이콘이 생성된다는 것이 일반 캐러셀과 차이점입니다. 또한 AMP 캐러셀은 검색 결과 최상단에 노출되며 일반 캐러셀은 그 아래에 위치합니다.

 

앞서 소개된 예시들은 AMP가 사용자와 상호 작용하고 다양한 기능을 구현하고 있음을 보여줍니다. AMP 페이지는 애니메이션 메뉴, 아코디언 메뉴, 캐러셀, 이미지 갤러리, 라이트 박스, 동영상 삽입 등을 구성할 수 있습니다. 또한 전용 애널리틱스 및 애드센스 광고를 지원하며, 가상 현실(VR) 구성 요소도 개발 중에 있습니다.

 

더 빠른 모바일 웹, AMP

웹 성능은 오늘날 대부분의 웹 개발자들에게 중요합니다. 페이지가 로드되는 동안 진행률 표시줄과 회전하는 스피너를 보고 기다리는 것을 좋아하는 사람은 없습니다. 최근 Google Pagespeed Insight, webpagetest.org, mobiReady.com 등과 같은 웹 성능 향상 및 최적화 서비스는 빠른 로드 속도에 대한 많은 관심을 유도합니다. 모바일에서 웹 성능 향상이 중요한 이유가 무엇일까요?

 

모바일에서 성능이 중요한 이유

지난 몇 년 동안 웹 성능과 사용자 참여의 관계가 매우 중요하다는 꾸준한 데이터 흐름이 나타났습니다. 예를 들어 다음과 같습니다.

• 월마트(Walmart)는 페이지 로드 시간이 1초 감소할 때마다 페이지 전환이 2% 증가한다는 사실을 발견했습니다.
  (slideshare.net/devonauerswald-walmart-pagespeedslide)
• 아마존(Amazon)은 페이지 로딩 지연 시간이 100ms 증가하면 매출이 1% 감소한다고 보고했습니다.
  (blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/)
• 버락 오바마의 미국 대선 캠페인 사이트는 페이지 속도가 60% 증가하면서 기부금이 14% 증가했습니다.
  (kylerush.net/blog-meet-the-obama-campaigns-250-million-fundraising-platform)
• Google 검색 페이지 생성 시간이 0.5초 더 길어지면 트래픽이 20% 감소하는 것으로 나타났습니다.
  (glinden.blogspot.gr/2016-11-marissa-mayer-atweb-20.html)

분명히 웹 성능은 페이지 전환에 영향을 미칩니다. 정확한 수치는 연구마다 다르겠지만, 이 주제에 대한 대부분의 연구 결과에서 페이지 로드 시간이 증가함에 따라 이탈률이 증가하고 전환율이 감소함을 확인할 수 있습니다. 만약 자신의 사이트가 다른 사이트들보다 더 느리다면 검색 엔진 상위 노출 경쟁에서 밀려날 것입니다.

 

모바일 기술의 발전은 웹 사이트를 빠르게 만들지 않는다.

모바일 기술이 향상되면 성능 문제가 저절로 해결될 것이라는 생각이 일반적입니다. 겉으로 보면 이것은 합리적인 가정인 것 같습니다. 아이폰이 공개된 지 15년이 지났습니다. 그 당시에는 2G 네트워크 연결과 412MHz ARM CPU 만으로 사람들에게 인터넷 웹을 제공했었습니다. 오늘날 가장 최근 iPhone 모델에는 CPU 클럭 속도가 GHz이고 5G LTE가 적용된 Apple의 A15 칩이 제공됩니다. 또한 최신 안드로이드 기기에는 옥타 코어 CPU가 실행됩니다.

이러한 발전으로 우리 주머니 속의 모바일 기기는 확실히 슈퍼컴퓨터로 진화했습니다. 모바일 웹 성능은 확실히 이 작은 슈퍼컴퓨터에게는 문제가 되지 않습니다만. 그렇다면 왜 지금 AMP가 필요할까요?

안타깝게도 이러한 기술의 발전이 항상 성능 향상으로 이어지는 것만은 아닙니다. 여기엔 여러 가지 이유가 있습니다.

1. 성능 격차가 점점 더 심해지고 있습니다.
   더 빠르고 더 나은 모바일 기기가 매달 출시되고 있지만 일부 사용자들만 최신 기기를 사용하게 됩니다. 나머지 대중들은 오래되고 느린 장치에 의존하고 있습니다. Device Atlas의 최근 연구에 따르면 아이폰 3G가 여전히 웹 검색에 사용되고 있습니다. 이는 평균적으로 저가 보급형 기기와 최신 고급형 기기 간의 성능 격차가 커지고 있다는 의미입니다.
2. 모바일 기술은 물리적으로 한계가 있습니다.
   스마트폰의 사양이 전부는 아닙니다. 모바일 장치에는 냉각 기능을 하는 장치가 없기 때문에 플라스틱, 배터리, 전자 부품 및 스크린 화면을 통해 열을 방출해야 합니다. 더 빠른 CPU는 더 뜨겁습니다. 너무 뜨거워지면 코어를 차단하고 속도를 줄여야 합니다. 따라서 사용자가 가장 최신 아이폰과 최신 안드로이드 기기를 가지고 있다고 하더라도 필요할 때 모든 코어를 실행한다는 보장은 없습니다.

기술이 발전했음에도 불구하고 웹 페이지에 세심한 주의를 기울이지 않으면 모바일 환경에서 느리고 불편해질 수 있습니다.

Google AMP는 최신 기술과 빠른 네트워크가 모바일 성능 문제를 해결하지 못할 것이라는 인식때문에 만들어졌습니다. 웹 사이트는 더욱 발전할 것이고 웹 성능은 AMP처럼 다른 방향의 기술 개발로도 해결될 수 있습니다.

 

Google이 AMP를 만든 이유는 정확히 무엇일까?

Google도 하나의 회사이고 사업입니다. 따라서 Google의 활동 이면에는 대부분 비즈니스 압력이 있으며 AMP 프로젝트도 예외는 아닙니다.

• Facebook 인스턴트 아티클 및 Apple 뉴스.
  AMP가 발표되기 몇 달 전에 페이스북과 애플 뉴스는 유사한 기술을 출시했습니다. Google은 이들을 콘텐츠를 놓고 경쟁하는 싸움에서 새로운 위협으로 간주했을 것입니다. AMP는 개방형 웹 프로젝트지만, 페이스북과 애플은 뉴스와 같은 정적 콘텐츠 제공에 초점을 맞춘 폐쇄적인 인 앱 서비스입니다. 실제로 AMP는 원래 이러한 기술에 대한 직접적인 대응이었지만 지금은 AMP가 지원하는 콘텐츠의 범위가 이들의 역량을 넘어섰습니다.
• Google의 광고 기술.
  Google은 광고로 많은 돈을 벌고 있습니다. 애드 블록(add-blocker)이 일반화되고 심지어 브라우저에서 애드 블록 기능을 함께 제공할 정도로 광고는 페이지 속도를 늦추는 것으로 악명 높습니다. 사람들이 광고를 차단하거나 광고를 보지 않고 사이트를 떠나면 Google은 수익을 얻지 못합니다. Google이 AMP 광고처럼 사용자의 광고 경험을 개선할 수 있다면 광고 수익원에 대한 위협이 완화될 것입니다.

AMP 프로젝트는 더 빠른 웹 사이트에 대한 요구, 경쟁사의 위협에 대한 대응, 광고 수익 유지의 필요성에서 탄생했습니다. 성능은 이러한 모든 이유를 뒷받침하며 AMP는 웹 성능을 사람들에게 제공하는 것입니다.

 

웹 페이지 성능이 느린 이유는 무엇일까?

웹 개발은 제대로 하기가 어렵습니다. 웹 기술은 복잡하고 웹 서버와 사용자의 장치 사이에는 성능 저하에 원인이 될 수 있는 수많은 요소들이 존재합니다.

네트워크 품질 또는 장치의 등급같이 제어할 수 없는 몇 가지 사항들도 있지만 웹 성능에 영향을 미치는 많은 것들이 있습니다. 가장 중요한 요소로는 페이지의 크기, 리소스 로드, HTTP 요청 수, 느린 자바스크립트 등이 있습니다.

• 페이지 크기.
  2018년, mobiForge (mobiforge.com)는 2.3MB의 웹 페이지 평균 크기가 PC 게임의 DOM 만큼 커졌다는 통계를 보고했습니다. 웹 페이지의 크기가 3D 그래픽 엔진을 갖춘 게임의 크기와 같아진다면 문제가 발생합니다. 이미지, 비디오, 광고 및 타사 라이브러리를 포함한 많은 것들이 페이지 크기에 영향을 미칠 수 있습니다.
• 리소스 로드.
  페이지가 리소스 로드되는 순서는 페이지 성능에 큰 영향을 미칠 수 있습니다. 리소스를 로드하는 쉬운 방법은 페이지가 로드 될 때 모든 리소스를 다운로드하는 것입니다. 하지만 이렇게 되면 다운로드와 렌더링 하는데 CPU가 낭비되고 사용자가 볼 수 없는 항목이 생깁니다. 더 효율적인 접근 방식은 필요할 때만 항목을 로드하는 것입니다.
• HTTP 요청 수.
  웹 페이지의 각 외부 리소스를 가져오기 위해서는 HTTP 요청이 필요합니다. HTTP 요청은 특히 모바일에서 느립니다. CSS와 이미지를 인라인 스타일로 작성하고 외부 리소스를 더 적게 포함한다면 HTTP 요청을 줄일 수 있습니다.
• 느린 자바스크립트.
  오늘날, 우리는 자바스크립트 라이브러리로 거의 모든 작업을 할 수 있습니다. 자바스크립트 라이브러리를 사용하는 것이 그 어느 때보다 쉬워졌습니다. 그러나 이로 인해 라이브러리들이 모바일 페이지를 느리게 하고 응답하지 않게 하는 문제를 야기합니다.

 

AMP는 모바일 웹 성능 문제를 어떻게 해결할까?

웹 성능 저하의 원인이 되는 요소에는 여러 가지가 있습니다. AMP는 이러한 웹 성능 문제를 해결하고 페이지를 즉시 제공할 수 있습니다. AMP는 특정 성능을 보장하기 위해 개발자들이 반드시 따라야 하는 제한 사항이 존재합니다.

 

빠른 AMP를 위한 최적화

• 자바스크립트
  모든 자바스크립트는 비동기식으로 로드되고 제한됩니다. 대부분의 자바스크립트가 허용되지 않습니다. (렌더링을 방해하지 않는 경우 자바스크립트를 사용할 수 있습니다.)
• 정적 리소스 크기 조정
  이미지, 비디오, 광고와 같은 외부 리소스는 크기를 정적(static)으로 지정해야 합니다. 즉, AMP는 페이지를 다운로드하기 전에 모든 요소의 위치와 페이지 레이아웃을 계산할 수 있음을 의미합니다.
• 인라인 CSS 및 제한 사항
  CSS는 AMP 페이지 head에 인라인으로 작성해야 하며 페이지 당 75KB로 제한됩니다. 또한 일부 CSS 사용이 제한됩니다. (* 전체 선택자, not 선택자, filter 속성, !important 선언) 또한 오직 GPU 가속 애니메이션과 전환만 허용됩니다. 만약 GPU가 효과를 처리할 수 없는 경우 브라우저가 필요한 속성을 대신 계산해야 하기 때문에 페이지 렌더링 속도가 느려집니다. 특별하게 transform 속성과 opacity 속성만 애니메이션으로 사용할 수 있습니다.
• 웹 폰트
  웹 폰트는 허용되는 제공사의 폰트만 사용할 수 있습니다.
• 최적화된 리소스 로드
  AMP는 브라우저에서 리소스 다운로드를 제어합니다. 스크롤 없이 볼 수 있는 내용과 사용자가 볼 수 있는 내용만 가져옵니다.
• 효율적인 pre-rendering
  가능하면 AMP는 백그라운드에서 사전에 미리 로드됩니다.

 

AMP의 이점

AMP를 사용하면 많은 이점이 있습니다.

1. 첫 번째는 가장 큰 웹 성능 문제를 해결하므로 페이지가 더 빨리 로드됩니다. 페이지 속도는 사용자의 참여에 영향을 미치므로 페이지가 더 빠르다는 것은 방문자의 참여도가 더 높다는 것을 의미합니다. 따라서 AMP를 구현하면 페이지 전환율이 증가할 가능성이 높습니다.
   • The Guardian은 자사의 AMP 트래픽이 AMP가 아닌 모바일 트래픽을 추월했으며 관련 콘텐츠에서 클릭률이 8.6% 더 높았다고 보고했습니다.
   • LinkedIn은 AMP가 아닌 페이지보다 AMP 페이지에서 머무른 시간이 10% 증가했다고 보고했습니다.
   • Gizmodo는 모바일 페이지 속도가 3배 증가하고 노출 수는 50% 증가했다고 보고했습니다.
   • Womp Mobile은 AMP 페이지에서 전환율이 105% 증가했으며 이탈률은 31% 감소했다고 보고했습니다.
2. 다음은 AMP 캐시입니다. 페이지가 유효한 AMP 페이지이면 AMP 캐시에 자동으로 추가되며 성능이 더 향상됩니다.
3. 그다음은 AMP 번개 마크⚡입니다. 페이지의 유효성이 확인되면 구글 검색 결과에서 AMP 번개 배지를 부여합니다. 이 번개 배지를 사용하면 사용자가 링크를 클릭할 때 페이지 로드 속도가 빠르다는 확신을 가질 수 있습니다.
4. 마지막으로 AMP Top Stories Carousel이 있습니다. 앞서 연합 뉴스 검색 결과에서 살펴본 것처럼 가로로 스크롤 할 수 있는 캐러셀 입니다. Google 검색 결과 페이지 상단에 이미지와 함께 눈에 잘 띄게 표시됩니다. 따라서 Google은 AMP가 검색 상단에 노출되는 인덱싱 알고리즘이 따로 없다고 말했지만, 검색 결과에 AMP 캐러셀이 포함되는 것은 분명히 SEO에 이점이 있습니다.

 

AMP 채택

AMP는 2015년 8월에 처음 발표되었으며, 2016년 2월에 출시되었습니다. 처음에는 Google 검색 결과에서 AMP 결과는 AMP 캐러셀로 제한적으로 표시되었습니다. 하지만 한 달 뒤인 2016년 3월, AMP의 검색 결과는 정상적인 검색 결과와 함께 노출이 되기 시작했습니다. 이후 AMP는 웹 사이트 게시자와 검색 엔진 사이에서 대규모로 채택되었습니다. 채택 규모가 뚜렷해진 2017년 3월, 첫 번째 AMP 콘퍼런스가 개최되었고 이때 이미 AMP는 세계에서 가장 큰 웹 컴포넌트 라이브러리로 알려졌습니다.

글을 쓰는 지금 이 시점에도 핀터레스트 및 텀블러 같은 거대한 웹 서비스에서 수십억 개의 AMP 페이지가 생성되고 있습니다. Bing도 AMP 프로젝트에 구글과 협력하고 있으며, 1년 만에 AMP 채택률이 8%에서 62%로 증가한 것으로 알려졌습니다. 중국의 검색 엔진 양대 산맥인 Baidu와 Sogou도 AMP를 채택했으며, Yahoo Japan도 또한 가입했습니다. 이러한 AMP 채택으로 AMP 페이지에는 수십억 명의 잠재 고객이 존재합니다.

 

그러면, AMP가 필요하나요?

AMP 콘퍼런스 패널 중 한 명인 Jeremy Keith는 다른 패널에게 왜 자신의 사이트에 AMP를 구현했는지에 대한 질문을 받았고, 긴 고민 끝에 그 는 AMP가 RSS 같은 또 다른 배포 형식이라고 말했습니다.

그가 말한 것처럼 AMP는 RSS 같은 또 다른 배포 형식으로 생각할 수 있습니다. RSS가 대중들에게 배포된 것과 같이 AMP의 도달 범위를 극대화하려면 가능한 한 많은 유통 채널을 수용해야 합니다.

Google, Bing, Baidu 및 Sogou를 포함한 전 세계에서 가장 큰 검색 엔진들이 검색 결과에 AMP 페이지의 색인을 생성하고 표시하고 있습니다. 그곳엔 수십억의 잠재 고객이 있습니다. AMP 캐러셀에 당신의 콘텐츠가 포함되어 있다면 더 많은 시선을 사로잡을 것입니다.

Malte Ubl은 영국의 신문사인 가디언의 일반 모바일 웹 사이트가 AMP 페이지보다 빠르다고 보고했습니다. 그렇다면 가디언이 AMP를 구현 한 이유는 무엇일까요? 이미 더 빠른 모바일 사이트를 가지고 있음에도 불구하고 AMP 캐시와 즉각적인 사전 렌더링을 통해 성능 향상을 이룰 수 있기 때문입니다. 경쟁사가 AMP를 사용하고 있고 AMP 캐러셀에 포함하여 우위를 차지하고 있다면 AMP를 구현해야 할 가치가 있다는 것이겠죠.

궁극적으로 사이트가 제대로 작동하지 않고 이것이 사용자의 참여나 수익에까지 영향을 미치는 경우 이를 해결해야 합니다. AMP는 성능 향상에 관한 것이므로 해결책이 될 수 있습니다. Guardian처럼 수작업으로 만든 더 빠른 모바일 사이트가 있더라도 AMP를 채택함으로써 얻을 수 있는 이점이 분명히 있습니다.