방치했던 블로그를 Next.js로 다시 만든 이야기

한동안 깃허브 블로그를 방치하고 있었어요. "언젠가 다시 정리해야지"라는 생각만 반복하다가, 공부한 내용을 제대로 기록하고 공유할 공간이 필요하다는 걸 느꼈어요. 그래서 블로그를 처음부터 다시 만들기로 했어요.

왜 Next.js를 선택했을까#

당시 스벨트가 떠오르고 있었지만, 블로그를 빠르게 완성하려면 Next.js가 낫겠다고 판단했어요. 스벨트를 새로 배우고 스벨트킷을 익히면서 적합한 라이브러리를 찾아가는 것보다, Next.js 하나만 학습하면서 진행하는 게 러닝커브가 훨씬 짧았거든요.

기존 블로그가 Next.js 12 버전이었는데, npx로 업그레이드를 시도하니 이상하게 잘 되지 않았어요. 결국 새 프로젝트를 생성하고 shadcn을 적용하는 방식으로 진행했어요. 지금은 Next.js 14 + Contentlayer 조합으로 정적 블로그를 운영하고 있어요.

개발 환경 세팅#

당시 사용하던 iMac에는 노드가 설치되어 있지 않았기 때문에 Next.js의 Docker 예제를 활용했어요. 패키지 매니저는 pnpm을 사용하기로 했고, Homebrew로 설치하면 간단해요.

pnpm create next-app --example with-docker nextjs-docker

이 한 줄로 Docker 기반의 Next.js 프로젝트가 생성돼요.

블로그에 필요한 기능들#

블로그에 어떤 기능이 필요한지 정리해봤어요. Next.js 자체 기능과 외부 라이브러리를 조합하면 대부분 구현할 수 있어요.

• Routing — Next.js App Router로 페이지 간 이동 처리
• 이미지 렌더링 — 마크다운 속 외부 이미지를 data URI로 최적화
• 댓글 기능 — 깃허브 기반 댓글 시스템 활용

블로그 화면 구성#

현재 블로그는 이런 구조로 되어 있어요.

Home이 게시글 목록과 검색 기능을 모두 담당하고 있어서, 별도의 Posts 페이지 없이도 충분해요. Books 화면에서는 읽은 책 중 가장 감명 깊었던 구절을 하단에 넣기로 했어요.

마크다운을 HTML로 변환하기#

블로그 글을 화면에 보여주려면 마크다운 파일을 HTML로 변환해야 해요. 지금은 Contentlayer가 이 역할을 맡고 있지만, 처음에는 직접 변환 파이프라인을 구성했었어요.

generateStaticParams에서 posts 폴더의 모든 게시글을 가져와서 하나씩 읽고, unified로 마크다운을 HTML로 변환하고, frontmatter에서 메타데이터를 추출해서 Post 객체를 만드는 방식이었어요.

마크다운 변환에 많이 쓰이는 도구를 비교해봤어요.

결국 확장성을 우선해서 unified 계열을 선택했어요. 지금도 Contentlayer 내부에서 remark/rehype 플러그인을 조합해 구문 강조, 수식 렌더링, 외부 링크 처리 등을 하고 있어요.

unified 패키지를 사용할 때 이 글(일본어)이 도움이 많이 됐어요.

마인드맵으로 학습 여정 시각화하기#

블로그를 만들면서 한 가지 아이디어가 더 떠올랐어요. 공부에 의미를 부여하면 기억이 잘 된다는 이야기에서 영감을 받았거든요.

각 태그를 마인드맵으로 볼 수 있는 화면을 만들면 어떨까 싶었어요. 공부해서 블로그에 올린 내용들을 점으로 만들고, 그 점들을 선으로 잇는 거예요.

예를 들어 도커를 공부했다면, 도커가 뭔지 감이 잡히는 과정에서 나는 어떤 시각으로 도커를 바라보게 됐는지, 그리고 이 다음에는 어떤 공부를 하게 될지를 시각적으로 추적할 수 있어요.

이 연결을 눈으로 볼 수 있다면 그 자체로 동기부여가 돼요.

돌아보며#

블로그를 다시 만드는 건 단순히 기술 스택을 바꾸는 게 아니었어요. 공부한 것을 정리하고, 그 과정을 다른 사람과 나누는 하나의 시스템을 만드는 일이었죠.

완벽한 블로그를 기다리기보다, 일단 만들고 하나씩 개선해나가는 게 가장 좋은 시작이에요.

No man can succeed in a line of endeavor which he does not like.

— Napoleon Hill