최근에 커리어를 정리하면서 여러 개발자들의 이력서를 둘러봤는데, 생각보다 많은 사람들이 개인 블로그를 운영하고 있었다.
자기만의 공간에 프로젝트나 기술 글을 잘 정리해둔 걸 보면서 “나도 이런 공간 하나쯤은 있어야 하지 않을까?” 하는 생각이 문득 들었다..
사실 블로그 운영을 하지 않았던 건 아니다.
velog를 시작으로 공부한 내용을 정리하곤 했었는데, 점점 글을 안 쓰게 됐고, 결국엔 흐지부지되어 버렸다.
그래서 이번엔 나도 “내 공간”을 하나 만들어서 다시 제대로 시작해보려고 한다.
내가 만든 블로그라면 애착도 생길 테고, 예전보다 더 꾸준히 써볼 수 있지 않을까 싶다.
기능 정리
일단 블로그를 만들기 전에, 필수 기능과 부가 기능을 구분해서 개발 우선순위를 정했다.
정리한 기능은 아래와 같다.
필수 기능
- 게시글 목록 페이지 (전체, 카테고리별)
- 게시글 상세 페이지
- 댓글 기능
부가 기능
- 목차 (Table of Contents)
- 스크롤 진행 상태 표시 (Scroll Progress Bar)
- 다크/라이트 모드
기술 스택 선정
기능 정리 후, 블로그에 필요한 요소들을 고려해 아래와 같은 스택으로 구성했다.
Framework: Next.js
요즘 프론트엔드 개발에서 많이 사용되는 프레임워크이기도 하고, 블로그처럼 정적인 콘텐츠가 많은 구조에 SSG(Static Site Generation)를 적용하기 적합하다고 판단해 선택했다.
Styling: Tailwind CSS, shadcn/ui
스타일링은 Tailwind CSS를 사용했고, UI 컴포넌트는 shadcn/ui를 기반으로 구성했다.
빠르게 스타일을 구성하면서도 유연하게 커스터마이징할 수 있다는 점이 마음에 들었고, 요즘 핫한 조합이기도 해서 이번 기회에 직접 사용해보고 싶었다.
글 작성: MDX
글 작성은 .mdx 파일을 기반으로 했다.
CMS처럼 웹에서 글을 작성하고 관리할 수도 있었지만, 별도의 DB 없이 파일로 직접 관리할 수 있다는 점이 더 가볍고 편하게 느껴졌다.
글 파싱: gray-matter, next-mdx-remote
작성한 .mdx 파일은 gray-matter와 next-mdx-remote를 조합해 파싱하고 있다.
gray-matter는 파일 상단의 메타데이터를 추출하는 데 사용했고, next-mdx-remote는 본문을 HTML로 렌더링해 실제 페이지에서 보여주도록 구성했다.
댓글: Giscus
댓글 기능은 GitHub Discussions 기반의 Giscus를 사용했다.
별도 DB나 인증 없이도 가볍게 붙일 수 있고, 댓글이 GitHub에 정리되기 때문에 관리도 편하다.
개인 블로그에 부담 없이 쓰기 좋은 방식이라 선택했다.
배포: Vercel
배포는 Vercel을 선택했다.
Next.js와의 호환성이 뛰어나고, 자동 배포도 잘 갖춰져 있어서 블로그처럼 혼자서 관리하는 프로젝트에 특히 잘 맞았다.
마무리
이렇게 블로그를 왜 만들게 됐는지, 어떤 기능을 넣고 어떤 기술 스택을 선택했는지까지 정리해봤다.
프로젝트 셋업과 전체 구조에 대한 내용은 다음 글에서 이어서 다뤄볼 예정이다.
