2025년엔 어떤 리치텍스트 편집기 프레임워크를 선택해야 할까?

(liveblocks.io)

64P by xguru 11일전 | ★ favorite | 댓글 12개

요즘 앱에 필수적인 리치 텍스트 에디터(WYSIWYG)는 Linear, Notion, Google Docs 같은 서비스에서 보편적으로 사용됨
Liveblocks가 지난 1년간 다양한 인기 에디터를 분석하고, 각 에디터의 장단점을 파악해 정리함
에디터는 대체로 ‘코어형’과 ‘기능 포함형(Battery-included)’ 두 가지로 나뉨
간단한 에디터 하나만 필요하다면 가벼운 옵션을, 복잡하고 협업 기능이 많은 에디터를 만들려면 확장성이 높은 것을 고려해야 함
전반적으로 가장 무난한 선택은 Tiptap으로, 기능이 풍부하면서도 지나치게 관여적이지 않은 밸런스를 가지고 있다고 평가됨
협업
- 우리(Liveblocks)는 협업 기능에 집중해왔으며, 대부분의 에디터에서 Yjs라는 CRDT 라이브러리를 통해 실시간 협업을 구현 가능함
- Yjs를 쓸 때 문서를 저장하고 실시간 연결을 유지해줄 백엔드 서비스가 필요함
- Liveblocks는 Yjs 를 지원하는 여러 에디터에서 사용 가능한 제네럴 Yjs 백엔드를 제공하며, Tiptap·Lexical용 통합 솔루션도 제공함
- 일부 에디터는 자체 OT(Operational Transform) 기반 솔루션이나 클로즈드 소스 클라우드 서비스를 사용하기도 함
시작 전 주의사항
- Draft.js처럼 유지보수가 종료된 에디터나, 작은 커뮤니티만 있는 에디터, 또는 프라이빗 소스 에디터(Froala 등)는 제외
- 접근성(a11y)은 대부분 에디터에서 어느 정도 작업이 필요하며, 각 에디터 문서를 참고해야 함

Tiptap

ProseMirror 위에서 동작하는 에디터로, ProseMirror의 복잡함을 추상화해 개발 경험을 높임
대부분 MIT 라이선스로 제공되며, Tiptap Cloud나 Liveblocks 등에서 실시간 협업 기능을 바로 이용 가능함
기능이 많지만 트리 셰이킹 가능한 구조로 만들어져 있어, 코어 번들 크기는 Quill·Slate·Lexical보다 작게 유지 가능함
확장
- Tiptap은 간단한 노드, 마크, 커맨드, 확장 기능을 추가하기 쉽게 설계됨
- 필요한 경우 기존 확장의 동작을 오버라이드해 원하는 대로 커스터마이징 가능함
- 일부 “프로” 확장 기능은 유료 형태로 제공됨
고급 사용자 정의
- ProseMirror의 구조를 직접 다룰 필요가 생길 수 있음
- 명령 체인(command chain) 등 Tiptap 고유의 추상화에 익숙해지는 데 시간이 조금 걸림
- 데이터 모델은 스키마(schema) 기반이며, 대부분 자동 생성되지만 고급 기능 시 스키마를 직접 다룰 수도 있음
한계(Drawbacks)
- ProseMirror 문서와 Tiptap 문서를 번갈아 참조해야 해 가이드라인이 혼동될 수 있음
- 접근성(a11y) 관련 내용이 구현자에게 많이 의존됨
- 트랜잭션 시 문서 상태를 불필요하게 순회하면 성능 저하가 발생할 수 있음
서버 사이드 변경
- Tiptap 자체로 서버 측에서 문서 조작하는 것은 쉽지 않음
- ProseMirror를 직접 활용해 처리하거나 JSON 문서를 직접 수정하는 방식을 고려해야 함
- Liveblocks는 ProseMirror 문서 수정을 좀 더 쉽게 하는 라이브러리를 제공함
실시간 협업
- Tiptap은 Yjs로 실시간 협업 기능을 제공하는 확장을 갖춤
- Tiptap Cloud, Liveblocks 등 여러 클라우드 솔루션과 연동 가능함
- Liveblocks Text Editor는 실시간 협업 외에도 커서 표시, 코멘트, 멘션, 버전 이력 등 다양한 기능을 추가 제공함
장점(Pros)
- 우수한 문서화 지원
- 뛰어난 실시간 협업 기능 제공
- 프레임워크에 독립적이며 React 전용 패키지 제공
- 높은 확장성
- Liveblocks 또는 Tiptap Cloud와의 통합 가능
단점(Cons)
- 최적의 사용 방식을 따르지 않으면 성능이 저하될 가능성
- 고급 기능 개발을 위해 ProseMirror 내부 구조 학습 필요
- 기본적으로 서버 측 헤드리스 편집 기능이 부족

