노션형 에디터, Tiptap 에디터 개발 전에 알아야 할 것

안녕하세요, 사랑받는 IT 프로덕트의 첫 스텝, 똑똑한개발자입니다 :)

3줄 요약

• Tiptap은 ProseMirror 기반의 헤드리스 리치 텍스트 에디터로, 노션형 에디터를 구현할 때 가장 현실적인 선택지예요.

• Quill·Draft.js는 표·이미지·멘션 같은 복잡한 구조를 확장할 때 한계가 오지만, Tiptap은 문서를 JSON 구조로 다루고 기능을 확장(extension) 단위로 붙입니다.

• Tiptap 에디터 개발의 핵심은 기능 구현이 아니라 문서 구조 이해 + UX 중심 커스터마이징이에요.

최근 SaaS 서비스나 내부 업무 관리 툴에서 "노션처럼 문서를 편집하고 협업 가능한 에디터"를 도입하고 싶다는 요청이 많아요. 하지만 직접 구현해보면 생각보다 어렵습니다.

기존 오픈소스 에디터인 Quill이나 Draft.js는 기능 확장이나 커스터마이징에 제한이 있어, 복잡한 문서 구조를 안정적으로 유지하기 어렵죠. 이미지, 멘션, 표, 드래그 앤 드롭 등을 추가하면 코드가 엉키고 버그가 나기 쉬워요.

요즘 Tiptap을 활용해 노션형 에디터나 커스터마이징 에디터를 구현하고 싶어 하는 분들이 부쩍 많아졌습니다.

오늘은 Tiptap 라이브러리의 기술 소개와 실제 활용 사례를 함께 정리했어요. Tiptap 에디터 개발에 관심 있는 분들이 쉽게 이해하고 참고할 수 있도록 준비했습니다.

Tiptap 라이브러리란 무엇인가요?

Tiptap 기본 개념

Tiptap은 ProseMirror 기반의 오픈소스 리치 텍스트 에디터(Rich Text Editor) 라이브러리예요.

Notion이나 Medium과 같은 UX를 구현할 수 있어서, 에디터 커스터마이징이 필요한 웹앱에서 많이 씁니다.

핵심은 헤드리스(headless) 라는 점이에요. Tiptap은 에디터의 동작과 문서 구조만 담당하고, 툴바·메뉴·버튼 같은 UI는 제공하지 않아요.

처음에는 "그럼 다 만들어야 하나?" 싶지만, 바로 이 지점이 디자인 시스템을 가진 팀에게 가장 큰 장점이 됩니다.

남의 에디터 스타일을 덮어쓰며 싸울 필요 없이, 우리 서비스의 컴포넌트로 에디터를 조립할 수 있으니까요.

Tiptap은 GitLab, LinkedIn 같은 서비스의 문서·콘텐츠 편집 환경에서도 쓰여요. 공식 문서도 React·Next.js·Vue 환경별로 정리가 잘 되어 있어서, 도입 초기 러닝커브가 예상보다 낮은 편입니다.

Tiptap 공식 사이트: tiptap.dev

Tiptap 에디터의 주요 특징 4가지

Tiptap은 내부 구조가 탄탄해 안정적이고, 필요한 기능은 마음대로 추가할 수 있으며, 여러 사람이 동시에 편집할 수 있는 똑똑한 에디터예요. 특징을 네 가지로 짚어볼게요.

1. ProseMirror 기반

• Draft.js, Quill보다 구조적이고 커스터마이즈가 쉬움

• 문서 구조를 JSON 형태로 다루기 때문에 서버와 연동하기 편리

• HTML 문자열을 그대로 저장하는 방식과 달리, 노드 단위로 검증·변환할 수 있어 데이터 무결성 확보에 유리

2. 완전한 커스터마이징 가능

• 메뉴바, 툴바, 단축키 등 UI 직접 구현 가능

• React, Vue, Svelte 등 프레임워크와 호환

• 헤드리스 구조라 기존 디자인 시스템 컴포넌트를 그대로 재사용 가능

3. 확장성

• Bold, Italic, Image, Table, Mention 등 기능을 '확장(extension)'으로 구성

