블로그 완성

아스트로를 선택한 이유

Astro를 이용해 개인 블로그를 직접 만들었다.

처음 블로그를 만들기 위해 이것저것 찾아보면서 Jekyll, Gatsby도 고려했지만, 결국 Astro를 선택했다. 공식 문서가 한국어로도 잘 정리되어 있어서 금방 적응할 수 있었고, 필요한 부분만 인터랙션을 줄 수 있는 아일랜드 아키텍처 철학도 마음에 들었다.

전에 배웠던 React나 Next.js를 사용할 수도 있었지만, 개인 블로그는 요청에 따라 데이터가 바뀌는 구조가 아니라 가벼운 SSG를 지향하는 Astro가 더 적합하다 생각했다.

Velog나 Medium도 고려했지만, 플랫폼에 종속되지 않고 구조와 스타일을 직접 설계할 수 있는 블로그를 만들고 싶었다.

처음엔 아스트로에서 제공하는 테마를 이용해서 빠르게 만들 생각이었다. 하지만 가볍고 깔끔한 테마가 별로 없었고, 마음에 드는 테마는 빌드 에러가 있거나 마이그레이션이 필요한 라이브러리가 보여서 결국 처음부터 직접 만들게 됐다.

배포는 아스트로 튜토리얼에 나온 Netlify를 이용했는데, 리전이 미국이라 네트워크 속도가 조금 느렸다. 리전을 바꾸는 기능은 유료라서 Vercel로 옮겼고, 도메인도 샀다.

블로그를 직접 만들면서 고민했던 점들이 몇 가지 있었다.

1. 디자인 시스템

간단한 블로그라 복잡한 디자인은 아니지만 컬러, 타이포그래피 등의 일관성을 위해 디자인 시스템이 필요했다.

내가 개발자 닉네임으로 Sage를 쓰는 건 실명과 비슷한 영어 이름이기 때문인데, 현자라는 뜻은 거창하게 느껴져서 허브 향신료인 세이지에서 착안해 SageHerb를 쓰게 됐다. 그래서 컬러 팔레트를 그린 계열로 잡았다. 나는 좀 쿨한 계열의 색상을 좋아해서, 쿨 그린 계열과 그레이 스케일은 zinc로 정했다.

Radix를 이용해 컬러 스케일을 뽑고, 디자인 토큰 형식으로 관리할 수 있도록 구현했다.

처음에는 여기저기 그린 컬러를 많이 썼더니 블로그가 너무 난잡해져서, 전체적으로는 그레이 스케일을 쓰고 강조할 부분에만 악센트를 주는 방식으로 정리했다.

2. Claude Code + MCP

블로그를 만들면서 Claude Code와 MCP를 적극적으로 활용했다. 최근 개발 방식이 빠르게 바뀌고 있고, AI로 생산성을 높이고자 했다.

먼저 전역 CLAUDE.md를 작성하고, 프로젝트 안에도 따로 CLAUDE.md를 만들어 최대한 원하는 맥락을 제대로 전달하고자 했다. Astro가 제공하는 MCP 서버도 연결해 Astro의 공식 문서를 최대한 참고하도록 했다.

프로젝트 컨텍스트와 프롬프트를 얼마나 명확하게 전달하느냐에 따라 AI 결과가 많이 달라지는 걸 느낀다. 요즘은 AI를 더 효과적으로 사용하는 방법을 많이 찾아보고 공부하고 있다.

3. Pagefind

블로그 검색 기능은 Pagefind를 사용했다. SSG 구조에 잘 맞고, 따로 서버를 두지 않아도 돼서 현재 프로젝트에 가장 적합하다고 생각했기 때문이다.

다만 Pagefind는 빌드 시점에 인덱스를 생성하기 때문에 개발 서버에서는 검색 기능이 동작하지 않았다. 수정 후 확인하려면 매번 빌드 후 프리뷰로 확인하는 과정을 거쳤다.

특히 작성된 검색어를 지우는 클리어 기능이 없어서 직접 input 안에 X 아이콘을 추가했는데, Pagefind가 제공하는 Default UI는 상세 구조를 파악하기 어려워서 레이아웃이 적용 안 되는 원인을 찾는 데 시간이 좀 걸렸다.

이 과정을 통해 라이브러리를 도입할 때 기능 뿐만 아니라 개발 과정에서의 장단점까지 고려해야 한다는 점을 다시 배웠다.

4. 메타 데이터 및 Open Graph 설정

meta 태그와 Open Graph 설정은 블로그를 만들면서 처음 제대로 다뤄봤다. 이전에도 SEO의 중요성은 알고 있었지만, 프로젝트 일정에 급급해 제대로 적용해보지는 못했다. 이번에는 블로그라는 특성상 중요하다고 판단해서 신경을 많이 썼다.

막상 적용해보니 설정 자체가 복잡한 건 아닌데 블로그 페이지별 메타 데이터 분기 설정을 위해 레이아웃 구조도 신경 써야 했다. 그리고 설정이 의도대로 적용됐는지 확인이 바로 어려워서 더 어렵게 느껴진 것 같다.

이번 작업을 통해 페이지 단위 메타 데이터 관리와 canonical, OG 설정에 대해 배웠고 이후에는 자동 OG 이미지 생성까지 확장해볼 계획이다.

마무리

이번 블로그 프로젝트에선 기술 스택을 선택할 때 명확한 근거를 가지려고 했다. 배워서, 아는 거라서, 익숙해서가 아닌 블로그라는 특징과 규모에 맞는 기술을 선택하려고 했다. 대부분 처음 써보는 것이었지만, 그 과정에서 사용해본 기술 스택과도 비교하며 장단점과 특징을 이해할 수 있었다.

앞으로도 이 블로그는 글 작성 뿐만 아니라 마이그레이션과 업데이트를 통해 꾸준히 완성도를 높여갈 생각이다.