본문으로 건너뛰기
DEVKBS
작업 원장
012개인 서비스2024.03 –

recodelog.com — 개발 블로그

직접 만들어 직접 운영하는 기술 기록

기간
2024.03 –
분류
웹사이트
역할
기획·디자인·개발 단독
구성
1인
사이트 보기

01개요

블로그 플랫폼을 쓰지 않고 직접 만든 이유는 단순합니다. 제가 쓰는 도구는 제가 고칠 수 있었으면 했고, 블로그 자체가 계속 손볼 수 있는 개인 프로젝트가 되기도 하니까요.

MDX 처리에는 처음에 ContentLayer를 쓰려고 했습니다. 그런데 시작하는 시점에 이 라이브러리가 업데이트도 멈춰 있고 이슈에 답도 달리지 않는 상태였습니다. 당장은 동작하겠지만 Next.js 버전이 올라갈 때마다 발목을 잡힐 게 뻔했습니다.

대안을 찾다가 Velite를 알게 됐습니다. 당시에는 자료가 많지 않았지만 문서를 읽어 보니 필요한 건 다 있었고, 무엇보다 활발히 관리되고 있었습니다. 지나고 보니 좋은 선택이었습니다.

지금은 글을 계속 쌓으면서, 방문 데이터를 직접 수집하는 기능을 붙이는 작업을 이어 가고 있습니다.

02기술 결정

문제, 선택, 결과 순서로 적었습니다.

  1. 결정 01

    유지보수가 멈춘 라이브러리는 쓰지 않는다

    문제
    ContentLayer가 사실상 표준처럼 쓰이고 있었지만, 착수 시점에 저장소 활동이 멈춰 있었습니다. 지금 동작한다는 것과 1년 뒤에도 동작한다는 것은 다른 이야기입니다.
    선택
    대안을 찾아 Velite를 검토하고 도입했습니다. 자료가 적다는 단점이 있었지만 공식 문서가 충분했고, 관리가 이어지고 있다는 점을 더 중요하게 봤습니다.
    결과
    이후 Next.js 버전을 올릴 때 콘텐츠 파이프라인 때문에 막힌 적은 없습니다. 이 일로 라이브러리를 고를 때 기능보다 관리 상태를 먼저 보게 됐습니다.
  2. 결정 02

    글은 파일로 관리한다

    문제
    블로그에 관리자 화면과 데이터베이스를 붙이면 그 자체가 유지보수 대상이 됩니다. 글 하나 쓰려고 로그인하고 에디터를 띄우는 것도 마찰입니다.
    선택
    MDX 파일을 저장소에 커밋하는 방식으로 갔습니다. 글은 코드와 같은 흐름으로 리뷰되고 배포됩니다.
    결과
    인프라가 줄었고 백업이 곧 git 히스토리가 됐습니다. 글을 쓰는 것과 코드를 고치는 것이 같은 도구 안에서 끝납니다.
  3. 결정 03

    디자인 시스템을 먼저 정하고 글을 쓴다

    문제
    블로그는 글이 쌓일수록 형태가 흐트러집니다. 매번 스타일을 조금씩 다르게 하면 나중에 통일할 수 없습니다.
    선택
    shadcn/ui와 Tailwind로 컴포넌트 기본값을 먼저 정하고, 본문 타이포그래피 스케일을 고정한 뒤 글을 쓰기 시작했습니다.
    결과
    글이 늘어도 모양이 유지됩니다. 새 글을 쓸 때 스타일을 고민하지 않아도 된다는 게 가장 좋았습니다.

03주요 기능

  • MDX 기반 글 작성

    Velite로 MDX를 타입이 있는 데이터로 변환해 사용합니다.

  • 태그·카테고리 탐색

    주제별로 글을 좁혀 볼 수 있는 탐색 구조.

  • 다크·라이트 모드

    코드 블록 테마까지 함께 전환됩니다.

  • SEO와 OG

    글마다 메타데이터와 OG 이미지를 생성해 공유 시 형태를 유지합니다.

04화면

Desktop

  • 01

  • 02

  • 03

Mobile · 반응형

  • 01

  • 02

  • 03

05회고

라이브러리를 고르는 기준이 바뀐 계기였습니다. 예전에는 많이 쓰는 걸 골랐는데, 지금은 지금도 관리되고 있는지를 먼저 봅니다.

블로그를 직접 만들면 글 쓰는 시간보다 블로그 고치는 시간이 길어지기 쉽습니다. 그래서 디자인과 구조를 먼저 고정하고, 그다음에는 웬만하면 손대지 않기로 했습니다. 도구만 다듬다 보면 정작 글이 안 쌓입니다.