축하합니다! KuroEditor v1.0.0 이정표 달성 및 ‘레이아웃의 다양성’ vol.3
KuroEditor가 마침내 v1.0.0을 달성했습니다. 버그 수정을 넘어 플로팅 'RoundBox' 기능과 확장된 표 기능 등 실용적인 발전을 보여줍니다.
‘겨우 작동하는 수준’에서 ‘공식 릴리스’로의 도약
KuroEditor 개발을 시작한 지 몇 달이 흘렀습니다. vol.1에서 필요성을 절감하고 vol.2에서 메커니즘과 첫 버전을 릴리스한 이후, 마침내 돌아올 수 없는 강을 건넜습니다. 이제 버전 번호가 마침내 ‘1.0.0’이라는 이정표에 도달했습니다. 0.3.x 버전대에서 이뤄진 200개 이상의 자잘한 개선 작업들이 모여 마침내 완성된 형태를 갖추게 되었습니다.
이번 메이저 업데이트에서는 라이브러리 의존성 제로 및 순수 바닐라 JS라는 유연한 디자인 철학을 유지하면서, 블로그 작성의 표현력을 극적으로 향상시키는 ‘구조적 신기능’을 도입했습니다. 이제 단순한 텍스트 에디터를 넘어 단순한 레이아웃 도구의 면모를 갖추기 시작했습니다.
v1.0.0의 핵심: ‘RoundBox’ 플로팅 박스
v1.0.0에서 가장 크게 추가된 기능은 자유롭게 배치할 수 있는 ‘RoundBox’(kuro-roundbox)입니다. 이전의 WYSIWYG 에디터에서는 구현하기 어려웠던 ‘텍스트 옆에 보충 정보 배치’ 또는 ‘이미지와 텍스트를 나란히 배열’하는 등의 레이아웃을 이제 버튼 하나로 구현할 수 있습니다.
이것은 단순한 박스 그 이상입니다. 너비를 지정하는 것 외에도 좌측 또는 우측 플로팅(줄 바꿈)을 설정할 수 있으며, 박스 내부를 추가로 꾸밀 수 있는 중첩 구조까지 지원합니다. 기술적으로는 커서나 팝업 메뉴가 박스와 겹치지 않도록 위치를 자동으로 계산하는 로직이 포함되어 있어, 복잡한 레이아웃에서도 스트레스 없이 글쓰기에만 집중할 수 있습니다.
더욱 깊어진 표 기능: CSV 붙여넣기 및 사용성 개선
vol.2에서 강조했던 표 기능이 v1.0.0에서 더욱 진화했습니다. 특히 요청이 많았던 기능은 외부 데이터 가져오기였습니다.
새로운 기능 | 상세 내용 및 장점 |
CSV/TSV 붙여넣기 | 엑셀이나 스프레드시트에서 복사한 데이터를 표 형식으로 즉시 확장해 줍니다. |
수직 정렬 | 셀 내부의 텍스트 위치를 ‘상단, 중앙, 하단’으로 조정할 수 있습니다. |
원클릭 삭제 | 표 전체를 한 번에 삭제하는 버튼을 추가하여 실수를 줄이도록 UI를 개선했습니다. |
글자 수 세기 | 에디터 하단에 실시간으로 글자 수를 표시해 줍니다. 생각보다 꽤 편리합니다. |
*Dropbox Paper에서의 복사-붙여넣기도 완벽히 지원합니다! ㅎㅎ
세심한 UI: 메뉴 충돌 방지 로직
기능이 늘어나면 UI가 쉽게 지저분해질 수 있습니다. 하지만 KuroEditor의 궁극적인 임무는 ‘글쓰기를 방해하지 않는 것’입니다. 이번 업데이트를 위해 다양한 플로팅 메뉴가 서로 겹치지 않도록 표시 위치를 동적으로 계산하는 ‘중복 방지’ 로직을 전면 개편했습니다.
예를 들어, 표 바로 아래에 RoundBox가 위치하는 좁은 영역에서도 메뉴는 최적의 위치에 ‘착’하고 나타납니다. 이러한 ‘당연한 동작’을 실현하기 위해 수천 줄의 로직을 검토했습니다. 프레임워크를 사용하지 않아야만 가능한 밀리미터 단위의 집착입니다.
KuroEditor의 미래
v1.0.0의 출시로 KuroEditor의 기반이 완성되었습니다. 향후 작업은 버그 수정에 집중하겠지만, 코드 볼륨을 꾸준히 줄여나갈 계획입니다. ‘압도적으로 빠른 바닐라 JS, 의존성 제로, 어디서나 실행 가능’이라는 기본 철학은 결코 흔들리지 않을 것입니다.
KuroEditor는 KuroCMS와 함께 계속해서 진화하고 있습니다. 이번 업데이트를 통해 단일 파일 라이브러리로서 최고 수준의 기능성을 확보했다고 자부합니다. 관심이 있으신 분들은 GitHub 저장소를 확인하시거나 공식 샘플 페이지에서 이 ‘부드러운’ 필기감을 직접 경험해 보시기 바랍니다.
출처