웹에서 굵게, 기울임, 목록, 이미지까지 다루는 글쓰기 영역을 '리치 텍스트 에디터'라고 하는데요. 이걸 직접 만들어본 개발자들은 하나같이 고개를 절레절레 흔들어요. 브라우저에서 가장 어려운 분야 중 하나거든요. 그런데 이 분야에서 가장 존경받는 개발자 중 한 명인 마레인 하버비케(Marijn Haverbeke)가 새로운 인브라우저 리치 텍스트 에디터 'Wordgard'를 공개했어요. ProseMirror를 만든 바로 그 사람이라서, 에디터를 다뤄본 개발자들에게는 이름만으로도 큰 뉴스예요.
이 사람이 누구냐면요
마레인 하버비케는 브라우저 텍스트 편집이라는 한 우물을 십수 년 판 개발자예요. 코드 에디터 라이브러리인 CodeMirror를 만들었는데, 웹에 코드 입력창이 있는 서비스라면 상당수가 이걸 쓰고 있다고 보면 돼요. 리치 텍스트 쪽에서는 ProseMirror를 만들었고요. 유명한 자바스크립트 입문서 'Eloquent JavaScript'의 저자이기도 해요. ProseMirror는 노션 스타일의 블록 에디터를 만들 때 사실상 표준처럼 쓰이는 기반 기술인데, 아틀라시안(컨플루언스)이나 뉴욕타임스 같은 곳들이 이 위에 자기네 에디터를 올렸고, 요즘 인기 있는 TipTap도 ProseMirror를 감싼 라이브러리거든요.
웹 에디터가 왜 그렇게 어렵냐면
브라우저에는 contenteditable이라는 속성이 있어서, 아무 요소에나 붙이면 편집 가능한 영역이 돼요. '이거면 되는 거 아냐?' 싶지만 여기서부터 지옥이 시작되거든요. 같은 동작이 브라우저마다 다른 HTML을 만들어내고, 실행 취소(undo) 기록은 제멋대로고, 커서는 툭하면 이상한 곳으로 튀어요. 특히 한국 개발자에게 뼈아픈 게 IME 문제인데요. 한글은 'ㅎ+ㅏ+ㄴ'처럼 자모를 조합해서 한 글자를 만들잖아요? 이 조합 과정이 브라우저 이벤트와 미묘하게 얽혀서, 에디터에서 마지막 글자가 두 번 입력되거나 조합 중인 글자가 깨지는 버그를 다들 한 번쯤 겪어보셨을 거예요. ProseMirror는 이 문제를 정면으로 다뤘어요. 문서를 브라우저 DOM에 맡기지 않고 스키마 기반의 자체 데이터 모델로 관리하고, 모든 변경을 트랜잭션으로 처리해서 예측 가능하게 만든 거죠. 덕분에 여러 명이 동시에 한 문서를 고치는 협업 편집 같은 고급 기능도 얹을 수 있었고요.
그런데 왜 또 새 에디터를 만들었을까요
ProseMirror의 강점이자 약점은 '완성품이 아니라 툴킷'이라는 거예요. 자유도는 엄청나게 높지만, 굵게 버튼 하나 달린 에디터를 띄우는 데도 스키마, 플러그인, 키맵을 직접 조립해야 해서 학습 곡선이 가파르거든요. 그래서 TipTap 같은 포장 라이브러리가 인기를 얻은 거고요. Wordgard는 이름 그대로 '브라우저에서 쓰는 리치 텍스트 에디터', 그러니까 조립 키트가 아니라 바로 쓸 수 있는 에디터를 지향하는 것으로 보여요. 툴킷을 만들면서 온갖 서비스의 요구사항과 브라우저의 함정을 다 겪어본 사람이, 그 경험을 바탕으로 내놓는 완성형 에디터라는 점이 이 소식의 핵심 포인트인 거죠.
업계 지형은 이래요
리치 텍스트 에디터 판은 생각보다 넓어요. 메타는 Draft.js의 후속으로 Lexical을 밀고 있고, Slate는 리액트 친화적인 프레임워크로 자리 잡았고, Quill은 간단히 붙이기 좋은 완성형이에요. 상용으로는 CKEditor와 TinyMCE가 오랫동안 버티고 있고, 국내에서는 NHN의 Toast UI Editor도 많이 쓰이죠. 크게 보면 '자유도 높은 툴킷'과 '바로 쓰는 완성품' 사이의 스펙트럼인데, 툴킷 진영의 원조 격인 ProseMirror의 저자가 완성품 쪽으로 움직였다는 건 그 자체로 흐름을 읽는 재료가 돼요.
우리한테 주는 시사점
서비스에 에디터를 붙일 계획이 있다면 Wordgard는 후보 목록에 넣고 지켜볼 가치가 있어요. 다만 어떤 에디터를 고르든, 한국 서비스라면 도입 전에 꼭 해야 할 일이 있어요. 한글 입력 테스트예요. 조합 중 삭제, 빠른 타이핑, 모바일 가상 키보드까지 실제로 두들겨보세요. 데모가 아무리 매끈해도 IME에서 무너지는 에디터가 정말 많거든요.
정리하면, '웹 에디터 분야의 대가가 이번엔 툴킷이 아니라 완성형 에디터를 직접 들고 나왔다'는 소식이에요. 여러분 서비스는 어떤 에디터를 쓰고 계세요? 한글 입력 버그와 싸워본 경험담도 궁금해요!
🔗 출처: Hacker News