Astro란 무엇인가요?

Astro는 콘텐츠 중심의 빠른 웹사이트를 만들기 위한 웹 프레임워크입니다. 기본적으로 JavaScript를 최소화하여 뛰어난 성능을 제공합니다.

Astro로 블로그를 만드는 데 얼마나 걸리나요?

기본 구조는 몇 시간이면 완성할 수 있으며, Astro의 블로그 템플릿을 활용하면 더 빠르게 시작할 수 있습니다.

Astro로 블로그를 만드는 방법: 완벽 가이드

Astro는 콘텐츠 중심 웹사이트를 위한 정적 사이트 프레임워크로, 기본적으로 클라이언트 JavaScript를 0에 가깝게 줄여 뛰어난 로딩 속도를 제공합니다. 마크다운 기반 Content Collections, React/Vue/Svelte 통합, 내장 SEO 최적화를 지원하며, npm create astro@latest 명령어 하나로 블로그를 바로 시작할 수 있습니다.

왜 Astro를 선택해야 할까요?

mini split vs window ac noise 가이드 →

mold prevention removal guide 가이드 →

블로그처럼 콘텐츠 중심의 사이트에서 Astro는 최적의 선택입니다.

빠른 성능: 기본적으로 제로 JavaScript를 전송합니다
유연한 통합: React, Vue, Svelte 등 원하는 UI 프레임워크를 사용할 수 있습니다
마크다운 지원: Content Collections로 타입 안전한 콘텐츠 관리가 가능합니다
SEO 최적화: 정적 사이트 생성으로 검색 엔진에 최적화됩니다

시작하기

프로젝트를 생성하고 기본 구조를 설정하는 것은 매우 간단합니다.

2026년 웹 성능 최적화 팁 →

npm create astro@latest my-blog -- --template blog
cd my-blog
npm run dev

Content Collections 활용하기

Astro의 Content Collections를 사용하면 마크다운 파일의 프론트매터를 스키마로 검증할 수 있습니다. 이를 통해 타입 안전성을 보장하고, 빌드 시 오류를 미리 발견할 수 있습니다.

src/content/config.ts에서 스키마를 정의하면 됩니다.

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    heroImage: z.string().optional(),
    tags: z.array(z.string()).default([]),
    lang: z.enum(['ko', 'en']),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

타입이 맞지 않는 프론트매터가 있으면 빌드 단계에서 오류가 발생합니다. 런타임 오류를 사전에 차단해 주는 강력한 기능입니다.

Tailwind CSS 실전 팁 10가지 →

SEO와 성능 최적화 설정

Astro는 정적 HTML을 생성하므로 기본적으로 SEO에 유리합니다. 여기에 몇 가지를 추가하면 효과가 더 좋습니다.

사이트맵 자동 생성

npm install @astrojs/sitemap

astro.config.mjs에 sitemap() 통합을 추가하면 빌드 시 /sitemap.xml이 자동으로 생성됩니다.

이미지 최적화

Astro의 <Image /> 컴포넌트를 사용하면 자동으로 WebP 변환, 적절한 크기 조정, loading="lazy" 적용이 됩니다.

---
import { Image } from 'astro:assets';
import heroImg from '../images/hero.jpg';
---
<Image src={heroImg} alt="설명" width={800} height={450} format="webp" />

일반 <img> 태그 대신 반드시 <Image />를 사용하세요. 페이지 로딩 속도가 눈에 띄게 달라집니다.

Cloudflare Pages 배포하기

Astro 블로그를 무료로 배포하는 가장 빠른 방법은 Cloudflare Pages입니다.

GitHub에 코드를 푸시합니다
Cloudflare Pages 대시보드에서 새 프로젝트를 만듭니다
빌드 명령어: npm run build, 출력 폴더: dist
Node.js 버전을 18 이상으로 설정합니다
저장하면 자동 배포가 시작됩니다

이후 코드를 푸시할 때마다 자동으로 빌드·배포가 이루어집니다. 커스텀 도메인 연결도 Cloudflare Pages 대시보드에서 몇 클릭으로 가능합니다.

Astro 블로그 시작 체크리스트

npm create astro@latest로 프로젝트 생성
Content Collections 스키마 정의 (config.ts)
@astrojs/sitemap 설치 및 설정
@astrojs/tailwind 연동 (선택)
모든 이미지에 <Image /> 컴포넌트 사용
BaseLayout에 SEO 메타태그 (og:title, og:description, canonical) 추가
public/robots.txt 작성
Cloudflare Pages에 배포 완료
Google Search Console에 사이트맵 제출

마무리

Astro는 블로그를 만들기 위한 최고의 도구 중 하나입니다. 빠른 성능, 뛰어난 개발자 경험, 그리고 풍부한 생태계를 갖추고 있습니다. Content Collections로 타입 안전하게 콘텐츠를 관리하고, Cloudflare Pages에 배포하면 비용 없이 빠른 블로그를 운영할 수 있습니다.