Word에는 수십 년째 가로 줄자가 있습니다. 여백을 드래그하고, 첫 줄 들여쓰기를 밀고, 눈금을 보면서 문서의 폭을 잡는 그 도구요. 그런데 웹 WYSIWYG 에디터에는 — Froala, TinyMCE, CKEditor 5, Quill 어디에도 — 없습니다. CKEditor 쪽 요청 이슈는 2020년부터 열려 있습니다.
우리는 그 자리를 채우기로 했습니다.
코어 + 어댑터
특정 에디터의 플러그인으로 만들면 그 에디터의 사용자만 씁니다. 그래서 구조를 둘로 나눴습니다.
@devslab/editor-ruler코어 — 의존성 0. 눈금 그리기, 드래그 핸들, cm/in/px 단위, 키보드 접근성(ARIA 슬라이더)까지 전부 여기. iife 번들도 있어서 CDN 한 줄로도 씁니다.- 어댑터 — Froala, Tiptap, CKEditor 5. 각 에디터의 관례(플러그인 등록, 툴바 버튼, 문서 모델)에 코어를 연결하는 얇은 층.
새 에디터 지원 = 어댑터 하나 추가. 줄자 자체는 한 번만 만들면 됩니다.
라이브 데모가 잡은 버그
랜딩 페이지에 실제 Froala 트라이얼을 박아 둔 것은 마케팅이 아니라 검증
장치였습니다. 실측 중에 이런 버그를 잡았습니다: 테이블 셀 안에서 줄자를
드래그하면 <td>에 margin-left가 적히면서 HTML이 오염됐습니다.
수정은 "셀 자체는 inert, 셀 안의 문단만 대상"이라는 가드였는데, 여기서 배운 것은 수정 내용보다 방법입니다 — 정적 테스트가 전부 통과해도, 실제로 그려서 만져 본 화면만 잡는 버그가 있습니다.
드래그 한 번 = undo 한 번
Tiptap과 CKEditor 5 어댑터에서 가장 공들인 부분은 눈에 안 보입니다. 줄자 핸들을 드래그하는 동안 수십 번의 위치 갱신이 일어나는데, 순진하게 구현하면 Ctrl+Z 한 번에 1px씩 되돌아갑니다.
- Tiptap: 드래그 중 트랜잭션은
addToHistory: false로 히스토리 밖에서 적용하고, 커밋 시점에 baseline을 복원한 뒤 최종 상태 하나만 기록. - CKEditor 5: 드래그 중엔
enqueueChange에isUndoable: false.
두 에디터의 메커니즘은 다르지만 사용자 계약은 하나입니다 — 드래그 한 번은 undo 한 스텝.
사용자가 바로잡아 준 방향
0.4.0에서 가이드선을 냈을 때, 가로 줄자에서 세로 가이드를 뽑게 만들었습니다. 사용자 피드백이 정확했습니다 — 포토샵·피그마 같은 디자인 툴은 전부 반대(가로 줄자 → 가로 가이드)입니다. 0.5.0에서 breaking change로 교정했습니다. 관례가 이미 있는 도구를 만들 때는, 내 직관보다 사용자의 손이 이미 배운 방향이 맞습니다.
일부러 안 만든 것
탭 스톱은 범위 밖입니다. HTML에는 탭 스톱의 모델이 없어서, 만들려면 렌더링 결과를 우리가 소유해야 하는데 그건 줄자가 아니라 조판 엔진입니다. 도구는 자기가 정직하게 할 수 있는 일에서 멈추는 게 낫습니다.
라이브 데모는 여기에서 바로 만져볼 수 있습니다.