위지윅 라이브러리를 이용해서 사진이 첨부 가능한 에디터 UI를 만들어 봤던 경험기

회사에서 백오피스를 개발하고 있는 와중에 우리 웹 서비스에 공지사항을 띄우기 위해서 공지사항을 작성 및 수정 할 수 있는 에디터 UI 개발 요청이 들어왔다. 2년 동안 개발하면서 실제로 위지윅 UI를 만들어 본 적이 없었고 게다가 이미지까지 에디터 내에서 다뤄야 하는 상황이었다.

 

처음에 react-quill 이라는 라이브러리를 이용해서 만들었는데 브라우저 콘솔 창에 deprecated 될 event가 사용되었다고 wranning 이 존재해 이와 관련해서 repo에 open된 이슈가 있는 지 확인 한 결과 한참 오래전에 open 된 issue인데 해결되지 않았고 이를 보니 lib이 잘 관리되지 않음을 느꼇다.

 

그래서 다른 라이브러리를 알아보는 와중에 sun-editor 라는 lib를 보았고 client 사용성이나 개발자가 다루기에도 편해보여서 해당 라이브러리를 채택하고 이를 이용하여 UI를 만들었다. 이 UI를 테스트 하는 와중에 또 다른 사용성에 문제를 발견했다.이미지를 붙여넣기 한 후 즉시 텍스트 입력 시 이미지 warpper에 텍스트가 들어가고 그 이후 동작에는 좀 문제가 있어 보였다. 그래서 이런 사용성 문제의 개선 여지가 있나 repo를 확인 결과 이 lib 역시 지속적으로 철저히 관리되고 있어 보이진 않았다.

 

결국 나는 meta 에서 만든 lexical library라는 새 lib을 이용하기로 마음 먹었고 이를 이용해 UI를 만들려고 하는데 이 라이브러리는 사용하기가 매우 어려워서 사용법을 익히기 위해 주말에도 이 라이브러리 예시 코드를 보면서 공부했다. 이 라이브러리가 사용법을 파악하기 어렵지만 대신 커스텀을 유저가 매우 깊은 정도까지 할 수 있다는 장점이 있었고 사용자도 많아 참고 할 만한 코드가 많았다 그리고 결정적으로 레포가 상당히 잘 관리되고 open된 이슈에 대해 대응속도도 훌륭했다.

 

많은 시간을 들여 해당 라이브러리 사용법을 어느정도 익혔고 이를 이용하여 UI도 만들었다. 해당 UI를 사용해보니 아주 만족스러웠다. 다음에 에디터UI를 만들게 된다면 해당 라이브러리를 또 이용해서 만들어야겠다.