BlockNote

BlockNote는 Tiptap·ProseMirror를 확장한 블록 기반 에디터로, Notion 스타일 기능을 제공함
대부분 React 위주로 개발되어 있어, 다른 프레임워크에서 UI 컴포넌트를 활용하기 어렵다는 특징이 있음
Slash 메뉴, 플로팅 툴바 등 필요한 기능이 이미 포함된 상태로 간편하게 사용 가능함
한계
- BlockNote 자체는 오픈소스이지만 docx·PDF 익스포터 등 일부 기능은 유료 구독이 필요함
실시간 협업
- Yjs·Liveblocks 기반의 협업 기능을 지원함
- 곧 정식으로 Liveblocks 연동을 제공할 예정임
장점
- 안정성이 검증된 Tiptap과 ProseMirror 기반
- Yjs와 Liveblocks를 활용한 실시간 협업 기능 제공
- 블록 기반 편집 API 및 UI 컴포넌트 기본 제공
단점
- 주로 React 전용으로 설계됨
- 기본적인 에디터들에 비해 번들 크기가 더 큼

Lexical

Facebook(Meta)에서 지원하는 에디터로 큰 관심을 받고 있음
Liveblocks에서 수개월 동안 코멘트·멘션·버전 이력·실시간 협업 등 확장을 개발한 결과, 아직 초기 단계라는 인상을 받음
현재 1.0 미만 버전으로, 계속 빠르게 업데이트되고 있음
한계
- “순수 데코레이션(pure decorations)” 기능이 없어 커서 표시 같은 기능을 구현하기 위해 DOM 요소를 에디터 위에 별도로 올려야 함
- 기본적인 Yjs 협업 지원이 아직은 엣지 케이스 처리에 취약함
- 루트 노드 이름을 하드코딩해 문서 내 여러 에디터를 동시에 사용하기 어렵다는 이슈가 존재함
실시간 협업
- Liveblocks 패키지를 사용하지 않는 한, Lexical 협업 구현은 난이도가 높음
- StickyNotes 예시 등에서 루트 노드를 여러 개 만들 때 각각 별도 문서·소켓 연결을 사용하는 방식으로 우회함
- 빠른 개발 속도로 이슈가 꾸준히 해결되고 있음
Lexical 확장
- Lexical은 노드 계층 구조를 통해 데이터를 관리함
- 4가지 코어 노드 타입을 상속해 자체 노드를 만들 수 있음
- React 전용 LexicalComposer와 @lexical/react 패키지를 통해 스피드를 높일 수 있음
- 백엔드에서 DOM 없이 Lexical을 동작시키기 위해 @lexical/headless 패키지를 사용할 수 있음
서버 사이드 변경
- Lexical 문서를 서버에서 수정하는 것이 가능하며, Liveblocks는 이를 단순화하는 라이브러리를 제공함
장점
- Yjs를 활용한 실시간 협업 기능 지원
- 프레임워크에 독립적이며 React 전용 패키지 제공
- 댓글, 멘션, 버전 히스토리와 통합된 Liveblocks 지원
- Meta의 지원을 받는 매우 활발한 개발 및 대규모 커뮤니티
단점
- Yjs 실시간 협업 기능은 엣지 케이스를 직접 처리하지 않으면 약간의 버그 발생 가능성
- 순수 데코레이션 기능이 부족하며 고급 기능을 위해 DOM 우회 처리가 필요
- Tiptap 및 Slate에 비해 코어 패키지의 크기가 더 큼

Slate

Discord, Grafana, Sanity.io, Slite 등에서 사용 중인 커스터마이징 가능한 에디터 프레임워크
Liveblocks는 자체 코멘트 컴포저에 기본값으로 Slate를 채택함
데이터 구조가 단순하고, 전면 통제가 가능하며, React 외에도 범용적으로 활용 가능함
Slate 확장
- 여러 가지 예시와 문서를 통해 Slate를 확장 가능함
- 플러그인 에코시스템은 제한적이지만 직접 구현이 어려운 편은 아님
- 보다 확장된 형태로 Plate라는 프로젝트가 존재함
한계
- Tiptap보다 조금 더 무거운 번들 크기를 가짐
- 기본 내장 기능이 적어 직접 구현해야 할 부분이 생김
실시간 협업
- slate-yjs, @liveblocks/yjs 등을 이용해 Slate 문서의 실시간 협업 구현 가능함
장점
- 우수한 문서화 지원
- Yjs를 활용한 실시간 협업 기능 지원
- 프레임워크에 독립적이며 React 전용 패키지 제공
- 높은 확장성
단점
- Tiptap에 비해 약간 더 큰 번들 크기
- 기본 제공 기능 부족