• 필요 기능만 불러오거나 직접 만들 수 있음

• 커스텀 노드를 정의해 서비스 고유의 블록(첨부파일 카드, 서명 영역 등)도 추가 가능

4. 협업 지원

• Y.js 등 CRDT와 연결하면 실시간 협업 에디터 구현 가능

• Google Docs처럼 여러 명이 동시에 편집

• 로컬에서 먼저 반영되고 충돌 없이 병합되는 구조라, 체감 반응 속도가 빠름

Tiptap 설치 및 기본 예시 (React 기준)

npm install @tiptap/react @tiptap/starter-kit

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

export default function MyEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello Tiptap!</p>',
  })

  return <EditorContent editor={editor} />
}

StarterKit 하나로 문단·제목·목록·볼드 같은 기본 확장이 한 번에 들어와요. 여기서부터 필요한 확장만 얹어 나가는 게 Tiptap 에디터 개발의 기본 흐름입니다.

🎨 Tiptap 커스터마이징 예시: 이미지 업로드 + 멘션

npm install @tiptap/extension-image @tiptap/extension-mention

import Image from '@tiptap/extension-image'
import Mention from '@tiptap/extension-mention'

const editor = useEditor({
  extensions: [
    StarterKit,
    Image.configure({ inline: true }),
    Mention.configure({
      HTMLAttributes: { class: 'mention' },
      suggestion: {/* 제안 로직 작성 */}
    })
  ]
})

이미지와 멘션처럼 "있으면 좋은 기능"이 아니라 "없으면 서비스가 안 되는 기능"일수록, 확장 단위로 분리해두는 구조가 유지보수에서 차이를 만들어요.

Tiptap과 다른 에디터 라이브러리 비교하기

에디터 라이브러리를 고를 때 가장 많이 나오는 질문이 "Quill이랑 Tiptap 중에 뭘 써야 하나요?"예요.

판단 기준을 네 축으로 정리하면 선택이 훨씬 쉬워집니다.

정리하면 이렇게 갈라져요.

• 빠르게 붙일 단순 입력창이면 Quill이 여전히 합리적이에요. 툴바가 이미 있으니까요.

• 표·멘션·커스텀 블록·협업까지 가야 하면 Tiptap이에요. 초기 UI 구현 비용을 내고, 대신 확장할 때의 비용을 아끼는 구조예요.

• Draft.js는 신규 도입 관점에서는 권하지 않아요. React 전용이고 API 복잡도가 높아, 지금은 기존 코드 유지보수 맥락에서 더 자주 만나게 됩니다.

실제 활용 사례를 보면 Notion, Linear, Craft 같은 문서 중심 SaaS 서비스부터, 블로그 CMS 에디터, 협업용 메모 툴, 고객센터 FAQ 작성 도구까지 폭넓게 쓰이고 있어요.

플러그에서 Tiptap 에디터를 활용한 사례

똑똑한개발자의 SaaS 서비스 플러그(🔗 www.pluuug.com)는 이메일 작성, 계약서 작성, 블로그 작성 등 모든 문서 작성 경험을 Tiptap 기반 에디터로 제공하고 있어요.

처음 플러그를 설계할 때도 "노션처럼 직관적이고, 다양한 유형의 문서를 유연하게 작성할 수 있는 에디터"가 필요했었죠. 이메일과 계약서와 블로그 글은 필요한 블록이 전혀 다른데, 에디터를 문서 유형마다 따로 만들 수는 없었어요. 하나의 Tiptap 구조 위에서 확장 조합만 바꾸는 방식이 답이었습니다.

똑개가 플러그에서 집중한 Tiptap 활용 포인트는 이렇습니다.

1. 멘션 + 태그 연계 커스터마이징

• 이메일 작성 시 담당자 태그, 계약서 검토자 멘션 등

• 단순 @이름이 아닌 백엔드 DB와 연동해 자동완성 기능 제공

2. 이미지 업로드 + 드래그 앤 드롭

• 블로그 작성이나 계약서 첨부 이미지 편집 시

