WYSIWYG 에디터 비교!
웹서비스 개발에 있어 빼 놓을 수 없는 것이 WYSIWYG 에디터입니다.
게시판, 블로그, 공지사항 등 문서 컨텐츠 작성 및 관리를 위해 반드시 필요한 기능이기 때문인데요.
웹서비스를 개발하시는 분들이라면 WYSIWYG이라는 개념이 친숙하실 수도 있지만, 혹시나 익숙하지 않으신 분들을 위해 간략히 소개드리자면,
“위지위그(WYSIWYG: What You See Is What You Get, “보는 대로 얻는다”)는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다.” (위키피디아)
간단히 말해, “보이는 대로 표현되는” 에디터를 말하며 대부분의 웹서비스에서 사용되고 있습니다.
웹서비스에 필수적인 요소인 만큼, 다양한 서비스 수요에 맞추어 제작된 여러가지 WYSIWYG 에디터들이 있는데요.
그 중에서도 UFOfactory에서 자주 활용하는 에디터들을 소개해드리고, Rails Project에서 gem을 활용하여 적용하기 수월한 것들의 장단점을 비교해 보았습니다.
Redactor
“Small and robust”
UFOfactory 프로젝트에서 가장 많이 활용되는 에디터로 깔끔한 UI와 다른 Rails Gem과의 높은 활용성이 강점입니다.
장점 :
1. Simple & Pretty UI : WYSIWYG 에디터 중 가장 깔끔하면서도 어떤 서비스에도 잘 녹아드는 UI가 Redactor의 최고 강점으로 꼽힙니다.
2. 다른 Rails gem들과의 높은 호환성 : Rails의 다양한 업로더들과 간단하게 호환이 가능하며, NoSQL ORM인 Mongoid에도 문제 없이 사용할 수 있습니다.
단점 :
1. IE 대응 문제 : 일부 Internet Explorer 버전과 호환이 되지 않는 문제가 있습니다. 따라서 다양한 브라우저 대응을 해야하는 어플리케이션의 경우 대체로 ckeditor로 진행합니다.
2. 4.x 버전의 Rails에서 배포시 이슈 : 내부 코드의 문제로 프로젝트 배포시 asset pipeline과의 문제로 인해 약간의 코드 수정을 거쳐야하는 번거로움이 있습니다.
Ckeditor
“The best web text editor for everyone”
Redactor 다음으로 UFO factory 프로젝트에서 가장 빈번하게 활용되는 에디터입니다. “The best, because of flexibility(활용성 때문에, 최고)”라고 소개페이지에 적혀있는 대로 높은 기능성을 자랑합니다. 다만 투박하고 복잡한 UI가 단점으로 꼽힙니다.
장점
1. 높은 활용성 다양한 기능이 기본적(default)으로 탑재 : 기본형으로도 에디터에게 요구되는 모든 기능들을 구현해 낼 수 있습니다.
2. 높은 브라우저 호환성 : 거의 모든 브라우저에서 문제 없이 돌아갑니다.
단점 :
1. 다양한 기능으로 인한 복잡한 UI : 너무 많은 기능들이 기본형에 탑재되어 있기 때문에, 간단한 문서 편집용으로 쓰기에는 무거운 느낌이 있습니다.
2. 딱딱한 UI : redactor에 비해 UI가 투박하여 모던한 디자인의 웹페이지에 어울리지 않는 경우가 있습니다.
Summernote
“Super simple WYSIWYG editor on bootstrap”
한국 개발자들에 의해 만들어진 에디터로 깔끔한 UI와 기능성을 자랑합니다. “On Bootstrap”이라는 말에서 알 수 있듯이 가장 활발히 활용되는 디자인 프레임워크인 Twitter Bootstrap을 기반으로 디자인 된 에디터입니다. 따라서 Bootstrap에 친숙한 개발자라면 쉽게 활용할 수 있습니다.
장점
1. 깔끔한 UI : 가장 많이 쓰이는 기능들만 탑재되어 기본형으로도 뛰어난 UI와 기능성을 보입니다.
2. Bootstrap에 기반한 레이아웃 : Bootstrap 기반으로 작성되어 bootstrap 테마를 적용하여 다양한 view를 구현할 수 있습니다.
단점
1. 다른 gem과의 호환성 문제 : redactor, ckeditor에 비해 다른 gem들과 호환성이 떨어지기 때문에, 코드 작업에 번거로움이 있습니다.
2. 업로더 문제 : Summernote는 기본적으로 업로드 기능이 제공되지 않습니다. 따라서 Rails에서 활용하기 위해서는 Javascript 코드를 따로 작성하여 uploader를 붙여야 하는 번거로움이 있습니다.
TinyMCE
“Full featured web editing”
ckeditor에 버금가는 다양한 기능을 제공합니다.
장점
1. 높은 기능성 : ckeditor만큼 다양한 기능이 기본형으로 제공됩니다. 코드 스니펫을 임베드할 수 있는 기능이 기본적으로 탑재되어 있어, 개발 관련 서비스에 적용하기 좋습니다.
단점
1. 높은 기능으로 인한 무거움 : ckeditor와 유사하게 많은 기능들이 제공되는 만큼 다른 경량형 에디터에 비해 로드 시간이 긴 것이 단점입니다.
Trix
“A rich text editor for everyday writing”
마지막으로 Rails가 태어난 Basecamp팀에서 내부적으로 사용하기 위해 만들어진 에디터입니다. 가벼우면서도 높은 브라우저 호환성을 자랑합니다.
장점
1. 가장 가벼운 editor : 소개된 에디터들 중 가장 가벼운 에디로, Rails 프로젝트에 적용도 수월합니다.
단점
1. 투박한 UI와 낮은 기능성 : 경량형 에디터인 만큼 디자인과 기능성에서는 다른 에디터들에 비해 부족한 부분이 많습니다.
