Astro가 무엇인지, 왜 옮기는지

이 글은 Today I Learn 시리즈의 87번째 기록입니다. (총 125개)

블로그(지금은 Jekyll)를 Astro로 옮길지 알아보며 정리한 것. 이번엔 실전 코드가 아니라 개념 위주로 담는다.

Astro란?

Astro는 콘텐츠 중심 사이트를 위한 정적 사이트 빌더다. 마크다운을 HTML로 굽는다는 점에선 Jekyll과 같은 부류인데, 세대가 다르다.

src/pages/에 놓은 파일이 그대로 URL이 된다(파일 기반 라우팅). about.astro를 만들면 /about/이 생기는 식이다.
화면 조각은 .astro 컴포넌트로 만든다. 파일 위쪽 --- 사이에 자바스크립트를 쓰고(빌드할 때 한 번 실행됨), 아래에 HTML을 쓴다. 공통 뼈대(헤더·푸터)는 레이아웃·컴포넌트로 재사용하고, 값은 props로 넘긴다. Jekyll의 include·레이아웃 + Liquid를 대신하는 자리다.
핵심 차이는 템플릿이 진짜 프로그래밍 언어라는 점이다. Jekyll의 Liquid는 표현이 제한적이라 반복·계산에서 자주 막히고 우회({% raw %} 등)가 필요한데, Astro에선 if·map·fetch가 평범한 코드다. 잔디 그래프나 태그 클라우드처럼 계산이 필요한 것이 자연스러워진다.

Content Collections — 마크다운 글들을 “스키마 있는 컬렉션”으로 관리한다. frontmatter(제목·날짜·태그 같은 머리말)를 타입으로 검증해줘서, description을 빠뜨리면 빌드가 미리 잡아준다.
빌드 시점에 외부 데이터를 가져와(fetch) 정적 페이지로 구울 수도 있다. 예컨대 유튜브 목록을 빌드 때 읽어와 정적 카드로 박아두는 식.

Islands(부분 수화) — 기본은 자바스크립트가 0인 순수 HTML을 낸다. 그러다 인터랙티브가 필요한 위젯만 React 같은 걸로 “섬”처럼 끼워 넣는다. 수화(hydration)는 정적 HTML에 자바스크립트를 입혀 살아 움직이게 하는 것인데, 그걸 페이지 전체가 아니라 필요한 조각에만 한다는 뜻이다. 나중에 라이브 데모 위젯 같은 걸 붙이기 좋다.
이미지·폰트가 편하다. astro:assets는 이미지를 빌드 때 WebP로 최적화하고(변환기 sharp가 내장), 폰트는 @fontsource 패키지로 자체 번들해 런타임 외부 요청을 0으로 만든다. 다만 실제 블로그 이관에선 이 둘을 안 쓰고 옛 방식 그대로 갔다 — 이미지·폰트를 원래 위치에 두고 빌드 전 복사, 폰트는 직접 @font-face. 이건 Astro의 기본 기능 소개고, 실제로 뭘 썼는지는 실전 이관 TIL에 있다.
빌드가 빠른 편이다.

언어·표현력 — Jekyll(Ruby + Liquid) vs Astro(Node + 진짜 JS). Liquid 한계로 생기던 우회가 사라진다.
잔가시 — Ruby를 윈도우에서 쓸 때 겪는 자잘한 문제(시간대 gem 설치 등)가 없다.
미관 — 사이트가 예쁘고 안 예쁨은 프레임워크가 아니라 디자인(CSS)이 정한다. Astro로 옮긴다고 저절로 예뻐지는 게 아니라, 옮기는 김에 새로 디자인해야 예뻐진다. 다만 기존 테마의 기본 룩에 얽매이지 않고 빈 캔버스에서 시작할 수 있다는 게 이점이다.
스택 정리 — 앱은 Dart(Flutter), 업무 도구는 Python, 앞으로 C++(Unreal)까지 가는데 그 사이에서 블로그만 Ruby로 외따로 있었다. 웹을 JS로 모으면 머리에 이고 다닐 생태계가 하나 준다.