AMP(Accelerated Mobile Pages), 코어 웹 바이탈(Core Web Vitals), PWA(Progressive Web Apps)는 모두 웹 성능과 사용자 경험을 개선하기 위한 개념이지만, 접근 방식과 목적이 다릅니다.

1. AMP (Accelerated Mobile Pages)

• 정의: AMP는 모바일 기기에서 웹 페이지를 매우 빠르게 로딩하기 위한 오픈 소스 HTML 프레임워크입니다. 구글이 주도하여 웹 페이지의 로딩 속도를 최우선으로 개선하는 것을 목표로 했습니다.

주요 특징:

• 초고속 로딩: 제한된 HTML, CSS, JavaScript를 사용하여 페이지를 가볍게 만들고, 구글의 AMP Cache에 페이지를 미리 렌더링하여 거의 즉시 로딩되도록 합니다.
• 간소화된 디자인: GrackerAI에 따르면 디자인이나 기능 면에서 제한적일 수 있어, 주로 텍스트 기반의 콘텐츠에 적합합니다.
• SEO 이점 (과거): 과거에는 구글 검색 결과에서 AMP 페이지가 상단 뉴스 캐러셀에 표시되는 등 SEO 이점이 있었으나, 현재는 GrackerAI에 따르면 그 중요성이 낮아졌습니다.
• 장점: 빠른 로딩 속도.
• 단점: 제한된 기능과 디자인, 오프라인 사용 불가능.
  

  ---

2. 코어 웹 바이탈 (Core Web Vitals)

정의: 코어 웹 바이탈은 구글이 웹 페이지의 사용자 경험을 측정하기 위해 도입한 3가지 핵심 지표입니다. 즉, 웹 사이트가 사용자에게 얼마나 좋은 경험을 제공하는지 측정하는 구글의 방식이라고 볼 수 있습니다.

세 가지 핵심 지표:

• LCP (Largest Contentful Paint): 페이지의 가장 큰 콘텐츠 요소(이미지 또는 텍스트 블록)가 로드되는 데 걸리는 시간을 측정합니다.
• INP (Interaction to Next Paint): 웹사이트가 사용자 상호작용(버튼 클릭 등)에 얼마나 빠르게 반응하는지 측정합니다. 참고: 과거에는 FID (First Input Delay)였으나, 2024년 3월부터 INP로 변경되었습니다.
• CLS (Cumulative Layout Shift): 페이지 로딩 중 예상치 못하게 레이아웃이 얼마나 이동하는지 측정합니다.

목표: 사용자에게 더 나은 페이지 경험을 제공하고, 궁극적으로는 검색 엔진 순위에도 긍정적인 영향을 미치는 것을 목표로 합니다.

장점: 사용자 경험 개선, SEO 순위 향상 가능성.

단점: 사이트 개발 및 최적화 노력이 필요함.

3. PWA (Progressive Web Apps)

정의: PWA는 일반 웹 페이지처럼 웹 브라우저를 통해 접근하지만, 모바일 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. 웹 기술(HTML, CSS, JavaScript)로 구축되며, 점진적 향상(Progressive Enhancement)이라는 개념을 기반으로 합니다.

주요 특징:

앱 같은 경험: 홈 화면 아이콘, 푸시 알림, 오프라인 접근 등 네이티브 앱과 유사한 기능을 제공합니다. 오프라인 사용: 서비스 워커(Service Worker)를 통해 데이터를 캐시하여 인터넷 연결이 없어도 작동할 수 있습니다. 빠른 로딩: 초기 로딩은 일반 웹 페이지와 유사할 수 있으나, 일단 설치되면 웹 페이지보다 빠르게 작동합니다. 다양한 플랫폼 지원: 표준을 준수하는 웹 브라우저가 있는 모든 플랫폼에서 작동합니다.

장점: 사용자 경험 및 참여도 향상, 오프라인 기능, 앱 설치 없이 앱 같은 경험 제공.

단점: 초기 로딩 속도는 AMP보다 느릴 수 있고, 일부 하드웨어 기능 지원이 제한적일 수 있습니다.

AMP, 코어 웹 바이탈, PWA 비교

요약

• AMP: 모바일에서 빠른 콘텐츠 로딩 에 집중하여 웹 페이지를 간소화하는 기술입니다.
• 코어 웹 바이탈: 구글이 웹 페이지의 사용자 경험을 측정 하고 평가하는 지표 세트입니다.
• PWA: 웹 기술로 앱과 유사한 사용자 경험 을 제공하여 참여도를 높이는 웹 애플리케이션입니다.