Next.js로 블로그 직접 만든 과정

내 글인데 CSS 한 줄 못 건드린다

2년간 Velog에서 글을 썼다. 좋은 플랫폼이다. 근데 어느 순간부터 갈증이 생겼다. 디자인을 바꾸고 싶은데 못 바꾼다. 시리즈 기능이 아쉽다. 내 글인데 내 도메인이 아니다.

결정적으로, 개발자라면 블로그 하나쯤 직접 만들어보는 게 맞지 않나 싶었다.

(사실 그냥 멋있어 보여서.)

기술 스택은 고민 없이 정했다

프레임워크는 Next.js. SSG로 정적 사이트를 만들기에 최적이고, 내가 가장 잘 아는 프레임워크다. 콘텐츠는 MDX. Markdown으로 글을 쓰되, 필요하면 React 컴포넌트를 넣을 수 있다. 스타일링은 Tailwind CSS.

DB 없이 파일 시스템 기반으로 운영하기로 했다. CMS를 붙일까 고민했는데, 글을 Git으로 관리하는 게 개발자에겐 더 자연스럽다.

금요일 저녁에 시작해서 일요일 밤에 배포

글 목록, 글 상세, 카테고리 필터. 이 세 가지만 있으면 블로그의 최소 기능은 갖춘 거다.

MDX 파일을 파싱하는 부분이 예상보다 까다로웠다. frontmatter를 추출하고, 날짜순으로 정렬하고, 카테고리별로 그룹핑하는 유틸리티 함수를 만드는 데 반나절이 걸렸다.

코드 하이라이팅은 rehype-pretty-code + Shiki 조합을 선택했다. 설정이 좀 복잡했지만, 한 번 잡으면 건드릴 일이 없어서 시간 투자할 가치가 있었다.

디자인 감각이 없어서 노션을 베꼈다

솔직히 디자인 감각이 없는 편이다. 그래서 노션 스타일을 참고했다. 깔끔하고 가독성 좋은 레이아웃, 적절한 여백, 너무 튀지 않는 색상. 글 목록은 노션의 데이터베이스 뷰에서 영감을 받아 카드 형태로 만들었다.

다크모드도 구현했다. 시스템 설정을 따르되 토글로 수동 전환도 가능하게. prefers-color-scheme 미디어 쿼리와 CSS 변수를 활용하면 생각보다 깔끔하게 된다.

Vercel 배포는 5분이면 끝난다

GitHub에 push하면 자동으로 빌드되고 배포된다. 프리뷰 배포 기능도 유용하다. 글을 PR로 올리면 미리 확인할 수 있다. 커스텀 도메인 연결도 5분이면 끝.

내 이름이 들어간 도메인에 내가 만든 블로그. 이 작은 것이 주는 뿌듯함이 생각보다 크다.

운영하면서 하나씩 추가한 기능들

검색 기능, TOC, 시리즈 네비게이션, 관련 글 추천, RSS 피드, sitemap. 한 번에 다 만든 게 아니라 필요를 느낄 때마다 추가했다. 검색은 별도 엔진 없이 클라이언트 사이드에서 구현했다. 글이 수백 개 수준이면 이걸로 충분하다.

Cmd+K로 모달을 열어서 검색하는 UX를 구현했는데, 쓸 때마다 만족스럽다. 남이 만든 블로그에서는 느낄 수 없는 뿌듯함이다.

추천은 하는데 함정이 있다

무조건 추천한다. 근데 글을 쓰는 게 목적이라면 먼저 플랫폼에서 시작하고 나중에 옮겨도 된다.

블로그를 만드는 데 시간을 다 쓰고 정작 글을 안 쓰는 함정에 빠지지 않길. 나도 처음 한 달은 블로그 기능 추가에만 매달려서 글을 한 편도 안 썼다.