최초 공개! KuroEditor의 목적, 기능, 그리고 메커니즘 vol.2

개발 정책

KuroCMS를 위한 에디터인 만큼, 핵심 본질을 유지하면서도 최대한의 범용성을 제공하고자 했습니다. 바닐라 JS만으로 빌드된 순수 WYSIWYG 에디터는 필수 요건입니다. 프레임워크 없이 구동되어 압도적으로 빨라야 합니다. 느슨한 결합을 유지하기 위해 엄격한 헤드리스 에디터 형태는 피했습니다. 호출부에서 @layer를 지정하지 않는 한, 호출부의 버튼 레이아웃에 맞춰 통일감을 유지할 수 있습니다. 물론 KuroCMS에서는 이 기능을 쓰지 않겠지만요! ㅎㅎ.

CSS는 오직 Tailwind와 KuroEditor 내부 스타일만 사용합니다. 표 작동 방식은 Dropbox Paper와 유사합니다. 현재로서는 완벽하게 다듬어지지 않았더라도 사용성이 크게 저하되지 않는 한 세부 조정보다는 완성에 우선순위를 두겠습니다. 결국 끝나기 전에는 시작된 게 아니니까요. 어느 정도 쓸 만해지면 바로 릴리스할 예정입니다.

상세 스펙

블로그에서 상세 스펙을 글로만 설명하면 지루할 수 있으니 이미지로 보여드리겠습니다.

보시다시피 KuroEditor의 상단 메뉴에는 프리뷰와 HTML 두 가지 뷰가 있습니다. 하지만 대부분의 사용자가 HTML 뷰를 쓸 일은 없을 것입니다. 아직 KuroEditor에 구현되지 않은 기능을 HTML로 직접 작성하고 싶거나 내부 작동 방식을 확인하려는 개발자용 기능입니다.

다음은 이모지, 표 생성, 미디어, 코드, 가로 구분선, 자동 저장, 저장, 그리고 목차 아이콘입니다. 기본적인 미디어는 드래그 앤 드롭으로 커서 위치에 바로 붙여넣을 수 있어 이 버튼은 자주 쓰이지 않습니다.

기본 텍스트 꾸미기

텍스트와 커서 라인을 꾸미는 도구는 글자를 한 글자라도 드래그하여 선택하면 나타납니다. 메뉴가 항상 노출되는 것을 지양하고 마우스 이동 거리를 최소화하려는 정책에 따른 것입니다.

왼쪽부터 굵게, 기울임꼴, 밑줄, 취소선입니다. 이어서 제목 설정을 위한 h1, h2 등이 있고, 인용구 바와 안내 블록이 위치합니다. 그 옆으로는 글자 색상, 글자 크기, 줄 간격, 정렬(좌측, 중앙, 우측, 양쪽 정렬), 글머리 기호 목록, 번호 매기기 목록이 있습니다. (참고로 Tab 키를 누르면 자동으로 단락이 생성됩니다.) *최신 버전에서는 폰트 종류도 선택할 수 있습니다.

표 기능이 최우선

표 기능은 KuroEditor의 가장 큰 자랑거리입니다. 행이나 열을 삽입하는 방식은 Dropbox Paper와 유사합니다. 마우스 커서를 테두리 근처로 가져가면 옆에 '+' 버튼이 나타나고, 이를 클릭해 행이나 열을 삽입할 수 있습니다. 삭제는 행 우측 또는 열 하단에 있는 빨간색 '-' 버튼을 누르면 됩니다. 표 편집이 매우 직관적이고 쉽습니다. 셀 병합 및 분할도 버튼 하나로 가능합니다. 테두리 두께와 색상도 마우스를 대면 나오는 메뉴를 통해 미세하게 조정할 수 있습니다.

유연한 미디어 배치

미디어 붙여넣기는 완벽한 자유도를 자랑합니다. 자체 서버에 저장된 이미지뿐만 아니라 유튜브 링크를 넣어 음악 랭킹을 만들거나 비디오 목록을 쉽게 구성할 수 있습니다. 키보드로 URL을 직접 입력할 때 [[ url ]] 형식으로 작성하면 자동으로 미디어가 확장되어 렌더링됩니다.

목차 활용하기

소설이나 계약서처럼 긴 문서의 문단 관리는 h1, h2 등을 사용하면 간편합니다. 상단 메뉴의 목차 기능을 이용하면 아무리 긴 문서라도 자신이 어디까지 작성했는지 한눈에 파악할 수 있습니다.

통합 가이드

마지막으로, 다른 시스템과의 통합도 매우 간단합니다. 에디터를 얹고 싶은 곳에 한 줄의 코드를 삽입하고 저장 등의 콜백 함수만 정의해 주면 됩니다. 데이터는 HTML 형식으로 전달됩니다. KuroCMS에서는 이렇게 수신한 HTML을 아티클 데이터로 저장하고 관리합니다. 자세한 내용은 아래 링크를 참조해 주세요. 결합도가 매우 낮아 어떤 도구에도 손쉽게 연동할 수 있습니다.

마치며

일본인들은 표 표현을 정말 좋아합니다(일본 주택이 칸막이를 사랑하는 것처럼요! ㅎㅎ). 하지만 해외 에디터 중에는 표 기능이 제대로 구현된 경우가 드물고 시각적 커스텀도 어렵습니다. 특히 셀 병합 기능이 왜 이렇게 드문지 의아할 정도입니다. 아무쪼록 KuroEditor가 단 몇 분에게라도 도움이 되기를 바랍니다.

GitHub 코드 저장소: https://github.com/Kuro-Boo/KuroEditor
KuroEditor 소개 페이지: https://kuro.boo/kuroeditor/
KuroEditor 테스트 페이지: https://kuro.boo/kuroeditor/sample/