• 위치 조정, 리사이즈, 캡션 지원

• 이미지 최적화와 썸네일 생성까지 Tiptap 확장으로 처리

3. 표 / 리스트 / 체크리스트 확장

• 블로그 글, 계약서 내 표 작성 지원

• 행/셀 병합, 색상 지정 등 커스터마이징 가능

4. 버전 관리 + 자동 저장 + 복구 기능

• 작성 중인 이메일, 블로그 글, 계약서를 실시간 저장

• 중간 버전 백업과 복구 기능 제공, 데이터 손실 예방

5. 테스트 & 안정성 확보

• 모든 문서 유형에서 E2E 테스트와 유닛 테스트 진행

• Tiptap 문서 구조 검증으로 다양한 작성 케이스 안정성 확보

플러그에서는 Tiptap을 에디터 그 이상으로, 서비스 핵심 UX의 기반으로 씁니다. 그래서 사용자는 이메일, 계약서, 블로그 등 다양한 문서를 노션처럼 직관적이고 안정적으로 작성할 수 있어요.

Tiptap 에디터 개발, 어떤 순서로 시작하면 되나요?

Tiptap 도입을 검토하는 팀이 가장 자주 실패하는 지점은 "확장을 먼저 잔뜩 붙이는 것"이에요. 순서를 이렇게 잡으면 훨씬 안전합니다.

1단계 — 문서 스키마부터 정의하기

어떤 노드(문단, 제목, 표, 이미지, 커스텀 블록)를 허용할지 먼저 정합니다. 스키마 없이 확장을 붙이면 나중에 저장된 문서를 마이그레이션해야 해요.

2단계 — 저장 포맷 결정하기

JSON으로 저장할지, HTML로 저장할지 정합니다. 검색·부분 수정·버전 비교가 필요하면 JSON이 유리해요.

3단계 — 확장은 필요한 것부터 하나씩

StarterKit으로 시작해, 실제 요구사항이 확인된 확장만 추가합니다. 커스텀 노드는 이 단계 이후에.

4단계 — 협업이 필요하면 마지막에 Y.js 연결

실시간 협업은 서버 인프라(WebSocket, 문서 상태 저장)까지 걸리는 작업이에요. 단일 사용자 편집이 안정화된 뒤에 붙이는 게 안전합니다.

자주 묻는 질문

1. Tiptap은 무료로 쓸 수 있나요?

핵심 라이브러리와 기본 확장은 오픈소스로 무료 사용이 가능해요. 다만 일부 고급 확장이나 협업용 클라우드 인프라는 유료 플랜으로 제공되니, 협업·버전 관리까지 계획한다면 도입 단계에서 비용 구조를 함께 검토하는 게 좋아요.

2. Quill이나 Draft.js를 쓰고 있는데 Tiptap으로 옮길 수 있나요?

가능하지만 데이터 마이그레이션이 핵심 작업이 돼요. 기존 에디터가 저장해둔 HTML이나 자체 포맷을 Tiptap 문서 구조로 변환하는 작업이 필요하고, 이때 어떤 노드를 어떻게 매핑할지 스키마 설계를 먼저 해야 해요. 에디터 교체보다 데이터 변환에 시간이 더 걸린다고 보는 게 맞아요.

3. 노션 같은 실시간 협업까지 Tiptap으로 구현할 수 있나요?

네, Y.js 같은 CRDT 라이브러리와 연동하면 여러 명이 동시에 편집하는 환경을 만들 수 있어요. 다만 에디터 코드만으로 끝나지 않고 문서 상태를 주고받는 서버와 저장 전략이 함께 필요해요. 프로토타입은 빠르게 되지만, 프로덕션 안정화는 별도 과제로 잡아두시는 걸 권해요.

똑똑한개발자 | 기업 AX 전환 전문 개발사

제미나이, GPT, 클로드를 활용해 AI Agent 탑재 및 AX 전환의 전문성을 갖춘 IT 프로덕트 에이전시.

https://www.toktokhan.dev/?utm_source=landing&utm_medium=tiptap-editor&utm_campaign=tiptap-editor&utm_term=tiptap-editor