진화하는 KuroEditor! 새로운 기능과 개발 비화 vol.3
KuroEditor 최신 버전의 신기능과 주요 특징을 소개합니다! 테이블 코피페, 둥근 모서리 상자, URL 카드 등 집필자의 편의를 극대화한 기능의 개발 비화와 철학을 자세히 설명합니다.
이제 검은 토끼(Kuro-Boo)의 오픈소스를 포함한 제품군의 핵심이 된 WYSIWYG 에디터 'KuroEditor'는 프레임워크에 의존하지 않는 바닐라 자바스크립트 기반의 초고속 동작과 직관적인 조작성을 끊임없이 추구하고 있습니다. 지난 'vol.2'에서는 기본적인 텍스트 데코레이션, 미디어 배치, 그리고 Dropbox Paper 스타일의 표 조작법을 소개해 드렸습니다. 하지만 KuroEditor의 진화는 거기서 멈추지 않습니다. 이번에는 그 이후에 추가된 새로운 기능과 특징적인 기능들을 선정하여, 개발 의도와 배경을 곁들여 매뉴얼에는 없는 비하인드 스토리를 전해 드립니다. 집필자가 표현하고자 하는 세계를 스트레스 없이 완벽하게 구현할 수 있도록 돕는 'KuroEditor vol.3'의 전체 모습을 지금 확인해 보세요.
표 조작의 끝판왕: Excel 붙여넣기 지원과 '표를 사랑하는 일본인'을 위한 집념
KuroEditor 개발 과정에서 가장 많은 공을 들인 요소 중 하나가 바로 '표(테이블)' 기능입니다. 다양한 해외 에디터를 경험해 보신 분들은 공감하시겠지만, 기존 해외 에디터들은 표 조작 기능이 매우 불편합니다. 셀 배경색 지정이나 셀 병합/분할 등 우리가 Excel이나 Google 스프레드시트에서 기본으로 사용하는 세밀한 조작이 지원되지 않거나 사용하기 어렵습니다.
특히 정리가 가독성에 지대한 영향을 주는 스펙 비교나 가격표 등은 깔끔한 표로 제공하는 것이 필수적입니다. 이러한 한국 및 일본인들의 '표 사랑' 요구에 대응하고자 KuroEditor는 표 기능을 대폭 강화했습니다.
첫 번째 강점은 Excel이나 Google Sheets, CSV 파일에서 복사하여 바로 테이블을 생성하는 기능입니다. 스프레드시트에서 데이터를 복사하여 에디터에 붙여넣기만 하면, 에디터 내부에서 TSV/CSV 포맷을 자동으로 분석해 즉시 깔끔한 HTML 표를 구축해 줍니다. 일일이 셀을 만들 필요 없이 Excel에서 표를 완성한 뒤 복사해 붙여넣으면 끝이므로 아주 편리합니다.
또한 에디터 내에서도 테두리 선의 굵기(얇게, 보통, 굵게, 점선 등)나 색상, 특정 선 하나의 두께까지 자유롭게 커스터마이징이 가능합니다. 셀 병합, 분할, 정렬, 셀 배경색 지정 등의 모든 기능이 마우스 조작만으로 직관적으로 처리됩니다. 이러한 세밀한 서식을 지원하는 점이야말로 KuroEditor가 다른 해외 에디터와 구별되는 가장 큰 차별점입니다.
'Enter'와 'Shift+Enter'의 차이: 에디터 내부의 단락 설계 사상
KuroEditor 매뉴얼에서 중요하게 다루는 부분 중 하나가 바로 '줄바꿈과 단락의 차이'입니다. 타이핑 중 줄을 바꿀 때 그냥 'Enter'를 누르는가와 'Shift + Enter'를 누르는가에 따라 에디터 내부에 생성되는 HTML 구조가 완전히 다릅니다. 이 차이를 알아두는 것은 깔끔한 문서 레이아웃 유지의 핵심입니다.
'Enter'를 치면 에디터는 새로운 단락(<p> 태그)을 생성하여 앞뒤 문장과 독립된 하나의 블록으로 다룹니다. 글 정렬이나 들여쓰기, 제목 지정 등의 레이아웃 속성은 이 단락 단위로 부여되므로 독립된 줄에만 서식을 주기 편리합니다. 반면 'Shift + Enter'를 치면 동일 단락 내에서 단순 줄바꿈(<br> 태그)만 일어나며, 전체가 하나의 블록으로 묶이므로 들여쓰기 등의 작업을 하면 모든 줄이 함께 동작합니다.
이러한 설계는 작성 중 자주 겪는 '의도치 않게 줄 간격이 너무 벌어지는 문제'를 방지하면서도 의미 단위의 정밀한 레이아웃을 제어할 수 있도록 돕습니다. 주소나 시처럼 촘촘히 엮어야 하는 여러 줄은 'Shift + Enter'를 쓰고, 문단이 바뀔 때는 'Enter'로 단락을 구분합니다. 이 명확한 제어 메커니즘이 KuroEditor의 강력한 편의성을 뒷받침합니다.
이 개념이 특히 두드러지는 부분이 바로 리스트(목록) 기능입니다. MS Word나 Dropbox Paper 같은 도구에서도 번호 목록은 제공되지만, 복잡한 리스트를 작성하려 하면 번호가 생각대로 매겨지지 않아 답답한 경우가 많고 리스트 중간에 일반 텍스트 블록을 끼워 넣는 작업도 지원되지 않습니다. KuroEditor는 단순함을 유지하면서도 이러한 복잡한 형태의 리스트 구현을 자연스럽게 지원합니다.
레이아웃에 변화를 주는 '둥근 모서리 상자'와 텍스트 배치
기본적인 웹 문서는 텍스트와 이미지가 위에서 아래로 단조롭게 배열되는 세로 스크롤 레이아웃에 갇히기 쉽습니다. 모바일 독서가 표준이 된 시대지만, PC 등의 넓은 화면에서 볼 때 단조로운 레이아웃은 독자의 집중력을 떨어뜨립니다. 이를 개선하기 위해 추가된 기능이 바로 '둥근 모서리 상자(kuro-roundbox)'입니다.
이 상자는 하단 메뉴 아이콘 클릭 한 번으로 추가할 수 있으며 상자 안에는 텍스트, 이미지, 표 등 에디터 안의 모든 요소를 담을 수 있습니다. 상자 내부에 커서가 위치할 때만 나타나는 전용 설정을 통해 상자 너비(30%~100%)와 정렬 방식(왼쪽, 가운데, 오른쪽)을 손쉽게 수정할 수 있습니다.
가장 돋보이는 부분은 텍스트 줄바꿈 연동입니다. 상자 너비를 45%로 지정하고 우측 정렬하면, 뒤따르는 텍스트가 상자 왼쪽으로 자연스럽게 어우러집니다. 잡지의 칼럼 섹션이나 팁을 배치할 때 매우 유용합니다. 배치를 끝내고 싶을 때는 수평선(hr)을 하나 추가하는 것만으로 간단히 다음 단락을 상자 아래로 보낼 수 있습니다. 이 기능은 긴 문서에 시각적 활력을 주며 가독성을 높입니다.
링크의 틀을 깨는 'URL 카드'와 타이핑 리듬을 지키는 '이모지 숏코드'
인터넷 문서에서 외부 링크는 필수 요소입니다. 하지만 단순히 파란 글씨에 밑줄만 쳐진 텍스트 링크는 링크 대상이 중요 정보임을 독자가 알아채기 어렵습니다. 특히 추천 제품이나 주요 정보처럼 꼭 클릭을 유도해야 하는 링크를 걸 때 시각적 효과가 미미했습니다. 이를 보완하기 위해 'URL 카드(kuro-url-card)'가 탄생했습니다.
링크 추가 시 카드 옵션을 켜면 링크 대상의 메타데이터(아이콘, 제목, URL)를 자동으로 가져와 예쁜 카드 블록으로 꾸며 줍니다. 독자는 목적지 페이지의 분위기를 직관적으로 파악할 수 있어 클릭률(CTR)이 많이 올라갑니다. 대상 페이지가 만료되어 메타데이터를 가져오지 못하더라도 오류 이미지를 띄우는 대신 깨진 자원만 깔끔하게 감춰 줍니다. 이는 Dropbox Paper에서 힌트를 얻었지만, Paper의 링크는 원치 않는 URL도 강제로 카드화하여 화면을 많이 차지하거나, 깨진 URL도 캐시가 되어 있는 문제가 있습니다. KuroEditor는 일반 파란 링크, 얇은 카드형, 풍부한 정보 카드형의 3가지를 취향껏 골라 쓸 수 있습니다.
또한 타건 흐름을 방해받지 않도록 이모지 단축어(숏코드) 기능도 내장했습니다. 마우스로 일일이 이모지 피커를 뒤적일 필요 없이 :smile:, :fire:, :+1: 등을 타이핑하기만 하면 입력 즉시 지정 이모티콘으로 바뀝니다. 글을 쓰는 동안 손을 키보드에서 뗄 필요가 없어 정기적으로 긴 글을 쓰는 필진의 시간을 크게 아껴 줍니다.
투두 리스트와 요리 블로그를 위한 '레시피 카드'
KuroEditor는 개인 메모 작성 등에도 유용하게 쓰일 수 있도록 체크리스트(Todo) 같은 실용적인 기능도 품고 있습니다.
- 이메일 확인
- 커피 내리기
줄 맨 앞에 []를 치고 한 칸 띄우면 바로 체크박스가 그려지며, 상태 정보는 문서의 HTML 코드에 곧바로 반영됩니다. 발행된 공개 페이지에서는 이 상자들이 조작할 수 없는 고정된 체크 이미지로 굳어지지만(독자마다 상태를 저장하려면 DB 연동이 수반되어야 하므로), 가이드 문서 정리나 문서 내 체크 리스트 작성에는 매우 편리합니다.
요리 채널 등을 운영하는 분들을 위해 정형화된 '레시피 카드(kuro-recipe)'도 탑재했습니다. 인분수, 소요시간, 재료 목록 및 조리 순서를 미려한 하나의 카드로 정리해 주며, 이 카드는 구글 SEO 레시피 표준 규격을 준수하여 검색 엔진 친화적입니다. 한 문서에 레시피가 너무 많아 난잡해지는 일을 막기 위해 한 문서당 딱 하나씩만 넣을 수 있게 제한되어 있습니다(이미 배치했다면 추가 버튼이 비활성화됨). 자세한 내용은 KuroCMS 레시피 기능 소개 문서를 참고해 주세요.
코드 블록의 진화: 행 번호 드래그 이동과 복사 버튼 자동화
개발/IT 관련 테크니컬 문서를 작성할 때 코드 강조 표시(신택스 하이라이트)는 필수입니다. 기존 KuroEditor도 코드 블록을 제공해 왔으나, 개발자들이 작성 과정에서 겪는 코드 정렬이나 복사 등의 편의를 보완했습니다.
작성 중인 코드 블록의 왼쪽 행 번호 영역을 마우스로 잡고 끌어 위치를 손쉽게 아래위로 바꿀 수 있습니다. 코드를 오려내 붙여넣을 때 생기는 들여쓰기 꼬임이나 HTML 구조 뒤틀림 위험 없이 가장 안전하고 빠르게 코드 위치를 조율할 수 있습니다.
더불어 공개 페이지에서 방문자가 자주 쓰는 '코드 복사'를 돕기 위해 발행 시 코드 영역 우측 상단에 복사 단축 버튼(📋)을 자동 생성하는 전용 스크립트도 함께 포함되어 있어 독자들의 편의를 돕습니다.
결론: 눈에 보이는 그대로 발행되는 완벽한 WYSIWYG
KuroEditor의 최종 지향점은 텍스트 정렬을 넘어 에디터 안에서 편집하는 화면 디자인 그대로 공개 페이지에 송출하는 완벽한 WYSIWYG입니다. 이를 외부 프레임워크나 로딩 속도 저하 없이 순수 바닐라 자바스크립트로 구현해 내는 것은 흥미로운 과제였습니다. 결합도를 낮춘 독립적인 모듈 구조 덕분에 몇 줄의 코드만으로 어느 CMS에든 이식이 가능합니다. 앞으로도 더 많은 제작자분들의 창작을 돕기 위해 부단히 개선해 나가겠습니다.