아일랜드 아키텍처
Islands Architecture
정적 HTML 내에서 상호작용이 필요한 영역만 독립된 대화형 컴포넌트로 격리 렌더링하는 기법
콘텐츠 중심 사이트를 위한 프레임워크로 기본 제로 자바스크립트(Zero-JS) 렌더링 지향입니다. 정의와 상세 설명을 통해 기술적 원리를 이해하고, 비즈니스에 미치는 영향과 실무 적용 방법, 구현 시 고려할 주의사항을 관련 용어와 함께 확인하세요.
Astro Framework
아스트로는 ‘콘텐츠가 중심인 사이트는 대부분의 자바스크립트가 필요 없다’는 문제의식에서 출발해, 기본적으로 자바스크립트를 전혀 보내지 않고 필요한 컴포넌트에만 선택적으로 실행 코드를 주입하는 아일랜드 아키텍처를 채택했다. React, Vue, Svelte 컴포넌트를 한 프로젝트 안에 섞어 쓸 수 있는 프레임워크 무관(Framework-agnostic) 설계도 특징이다. 그 결과 Lighthouse 성능 점수에서 100점에 가까운 점수를 기본값으로 얻는 경우가 많아, 기술 블로그나 마케팅 사이트 리빌드 프로젝트에서 채택이 빠르게 늘고 있다.
필요한 UI만 JS를 로드하는 아일랜드 아키텍처로 압도적인 코어 웹 바이탈 지표 달성
에디토리얼 블로그와 테크니컬 SEO 최적화 사이트 제작에 최적
Islands Architecture
정적 HTML 내에서 상호작용이 필요한 영역만 독립된 대화형 컴포넌트로 격리 렌더링하는 기법
Core Web Vitals
로딩 속도(LCP) 시각적 안정성(CLS) 상호작용 응답성(INP)을 측정하는 구글의 핵심 성능 지표
Technical SEO
검색엔진이 웹사이트를 원활하게 크롤링 렌더링 색인할 수 있도록 인프라를 최적화하는 분야
Headless Content Management System
콘텐츠 관리 백엔드와 프론트엔드 UI를 분리하고 API를 통해 콘텐츠를 서빙하는 아키텍처
Decoupled Architecture
백엔드와 프론트엔드가 독립된 레이어로 분리되어 API로만 통신하는 소프트웨어 구조
JavaScript APIs and Markup
클라이언트 JS와 재사용 API 및 사전 빌드된 마크업으로 웹을 구성하는 아키텍처