블로그에 Astro를 선택한 이유
Next.js, Gatsby, Hugo 대비 Astro가 기술 블로그에 적합한 이유를 정리합니다.
후보 비교
기술 블로그 프레임워크를 고를 때 고려한 요소:
| 항목 | Astro | Next.js | Hugo | Gatsby |
|---|---|---|---|---|
| 빌드 속도 | 빠름 | 보통 | 매우 빠름 | 느림 |
| JS 번들 | 0KB (기본) | 큼 | 0KB | 큼 |
| 콘텐츠 타입 안전성 | Zod 스키마 | 직접 구현 | 없음 | GraphQL |
| 마크다운 DX | Content Collections | MDX 직접 설정 | 기본 내장 | 플러그인 |
| 학습 곡선 | 낮음 | 보통 | 보통 (Go 템플릿) | 높음 |
Astro를 선택한 결정적 이유
1. Zero JS by Default
블로그는 읽기 중심입니다. 인터랙션이 거의 없는 페이지에 React 런타임을 로드할 이유가 없습니다. Astro는 기본적으로 JavaScript를 전혀 보내지 않습니다.
2. Content Collections + Zod
const posts = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
category: z.enum(['빌드 로그', '운영 시스템', 'AI 에이전트', '데이터/측정', '회고/인사이트']),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(false),
}),
});프론트매터 오타나 누락을 빌드 시점에 잡아줍니다. 런타임 에러 대신 빌드 에러로 전환.
3. Island Architecture
필요한 곳에만 선택적으로 인터랙티브 컴포넌트를 넣을 수 있습니다. 검색 기능이나 댓글 위젯 같은 것을 나중에 추가할 때 유용합니다.
다음 글
프로젝트 구조와 Content Collections 설정 과정을 다룹니다.