로고
TIL

기술 블로그 정착기

·기타

드디어, 5번째 블로그를 다시 만들었습니다.

그동안 많은 플랫폼에서 개인 기술 블로그를 시작해보았으나, 아쉽게도 오래가지 못했습니다.

이전에 시도한 플랫폼

Velog

깔끔한 UI가 편리하게 느껴졌지만, Mermaid렌더링이나 다른 기능을 더 사용하고 싶어 옮겼습니다.

Tistory

네이버 블로그를 쓰는 느낌으로 익숙했지만, 그만큼 기능이 많아 더 복잡하게 느껴졌습니다.

Next.js

과거에 다른 곳에 기록하던 기록들을 옮겨 그 때 시점으로 게시하고 싶어, 직접 구현했습니다. Mermaid 렌더링도 구현할 수 있어 좋았지만 작성하는 과정이 너무 불편했습니다. VSCode에서 Markdown을 직접 작성했는데 Mermaid가 preview로 보이지 않고, 추가로 플러그인을 설치해야했습니다.

wordpress

지금 참여하는 인턴십에서 사용하기 때문에 활용 역량을 높이고자 선택했지만, 배포 인프라를 구축하는 과정에서 AWS Lightsail 비용, 기존 도메인에서 서브도메인 분기처리 등 부담이 커졌습니다. 기존 Next.js + vercel보다 더 인프라 측면에서 고민할 게 많아진 것을 느끼고 불편함을 느꼈습니다. 코드가 아닌 UI로 수정하는 부분에서 다시 어려움을 느끼기도 했어요.

결국 이 중 가장 해결하기 쉬워 보인 건 Next.js의 문제였습니다. 인프라나 UI 편집 같은 구조적인 문제가 아니라, '에디터가 불편하다'는 단일 지점의 문제였으니까요. 그래서 Next.js 인프라는 유지한 채, 에디터 편의성만 개선하는 방향으로 다시 블로그를 만들기로 했습니다.

새롭게 구현한 플랫폼

Notion + Next.js

ChatGPT에서 Notion MCP로 접근 가능한 것을 경험하고, Notion API를 적용하게 되었습니다. Notion은 순수 markdown보다는 더 익숙하고 WYSIWYG으로 편리하게 사용가능했습니다. 그리고 무엇보다 자체적으로 Mermaid 렌더링을 지원해서 편집 시에도 다이어그램을 확인할 수 있는 것이 장점으로 다가왔습니다.

작동 방식

Next.js에서는 Notion API를 통해 얻은 데이터에서 다음과 같이 속성값들을 같이 읽게 됩니다. Notion의 속성에 다음과 같이 항목을 추가하여 입력할 수 있게하고, 이를 SEO와 글 분류 등에 활용했습니다.

  • CoverImage
  • PublishedAt
  • Slug
  • Status Draft, Published 로 나뉘어 Published 인 글만 호출하여 사이트에 표시하게 합니다.
  • Summary metadata의 description에 입력되는 항목입니다.
  • Tags 글 목록 페이지에서 글을 분류하기 위한 태그 기능을 위한 값입니다.

이슈

이전에 Notion 없이 Next.js만을 사용했을 때도 겪었던 이슈인데, Mermaid 렌더링 엔진이 단일 포스팅 페이지 접속 시 로딩을 길게 만드는 문제를 겪고 있습니다.

처음엔 "Mermaid 코드가 있는 페이지에서만 엔진을 로드하면 해결되지 않을까" 생각했습니다. remark 플러그인이 마크다운을 파싱하는 시점에 mermaid 코드블록이 있는지 먼저 감지하고, 있을 때만 해당 페이지에서 Mermaid 컴포넌트를 클라이언트 사이드에 동적으로 불러오도록(dynamic import) 구현했습니다. 하지만 여전히 로딩 문제가 발생했습니다.

즉 문제는 "불필요하게 로드되고 있는가"가 아니라, "Mermaid 라이브러리 자체가 무겁다"는 데 있었습니다. 다이어그램이 있는 페이지에 들어가면 브라우저가 그 시점에 라이브러리 전체를 내려받고 파싱해야 해서, 조건부 로딩을 이미 하고 있어도 그 페이지만큼은 여전히 느립니다.

그래서 계획을 두 단계로 다시 잡았습니다.

  • 단기: 로딩 상태 표시 지금은 다이어그램이 그려지기 전까지 빈 화면이라 "멈춘 것처럼" 느껴집니다. 로딩 중임을 알려주는 최소한의 스켈레톤 UI를 넣어 체감 속도부터 개선합니다.
  • 근본 해결: 빌드 타임에 미리 SVG로 변환 클라이언트에서 그때그때 그리는 대신, ISR 재검증 시점에 서버에서 Mermaid 코드를 SVG로 미리 변환해두고, 방문자에게는 완성된 SVG만 내려주는 방식을 검토하고 있습니다. 이러면 브라우저가 무거운 렌더링 엔진을 아예 받지 않아도 됩니다.

당장은 콘텐츠가 많지 않아 체감되는 빈도가 낮지만, 다이어그램을 쓰는 글이 늘어나기 전에 근본 해결 쪽으로 옮겨갈 계획입니다.

남은 과제

앞선 이슈 해결, 그리고 이제 콘텐츠를 게시하는 일만 남았습니다.

또한 각 콘텐츠에 따라 SEO작업도 해보면서 google search console과 google analytics의 역량을 높이도록 노력해야겠습니다.

AI로 인해 요즘은 다른 개발자 분들의 기술 블로그 글을 참고해서 개발하는 일이 줄었을 지도 모릅니다.

하지만 경험을 기록하고 또 공유하는 측면에서, 저는 계속 작성해보겠습니다.

© 2026 In Kwon