WYSIWYG 에디터 마이그레이션
Overview
CKEditor에서 Tiptap으로 WYSIWYG 에디터를 마이그레이션하여 패키지 크기를 2.5GB에서 3MB로 줄이고, 운영 배포 시간을 약 50% 단축했습니다.
기존 CKEditor는 node_modules 기준 약 2.5GB에 달하는 거대한 의존성을 가지고 있어 CI/CD 파이프라인의 병목이 되고 있었습니다. Tiptap(ProseMirror 기반)으로 전환하면서 동일한 편집 기능을 유지하되, 커스텀 툴바와 이미지 업로드 핸들러를 직접 구현하여 프로젝트 요구사항에 최적화된 에디터를 구축했습니다. 이후 에디터를 독립 npm 패키지(tiptap-editor-kit)로 분리하여 오픈소스로 배포하고, 같은 문제를 안고 있던 관리자 앱에도 동일한 교체를 적용했습니다.
Decisions
완제품 에디터를 계속 쓸 것인가, 최소 코어에 필요한 기능만 붙일 것인가
앱 규모에 비해 빌드가 유난히 느렸고, 원인을 추적해 보니 에디터 패키지였습니다. 여기서 툴바를 직접 만드는 초기 비용과, 앞으로 계속 안고 갈 무게·유지보수 비용을 견줬습니다.
- 기각
CKEditor 유지
툴바까지 완성된 형태로 딸려와 당장은 편하지만, 실제로 쓰지 않는 플러그인까지 포함된 의존성을 계속 안고 가야 합니다. 내장 툴바에 묶여 UI 커스터마이징에도 제약이 있었습니다.
- 채택
Tiptap + 툴바 직접 구현
ProseMirror 기반 최소 코어만 가져와 필요한 기능만 붙이는 구조입니다. 툴바를 만드는 비용이 한 번 들지만 그 뒤로는 가장 가볍고, 장기 유지보수 비용도 가장 적다고 봤습니다. AI 기능 확장을 지원하고 유지보수가 활발한 패키지라 나중에 새 기능을 붙일 때도 유리하다고 판단했습니다.
초기 구현 비용을 한 번 치르는 쪽을 택했습니다. 클라이언트 앱의 에디터 의존성은 약 2.5GB에서 3MB로 줄었고, 만들어 둔 에디터는 독립 npm 패키지로 분리해 다른 프로젝트에서도 쓸 수 있게 했습니다.
관리자 앱에는 에디터를 새로 고를 것인가, 앞서 쓴 구성을 그대로 옮길 것인가
관리자 앱에서도 같은 문제가 반복됐습니다. 설치되는 의존성은 실제로 쓰지 않는 플러그인까지 포함한 풀 메타패키지였는데, 정작 런타임에 쓰이는 산출물은 레포에 커밋된 1.2MB 번들 하나뿐이었습니다.
- 기각
새 에디터 후보 비교
다른 앱에서 이미 Tiptap으로 교체를 끝냈고, 콘텐츠 인터페이스와 이미지 업로드 API까지 동일했습니다. 여기서 다른 에디터를 고르면 유지보수해야 할 에디터가 두 종류로 늘어납니다.
- 채택
앞서 검증한 구성 이식
같은 컴포넌트 구조를 옮기면서 풀·미니 두 종류를 variant prop 하나로 합쳤습니다. 저장 형식이 기존과 같은 HTML이라 데이터 스키마 변경도 필요하지 않았습니다.
두 앱이 같은 에디터 컴포넌트 구조를 쓰게 됐습니다. 이식 과정에서 클라이언트 쪽에도 남아 있던 폰트 크기 유실 결함을 통합 테스트로 발견해 함께 고쳤습니다.
Structure
Challenges & Solutions
거대한 CKEditor 의존성
CKEditor 관련 패키지가 node_modules 기준 약 2.5GB를 차지하여 설치 및 빌드 시간 증가
Tiptap 기반으로 전환하여 에디터 관련 패키지를 약 3MB로 축소, 운영 배포 시간 12분 → 6분으로 약 50% 단축
커스텀 툴바 구현
CKEditor의 내장 툴바에 의존하여 UI 커스터마이징에 제약이 있었음
SVG 아이콘 기반의 커스텀 툴바를 직접 구현하여 프로젝트 디자인 시스템에 완전히 통합
재사용 가능한 패키지 설계
프로젝트에 종속된 에디터 코드로, 다른 프로젝트에서 재사용이 불가능한 구조
프로젝트 의존성을 props 주입 방식으로 분리하고, React와 Vanilla JS 두 가지 entry point를 제공하는 독립 npm 패키지(tiptap-editor-kit)로 오픈소스 배포
Impact
99.8%
2.5GB → 3MB
패키지 크기 감소
50%
12분 → 6분
운영 배포 시간 단축
npm
오픈소스 패키지 배포 (tiptap-editor-kit)