개발 블로그로 Astro를 선택한 이유

삼성 SSAFY에 입과하면서 앞으로 공부한 내용들을 꾸준히 기록할 필요성을 느꼈다.¹ 학습한 내용을 정리하고, 나중에 다시 돌아볼 수 있는 공간이 있으면 좋겠다고 생각해 개발 블로그를 만들기로 했다.

블로그를 만들기 위해 몇 가지 프레임워크를 후보로 두고 고민했다. 처음 검토한 후보는 다음 네 가지였다.

• TanStack Start
• Zola
• VitePress
• Astro

TanStack Start

처음에는 구현 유연성을 고려해 TanStack Start를 후보에 올렸다. TanStack Start는 TanStack Router를 기반으로 하는 React 프레임워크로, Next.js의 파일 기반 라우팅과 달리 라우트 정의와 탐색 흐름을 TypeScript 타입과 더 긴밀하게 연결할 수 있다는 점이 인상적이었다.

또한 특정 배포 플랫폼에 덜 종속적인 선택지처럼 느껴졌고, React Query와 Router처럼 이미 널리 쓰이는 도구들이 포함된 TanStack 생태계라는 점에서도 한 번쯤 사용해 보고 싶은 프레임워크였다.

하지만 블로그의 목적을 다시 생각해 보니, 복잡한 기능 구현보다는 지속 가능한 운영이 더 중요하다고 판단했다. 바쁜 일상 속에서 유지보수에 드는 에너지를 줄이고, 글 작성 자체에 집중하기 위해 콘텐츠 작성 경험을 더 우선시한 Markdown 중심 프레임워크를 찾아보기로 했다.

Zola

두 번째 후보로 고려한 Zola는 Rust로 개발된 CLI 기반 정적 사이트 생성기다. 단일 바이너리로 배포되며, 별도의 복잡한 설정 없이 Sass 컴파일, 코드 하이라이팅, 목차 생성 같은 기능을 기본으로 제공한다. Rust 기반인 만큼 빠른 빌드 속도도 기대할 수 있었다.

단순한 Markdown 블로그를 빠르게 만들고 운영하기에는 충분히 적합한 선택지처럼 보였다. 다만 일반적인 프론트엔드 컴포넌트 개발 경험보다는 Zola의 디렉터리 구조, Tera 템플릿 문법, shortcode 사용 방식에 익숙해져야 했다. 템플릿과 스타일을 직접 수정하며 커스터마이징할 수는 있었지만, 내가 이미 공부해 온 프론트엔드 지식을 온전히 활용하기에는 결이 다르다고 생각했다.

또한 블로그를 계속 운영하다 보면 인터랙티브한 예시나 작은 프론트엔드 실험을 넣고 싶어질 수도 있겠다는 생각이 들었다. 그런 가능성까지 고려했을 때, 전통적인 정적 사이트 생성기보다는 Markdown 작성 경험과 프론트엔드 컴포넌트 활용을 함께 가져갈 수 있는 프레임워크가 더 적합해 보였다.

그래서 Zola는 후보에서 제외하고, 다른 프레임워크를 더 살펴보기로 했다.

VitePress

세 번째 후보로 고려한 VitePress는 Vite와 Vue 기반으로 동작하는 Markdown 중심의 정적 사이트 생성 프레임워크다. SSAFY 교육 과정에 Vue가 포함되어 있어, Vue를 공부해 볼 겸 사용해 볼까 하는 생각도 있었다.

VitePress는 사이드바, 네비게이션, 검색, 다크 모드, 코드 블록 스타일 등 문서 사이트에 적합한 기본 테마를 제공한다. 필요에 따라 원하는 부분만 커스터마이징할 수 있다는 점도 장점이었다. 여기에 Markdown 안에서 Vue 컴포넌트를 사용할 수 있어, 문서 안에 인터랙티브한 요소를 넣기에도 좋아 보였다.

하지만 아직은 React에 비해 Vue가 익숙하지 않았다. 블로그를 당장 개발하고 운영해야 하는 상황에서 Vue 기반 프레임워크를 선택하면, 글을 쓰기보다 Vue에 적응하는 데 더 많은 시간이 필요할 것 같았다.

Astro

Astro는 블로그와 같은 콘텐츠 중심 웹사이트를 만드는 데 적합한 JavaScript 웹 프레임워크다. Markdown 기반 콘텐츠 작성을 지원하기 때문에, 글을 중심으로 운영할 개발 블로그에 잘 어울리는 선택지처럼 보였다.

Astro는 Zero JavaScript, By Default라는 철학을 바탕으로, 기본적으로 브라우저에 전달되는 JavaScript를 최소화하는 방향을 지향한다. 페이지에 인터랙티브한 컴포넌트가 없다면 불필요한 JavaScript를 거의 전달하지 않을 수 있다는 점이 인상적이었다.

내게 가장 큰 장점으로 다가온 부분은 React, Vue, Svelte, Solid, Preact 등 다양한 UI 프레임워크를 함께 사용할 수 있다는 점이었다. 특정 프레임워크에 종속되지 않고, 필요에 따라 여러 프레임워크를 혼용할 수 있다는 점이 매력적이었다.

결국 Markdown 기반으로 글을 작성할 수 있다는 점과, 특정 UI 프레임워크에 종속되지 않고 필요에 따라 다양한 프레임워크를 활용할 수 있다는 유연성을 고려해 최종적으로 Astro를 선택했다.

콘텐츠가 주인공인 디자인

블로그 디자인은 Jianbo Wang의 still이라는 Zola 테마를 많이 참고했다.

시각적으로 화려하거나 과시적인 디자인은 지양했다. 블로그에서는 인터페이스가 주인공이 아니라 좋은 콘텐츠가 주인공이어야 한다고 생각했기 때문이다.

버튼, 카드, 배지, 장식 요소가 지나치게 눈에 띄면 콘텐츠보다 UI가 먼저 보이게 된다. 그래서 이런 요소들을 최대한 덜어내고, 글이 더 잘 읽히는 데 초점을 맞췄다.

앞으로 내가 배우는 내용과 경험한 것들을 이곳에 하나씩 기록해 나가려 한다.

아직은 작은 블로그이지만, 시간이 지나 글이 하나둘 쌓였을 때 나의 성장 과정을 보여주는 공간이 되었으면 한다.