AMP(Accelerated Mobile Pages) 소개
구글 서치콘솔과 애드센스에 보면 AMP라는 단어가 등장합니다.
서치콘솔에서는 AMP는 별도로 더 빠르게 색인을 해줍니다. 검색시에 노출도 더 잘 시켜준다는 이야기까지 있습니다.
애드센스에서도 AMP용 광고 세팅 화면이 따로 있습니다.
그런데 정작으로 구글 블로그인 블로그스팟에서는 amp를 설정하는 메뉴가 없습니다.
이 AMP는 무엇일까요?
AMP는 HTML, CSS, JavaScript 사용을 제한하고 Google AMP 캐시를 통해 콘텐츠를 제공함으로써 페이지 로딩을 거의 즉시 가능하게 합니다. 이러한 구조는 특히 모바일 검색 환경에서 속도와 사용자 경험을 크게 향상시킵니다. 뉴스·콘텐츠형 사이트, 블로그, 정보 전달 중심 페이지에서 주로 활용됩니다.
그런데, 모바일 대응이라고 하니 반응형 테마가 떠오릅니다.
 |
| 구글 애드센스 AMP 적용화면 |
AMP와 반응형 테마의 차이
반응형 테마는 하나의 HTML/CSS로 PC·태블릿·모바일을 모두 지원합니다. 화면 크기에 맞춰 레이아웃을 조정하지만, 불필요한 리소스까지 로드하는 경우가 많아 속도가 AMP보다 느릴 수 있습니다.
AMP는 HTML 요소와 스크립트를 엄격히 제한해 가벼운 페이지를 제공합니다. 덕분에 모바일 로딩 속도가 매우 빠르지만, 디자인·기능 구현에 제약이 있습니다.
다만, 이런 요소의 제약때문에 전용페이지로 만들지 않으면 기능의 제한이 생길 수도 있습니다.
기존에 제가 워드프레스 블로그에서 AMP를 세팅해서 쓰다가 카카오애즈가 뜨지 않아 고생한 글을 올렸었습니다. : 워드프레스 카카오 애드핏 오류 해결 (심사보류 - SDK 미설치오류, Feat. AMP)
AMP vs 반응형 테마 비교
| 구분 | AMP 적용 | 반응형 테마 |
| 모바일 로딩 속도 | 1.1~1.5초 | 2.8~4.5초 |
| 구글 모바일 검색 가시성 | 뉴스 캐러셀·상단 노출 가능성 높음 | 일반 검색 결과만 가능 |
| SEO 점수(Core Web Vitals) | 90~100점 확보 쉬움 | 70~85점 수준 |
| 광고 로딩 속도 | 빠름 (광고 노출률 +5~10%) | 보통, 스크립트 지연 가능 |
| 디자인 자유도 | 제한 많음 | 높음 |
| 유지보수 편의성 | 낮음 | 높음 |
| 동적 기능 구현 | 제한적 | 자유롭게 가능 |
| 서버 부담 | 낮음 (Google 캐시) | 보통 |
AMP의 장점
- 모바일 페이지 로딩 속도 대폭 향상
- Google 검색 상단·뉴스 캐러셀 진입 가능성 증가
- Core Web Vitals 점수 향상으로 SEO 경쟁력 강화
- 광고·트래킹 코드 로딩 속도 개선
- Google AMP 캐시로 서버 부하 감소
AMP의 단점
- 커스텀 JS·CSS 사용 제한
- 일부 광고·위젯 호환 문제
- 디자인 표현 범위 제한
- AMP 버전과 일반 버전 동시 관리 필요 가능성
그런데, 정작으로 구글 블로그인 블로그스팟에서는 AMP를 직접 지원하지 않습니다!!
Blogger에서 AMP 적용 개요
전환 과정은 템플릿 준비, 구성 요소 치환, 검증, 검색 등록, 성능 모니터링 순으로 진행합니다. 정보성 콘텐츠는 AMP, 브랜딩·캠페인 페이지는 기존 반응형을 유지하는 것이 일반적입니다.
워드프레스에서는 플러그인 하나 깔면 되는데 복잡합니다
AMP 필수 구성 요소
- AMP HTML 선언 (<html amp>)
- 인라인 CSS 한정(75KB 이하)
- 필수 스크립트 로딩(<script async src=...>)
- 이미지·임베드 AMP 컴포넌트 사용 (amp-img, amp-youtube 등)
테스트용 AMP 최소 스켈레톤
<!doctype html>
<html amp lang="ko">
<head>
<meta charset="utf-8">
<title>AMP 테스트 페이지</title>
<link rel="canonical" href="https://example.com/post/test" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>body{font-family:sans-serif;line-height:1.7;color:#222;}.wrap{max-width:720px;margin:0 auto;}</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js"></script>
</head>
<body>
<main class="wrap">
<h1>AMP 테스트</h1>
<p>이 페이지는 AMP 유효성 검증 예시입니다.</p>
<amp-img src="https://via.placeholder.com/1200x630" width="1200" height="630" layout="responsive"></amp-img>
</main>
</body>
</html>
광고·애널리틱스 AMP 적용 예시
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-XXXXXXXXXX" data-ad-slot="YYYYYYYYYY" layout="responsive"></amp-ad>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": { "account": "G-XXXXXXXXXX" },
"triggers": { "trackPageview": { "on": "visible", "request": "pageview" } }
}
</script>
</amp-analytics>
검증 및 운영 팁
- AMP Validator로 모든 페이지 검사
- Google Search Console에서 AMP 보고서 확인
- PageSpeed Insights로 LCP·CLS·INP 모니터링
- 정보성 포스트 우선 AMP 적용, 성과 비교 후 확대
맺음말
빠른 로딩 속도와 SEO 향상은 오늘날 콘텐츠 경쟁에서 중요한 요소입니다. AMP는 이를 충족시킬 수 있는 효율적인 기술이지만, 모든 사이트에 무조건 적합한 것은 아닙니다. 브랜드 아이덴티티와 독창적인 UI/UX가 중요한 경우에는 반응형 테마가 더 나은 선택이 될 수 있습니다. Blogger 환경에서는 AMP를 전면 도입하기보다는, 정보성 콘텐츠 위주로 선택적으로 적용하는 전략이 현실적입니다.
기술적 구현 전에 사이트 목적과 운영 방식을 명확히 정하고, AMP와 반응형 각각의 장단점을 비교한 뒤 적용 범위를 결정하는 것이 가장 바람직합니다.
댓글 쓰기