Quill

Slack, LinkedIn, Figma, Zoom, Miro, Airtable 등에서 사용된 역사가 있는 에디터
한동안 개발이 주춤했으나 2024년 4월 버전 2를 릴리스하며 TypeScript 재작성 등으로 다시 활발해진 상태임
Parchment라는 고유 문서 모델을 사용하며, 이는 ProseMirror 스키마와 유사한 개념임
한계
- Lexical처럼 순수 데코레이션 기능이 없어, 컬러 하이라이트나 협업 커서 같은 기능을 위해 별도 DOM 요소를 오버레이해야 함
- Quill 2용 플러그인들이 아직 업데이트되지 않은 경우가 많음
- 커뮤니티 활동이 다른 에디터에 비해 다소 적을 수 있음
실시간 협업
- Yjs와 y-quill을 결합해 실시간 협업 구현 가능함
- 별도 백엔드는 Liveblocks 등 다양한 방식을 사용 가능함
장점
- 우수한 문서화 지원
- 프레임워크에 독립적이며 React 전용 패키지 제공
- Yjs를 활용한 실시간 협업 기능 지원
- 간단한 델타 포맷 사용
단점
- 기본 제공 기능 부족 및 플러그인이 아직 Quill 2에 맞춰 업데이트되지 않음
- 순수 데코레이션 기능 부족
- 비교적 덜 활발한 개발 및 작은 커뮤니티
- Tiptap 또는 Slate에 비해 두 배 큰 번들 크기

ProseMirror

Tiptap·Remirror·BlockNote 등 여러 에디터의 기반이 되는 핵심 프레임워크
스키마, 상태(state), 뷰(view), 트랜스폼(transform) 등 명확한 구조로 안정적인 동작을 보장함
아예 처음부터 직접 코어 라이브러리만으로 에디터를 구성하려면 코드량이 많아지는 편임
한계
- 간단한 에디터를 만드는 데도 코드가 상당히 필요하다는 점이 문서에 명시되어 있음
- Tiptap, Remirror, BlockNote 같은 상위 레벨 래퍼를 활용하는 것을 권장함
- 러닝 커브가 다소 높지만 문서와 커뮤니티가 잘 정비되어 있음
장점
- 활발한 커뮤니티와 함께 우수한 문서화 제공
- Yjs를 활용한 실시간 협업 기능 지원
단점
- 기본 예제를 구현하기 위해 많은 코드가 필요
- 기본 제공 기능 부족
- 비교적 가파른 학습 곡선

Plate

Slate 기반으로, AI 기능이나 멘션, 코멘트 등 풍부한 플러그인을 제공하는 “배터리 포함형” 프로젝트
필요한 기능만 골라서 사용할 수 있어 유연함
유료 템플릿도 제공하며, React 전용으로 설계됨
한계
- 협업은 현재 Hocuspocus만 공식 지원하며, 다른 Yjs 백엔드(예: Liveblocks)와 연결하기 위한 구현이 필요함
- React 전용이어서 다른 프레임워크와는 호환이 제한적일 수 있음
- 기능이 많아 번들 크기가 커지는 경향이 있음
장점
- 다양한 플러그인 라이브러리 제공
- 서버 측 편집 기능 지원
- 빠른 시작을 돕는 템플릿 제공
단점
- React 전용으로 설계
- 협업 기능이 Hocuspocus를 통해서만 사용 가능
- 기본적인 에디터들에 비해 번들 크기가 더 큼

Remirror

ProseMirror 기반의 에디터로, Tiptap과 유사하지만 더 배터리가 포함된 접근을 지향함
30개 이상의 플러그인, React 훅, 국제화(i18n), 접근성(a11y) 기능 등을 지원함
MIT 라이선스로 오픈소스이며, 협업 기능도 제공함
한계
- Tiptap보다 커뮤니티 규모가 작고 업데이트가 느릴 수 있음
- React 전용 기능이 많아 다른 환경에서는 제약이 있을 수 있음
- 번들 크기가 다소 큰 편임
실시간 협업
- Remirror는 YjsExtension을 통해 Yjs와 Liveblocks 협업을 지원함
장점
- 우수한 문서화 지원
- 다양한 플러그인 라이브러리 제공
- Yjs와 Liveblocks를 활용한 협업 기능 지원
단점
- React 전용으로 설계
- 더 큰 번들 크기
- 업데이트 빈도가 낮고 작은 커뮤니티

