안녕하세요 렛플 운영자입니다.

서비스 개발할때 각종 입력값에 쓸 게시판 에디터를 많이 찾고 계실것 같아,

저도 여러가지 검색하면서 적용했던 것들을 소개해 드리며 장점/단점을 적어드리려고 합니다.

최종적으로는 헤메지 말고 TipTap 써보세요. 정말 편하면서 빠릅니다.

1. 입력받는 것은 무엇이 있을까?

사용자의 Input을 받을 수 있는 방법으로는 기본 제공해주는 HTML 기능은 크게 두가지가 있습니다.

1) input(text) - 한줄로 간단하게 입력을 받을 수 있는 공간

2) textarea - 여러줄로 입력을 받을 수 있는 공간

2. 게시판 에디터 /Board Editor

이것으로 좀 부족합니다. 블로그처럼 안에 사진을 넣는다거나, 폰트사이즈를 다르게 한다거나 등

우리의 필요를 만족시키지 못할 때 필요한 것이 바로 "게시판 에디터(board editor)" 입니다.

텍스트의 색깔을 입힌다거나, 이미지를 넣거나 체크박스를 넣기도 하고 URL 등 하이퍼링크를 넣는 것도 간단하게 할 수 있죠

또한 요즘에는 video, instagram, twitter 등 url도 넣을 수 있는 에디터 기능도 많습니다.

렛플에서는 프로젝트 생성이나, 스토리와 같은 컨텐츠를 작성할 때는 게시판 에디터를 사용해서 작성할 수 있습니다.

여기서 가장 중요한 것은 "게시판 에디터"를 골라야 하는가입니다.

오픈 소스로 상당히 많은 에디터가 있다보니, 다 테스트하기에 앞서 몇가지 필수조건 등을 정의하고 가면 판단하기 좀 더 좋을 수 있습니다.

주요하게 판단해야할 기준

1) (중요) 폰트와 관련한 기본 기능을 지원(h1태그, 글자크기, color나 strike, 밑줄, 이탈릭 등)

2) (중요) 이미지 첨부 시 외부 이미지 서버에 올릴 수 있는 기능을 지원

게시판에 이미지를 업로드하면 기본은 base64로 하면 db에 저장해야할 데이터 크기가 기하급수적으로 커집니다.

• 그래서 base64보다는 이미지서버에 올려놓고 이 주소를 호출하는 방식을 지원하는 텍스트 에디터가 필요합니다.

  가끔씩 이런 기능이 지원되지 않는 애들이 있습니다. 그런경우는 장기적으로 쓰기 어렵습니다.

3) (중요) 모바일 웹에서 크기 등이 자동으로 최적화되는지 여부

4) (앱까지 확장을 검토하는 경우) 모바일 앱에서도 잘 보일 수 있도록 인라인 css를 지원해주는 에디터

결론적으로 렛플은 써머노트 (2021년)--> 팁탭(2023년)으로 게시판에디터를 이관했습니다.

가장 최신의 트렌드를 반영하고 있는 팁탭으로 이관하고나서, 엄청난 편의성에 만족하고 있습니다.

3. 게시판 에디터 목록 (웹)

* 팁탭(Tiptap)(완전 추천) (https://tiptap.dev/)

사실은 이 이야기를 하려고, 전체 내용을 작성하는 것이긴 합니다.

아래 보이시나요. 프로덕트 헌트에서 1위를 한 에디터입니다. 정말 최신성의 모든 것을 반영했습니다.

1) 제가 쓰면서 엄청 감탄을 했는데, 우선 왠만한 플랫폼을 모두 지원합니다. 스벨트까지 지원하니 거의 말 다했다고 볼 수 있죠.

2) 모든 스타일을 인라인으로 박을 수 있습니다. 범용성이고 커스텀이 쉽습니다.

Heading.configure({
  HTMLAttributes: {
  style: "font-size: 18px;font-weight:normal",
  },
}),
Italic.extend({
  renderHTML({ HTMLAttributes }) {
  return ["i", HTMLAttributes, 0];
  },
}),
Link.configure({
   openOnClick: true,
   HTMLAttributes: {
   style: "text-decoration: underline",
   },
}), 

3) 버튼을 모두 커스텀 가능하게 밖으로 빠져나와있습니다. 메뉴 구성이나 스타일 , 간격 등 모든것이 수정가능합니다.

