알고 보니 KuroEditor도 직접 만들어야 했다 (눈물) Vol. 1
product Technology OSS

알고 보니 KuroEditor도 직접 만들어야 했다 (눈물) Vol. 1

PC 없이도 간편하게 디자인할 수 있는 헤드리스 CMS를 개발하던 중 한 가지 사실을 깨달았습니다. KuroCMS에 딱 맞는 에디터가 없더군요(웃음).

잠깐, 에디터가 없다고?!

KuroCMS 개발이 반쯤 진행되었을 때, 쿠로토는 문득 Strapi에서 괜찮은 에디터를 설정하기 위해 쏟았던 엄청난 노력과 시간이 떠올라 그 자리에서 얼어붙었습니다. 머리가 하얗게 새어버렸다면 판다 토끼가 되었을지도 모릅니다.

비록 Strapi용 에디터들은 작동하지 않았지만, 다른 곳에서 요구 사항을 충족하는 에디터를 찾을 수 있을 거라는 희망을 품고 조사하기 시작했습니다... 하지만 찾을 수 없었습니다. 그럴 리가 없어, 제발 아니라고 말해줘, 채피! (ChatGPT)


오직 MIT 라이선스 조건으로만 검색

KuroCMS와 함께 패키징하여 배포할 계획이었기 때문에 MIT 라이선스가 적용된 에디터가 가장 편리한 선택임이 분명했습니다.

조사해보니 최근 웹 에디터의 트렌드는 로직만 가져오고 UI는 직접 만드는 헤드리스(headless) 옵션이 완전히 지배하고 있었습니다. 마치 헤드리스 CMS처럼 말이죠.


세계 최고 평점의 5대 에디터


【TipTap】

  1. 전 세계가 인정하는 독보적인 1위로 알려져 있습니다. 매우 유연하며 React/Vue를 지원하고 HTML / JSON을 출력합니다.
  2. 헤드리스 에디터입니다. 버튼 디자인과 툴바 레이아웃을 앱 UI에 완전히 맞출 수 있습니다. 강력한 ProseMirror 엔진을 기반으로 구축되었습니다.
  3. 사용자 기반: GitHub 스타 37k개 이상, 주간 다운로드 800만 회 이상. 사실상 글로벌 표준입니다.
  4. 통합 방법: `npm install @tiptap/react`를 통해 설치하고 `useEditor` 훅을 사용하여 제어합니다.


【Editor.js】

  1. 열렬한 팬층을 보유하고 있으며, Notion과 유사한 직관적인 사용감, 플러그인 기반, JSON(구조화된 데이터)을 출력합니다.
  2. 특징: 모든 것을 블록(문단, 이미지, 제목)으로 취급합니다. Notion과 유사한 조작감을 제공합니다.
  3. HTML 대신 깨끗한 JSON을 출력하므로 웹, 모바일 앱, 스마트워치 등에 동일한 데이터를 표시하는 데 이상적입니다.
  4. 통합 방법: 코어 패키지와 개별 도구(Image, Header 등)를 별도로 로드한 다음 `new EditorJS()`로 초기화합니다.


【Lexical】

  1. 빠르게 성장하고 있으며 빠르고 가볍고 강력합니다. Meta에서 제작하였고 디자인 중심적이며 HTML / JSON을 출력합니다.
  2. 성능과 웹 접근성(accessibility)에 특화되어 있습니다. 매우 가벼워서 대규모 앱도 신속하게 작동하도록 유지합니다.
  3. 사용자 기반: 급격히 증가하는 추세입니다. AI 생성 콘텐츠와 잘 맞아서 AI 에디터로 자주 채택됩니다.
  4. 특징: 고급 상태 관리 및 트리 기반 데이터 모델을 제공합니다. WCAG(웹 콘텐츠 접근성 지침)를 완전히 준수합니다.
  5. 통합 방법: React 플러그인으로 통합합니다. 명명된 "노드(node)"를 정의하여 에디터를 빌드합니다.


