텍스트 에디터를 개발해보고 싶은데, 어렵다.
contenteditable의 기본동작을 컨트롤하기 위해 input, beforeinput 이벤트 리스너를 덕지덕지 붙여가며 이리저리 시도해봐도, 결국 IME 이슈 때문에 입력 자체를 contenteditable에 내맡기기가 쉽지않다.

그래서 많은 2세대 웹 텍스트 에디터들은 가상 커서와 입력버퍼를 만들어 이 문제를 해결해왔다. 가상 커서와 입력 버퍼는 쉽게 말해 내가 텍스트를 입력하고 있다고 생각하는 부분과 실제 DOM 트리 상에서 focus되어 입력이 되는 부분이 달라지게 하는 방법이다. contentrditable 등에 직접 입력을 가하면 브라우저 기본 동작들로 인해 제어가 쉽지 않으니, 다른 input 등을 만들어 입력을 받고 입력 텍스트를 글을 쓰고 있는 본문에 렌더링하여 제어를 용이하게 하자는 것이다.

예시를 찾아 보자.

1. 네이버 스마트 에디터

smart editor에서 입력은 input buffer라는 iframe에서 이뤄지고 있는데, 이 요소는 화면에 파란 선으로 표시되듯이 실제 우리가 입력이 이뤄지고 있다고 생각하는 곳과는 다르다. 실제로 html 코드를 열어봐도 '안녕하세요' 텍스트가 속하는 곳은 root를 id로 가진 div 태그인데, inpur buffer는 해당 태그 내부에 있지 않다.

사실 이렇게 실제 입력 받는 곳을 다르게 두는 방식엔 몇 가지 문제가 있는데, 그 중 하나는 한자입력 등이다. 한자를 입력하기 위해 한자키를 누르면 os 시스템 상에서 한자 입력을 위해 우리에게 익숙한 창이 하나 나타나는데, 이 위치는 실제 입력이 이뤄지는 곳에 드러나기 때문에 기껏 숨겨놓은(style에서 포지션을 화면 밖으로 설정 등) 입력 버퍼의 위치에 창이 생겨 버린다.

원래는 이렇게 입력하는 위치 아래 창이 나타나야 하지만,

이렇게 사용자가 입력하고 있다 생각하는 위치와 전혀 다른 곳에 창이 등장한다.

따라서 입력 버퍼를 적절히 가상 커서를 따라다니면서 안보이게끔 해야만 사용자 경험에 악영향을 미치지 않을 수 있다.

2. Velog

벨로그도 마찬가지로 입력버퍼를 두는 것으로 보인다.

한자도 스마트 에디터보단 눈속임을 잘했지만, 입력버퍼가 이데터 커서보다 조금 높이 있기 때문에 완벽하진 못하다.

3. Notion

노션은 별도로 입력버퍼를 두지 않는 것처럼 보이는데, 이거다 찾지 못했을 뿐 확신은 없다. 한자 입력을 해봐도 네이티브하게 잘된다.

추후 더 찾으면 추가 예정...