Editor.js

블록 단위 편집을 지원하는 리치 텍스트 에디터로, 다양한 플러그인과 큰 커뮤니티를 보유함
블록, 인라인, 튠(tune)으로 구성된 데이터 구조를 가짐
프레임워크에 구애받지 않으며, 툴팁 등 여러 편의 기능이 내장됨
한계
- 실시간 협업 지원이 공식적으로 없고, 일부 시도된 PR이 있으나 유지보수 상태가 불확실함
- 기본 패키지만으로도 용량이 큰 편임
실시간 협업
- 공식적으로 지원하지 않음
장점
- 다양한 기능을 가진 풍부한 플러그인 라이브러리 제공
- 여러 CMS 및 백엔드 프레임워크와의 커뮤니티 기반 통합 지원
단점
- 더 큰 번들 크기
- 실시간 협업 기능 부재

CKEditor

20년 이상 역사를 가진 에디터로, 현재 버전(5)은 현대적 구조와 풍부한 기능을 제공함
Angular, React, Vue, Next 등 다양한 프레임워크를 지원함
GPL-2 라이선스로 배포되어, 특정 상황에서는 오픈소스를 요구하며, 상업적 용도로는 별도 라이선스 구입이 필요함
한계
- 플러그인 중 상당수가 유료이며, 협업 기능 역시 CKEditor의 클라우드 서비스만 사용 가능함
- GPL-2 라이선스와 로드 기반 과금 체계가 많은 사용자에게 장애물이 될 수 있음
실시간 협업
- CKEditor의 독점 클라우드 서비스 외에 다른 협업 솔루션은 제공되지 않음
장점
- 기본적으로 매우 풍부한 기능 제공
- 다양한 프레임워크와 호환
단점
- 협업 기능이 CKEditor의 클라우드 서비스에 종속적
- GPL-2 라이선스가 일부 사용자에게 제약이 될 수 있음
- 일부 기능은 사용량 기반 요금제로 제공됨

TinyMCE

CKEditor와 마찬가지로 20년 이상 역사를 가진 에디터로, GPL-2 라이선스를 따름
Angular, React, Vue 등 다양한 환경에서 사용 가능함
로드 수 기반의 과금 방식을 가진 클라우드 협업 서비스가 존재함
한계
- 마크다운, 멘션, 코멘트, 고급 타이포그래피 등 주요 기능이 유료 플러그인으로 제공됨
- 서버 측에서 문서를 조작하는 방법에 대한 문서가 부족함
실시간 협업
- TinyMCE의 독점 협업 솔루션 외에는 다른 방식이 공개되어 있지 않음
장점
- 기본적으로 매우 풍부한 기능 제공
- 다양한 프레임워크와 호환
단점
- 협업 기능이 Tiny Cloud 서비스에 종속적
- GPL-2 라이선스가 일부 사용자에게 제약이 될 수 있음
- 일부 기능은 사용량 기반 요금제로 제공됨

에디터 비교 요약

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: 제공하지 않음 (예제 있음)
- Mentions: Suggestion 플러그인 사용 가능
- Server-side editing: Prosemirror-state 및 prosemirror-model로 Node.js에서 문서 수정 가능
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Liveblocks와의 통합으로 설정 없이 가능, 커스텀 가능
- Mentions: Liveblocks와의 통합으로 설정 없이 가능, 커스텀 가능
- Server-side editing: ProseMirror 또는 Liveblocks' Node.js ProseMirror 패키지를 통해 가능
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: 가능
- Mentions: 가능
- Server-side editing: ProseMirror 또는 Liveblocks' Node.js ProseMirror 패키지를 통해 가능
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Liveblocks 또는 커스텀 예제를 통해 가능
- Mentions: 가능
- Server-side editing: ProseMirror 또는 Liveblocks' Node.js ProseMirror 패키지를 통해 가능
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, 기타
- Collaboration: Liveblocks, Yjs
- Comments: Liveblocks와 통합하여 설정 없이 가능, 커스텀 가능
- Mentions: Liveblocks와 통합하여 설정 없이 가능, 커스텀 가능
- Server-side editing: Lexical 또는 Liveblocks' Node.js Lexical 패키지를 통해 가능
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: 제공하지 않음 (예제 있음)
- Mentions: 예제 있음
- Server-side editing: 제공하지 않음
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: React 전용
- Collaboration: Hocuspocus (Yjs)
- Comments: 가능
- Mentions: 가능
- Server-side editing: 가능
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: 제공하지 않음 (예제 있음)
- Mentions: 서드파티 라이브러리 사용 가능
- Server-side editing: 제공하지 않음
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: 지원하지 않음 (서드파티 예제 있음)
- Comments: 제공하지 않음 (서드파티 라이브러리 있음)
- Mentions: 제공하지 않음 (예제 있음)
- Server-side editing: 제공하지 않음
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: CKEditor Cloud와 통합
- Comments: 가능
- Mentions: 가능
- Server-side editing: 가능
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, 기타
- Collaboration: Tiny Cloud와 통합
- Comments: Tiny Cloud와 통합
- Mentions: 가능
- Server-side editing: 제공하지 않음
- License: GPL-2+
- GitHub Stars: ⭐ 15k

