블로그 리뉴얼 도전기
블로그 리뉴얼 도전기
왜 블로그를 리뉴얼 했을까?
- 먼저 나를 나타내는 사이트가 하나 있으면 좋다고 생각했다.
- 요즘 AI를 활용해서 많은 서비스를 만들 수 있는데, 다른 사람들에 비해서 강점을 가지려면 이정도 사이트를 뚝딱 만들어낼 수 있어야 한다고 생각했다.
처음 블로그를 버린 이유
기존에는 https://halfmoon-mind.vercel.app에서 React 기반으로 블로그를 운영했었습니다. 하지만 몇 가지 한계점 때문에 현재의 블로그로 이전(리뉴얼)하게 되었습니다.
순수 React 블로그의 한계
순수 React(Create React App 등)로만 블로그를 구축하려니 예상치 못한 문제들에 부딪혔다.
디자인이나 인터랙티브 컴포넌트 구현은 익숙했지만, 마크다운으로 작성된 블로그 포스트를 불러오고, 파싱하고, 각 포스트에 맞는 라우팅을 설정하는 과정이 생각보다 번거로웠다. react-markdown 같은 라이브러리를 사용했지만, 코드 하이라이팅, 목차 생성 등 부가 기능을 통합하는 데 추가적인 노력이 필요했다. 콘텐츠 중심의 정적 사이트 생성기에 비해 개발 생산성이 현저히 떨어졌다.
SEO와 소셜 공유의 어려움
가장 결정적인 문제는 검색 엔진 최적화(SEO)와 소셜 미디어 공유였다. 순수 클라이언트 사이드 렌더링(CSR) 방식으로는 페이지별 동적 메타 태그(특히 og:title, og:description, og:image 등 Open Graph 태그) 설정이 제대로 이루어지지 않았다. react-helmet-async 라이브러리를 사용해 봤지만, 초기 HTML 로드 시점에는 자바스크립트가 실행되기 전이라 태그가 적용되지 않았다. 결국 검색 엔진 봇이나 소셜 미디어 봇이 페이지 내용을 제대로 인식하지 못해, 링크 공유 시 제목이나 설명, 이미지가 제대로 표시되지 않는 문제가 발생했다.
다른 기술 스택 탐색
이런 문제들을 해결하기 위해 다른 기술들을 찾아보기 시작했다.
가장 먼저 떠오른 대안은 Next.js였다. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 모두 지원하고, React 기반이라 마이그레이션이 비교적 쉬워 보였다. 페이지 기반 라우팅 덕분에 메타 태그 문제도 해결될 것으로 기대했다. 하지만 개인 블로그에 사용하기에는 다소 무겁고 복잡한 프레임워크라는 생각이 들었다. 토스 기술 블로그 글에서도 언급하듯, 모든 프로젝트에 Next.js가 최선은 아닐 수 있다.
Jekyll, Hugo, Gatsby 등 전통적인 정적 사이트 생성기도 고려했다. Jekyll은 Github Pages와 연동이 간편했지만, Ruby 기반이라는 점이 조금 망설여졌다. Gatsby는 강력하지만 GraphQL 학습 곡선이 부담스러웠다.
Astro와의 만남
그러던 중 Astro를 추천받아 사용해보니, 콘텐츠 중심적인 접근 방식, 우수한 성능, 다양한 UI 프레임워크 지원 등 여러 면에서 매력적으로 느껴졌다. 내가 겪었던 문제들을 해결하면서도 개발 경험을 해치지 않을 것 같다는 확신이 들었다.
Astro, 왜 선택했나?
Astro를 선택한 구체적인 이유는 몇 가지가 있다.
SSG, SSR 그리고 아일랜드 아키텍처
Astro는 기본적으로 정적 사이트 생성기(SSG)지만, 필요에 따라 서버 사이드 렌더링(SSR)도 지원한다. 특히 ‘아일랜드 아키텍처(Islands Architecture)‘를 통해 JavaScript를 최소한으로 사용하면서도 인터랙티브한 컴포넌트를 구현할 수 있다는 점이 매력적이었다. 덕분에 초기 로딩 속도가 매우 빨랐다.
유연한 UI 프레임워크 통합
또한 React, Vue, Svelte 등 다양한 UI 프레임워크를 프로젝트 내에서 자유롭게 섞어 쓸 수 있다. 기존 React 컴포넌트 일부를 재활용하면서 새로운 부분은 다른 프레임워크나 Astro 자체 컴포넌트를 사용해볼 수 있다는 유연성이 좋았다.
타입 세이프한 콘텐츠 관리
Astro는 콘텐츠 컬렉션(Content Collections) 기능을 통해 마크다운 파일들을 타입 세이프하게 관리할 수 있게 해준다. 블로그 글의 메타데이터(frontmatter) 형식을 정의하고 관리하기 용이해서 콘텐츠 작성 및 유지보수에 큰 도움이 되었다.
뛰어난 개발 경험
비교적 배우기 쉽고 문서화가 잘 되어 있어서 빠르게 적응할 수 있었다. 개발 서버도 빠르고 전반적인 개발 경험이 쾌적했다.
마이그레이션 과정과 배운 점
순탄치 않았던 여정
기존 React 기반 블로그에서 Astro로 옮기는 과정이 아주 순탄하지만은 않았다. 특히 상태 관리나 복잡한 인터랙션이 필요한 컴포넌트를 Astro 방식으로 다시 생각해야 했다.
웹 성능 최적화에 대한 깊은 이해
하지만 이 과정에서 서버 컴포넌트와 클라이언트 컴포넌트의 차이, 그리고 웹 성능 최적화에 대해 더 깊이 이해하게 되는 계기가 되었다. 예를 들어, 동적인 메타 태그 설정 문제는 Astro의 페이지 기반 라우팅과 Astro.props를 활용하여 각 페이지별로 필요한 메타 태그를 쉽게 생성하고 주입함으로써 해결할 수 있었다.
앞으로의 계획
블로그 리뉴얼은 끝이 아니라 새로운 시작이라고 생각한다. 앞으로는 꾸준히 기술 관련 글이나 개인적인 생각을 기록하고 공유할 계획이다. 댓글 기능 추가나 검색 기능 개선 등 독자 경험을 향상시킬 수 있는 기능들도 점진적으로 구현해보고 싶다.