목차6개 항목
출처와 참고
NAVER D2의 「AMP는 어떻게 웹 페이지의 성능을 높일 수 있나」와 Outsider의 「나는 AMP를 좋아하지 않는다.」를 바탕으로 재구성한 노트다.
AMP란
AMP(Accelerated Mobile Pages)는 2015년 Google이 시작한 오픈소스 웹 컴포넌트 프레임워크다. 지금은 OpenJS 재단 프로젝트다. 발상은 단순하다. 느려질 수 있는 일을 아예 못 하게 막으면 페이지가 빨라진다.
| 구성 요소 | 역할 |
|---|---|
| AMP HTML | 일부 태그·속성을 금지하고 <amp-img> 같은 커스텀 엘리먼트를 쓰게 한 HTML 부분집합 |
| AMP JS(런타임) | 자원 로딩 순서와 커스텀 엘리먼트의 레이아웃·렌더링 시점을 관리하는 라이브러리 |
| AMP 캐시 | 유효한 AMP 페이지를 가져가 저장·최적화해 주는 프록시 CDN(Google AMP Cache 등). 페이지와 자원을 한 출처에서 내려준다. Google 검색은 2026년 7월부터 캐시 대신 발행처의 AMP 페이지로 바로 보낸다 |
성능을 내는 규칙
AMP의 규칙은 브라우저 렌더링 과정의 병목을 하나씩 막는다.
| 규칙 | 막는 병목 |
|---|---|
| 작성자 JS 금지, 런타임과 컴포넌트 스크립트는 모두 비동기 | 파서 차단 스크립트 |
| 서드파티 JS는 샌드박스 iframe 안에서만 | 남의 코드가 메인 스레드·레이아웃을 붙잡는 것 |
CSS는 <head> 안 인라인 <style> 하나, 용량 상한(75KB) | 렌더링 차단 CSS 요청과 비대한 스타일 계산 |
| 이미지·광고·iframe은 크기(또는 비율)를 반드시 명시 | 자원이 도착하기 전에 레이아웃을 확정해 레이아웃 이동(CLS) 방지 |
| 확장 컴포넌트가 렌더링을 막지 않음 | 임베드 때문에 첫 렌더링이 늦어지는 것 |
| 측정(읽기)을 모은 뒤 변경(쓰기) | 강제 동기 레이아웃(레이아웃 스래싱) |
애니메이션은 transform·opacity만 | 레이아웃·페인트를 다시 도는 애니메이션 |
| 뷰포트 근처 자원 우선, 나머지는 지연 로딩하되 미리 받아 둠 | 화면 밖 자원이 대역폭을 뺏는 것 |
| 검색 결과에서 캐시로 미리 렌더링(첫 화면 자원만). Google 검색은 2026년 7월 이 경로를 접었다 | 클릭 후 대기 시간 |
규칙 대부분은 AMP가 아니어도 쓸 수 있는 일반 원칙이다. 자원 크기 명시는 CLS 최적화, 스크립트 배치는 스크립트·스타일 로딩 순서, 지연 로딩은 지연 로딩, 미리 연결·렌더링은 리소스 힌트에 있다.
커스텀 엘리먼트로 레이아웃을 쥔다
AMP 컴포넌트는 웹 컴포넌트의 커스텀 엘리먼트다. 런타임은 표준 생명주기 콜백 위에 buildCallback(자식까지 준비됨), layoutCallback(실제 렌더링), viewportCallback(뷰포트 진입·이탈) 같은 단계를 더해, 각 요소를 언제 받고 언제 그릴지를 스스로 스케줄링한다. 요소가 생성되는 순간 선언된 크기로 자리를 먼저 잡기 때문에 자원 없이도 레이아웃을 끝낼 수 있다.
비판
| 논점 | 내용 |
|---|---|
| URL 이원화 | 같은 문서가 원본 URL과 AMP(캐시) URL 두 개를 갖는다. 퍼머링크 개념과 어긋난다 |
| 모바일 전용 페이지로의 회귀 | 과거 m. 도메인처럼 기기별 별도 페이지를 만든다. 반응형 하나로 대응하는 흐름과 반대다 |
| 통제권 상실 | 캐시가 페이지를 대신 서빙해 원본 서버 방문이 줄고, 분석·광고·디자인 자유도가 런타임 규칙에 묶인다 |
| 검색 우대를 통한 사실상의 강제 | 한때 Google 뉴스 캐러셀이 AMP 페이지만 받았다. 기술 경쟁이 아니라 점유율로 채택을 밀었다는 반발을 샀다 |
| 기술적 새로움 부족 | 같은 결과를 CDN과 일반 최적화로도 낼 수 있다 |
이후 바뀐 것
- 과거에는 원본 URL 문제를 서명된 교환(Signed Exchanges, SXG) 으로 일부 풀었다(캐시에서 받아도 주소창에 원본 URL이 보였다). 2026년 7월 Google 검색은 AMP 뷰어·AMP 캐시·SXG 경로를 접고 사용자를 발행처의 AMP 페이지로 바로 보낸다. 그래서 URL 이원화와 캐시 서빙 문제는 검색 경로에서 사라졌다. 다음 페이지를 미리 받는 일은 Speculation Rules가 맡는다.
- 2021년 Google 검색의 페이지 경험 업데이트로 뉴스 캐러셀의 AMP 요구와 AMP 배지가 없어졌다. 순위 신호는 AMP 여부가 아니라 Core Web Vitals다(웹 성능 지표와 Lighthouse).
- 그래서 새 프로젝트는 AMP를 따로 만들기보다 같은 원칙을 원본 페이지에 적용해 지표를 직접 맞추는 것이 일반적이다. AMP는 이메일용 AMP 같은 특수 용도에 남아 있다.
정리
- AMP는 「느려질 수 있는 일을 금지하는」 제약 기반 성능 전략이다. 비동기 JS, 인라인 CSS, 자원 크기 명시, 합성 전용 애니메이션, 뷰포트 우선 로딩이 핵심이다.
- 이 원칙들은 AMP 없이도 그대로 쓸 수 있다.
- URL 이원화, 캐시가 서빙하는 구조, 검색 우대를 이용한 확산이 비판받았다. 검색 우대가 사라진 지금은 Core Web Vitals를 원본 페이지에서 맞추는 것이 기본이다.
관련 노트: 브라우저 렌더링 과정, 프론트엔드 성능 최적화, 웹 성능 지표와 Lighthouse, SEO 기초, 웹 컴포넌트