▲

firea32 4일전 [-]

react custom component 개발이 편한 tiptap 이 가장 낫더군요.

답변달기

▲

vb6ko 10일전 [-]

저도 최근 찾아봤었는데 잘정리해주셔서 감사합니다.

우리 한글의 경우 특정에디터들은 모바일에서 입력 잔버그가 있습니다.
<동해물과> 입력시 <ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ> 로 입력되거나
<동해물과> 입력시 <동동해해물물과과> 로 입력됩니다.
(참고 : https://github.com/ckeditor/ckeditor5/issues/13693)

저는 react, vue 등 framework 를 쓰지 않고 있고 에디터 라이센스 구매가 꺼려지다보니 선택의 여지가 매우 좁았습니다.

이에 본문 외 아래 4가지를 더 살펴보았어요.

https://trix-editor.org/
루비온레일즈의 DHH 가 이끄는 37시그널에서 만든 에디터에요. 순수 자바스크립트 (리액트 등을 쓰지 않았다는 의미)로 만들어져있고 커스텀하기도 어렵진 않았어요. (유튜브링크 붙여넣을시에 유튜브임베드로 자동전환 등)

https://ui.toast.com/tui-editor
nhncloud에서 만든 툴이에요.

https://naver.github.io/smarteditor2/demo/
네이버스마트에디터2이에요. 클래식하지만 한국인대상서비스에서는 사랑받는 익숙함이될것같았어요.

https://summernote.org/
한국인이 개발하고 계시는 서머노트입니다. 저는 이걸 선택했습니다. 테마적용하면 세련되어지구요. 한국인이 생각하는 기능들이 빌트인이라 편합니다. (위 유튜브링크 임베드전환 등) 다만 tailwind prose 로 꾸미려는데 자체 typography 스타일이 있어서 손을 좀 썼어야해요.

답변달기

▲

teddy418 10일전 [-]

2번 도구는 정정해드리고 싶은게 있는데, tui editor 는 토스가 아닌 nhncloud 에서 오픈소스로 개발하고 있는 프로젝트입니다.

답변달기

▲

vb6ko 9일전 [-]

그렇네요 정정합니다 (수정이 어딨는지모르겠네요..)

답변달기

▲

moderator 5일전 [-]

nhncloud 로 수정했습니다.

답변달기

▲

carnoxen 6일전 [-]

원래 이 사이트에 수정은 없습니다. 관리자가 수정하는 수밖에 없어요.

답변달기

▲

tsboard 11일전 [-]

저는 tiptap을 처음 프로젝트에 적용해서 써봤는데, 다른 전통적인 에디터들 대비 문서화도 기능도 구현도 모두 좋았어서 만족하면서 사용하고 있습니다. 필요한 것만 딱딱 가져와서 제 입맛대로 UI를 구현해서 쓰는 맛이 좋았는데, 한가지 좀 벅찬 부분은 그 입맛대로 구현하는 작업량이 보통이 아니었습니다 ㅎㄷㄷ...!

답변달기

▲

carnoxen 10일전 [-]

여기엔 없지만, 워드프레스 구텐베르크가 독립된 라이브러리로 나왔으면 하는 바람이 있습니다.

답변달기

▲

imjlk 10일전 [-]

https://github.com/Automattic/isolated-block-editor
나와있긴하지만 본문에 소개된 것들에 비하면 활용 사례가 현저히 떨어지긴합니다

답변달기

▲

carnoxen 10일전 [-]

오! Automattic 사에서 다른 이름으로 보관하고 있었군요. 회사에서 워드프레스를 쓸 당시 가장 좋아했던 기능입니다.