React로 WYSIWYG 에디터 뭘로 시작하지?

커뮤니티 형태의 사이트를 만든다면, 글 작성 및 댓글 작성을 구현 할 때 필연적으로 고민하게 되는 부분

어떤 WYSIWYG를 쓸 까?

그런 분들에게 추천드릴만한 제가 직접 사용해 본 React에 맞는 WYSIWYG에 대해서 설명해보겠습니다.

WYSIWYG(위지위그)란?

모두 대문자로 이루어졌으니 무언가의 약어라는 뜻인데, 바로 'What You See Is What You Get, 보는 대로 얻는다'라는 뜻으로 말 그대로 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. - 위키피디아

커뮤니티 형태의 사이트에서는 글을 작성하는 곳에서 이 위지위그 에디터들이 사용됩니다. 간단하게 글자를 굵게 만드는 것부터, 이미지 삽입, 동영상 삽입, 특정 정보 삽입까지 복잡한 역할도 수행할 수 있습니다. React에도 많은 WYSIWYG 관련 패키지들이 있습니다. 그 중 제가 사용해 본 두 가지의 React WYSIWYG를 소개하겠습니다.

Slate

Slate는 제가 최근까지 가장 많이 썼던 위지위그 에디터였습니다.

장점

1. 쉽다. - 당시 React에 초심자였던 저도 그리 어렵지 않게 특정 정보를 담은 이미지를 본문에 심는 심화된 작업까지 할 수 있었습니다. 또한 다양한 예제들로 어렵지 않게 기본적인 기능을 구현할 수 있습니다.
2. 다양한 플러그인 - History 관련 플러그인부터 Table, HTML 복사 관련 플러그인까지 적지 않은 수의 플러그인이 있습니다. 제가 잘 사용했던 'Canner'사에서 만든 Slate 전용 플러그인 모음으로 레고 조립하듯이 골라서 사용할 수 있습니다.

단점

1. 미흡한 한글 지원 - 최근 버전 업을 하면서 한글 입력 시 글자가 사라지다가 결국 에디터 자체가 멈춰버리는 치명적인 버그가 생겼습니다. 관련 이슈는 이 곳에 잘 정리되어있습니다. 문제는 해당 이슈를 고칠 의지가 없어 보인다는 겁니다. 그에 따라 저도 많은 시간을 Slate에 투자했지만 다른 위지위그 에디터로 갈아타게 되었습니다.

Draft.js

Draft.js는 Facebook에서 만든 위지위그 에디터입니다. 케치프레이즈도 Rich Text Editor Framework for React( 리액트를 위한 리치 텍스트 에디터 프레임워크 )입니다. 같은 Facebook이라는 아버지에 나온 아들인 셈이죠.

장점

1. React와의 호환성 - 같은 아버지를 둔 자식들이니 호환성은 최고입니다. Slate와 비교해도 더 가볍다는 느낌이 들었습니다. 그리고 Facebook에서 만들었다는 이유 하나만으로도 뭔가 믿음이 갑니다.
2. 괜찮은 한글 지원 - 위에 적었던 Slate에서의 한글 지원 문제를 해결한 위지위그 에디터를 찾다가 다시 돌아온 곳이 Draft.js 였습니다. Draft.js에서는 Slate에서 겪었던 한글 입력 관련 버그를 찾지 못했습니다.
3. 자체 기능 - 사진을 붙여넣기 할 시 사진 이모지를 넣어주는 등 특이한 자체 기능이 있습니다.

단점

1. 중수를 위한 위지위그 -처음 Draft.js를 접하고 제대로 된 형태를 갖추기 까지 정말 힘들었습니다. 그 때 거의 웹을 처음 접하기도 했지만 Slate에 비해 Docs도 간단한 내용들만 있고 예제도 자세하지 않았습니다. 다른 위지위그를 사용하던 분이시라면 아마 쉽게 사용하실 수 있을 겁니다.

결론

저는 결국 Draft.js를 선택해서 에디터를 만들어가고 있습니다. 이러다가 또 Draft.js에 문제가 생겨 제 3의 위지위그로 도피를 하게 될 수도 있지만, 현재까지 React에서 사용하기 최적의 위지위그 에디터는 Draft.js라고 생각합니다.