RgbitCode 개발기 - 문서편집 에디터 개발을 향한 여정

한동안 이 RgbitCode 웹 사이트를 손도 되지 못하고 있었네요.

개인 여가시간에 코딩은 몇 주 동안 거의 손도 안되고 있다가, 최근에 다시 시작을 했습니다.

문서편집 에디터 개발을 향한 여정

이 사이트는 본래 개발자를 위한 개발자 블로그 플랫폼으로 만들려고 하여 회원가입과 로그인 관리자 페이지까지 기본적인 기능은 구현되어 있지만, 서버비를 개인사비로 운영하고 있어서 그냥 혼자 쓰고 있는 블로그로 쓰고 있습니다.

대신에 이 에디터 기능을 좀 더 강화해서 완성되면 누구나 사용할 수 있도록 공개를 해볼 생각을 해봤습니다.

개발버전에서 테이블 입력하는 UI 를 조금 꾸며봤습니다.ㅋㅋ

기존에 저렇게 대충 기능만 막 달아두고 쓰고 있었지만... 좀더 사용자 고려해서요.

마우스로 드래그 앤 드롭해서 테이블 크기를 정하고 테이블을 입력해 줍니다.

깨알같은 사소한 기능이지만... 또 막상 구현하려니 귀찮았던 것 같습니다.

테이블의 셀 추가 , 병합/나누기 기능도 달아줬습니다. UI는 좀더 보기좋게 꾸며봐야 할 것 같네요.

그리고 목표기능 들을 정리를 해봤습니다.

목표 기능

• 기본적인 이지윅(WYSIWYG) 에디터 기능

• 마크다운 문법 지원 / 실시간 랜더링

• 코드블럭, 언어별 소스코드 하이라이팅 / 테마변경

• 이미지 입력

• 이미지 사이즈 조정

• 테이블 입력 , 셀 병합/나누기 등 기능 지원

• iframe (코드펜 등) 입력 지원

• iframe 방식 외 보다 간단하게 유튜브 동영상 입력

• Table Of Content 목차 자동생성 지원

• Table Of Content 목차 목록 클릭시 에디터 내에서 해당 목록이 보이는 Viewport 영역으로 스크롤 기능

• 영문 대문자/소문자 변환 기능

• 색상 선택도구(Color Picker)

• 마크다운 문서 불러오기

• 주피터 노트북 (.ipynb) 파일 불러와 랜더링

• 문서 작성 후 HTML, 마크다운, PDF, Word 로 변환하여 다운로드 받기

• 공학용 수식(latex) 및 개발자용 입력도구 지원

• 웹 브라우저 스토리지에 저장 / 불러오기

• AI와 연동한 문서요약, 텍스트 번역 / 생성 기능

체크는 현재 구현된 기능입니다.

고려했던 오픈소스 에디터들

toast ui editor, prosemirror, remirror, quill, slate 등 많은 것들을 고려했습니다.

한가지 재미난 점은 대부분 에디터 들은 Vue보다 React 기반으로 만들어진 것이 가장 많다는 점이였습니다.

개발자들을 위해 얼마나 편리하게 글을 작성할 수 있느냐? 가 가장 핵심적인 기능이었기에...

에디터 하나만 가지고도 Vue 보다는 React 기반으로 개발하게 된 이유도 있습니다.

그동안 고려해봤던 에디터들의 개인적인 감상평을 적어보자면 이렇습니다.

주관적인 견해이기에 참고용으로만 봐주시면 좋겠습니다.

• react-md-editor : 간단하게 사용하기 쉽지만 커스텀 마이징이 어렵고 사이즈가 큰 문서를 편집할 때 성능 저하 문제가 발생

• react-quill : JSON기반의 Delta라는 데이터 구조를 사용. 러닝커브가 낮고 간단하게 사용하기 쉽지만 새로운 기능 추가 등 커스텀 마이징이 어려운 문제가 있음.

• toast ui editor : 국내 NHN 에서 만든 오픈소스로 사용하기 쉬움. 플러그인으로 latex, chart 등 상당히 많은 기능들이 구현되어 있지만, 커스텀 마이징이 상당히 어려움, React18버전 이상에서 호환성 문제.

• prosemirror : 에디터 제작 프레임워크로 커스텀 마이징이 용이하지만 Redux의 State와 Action 과 비슷한 구조. 문서는 Node Tree로 구성되고 Transaction 기반 편집시스템으로 난이도가 높음. 많은 부분 직접 구현해야함.

• remirror : prosemirror를 React 버전으로 Wrapping 한 클래스와 인터페이스를 제공. 구조는 prosemirror에 기반 State의 History 관리 기능이 추가. 사용하기는 보다 쉬우나 커스텀 마이징이 prosemirror 보다 까다롭고 복잡한 구조를 가짐.

• slate : 에디터 제작 프레임워크, prosemirror와 다른 구조로 직관적인 설계와 유연성이 특징. prosemirror처럼 Node의 스키마를 정의하고 해당 양식에 맞춰서 개발하는 형태가 아니라 단순한 구조로 되어있음. 일반적으로 구조화해서 정의하기 어렵운 복잡한 도메인으로 스키마 설계가 어려운 경우 prosemirror 기반은 제약이 생기는데, 그런 제약을 받지 않음. 실시간 공동편집을 고려해서 모델링함. 그 어떤 에디터도 만들 수 있을 정도로 자유도가 높지만, 공식문서가 많이 빈약하고 스키마가 없는 코어 모듈로써 제공하기에 가장 많은 부분을 직접 구현해야함.

결정된 사항

그외 정말 다양한 오픈소스 에디터 들을 접해봤지만... 궁극적으로 나만의 에디터를 만드는 것이 목표이기에 최종적으로는 prosemirror와 slate 로 좁혀졌습니다. 현재 rgbitcode 에디터는 remirror 기반으로 만들어져있는데요.

remirror로 목표로 한 기능이 다 가능 할 지는 해봐야 알 것 같습니다. latex 문법 등은 플러그인도 없고 지원이 되지 않아서 새롭게 만들어야 하는 데요. 결국에는 prosemirror 구조를 어느정도 알아야 기존에 없던 기능을 만드는데 도움이 되는 것 같습니다. 현재 만들고 있는 버전 외 에도 slate 버전으로도 새로 하나 만들어보고 있기는 한데, 이미 만들고 있던 에디터 부터 좀더 완성도 있게 만들어 보고 다음단계로 진행해보기로 합니다.