Tiptap으로 나만의 예쁜 텍스트 에디터 만드는 방법
텍스트 에디터, 진짜 예쁘게 만들 수 없을까?
웹 서비스를 만들다 보면 텍스트 에디터가 꼭 필요한 순간이 오는데요.
노션처럼 심플하면서도 확장 가능한 에디터를 만들고 싶은데, 기존 라이브러리는 너무 무겁거나 제약이 많죠.
그럴 때 주목해야 할 게 바로 Tiptap!
Vue, React, Svelte 등 현대 프론트엔드 프레임워크에 완벽하게 대응하면서, 마크다운, 멘션, 이미지 업로드, 하이라이트 등 커스터마이징이 자유로와서 많이 사용하시는 툴입니다.
Tiptap이 뭔가요?
Tiptap은 ProseMirror 기반의 헤드리스(Headless) 리치 텍스트 에디터입니다.
즉, 기능만 제공하고 UI는 직접 커스터마이징할 수 있어 디자이너나 프론트 개발자에게 이상적이죠!
Tiptap의 특징은?
모던 프레임워크 호환 (React, Vue 등)
마크다운/HTML 입력 가능
확장기반 구조로 원하는 기능만 추가 가능
커스터마이징 자유도 매우 높음
Tiptap 설치 및 기본 구현법
브런치는 코드박스가 없어서 아래와 같은 글머리 기호로 넣어드릴게요!
팁탭 설치하는 방법
npm install @tiptap/core @tiptap/starter-kit
React 기준으로 에디터 인스턴스를 생성해봅니다.
import { useEditor, EditorContent } from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' const editor = useEditor({ extensions: [StarterKit], content: '<p>Hello World!</p>', })
Tip: StarterKit은 기본적인 Bold, Italic, Heading 등을 포함한 패키지입니다!
진짜 쓸만한 에디터로 팁탭 기능 확장하기
1. 마크다운 기능 추가
npm install @tiptap/extension-markdown
2. 이미지 업로드
import Image from '@tiptap/extension-image'
3. 멘션 기능, 태그 기능
import Mention from '@tiptap/extension-mention'
UX까지 챙기는 커스터마이징 팁
툴바 직접 구성: 버튼 클릭 시 에디터 명령 실행
다크모드 지원 스타일 설정
자동 저장, autosave 기능
모바일 대응을 위한 레이아웃 최적화
editor.chain().focus().toggleBold().run()
이처럼 버튼 하나에 원하는 기능을 직접 매핑할 수 있어 디자인 시스템과 잘 어울리게 커스터마이징이 가능합니다.
에디터는 단순한 기능이 아닌 '경험'
Tiptap을 써보면 알 수 있습니다!
단순히 텍스트를 입력하는 ‘기능’이 아니라, 사용자 경험을 완성하는 ‘디테일’을 손에 넣을 수 있는 도구라는 걸요.
내가 원하는 기능만 골라서 적용할 수 있고
원하는 스타일로 구성할 수 있으며
마크다운, 이미지 업로드, 태그 등도 추가 가능하죠.
그야말로 “기깔난 웹 텍스트 에디터”를 만들기에 가장 적합한 도구입니다.
마무리
개발자라면 누구나 한 번쯤은 “에디터 만들기 너무 귀찮다...”라고 느꼈을 겁니다.
하지만 Tiptap을 활용하면, 코드 몇 줄로 노션급 에디터도 구현 가능합니다.
디자인 자유도, 기능 확장성, UX까지 모두 챙기고 싶다면 Tiptap을 꼭 한 번 써보세요.
커스터마이징된 Tiptap 에디터 개발이 필요하다면?
외주 개발사는 역시 똑똑한개발자 추천합니다!
