✍️ 나만의 블로그 에디터 만들기 – Payload CMS 도입기

July 16, 2025

1.서론: 블로그 만든다고 했을 때, 나도 사실 좀 걱정했다

블로그를 만들겠다고 마음먹었을 때, 속으로는 좀 그랬다.

"아 괜히 한다고 했나? 그냥 Tistory나 Velog 쓰지...."

사실 Tistory도 잘 돼 있고, Velog는 쓰기도 편하다.

이미 잘 만들어진 블로그 플랫폼이 넘쳐나는 시대에... 굳이 왜? 나도 그렇게 잠깐 흔들렸다.

하지만 결국엔, "내가 원하는 방식으로 글을 쓰고 보여주는 경험"이 너무 궁금했다.

  • 마크다운 에디터는 어떻게 붙일까?
  • 글 작성할 때 미리보기를 바로 볼 수 있을까?
  • 이미지 업로드는 어디에 저장하지?
  • 글 상태(draft/published)는 어떻게 나눌까?

이런 것들을 하나하나 직접 구현해보는 게 공부도 되고 재미도 될 것 같았다.

그렇다고 CMS를 완전히 처음부터 구현하는 건 부담스러웠고, 그때 알게 된 게 바로 Payload CMS였다.

처음 보는 이름이었지만, 구조를 살펴보니 "내가 딱 원하던 스타일"이라는 생각이 들었다.

2.본론: Payload CMS로 블로그 에디터 세팅하기

2-1. 기술스택 구성

이번 프로젝트는 다음 조합으로 구성했다.

  • Next.js - 프론트엔드 및 전체 앱 프레임워크
  • Payload CMS - 블로그 콘텐츠 관리 및 Admin UI 제공
  • Vercel Blob - 이미지 및 파일 업로드 처리
  • PostgreSQL(Neon) - CMS 데이터 저장소

Payload는 Node 기반