헤드리스 CMS & 모던 웹 아키텍처

Astro Framework

아스트로는 ‘콘텐츠가 중심인 사이트는 대부분의 자바스크립트가 필요 없다’는 문제의식에서 출발해, 기본적으로 자바스크립트를 전혀 보내지 않고 필요한 컴포넌트에만 선택적으로 실행 코드를 주입하는 아일랜드 아키텍처를 채택했다. React, Vue, Svelte 컴포넌트를 한 프로젝트 안에 섞어 쓸 수 있는 프레임워크 무관(Framework-agnostic) 설계도 특징이다. 그 결과 Lighthouse 성능 점수에서 100점에 가까운 점수를 기본값으로 얻는 경우가 많아, 기술 블로그나 마케팅 사이트 리빌드 프로젝트에서 채택이 빠르게 늘고 있다.

실무 적용 및 비즈니스 영향#

필요한 UI만 JS를 로드하는 아일랜드 아키텍처로 압도적인 코어 웹 바이탈 지표 달성

구현 가이드 및 주의사항#

에디토리얼 블로그와 테크니컬 SEO 최적화 사이트 제작에 최적

아일랜드 아키텍처

Islands Architecture

정적 HTML 내에서 상호작용이 필요한 영역만 독립된 대화형 컴포넌트로 격리 렌더링하는 기법

코어 웹 바이탈

Core Web Vitals

로딩 속도(LCP) 시각적 안정성(CLS) 상호작용 응답성(INP)을 측정하는 구글의 핵심 성능 지표

테크니컬 SEO

Technical SEO

검색엔진이 웹사이트를 원활하게 크롤링 렌더링 색인할 수 있도록 인프라를 최적화하는 분야

헤드리스 CMS

Headless Content Management System

콘텐츠 관리 백엔드와 프론트엔드 UI를 분리하고 API를 통해 콘텐츠를 서빙하는 아키텍처

디커플드 아키텍처

Decoupled Architecture

백엔드와 프론트엔드가 독립된 레이어로 분리되어 API로만 통신하는 소프트웨어 구조

잼스택

JavaScript APIs and Markup

클라이언트 JS와 재사용 API 및 사전 빌드된 마크업으로 웹을 구성하는 아키텍처