Astro | 콘텐츠 중심 제로 JS 웹 프레임워크

📖 상세 설명

Astro는 콘텐츠 중심 웹사이트를 위한 올인원 웹 프레임워크입니다. 2021년 Fred K. Schott가 설립한 Astro Technology가 개발했으며, "Ship Less JavaScript"를 모토로 최소한의 클라이언트 JavaScript만 전송합니다. 기본적으로 모든 JavaScript를 빌드 시 제거하고, 필요한 곳에만 선택적으로 추가하는 아일랜드 아키텍처를 채택합니다.

Astro의 핵심 철학은 "콘텐츠 우선(Content First)"입니다. 블로그, 문서 사이트, 마케팅 페이지처럼 콘텐츠가 중심인 사이트에 최적화되어 있으며, Markdown, MDX를 기본 지원합니다. 이미지 최적화, RSS 피드, 사이트맵 생성 같은 기능이 내장되어 있어 콘텐츠 사이트를 빠르게 구축할 수 있습니다.

Astro의 가장 독특한 특징은 프레임워크 무관성(Framework Agnostic)입니다. React, Vue, Svelte, Solid 컴포넌트를 같은 프로젝트에서 혼용할 수 있습니다. 컴포넌트는 빌드 시 HTML로 변환되고, 인터랙션이 필요한 부분만 client:* 디렉티브로 하이드레이션합니다.

실무에서 Astro는 Lighthouse 점수 100점을 쉽게 달성하며, SEO가 중요한 콘텐츠 사이트에서 인기입니다. 2023년 기준 주간 npm 다운로드 40만 회를 기록하고, Vercel, Cloudflare Pages 등 모든 주요 호스팅 플랫폼과 통합됩니다.

💻 코드 예제

---
// src/pages/blog/[slug].astro
// Astro 컴포넌트 - 프론트매터에서 서버 로직 실행
import Layout from '../../layouts/Layout.astro';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <time>{post.data.date.toLocaleDateString('ko')}</time>

    <!-- Markdown 콘텐츠 렌더링 -->
    <Content />

    <!-- React 컴포넌트 - 클릭 시에만 로드 -->
    <LikeButton client:visible postId={post.slug} />
  </article>
</Layout>

<!-- 인터랙티브 아일랜드 예제 -->
<Counter client:load />        <!-- 페이지 로드 시 즉시 하이드레이션 -->
<Comments client:visible />    <!-- 뷰포트에 보일 때 로드 -->
<Analytics client:idle />      <!-- 브라우저 idle 상태일 때 로드 -->

🗣️ 실무에서 이렇게 말하세요

💬 회의에서

"이 문서 사이트는 Astro로 만들면 좋겠어요. JavaScript 0KB로 시작해서 Lighthouse 100점 나오고, 기존 React 컴포넌트도 그대로 가져다 쓸 수 있어요. 콘텐츠 컬렉션 기능으로 MDX 관리도 편합니다."

💬 면접에서

"Astro는 Islands Architecture를 사용합니다. 페이지 대부분은 정적 HTML로 렌더링하고, 인터랙션이 필요한 컴포넌트만 client:visible 같은 디렉티브로 선택적 하이드레이션합니다. 이렇게 하면 JavaScript 번들 크기를 90% 이상 줄일 수 있어요."

💬 코드 리뷰에서

"이 컴포넌트는 client:load 대신 client:visible로 바꾸면 좋겠어요. 스크롤해야 보이는 영역이니까, 뷰포트에 들어올 때 하이드레이션하면 초기 로딩이 더 빨라집니다."

⚠️ 흔한 실수 & 주의사항

❌

고도로 인터랙티브한 앱에 사용

Astro는 콘텐츠 사이트용입니다. SaaS 대시보드, 실시간 협업 도구 같은 앱은 Next.js나 SvelteKit이 적합합니다.

❌

모든 컴포넌트에 client:load 사용

이러면 Astro의 장점이 사라집니다. client:visible, client:idle 등 적절한 디렉티브를 선택하세요.

✅

올바른 패턴

콘텐츠는 Astro 컴포넌트로, 인터랙션은 React/Vue 아일랜드로 분리하세요. View Transitions API로 부드러운 페이지 전환도 구현하세요.

🔗 관련 용어

📚 더 배우기

📄 Astro 공식 사이트 🎓 Astro 공식 문서 🐙 Astro GitHub 저장소