목록으로
· 2분 읽기 · Tech

Astro로 블로그를 만든 이유

Next.js, Gatsby 대신 Astro를 선택한 기술적 근거와 개발 경험을 공유합니다.

왜 또 블로그를 만드는가

개발자에게 블로그는 학습을 구조화하는 가장 효과적인 도구입니다. 글로 정리하는 과정에서 막연했던 이해가 명확한 지식으로 변환됩니다.

프레임워크 비교

기준Next.jsGatsbyAstro
번들 크기큼 (React 포함)큼 (React + GraphQL)제로 JS 기본
빌드 속도보통느림빠름
학습 곡선중간높음낮음
콘텐츠 중심△○◎
Islands Architecture✕✕✓

Astro의 결정적 장점

1. Zero JavaScript by Default

Astro는 기본적으로 클라이언트 사이드 JavaScript를 전송하지 않습니다. 블로그처럼 대부분 정적 콘텐츠인 사이트에서 이는 엄청난 성능 이점입니다.

---
// 이 코드는 빌드 타임에 실행됩니다
// 클라이언트로 전송되는 JS는 0바이트
const posts = await getCollection('blog');
---
<ul>
  {posts.map(post => <li>{post.data.title}</li>)}
</ul>

2. Content Collections

타입 안전한 콘텐츠 관리 시스템이 프레임워크에 내장되어 있습니다:

// content.config.ts
const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

Zod 스키마로 frontmatter를 검증하기 때문에, 잘못된 메타데이터로 인한 빌드 에러를 컴파일 타임에 잡아낼 수 있습니다.

3. View Transitions 내장

ClientRouter 컴포넌트 하나로 SPA 같은 페이지 전환 효과를 얻을 수 있습니다. 별도의 라우터 라이브러리 없이도 네이티브 앱 수준의 사용자 경험을 제공합니다.

기술 스택 정리

  • 프레임워크: Astro 5.x
  • 언어: TypeScript (strict 모드)
  • 스타일링: Vanilla CSS (디자인 토큰 기반)
  • 콘텐츠: MDX (Content Collections)
  • 배포: Vercel / Cloudflare Pages

마무리

기술 선택에 정답은 없지만, 문제에 맞는 도구를 고르는 것이 엔지니어링의 핵심입니다. 블로그라는 콘텐츠 중심 사이트에 Astro는 최적의 선택이었습니다.