【Slate】 (React 전용 최고의 프레임워크)

  1. 개발자를 위해 설계되었으며 최고의 맞춤화(customization)를 지원하고 React 전용이며 JSON(자유 형식)을 출력합니다.
  2. 특징: 에디터라기보다는 에디터를 만들기 위한 라이브러리에 가깝습니다. 자신만의 문서 모델을 완전히 정의할 수 있습니다.
  3. 사용자 기반: React 커뮤니티에서 강력한 지지를 받고 있습니다(GitHub 스타 31k개 이상).
  4. 특징: 복잡한 중첩 구조(예: 테이블 안의 리스트, 리스트 안의 이미지)를 가진 문서를 처리하는 데 뛰어납니다.
  5. 통합 방법: 컴포넌트 지향 방식으로 빌드합니다. 렌더링을 제어하기 위해 `renderElement`와 같은 사용자 정의 함수를 작성합니다.


【Milkdown】 (Markdown에 특화된 WYSIWYG)

  1. 특정 사용 사례에 강함 | 마크다운과 시각적 조작의 결합 | 난이도 하~중 | 마크다운 / HTML 출력
  2. 특징: 글을 쓰는 동안 실시간으로 마크다운이 서식화되는 Typora와 같은 경험을 제공합니다.
  3. 사용자 기반: 개발자 및 기술 문서 작성에 특화되어 있습니다.
  4. 특징: 플러그인을 통한 강력한 마크다운 확장 기능을 제공합니다. 수학 기호(LaTeX) 및 다이어그램(Mermaid)을 지원합니다.
  5. 통합 방법: TypeScript로 작성되었으며, 필요한 플러그인을 배열에 담아 전달하여 초기화합니다.


그렇다면 이 5가지 에디터는 어땠을까요?

Strapi의 에디터로 TipTap과 Lexical을 사용해 보았지만, 전혀 잘 맞지 않았습니다... Lexical은 이미지를 제대로 처리하지 못했고, TipTap 역시 문제가 있었습니다. 쿠로토가 원했던 WYSIWYG(에디터에서 편집하는 내용이 최종 결과물과 똑같이 표시되는 것) 근처에도 가지 못했습니다. Editor.js도 기본적으로 마찬가지였습니다. JSON 전용 에디터는 진정한 WYSIWYG를 구현할 수 없습니다. 텍스트와 코드만 연속해서 입력하는 경우라면 괜찮을지 모릅니다. Milkdown의 경우는 이미지에 대한 언급조차 없어서 차라리 LaTeX를 쓰는 편이 낫습니다. 그리고 솔직히 쿠로토는 React를 정말 싫어합니다. Meta에는 죄송합니다(식은땀). 프레임워크가 꼭 필요하다면 기껏해야 Vue를 쓰겠지만, 저는 오로지 Astro파입니다! 그러고 보니 옛날에 '아스트로 구단'이라는 야구 만화가 있었죠.

결국 예전에 Strapi에서 사용했던 Quill + better-table이 가장 좋은 옵션이라는 것을 기억해 냈습니다. 하지만 테이블 구현 방식은 도저히 받아들일 수 없었죠(웃음). 그때 제 마음속의 꼬마 악마가 속삭였습니다. "그렇게 불만이 많으면 직접 만들어라!" 맞는 말입니다. 반성합니다.


그렇게 KuroEditor 개발이 시작되었습니다

우수한 에디터가 필요했던 것은 아닙니다. 그저 Dropbox Paper처럼 스트레스 없이 사용할 수 있는 테이블 도구와 WYSIWYG를 원했을 뿐입니다! 이 내면의 외침에 이끌려 직접 만들기를 결심했습니다. 쿠로토가 만든 에디터의 자세한 내용은 다음 글에서 공유하겠습니다. 거의 완성된 상태이며, 이 글들을 쓰면서 테스트를 마치고 GitHub에 올릴 저장소를 정리하는 대로 공개할 예정입니다.