본 글은 다음과 같은 순서로 이루어집니다.
- 위지윅 에디터란 무엇인가?
- 대표적 위지윅 에디터
- 위지윅 에디터, 한글 문제
- 위지윅 에디터 최종 선택 및 이유
위지윅 에디터란 무엇인가?
'WIZ-zee-wig(위지윅)'으로 발음하며 'what you see is what you get'을 줄여 부른 말입니다. WISIWYG는 사용자가 보는 것이 그대로 최종 산물에 나타나도록 하는 유저 인터페이스를 말합니다. WISIWYG 어플리케이션에서는 사용자가 화면에서 본 것과 출력했을 때의 프린트물이 동일하게 생성됩니다.
프로젝트를 하다보면 단순 input이나 textarea로는 부족한 경우가 많습니다. 예를 들면 필기를 작성하거나 또는 소개글을 작성할 때 input 창을 통해서 진행한다면 어떨지 생각해봅시다. 잘 구현을 한다면 충분할 수도 있지만 위지윅 방식이 아니라면 사용자 입장에서 내가 쓴 글이 어떻게 출력이 되는지 확인 후에 다시 수정을 하는 번거로운 과정이 추가됩니다.
이러한 번거로운 과정은 UX에 충분히 부정적인 영향을 줄 수 있기에 위지윅 에디터를 도입하는 것을 고려해볼 필요가 있습니다.
대표적 위지윅 에디터
무료 위지윅 에디터
- CKEditor
- 브라우저 기반의 서식이 있는 에디터
- 필요한 콘텐츠 처리 기능을 웹으로 가져올 수 있는 플러그인 기반 아키텍처로 확장 가능합니다.
- CKEditor의 다른 이점으로는 빠른 로딩(개발 시간 절약)과 수동으로 편집하여 서버에 업로드하지 않고도 프로젝트를 즉시 수정할 수 있는 기능이 있습니다.
- Editor.js
- 이동하고 재정렬할 수 있는 콘텐츠 블록을 편집할 수 있습니다.
- 블록을 클릭하여 해당 특정 블록에 사용할 수 있는 특정 옵션들을 표시할 수 있습니다. 마찬가지로 텍스트 내용을 클릭하면 텍스트 서식 및 인라인 스타일에 대한 옵션이 나타납니다.
- Editor.js는 API(응용 프로그래밍 인터페이스) 덕분에 확장 및 연결 가능하도록 설계되었습니다. 또한 JSON 출력 형식으로 깨끗한 데이터를 반환합니다.
- TinyMCE
- TinyMCE는 Evernote, Atlassian 및 Medium을 포함한 많은 제품에 사용되는 서식 있는 텍스트 편집기입니다.
- 기존 프로젝트에 통합하기 쉽고 클라우드 기반, 자체 호스팅 또는 하이브리드 환경에 배포할 수 있습니다. 설정을 통해 Angular, React 및 Vue와 같은 프레임워크를 통합할 수 있습니다.
- Quill
- Quill은 확장 및 사용자 정의를 염두에 두고 구축된 무료 오픈 소스 WYSIWYG 편집기입니다.
- 모듈식 아키텍처와 표현형 API 덕분에 Quill 코어로 시작한 다음 모듈을 사용자 정의하거나 필요에 따라 이 서식 있는 텍스트 편집기에 고유한 확장을 추가할 수 있습니다.
- Draft.js
- 확장 가능하고 커스텀 가능한
- 친숙한 선언적 API를 활용한 React Applications 지원
- immutable-js를 활용하여 immutable한 editor state 지원
유료 위지윅 에디터
- Froala
- (풍부한)서식있는 텍스트 기능과 빠른 확장 기능을 내장
- 깔끔한 디자인, 설치가 쉬움
- 실시간 협업 편집 가능
이들을 npm trends로 비교한 수치입니다.
quill과 draft가 압도적인 다운로드 수를 가지고 있음을 알 수 있습니다.
위지윅 에디터, 한글 문제
-
CKEditor
한글과 관련하여 문제가 있음
Ending Korean composition with enter does not work inside inline elements in some cases
Issue typing Korean after two space characters
type korean characters bug
일본어와 관련하여서도 문제가 있는 것으로 보임
Japanese input cause error, on iPhone SE chrome browser with CKEditor5 19.0.0. -
Editor.js
한글과 관련하여 문제가 없는 것으로 보임 -
TinyMCE
이전에는 한글과 관련하여 문제가 있었는데 현재는 해결된 것으로 보임 -
Quill
일반적으로 문제가 없는 것으로 보이나, 특정 상황에서 문제가 발생하는 것으로 보임
When input Korean, all letters are gone. -
Draft.js
한글과 관련하여 문제 있음
Editor crash when editing Korean text in Firefox
typing Korean in linux, chrome/electron is buggy -
Froala
한글과 관련한 문제가 있었으나 현재 해결된 상태
그래서 왜 한글 문제가 있는 것인가요?
사실 한글에 대해서만 언급을 했지만 한글이 문제가 있는 경우, 대개 일본어와 중국어 등에서도 문제를 자주 일으킵니다. 이러한 문제의 원인은 한글 및 일본어 등이 멀티바이트 인코딩 언어이기 때문입니다. 1바이트로 인코딩이 되는 영어와 달리 한국어는 2바이트 인코딩 언어이고, 일본어 또한 그렇습니다.(UTF-8 기준)
인코딩이 뭐죠?
저도 이에 대해서 정확히 답을 할 수 없었고 어떤 블로그 글을 통해서 처음으로 제대로 접했습니다. 해당 블로그 글이 너무 잘 적혀 있어 그 글을 공유합니다.
문자열 인코딩 완벽 정복하기(for 개발자)
위의 글을 읽어보면 추상적으로 왜 문제가 발생하는 지 아실 수 있을 겁니다. 각 라이브러리 별로 세부적으로 어떻게 발생하는 지에 대해서는 상이하고 너무 길어지기에 다음에 article로 작성하도록 하겠습니다.
위지윅 에디터 최종 선택 및 이유
일단 위에 언급된 것들 중에서 한글과 문제가 있는 Draft.js, CKEditor, Quill을 제외하면 Editor.js, TinyMCE, Froala가 남습니다.
이 중에서 결과적으로 Froala를 사용했습니다.
일단 기본적으로 지원하는 UI 및 디자인이 현재의 프로젝트의 다른 요소들과 유사하여 조합하기 수월한 것이 제일 컸습니다. 두 번째로는 Froala가 유료 소프트웨어이기에 이러한 부분에서 소프트웨어의 버그 및 에러에 대해서 책임감 있는 대처를 기대할 수 있으리라 생각했습니다. 나머지 두 에디터 역시 훌륭하지만 다음과 같은 이유로 Froala를 선택했습니다.
ps. 두 번째는 제 잘못된 생각이었습니다. 이는 해당 글에 있습니다. 링크
