Next.js 블로그 어드민용 마크다운 에디터 라이브러리 비교

블로그 어드민 페이지에서 글 작성 시 사용할 마크다운 에디터 라이브러리 조사. 핵심 요구사항은 실시간 split view 미리보기 + Next.js App Router 호환이다.

종합 비교표

라이브러리	주간 다운로드	유지보수	번들(gzip)	Split View	Next.js SSR
@uiw/react-md-editor	~60K	활발 (2024.12)	~4.6 kB	네이티브	dynamic 필수
@bytemd/react	소규모	감소 추세	3050 kB	네이티브	use client 권장
Tiptap	~2.6M	매우 활발	~~100~~200 kB	없음 (WYSIWYG)	use client 필수
@milkdown/react	~12K	활발	~~100~~200 kB	없음 (WYSIWYG)	dynamic 권장
Vditor	소규모	보통 (2024.12)	~500 kB+	네이티브	dynamic 필수
@toast-ui/react-editor	~15K	3년 전 (중단)	~250 kB+	네이티브	dynamic 필수
react-simplemde-editor	~45K	3년 전 (중단)	~200 kB+	토글 방식	dynamic 필수

Toast UI, SimpleMDE는 유지보수 중단 → 신규 프로젝트 비권장

라이브러리별 요약

1. @uiw/react-md-editor ⭐ Split View 최적

특징: textarea 기반 경량 에디터. preview prop 하나로 edit / preview / live(split) 전환
번들 최소: gzip 기준 약 4.6 kB — 7개 중 가장 작음
XSS 방어: rehype-sanitize 연동 지원
다크모드 지원 (v3.11.0+)
단점: CodeMirror 수준의 고급 편집 기능 없음, 플러그인 생태계 제한적
Next.js 설정:

tsx

"use client";
import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";

const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });

2. @bytemd/react — 경량 + 플러그인 특화

특징: ByteDance(틱톡 모회사)에서 만든 에디터. Svelte로 빌드되어 React 런타임 의존 없음
Split View: 좌측 CodeMirror 6 에디터 + 우측 실시간 렌더링 네이티브 지원
공식 플러그인: GFM, 코드 하이라이팅, 수식(LaTeX), Mermaid 다이어그램, 이미지 줌, 이모지
Viewer 분리: 읽기 페이지에서 <Viewer> 컴포넌트만 따로 사용 가능
단점: GitHub Stars ~1,300으로 커뮤니티 작음, 유지보수 속도 감소 추세
Next.js 설정: "use client" 필수, CodeMirror 파트는 브라우저 전용

3. Tiptap — 생태계 최강, WYSIWYG

특징: 주간 다운로드 ~260만으로 압도적 1위. ProseMirror 기반 헤드리스 WYSIWYG 에디터
Markdown: v3부터 @tiptap/markdown 공식 패키지로 import/export 지원
Split View 없음: 마크다운 원문+미리보기 split view는 직접 구현 필요
생태계: 100+ 익스텐션, Y.js 실시간 협업 지원
유료 기능: Content AI, Cloud Collaboration 일부 유료
단점: 설정 복잡도 높음, Next.js 15에서 hydration 이슈 간헐적 발생
Next.js 설정:

tsx

"use client";
const editor = useEditor({
  immediatelyRender: false, // SSR hydration mismatch 방지 필수
  extensions: [...],
});

4. @milkdown/react — Typora 스타일 WYSIWYG

특징: 마크다운 문법 타이핑 시 즉시 렌더링되는 Typora 방식
Split View 없음: WYSIWYG 특성상 split view 개념 자체가 없음
플러그인: Y.js 협업, LaTeX 수식 등 플러그인으로 확장
단점: 초기 설정 복잡, 학습 곡선 높음
Next.js 설정: dynamic import + ssr: false 권장, 공식 Next.js 레시피 문서 존재

5. Vditor — 기능 최다, 번들 최대

특징: WYSIWYG / Instant Rendering / Split View 세 모드 모두 지원
기능: 수학식, 마인드맵, 플로우차트, Gantt 차트, 악보 등 극단적으로 풍부
번들: ~500 kB+ — 블로그 어드민처럼 단순 용도엔 과함
단점: 공식 React 래퍼 react-vditor 유지보수 중단, 직접 useEffect로 초기화해야 함
Next.js 설정: dynamic import + ssr: false 필수

Next.js App Router 공통 주의사항

모든 마크다운 에디터는 브라우저 DOM API에 의존 → SSR 불가

패턴 A — Tiptap:

tsx

"use client";
useEditor({ immediatelyRender: false })

패턴 B — 나머지 대부분:

tsx

"use client";
const Editor = dynamic(() => import("./Editor"), { ssr: false });

CSS도 클라이언트 컴포넌트 안에서 import 하거나 별도 처리 필요.

상황	추천
빠르게 구축 + split view 필수	@uiw/react-md-editor
풍부한 플러그인 + split view	@bytemd/react
커스터마이징 최대 + 생태계 중시	Tiptap (split view는 직접 구현)
Typora 스타일 UX	@milkdown/react