<Button
 type="plain"
 color="active"
 icon="https://letspl.me/assets/images/editor-white-bold.svg"
 onClick={() => editor.chain().focus().toggleBold().run()}
 color={editor.isActive("bold") ? "active" : ""}
/>

4) 코드 하이라이팅 기능과 마크다운(Typography)을 지원합니다.

저도 이전에 코드 하이라이팅 적용해보려고 여러가지 해봤는데, 스타일이 깨져서 적용하지 못했습니다.

팁탭은 코드 하이라이팅 기능을 가지고 있고, 쉽게 적용하면, 위와 같이 코드를 분리해서 표시해줍니다.

또한 마크다운 등과 각종 입력 편의기능을 지원하고 있습니다.

5) 내가 생각하는 게시판의 모든 기능을 가지고 있습니다. 모든 기능이 extension으로 분리되어있습니다.

내가 원하는 기능만, 원할때만 설치해서 사용할 수 있습니다.

또한 각각 기능이 독립적인 extension으로 구성되어있기 때문에, 유지보수가 깔끔하고, 업데이트도 각각 하면 됩니다.

특히 버블메뉴(호버시에만 나오는 기능), 플로팅메뉴(빈칸에만 나오는 기능) 이런것들이 정말 감탄이 나옵니다.

다만 이미지에 대한 편집기능이 아직 없습니다. 그것까지 나오면 정말 완벽할 것 같습니다. 이부분은 좀 기다려보면 나오지 않을까 싶습니다.

* 스마트에디터(3.0은 사용불가) (http://naver.github.io/smarteditor2/demo)

국내 IT대기업인 네이버에서 유지보수하고 있는 오픈소스 에디터 입니다.

우선 디자인 너무 구립니다. 2010년도에 썻을 것 같아 쓰기가 싫습니다.

기능은 괜찮을 것 같긴한데 심지어 이 스마트에디터는 업그레이드도 안하고 새로운 버전(3.0)은 오픈할 계획도 없다고하니, 기다리지 마세요.

저도 쓰고 싶어서 물어봤으나, 공식적인 답변은 오픈소스화 할 계획이 없다고 하네요

네이버 너무 하지 않나?!!!! 아래껄 오픈소스화하라!!!!

https://smarteditor.naver.com/desktop/ 

* TOAST UI Editor (모바일 최적화가 안됨) (https://ui.toast.com/tui-editor)

NHN에서 만든 UI Editor입니다. 전체적으로 깔끔하고 유지보수가 강력합니다.

이 에디터의 경우 깔끔해서 좋긴한데 세가지 큰 문제가 있습니다.

1) PC 맞춤형이라서, 모바일웹에서 보면 최적화가 떨어집니다.

혹시나 해서, 크기를 줄여보는데, 모바일에 맞게 줄어드는게 아니라, 그냥 크기가 줄어듭니다.

뭔가 작업을 해줘야 하는데 , 그런 가이드라인이 없습니다. 모바일웹에서 크기 줄여보다가 포기했습니다.

2) 자체 CSS를 사용하다 보니까 범용성이나 확장성이 떨어집니다.

웹에서는 정말 이쁩니다. Toast css가 내장되어있어서

모든 스타일을 Toast css가 그리다보니, 다른 곳에 복붙하면 깨지기도 하고, 앱에서 HTML로 불러오면 싸끄리 깨집니다.

그래서 렛플에서는 이용이 불가능하다고 판단했습니다.

3) 이미지를 base64로 저장해서, 외부로 이미지 저장하려면 소스를 좀 뜯어고쳐야 합니다.

데모버전에서는 우와하는데, 게시판 소스를 뜯어보면 base64로 된 엄청 복잡한 내용으로 이미지를 저장합니다.

사진 몇개만 들어가더라도 그 양이 어마무시하기 떄문에, 로딩 속도가 현격하게 저하될 가능성이 있습니다.

외부 이미지를 첨부하거나, 서버에 올린다음에 이미지를 넣어주는 기능이 있어야 하는데 그게 없습니다.

