개발자라면 한 번쯤은 이런 생각을 해본 적 있을 겁니다.
“나만의 공간이 갖고 싶다.”
블로그 플랫폼은 넘쳐납니다. 벨로그, 티스토리, 미디엄, 노션까지. 그런데 어느 순간 깨달았습니다 — 그 어떤 플랫폼도 ‘나’를 온전히 담지 못한다는 걸요. 플랫폼의 레이아웃 안에서 나는 언제나 수천 명 중 한 명이었습니다.
이 시리즈는 개발자가 완전한 scratch부터 자신만의 웹사이트를 만들어 배포하기까지의 전 과정을 기록한 글입니다. 비용은 도메인 비 만 원이 전부였고, 나머지는 전부 무료입니다.
왜 직접 만드는가
포트폴리오를 위해서? 물론 그것도 있습니다. 하지만 더 솔직한 이유는 통제권이었습니다. 폰트 하나, 여백 한 줄, 글이 보여지는 순서까지 — 전부 내가 정하고 싶었습니다. 플랫폼 위에서 글을 쓰는 건 임대입니다. 내 도메인 위에 코드를 올리는 건 소유입니다.
개발자라면 그 차이가 주는 만족감을 알 거라 믿습니다.
수많은 선택지 사이에서
프레임워크를 고르는 건 생각보다 고통스러운 과정이었습니다. 후보는 이랬습니다:
- Next.js — 가장 익숙하고 생태계가 넓지만, 개인 블로그에 SSR과 서버 컴포넌트까지 필요할까?
- Gatsby — 한때 정적 사이트의 왕이었지만, 빌드 속도와 플러그인 지옥이 걱정이었습니다.
- Hugo / Jekyll — 빠르지만 커스터마이징의 자유도에서 답답함을 느꼈습니다.
- Astro — 그리고 이 녀석이 눈에 들어왔습니다.
Astro를 선택한 세 가지 이유
첫째, “제로 자바스크립트”라는 철학.
Astro는 기본적으로 클라이언트에 자바스크립트를 보내지 않습니다. 정적 HTML을 생성하고, 진짜 인터랙션이 필요한 컴포넌트만 선택적으로 하이드레이션합니다. 개인 블로그 같은 콘텐츠 중심 사이트에 이보다 적합한 철학이 있을까요? 빌드 결과물이 가볍고, 로딩이 빠르고, 사용자 경험이 쾌적합니다.
둘째, 콘텐츠 컬렉션.
마크다운 파일을 src/content/ 폴더에 넣으면 Astro가 알아서 타입 안전한 컬렉션으로 관리해줍니다. frontmatter 스키마 검증까지 해주니, CMS 없이도 체계적인 콘텐츠 관리가 가능합니다. 개발자에게 마크다운은 가장 자연스러운 글쓰기 도구이니까요.
src/content/
├── blog/ ← 블로그 글
├── projects/ ← 프로젝트 소개
└── devlogs/ ← 개발 일지셋째, 프레임워크 불가지론.
React 컴포넌트를 쓰고 싶으면 쓰고, Vue를 쓰고 싶으면 쓰고, 바닐라 HTML/CSS만으로도 충분합니다. Astro는 의견을 강요하지 않습니다. 개인 프로젝트에서 이 자유도는 생각보다 큰 차이를 만듭니다. 필요하면 붙이고, 불필요하면 걷어내는 — 미니멀리스트의 도구상자 같은 느낌입니다.
실제로 써보니
프로젝트를 초기화하는 건 단 한 줄이었습니다.
npm create astro@latest템플릿을 고르고, TypeScript 설정을 하고, 빌드를 돌리기까지 5분이 채 걸리지 않았습니다. 그리고 src/pages/index.astro를 열었을 때, .astro 파일의 구조가 눈에 들어왔습니다 — 상단의 코드 펜스(---) 안에 서버 로직을, 아래에 HTML 템플릿을 쓰는 구조. JSX도 아니고 순수 템플릿도 아닌, 묘하게 직관적인 형태였습니다.
---
// 서버에서만 실행되는 코드
const posts = await getCollection('blog');
---
<html>
<body>
{posts.map(post => <article>{post.data.title}</article>)}
</body>
</html>빌드 결과물을 열어보면 순수 HTML입니다. 자바스크립트 번들? 0KB. 개인 블로그에 이 이상 뭐가 더 필요할까요.
다음 글 미리보기
프레임워크를 골랐으니, 다음 단계는 디자인입니다. 개발자가 디자인을 한다는 건 종종 재앙을 의미하지만, 좋은 도구만 있으면 이야기가 달라집니다. 다음 글에서는 코드 한 줄 치기 전에 디자인을 먼저 잡는 방법을 이야기하겠습니다.
이 시리즈의 모든 코드와 결과물은 실제로 운영 중인 사이트에서 확인할 수 있습니다. 비용 총합: 도메인 만 원. 나머지는 전부 무료입니다.