들어가며
Astro로 블로그를 만들었다면 이런 고민이 생긴다:
“디자인이 마음에 들지 않는데, 처음부터 다시 만들어야 하나?”
“다른 사람들이 만든 예쁜 테마가 있을 텐데…”
“테마를 바꾸되 내 글(마크다운)은 유지하고 싶은데 가능할까?”
다행히 Astro는 테마 문화가 풍성하고, 기존 콘텐츠를 유지하면서 테마만 바꾸는 것이 매우 간단합니다.
이 글에서는 Astro 테마의 개념부터 실제 적용까지 모든 것을 다룹니다.
Astro 테마란?
테마 ≠ 프레임워크 의존성
Next.js나 Vue 같은 프레임워크와 달리, Astro 테마는 단순한 프로젝트 구조입니다.
테마 = CSS + 레이아웃 + 컴포넌트 + 설정
즉, 마크다운 파일은 완전히 독립적입니다.
테마의 핵심 3가지
| 항목 | 역할 | 위치 |
|---|---|---|
| CSS | 색상, 폰트, 반응형 디자인 | src/styles/ |
| 레이아웃 | 헤더, 푸터, 사이드바 구조 | src/layouts/ |
| 컴포넌트 | 재사용 가능한 UI 요소 | src/components/ |
마크다운 콘텐츠는 이 모든 것과 독립적으로 src/content/blog/ 에 존재합니다.
따라서:
- 테마를 완전히 바꿔도 → 글은 그대로
- 테마만 부분 수정해도 → 글은 그대로
- 테마 업그레이드해도 → 글은 그대로
Astro 공식 테마 라이브러리
1. 공식 테마 페이지
🔗 https://astro.build/themes/
├── Blog (카테고리)
├── Portfolio
├── Landing Page
├── Documentation
└── E-commerce
2. 테마 선택 체크리스트
이 테마가 내 것일지 판단하기
- 성능: Lighthouse 90점 이상?
- SEO: 메타태그, 사이트맵, RSS 지원?
- 반응형: 모바일에서 잘 보임?
- 다크모드: 지원하고 있나?
- 커스터마이징 난이도: 얼마나 쉬운가?
- 문서: README가 잘 작성되어 있나?
- 커뮤니티: 최근 업데이트가 있나?
- 마크다운 호환성: Content Collections 지원?
테마 vs 직접 만들기: 의사결정
| 항목 | 테마 사용 | 직접 만들기 |
|---|---|---|
| 시간 | 5분~30분 | 수시간 |
| 커스터마이징 | 제한적 | 완전 자유 |
| 유지보수 | 업데이트 가능 | 혼자 담당 |
| 성능 | 최적화됨 | 스스로 해야 함 |
| 학습 | 기존 코드 참고 | 깊은 이해 필요 |
추천
처음 시작: 테마 사용 → 점진적 커스터마이징 ✅
장기 운영: 자신의 스타일 확립 후 직접 제작
결론
Astro의 가장 좋은 점이 바로 이것입니다:
콘텐츠와 디자인의 완벽한 분리
마크다운 파일 하나 건드리지 않고:
- 색상 테마 변경 ✅
- 레이아웃 재설계 ✅
- 테마 완전 교체 ✅
이것이 가능한 정적 사이트 생성기는 많지 않습니다.