AMP란 무엇인가요? 귀하의 궁극적인 가이드

매 순간이 중요한 세상에서 웹 페이지 로딩 속도는 긍정적인 사용자 경험을 만드는 데 중요한 역할을 합니다.

더 많은 사용자가 모바일 브라우징으로 전환함에 따라 더 빠르고 원활한 온라인 경험에 대한 요구가 계속 증가하고 있습니다.

이러한 요구를 해결하기 위해 Google은 주로 모바일 Google 검색 경험을 향상하고 웹 성능을 향상시키기 위해 설계된 AMP(Accelerated Mobile Pages)라는 오픈 소스 프로젝트를 주도했습니다.

이 기사에서는 이 AMP에 대해 자세히 살펴보겠습니다.

Accelerated Mobile Pages(AMP)란 무엇입니까?

AMP는 빠르게 로드되고 모바일에 최적화된 웹페이지를 만드는 데 전념하는 오픈 소스 HTML 프레임워크입니다. 기본적으로 AMP 페이지는 사용자 참여를 저해하지 않고 빠르게 콘텐츠를 제공하는 일반 웹페이지의 간단한 버전입니다. Google은 2016년에 처음으로 AMP 페이지를 도입했는데, 처음에는 검색 엔진 결과 페이지(SERP) 상단의 '주요 뉴스' 섹션으로 제한되었습니다.

AMP의 핵심 구성요소

AMP 프레임워크는 AMP HTML, AMP JavaScript(JS), AMP 캐시라는 세 가지 기본 구성요소를 기반으로 구축되었습니다. AMP HTML은 속도를 위해 설계된 HTML의 변형이고, AMP JS 는 모바일 페이지를 위한 효율적인 JavaScript 라이브러리이며, 콘텐츠 전송 네트워크(CDN)인 AMP Cache는 더 빠른 페이지 가져오기 및 로드를 가능하게 합니다.

AMP HTML

HTML의 하위 집합인 AMP HTML은 빠른 페이지 로드를 보장하기 위해 표준 HTML에 대한 일부 수정 및 제한 사항을 통합합니다. 웹 페이지 속도를 저하시키는 특정 요소와 속성이 제거되거나 변경되어 향상된 모바일 브라우징 경험에 기여합니다. 따라서 AMP 문서는 속도 중심 디자인을 유지하기 위해 특정 구조 지침을 준수해야 합니다.

AMP 자바스크립트(JS)

AMP 페이지 속도를 높이는 데 기여하는 AMP JS는 추가 JS 또는 타사 라이브러리 없이도 페이지 구축을 가속화하는 효율적인 프레임워크 및 구성 요소 라이브러리를 제공합니다. 과도한 JavaScript로 인해 페이지가 응답하지 않고 느려질 수 있는 경우 AMP의 JavaScript를 사용하면 페이지 속도를 빠르게 구성하고 유지할 수 있습니다.

AMP 캐시

페이지 로드 시간 측면에서 AMP 캐시는 획기적인 변화를 가져왔습니다. 사용자가 요청하기 전에도 AMP 페이지를 미리 가져오고 미리 렌더링하는 프록시 기반 CDN입니다. AMP 캐시에는 두 가지 주요 공급자가 있습니다.

• Google AMP 캐시: AMP 형식을 사용할 때 페이지를 저장합니다.
• Bing AMP 캐시: Google과 마찬가지로 Bing도 AMP 캐시 기능을 지원합니다.

AMP가 웹 성능을 어떻게 향상시키는가?

AMP는 JavaScript의 비동기 실행, 리소스의 정적 크기 조정, 확장 메커니즘, 글꼴 트리거링, 스타일 재계산 및 애니메이션 트리거링에 우선순위를 두어 웹 성능을 크게 최적화합니다. 이러한 부지런한 전략은 신속하고 원활한 모바일 브라우징 경험을 보장하여 사용자가 웹사이트에 더 많이 참여하고 더 많은 콘텐츠를 소비하도록 장려합니다.

JavaScript의 비동기 실행

AMP는 JavaScript의 비동기 실행을 사용하여 요소가 페이지 렌더링을 방해하지 않도록 합니다. AMP 구성 요소로 지정된 모든 맞춤 JavaScript는 성능 저하가 전혀 발생하지 않도록 설계되었습니다. 이러한 방식으로 스크립트는 페이지 렌더링을 차단하거나 지연하지 않아 더 빠르고 효과적인 성능을 제공합니다.

정적 리소스 크기

AMP HTML의 고유한 기능 중 하나는 모든 리소스에 대한 명시적인 크기에 대한 요구 사항입니다. AMP는 리소스가 로드되기 전에 각 요소의 크기와 위치를 계산하여 빠른 페이지 레이아웃을 렌더링합니다.

확장 메커니즘 및 렌더링

AMP의 효율적인 확장 메커니즘을 사용하면 추가 HTTP 요청이 있어도 페이지 렌더링이 차단되지 않습니다. 이 기능은 웹페이지의 전반적인 렌더링 속도와 성능을 향상시킵니다. 동적 콘텐츠를 허용하는 AMP는 예측 가능한 로딩을 위한 사용자 정의 태그를 표시하여 속도 저하 없이 이러한 확장을 구현합니다.

효율적인 글꼴 트리거링 및 스타일 재계산