* CKEditor (진짜 좋은데, 리액트로 쓰기가...) (https://ckeditor.com/)

CKEditor가 완성도 측면에서는 상당히 좋습니다.

위의 해당하는 확정성 뿐만 아니라, 트위터 인스타그램같은 링크도 협업도 가능하고, 저작권을 체크해봤을 때도 , 무료로 사용가능한것으로 보았습니다.

기능이 어마무시합니다. 워드로 뽑아주기도 하고, pdf저장도되고, 계산식도 첨부되고, 진짜 상상할만한 모든 기능이 들어가 있습니다.

그러나 , 몇가지 기능등을 리액트로 몇번 커스텀을 해보려고 했는데, 상당히 뜯어고치기 난감합니다.

저희가 검토할때만 하더라도 리액트로 구현하기가 쉽지 않았습니다.

아래 내용을 보고 커스터마이징하실 수 있지만, 보기만 해도 너무 어렵고, 에러날 가능성이 커보여서 저희는 포기했습니다.

https://velog.io/@kyungjune/react-ckeditor5-%EA%B8%B0%EC%96%B5%ED%95%98%EA%B8%B0

* Summernote (렛플 초기버전에서 사용) (https://summernote.org/)

써머노트 너무 깔끔합니다. 이미지도 외부 이미지저장소를 사용하기도 쉽고

링크(유트브나 트위터, 인스타그램 등)를 넣어도 문제가 없고 모바일 최적화도 잘되어있고, 자기만의 CSS도 사용하지 않아서,

어디서나 잘 불러올 수 있는 구조로 데이터가 저장됩니다.

여러번 테스트하다가 최종으로는 초기 렛플에서는 써머노트를 사용하기로 했습니다.

약간의 문제점을 뽑는다면, 로딩이 약간 느린것과 클립보드로 이미지 복사하면 에러가 가끔씩 나서,

내가 넣은 이미지가 아닌데, 갑자기 첨부된 이미지가 바뀝니다.

나 혼자쓰는거랑 상관없는데, 상용 서비스라고 하면, 유저분들이 상당히 당황할만한 버그인지라,

사용 변경을 고려했습니다.

* ProseMirror (Okky.kr에서 사용중) (https://prosemirror.net)

아무래도 Okky에서 사용하시는 것이다보니, 많이 안정화되어있을 거라고 생각이 듭니다.

전체적으로 멘션이나 , 여러가지 기능 또한 모두 포함되어있는 것으로 보입니다.

프로스미러로 인하여 파생된 에디터들이 많습니다. 그만큼 팁탭만큼 최신성을 유지하고 있습니다.

다만, 자체 css를 사용하는 것으로 보여서, 호환성을 고려할때는 주의가 필요합니다.

그외에도 여러가지 오픈소스는 많습니다. 하지만 동일하게 자체 css를 많이 쓴다거나, 스타일이 별로라든가 등 여러가지 문제점이 있어보입니다.

대안을 찾으시는 분들은 아래 참고해보시면 좋겠습니다.

• - Quill

• (https://quilljs.com/playground/#quill-playground)

아래는 동일하게 여러가지 오픈소스 테스트한 결과들을 정리한 블로그입니다.

저도 비슷한 의견이라고 생각이들어서, 참고하시라고 링크 남깁니다.

https://cheri.tistory.com/180 

4. 추가!!! 리액트 네이티브 게시판 에디터

렛플에서는 리액트 네이티브로 만든 앱에서 에디터를 제공하고 있습니다.

여러가지 검색해보시면 알겠지만, 생각보다 쓸 수 있는 에디터가 별로 없습니다. 버그가 많거나 유지보수가 안되어있거나 하는 케이스들이 많습니다.

최종적으로 선택한것은 아래와 같습니다.

React Native Rich Text Editor

나름 유지보수 및 업데이트 최근(6개월전에) 되었고 , 필요한 기능들이 모두 들어가 있는것을 볼 수 있습니다.

저렇게 하단에도 에디터 툴을 붙일 수는 자유도도 있기 때문에, 모바일앱에서도 커스텀하기 편합니다.

이 에디터는 2021년 개발한 이후, 바꾼적이 없습니다. 나름 괜찮은 에디터라 추천합니다.

저희는 위의 에디터를 가지고 아래와 같이 커스텀을 했습니다. 커스텀했다고 하지만 , 한 부분은 사실상 아이콘밖에 없습니다.

만약에 앱에서 게시판 에디터를 지원해야 한다고 하면, 고려해보실만한 패키지 입니다.