AMP의 강력한 기능 중 하나는 효율적인 글꼴 트리거 메커니즘에 있습니다. HTTP 요청 없이 글꼴 다운로드의 우선순위를 지정하면 렌더링 프로세스 속도가 빨라집니다. 또한 AMP는 스타일 재계산도 최소화합니다. DOM 쓰기 전에 모든 DOM(문서 개체 모델) 읽기가 실행되도록 함으로써 이를 달성하므로 각 프레임에 대해 시간이 많이 소요되는 스타일 재계산을 줄입니다.

AMP 사용의 장점

모바일 웹페이지에 AMP를 구현하면 다음과 같은 주요 이점을 얻을 수 있습니다.

• 빠른 로딩: AMP는 거의 즉시 로드되도록 페이지를 최적화하여 사용자 참여를 향상시킵니다.
• 간단한 구축 프로세스: AMP 페이지 구축은 간단하므로 기술 지식이 없는 사용자도 액세스할 수 있습니다.
• 모바일 사용자 경험: AMP는 모바일 우선 접근 방식으로 설계되어 모바일 사용자 경험을 향상합니다.
• 플랫폼 지원: Google 및 Bing을 포함한 주요 플랫폼은 AMP 형식을 지원하여 도달 범위를 확대합니다.
• 향상된 SEO: 빠르게 로드되는 AMP 페이지는 잠재적으로 검색 엔진 순위를 향상시켜 사이트에 더 많은 트래픽을 유도할 수 있습니다.

AMP의 한계 및 제약

AMP는 수많은 장점을 제공하지만 다음과 같은 제한 사항을 인식하는 것이 중요합니다.

• 디자인 제한 사항: AMP는 속도를 유지하기 위해 특정 디자인 제한 사항을 구현하므로 시각적 매력이 제한될 수 있습니다.
• JavaScript 제한사항: AMP 페이지에서는 맞춤 JavaScript가 허용되지 않습니다.
• 제한된 광고 태그: AMP 페이지는 페이지당 하나의 광고 태그만 허용하므로 잠재적으로 광고 도달 범위가 제한됩니다.
• 제한된 분석 추적: 타사 JavaScript에 대한 지원이 부족하면 특정 분석 추적 기능에 영향을 미칠 수 있습니다.

AMP를 구현하는 방법은 무엇입니까?

AMP 구현에는 AMP 페이지를 생성 및 검증하고 성능을 모니터링하는 작업이 포함됩니다. 특정 HTML 및 JavaScript 지침을 준수해야 할 뿐만 아니라 더 빠른 로딩 시간을 위해 AMP 캐시를 활용해야 합니다.

AMP 페이지 생성 및 검증

AMP 페이지를 만들고 검증하면 최적의 성능을 위해 필요한 표준을 충족하는지 확인할 수 있습니다. AMP 페이지는 이미지, 동영상, iframe과 같은 다양한 기능을 위한 특정 태그가 포함된 HTML을 사용하여 생성됩니다.

AMP 프로젝트 가이드라인을 준수하는지 확인하려면 AMP 페이지가 검증되었는지 확인해야 합니다. 오류를 식별하고 수정하려면 유효성 검사가 필수적이며, 페이지가 모바일 장치에서 원활하게 로드되어 사용자 경험을 향상시키는 데 기여합니다.

구조화된 데이터를 구현하면 검색 엔진 결과에서 AMP 콘텐츠의 표시가 향상될 수도 있습니다.

모바일 검색 결과는 AMP에 최적화된 페이지를 선호하여 가시성을 높이고 잠재적으로 검색 순위를 향상시킵니다. 웹 콘텐츠에 AMP를 도입하면 모바일 검색 결과와 사용자 경험에 큰 영향을 미칠 수 있습니다.

AMP 성능 모니터링 및 개선

AMP 성능을 모니터링하고 개선하려면 고급 기술을 활용하여 사용자 경험을 향상해야 합니다.

중앙값 로드 시간과 리소스 로드를 분석하는 것은 모바일 검색 결과와 검색 순위에 직접적인 영향을 미치기 때문에 매우 중요합니다.

웹 글꼴 최적화와 우수한 CSS 위생을 구현하면 페이지 로드 시간이 빨라지고 전반적인 모바일 경험에 긍정적인 영향을 미칩니다.

또한 성능 향상을 위해서는 AMP 캐시 기능을 최적화하고 HTTP 요청을 최소화하는 것이 필수적입니다. 효율적인 리소스 로딩을 보장하고 반응형 디자인을 구현함으로써 모바일 웹사이트는 모바일 검색결과에 대한 Google의 표준에 부합하는 높은 수준의 사용자 경험을 달성할 수 있습니다.

또한 정기적인 분석 모니터링을 통해 AMP 페이지의 성능에 대한 통찰력을 제공하여 기능과 속도의 지속적인 개선을 촉진합니다.

결론

모바일 우선 시대에 운영되는 기업을 위해 AMP는 사용자 경험을 향상하고 웹 성능을 개선하기 위한 필수 도구를 제공합니다.

모바일 웹페이지에 AMP를 구현하면 사용자에게 더 빠르고 원활한 브라우저 환경을 제공할 수 있을 뿐만 아니라 SEO 및 다중 플랫폼 지원 측면에서 AMP가 제공하는 이점을 활용할 수 있습니다. 그러나 모든 플랫폼과 마찬가지로 일련의 과제가 있습니다. 그럼에도 불구하고 신중한 계획과 구현을 통해 AMP의 이점은 단점보다 훨씬 큽니다.