2026-09-10: 설명과 코드 예시를 보완했습니다. 아래 예시는 글의 설계 의도를 전달하기 위한 것이며, 원 프로젝트에 반영된 변경 내역과는 구분합니다.
한글 입력을 다루다 보면 글자가 조합되는 도중의 상태를 고려해야 한다. 사용자가 보고 있는 문자가 곧 확정된 입력이라고 가정하면 포커스 이동이나 값 초기화에서 예상과 다른 동작을 만날 수 있다.
조합 중인 입력과 확정된 입력
IME는 여러 키 입력을 하나의 문자로 조합한다. 브라우저에서는 compositionstart, compositionupdate, compositionend로 그 과정을 관찰할 수 있다. InputEvent.isComposing은 입력이 조합 구간에 있는지 확인하는 단서다. MDN isComposing
다만 input 이벤트가 항상 조합 종료 뒤에만 발생하는 것은 아니다. 조합 중에도 발생할 수 있고, OS·브라우저·IME 조합에 따라 이벤트 순서와 값 갱신을 확인해야 한다. React의 onChange 역시 네이티브 change와 단순히 같은 시점이라고 볼 수 없다.
내가 관찰한 문제
입력 중 포커스를 옮기거나 값을 비웠을 때 이전 조합이 남거나 다음 입력에 영향을 주는 현상을 경험했다. 원문에서 macOS와 Windows의 예를 나눴지만, 재현 환경과 버전이 없으면 각 OS의 보편적인 동작으로 설명할 수는 없다.
이런 현상을 확인할 때는 입력값뿐 아니라 조합 이벤트, 포커스 이동, 상태 갱신 순서를 함께 기록해야 한다. preventDefault도 이벤트가 취소 가능한지와 처리 시점에 따라 적용 범위가 다르다.
직접 만든 입력 시스템을 실험한 이유
나는 입력 과정을 더 직접 다뤄보기 위해 커스텀 키보드와 인풋을 만드는 프로토타입을 시작했다. 조합 규칙과 커서의 위치를 스스로 관리하면서 어느 경계까지 제어할 수 있는지 알고 싶었다.
이 선택이 모든 IME 문제의 필수 해결책이라는 뜻은 아니다. 일반적인 폼이라면 네이티브 입력을 유지하고 조합 중의 값 변경이나 포커스 처리부터 검토하는 편이 범위가 작다.
직접 입력을 구현하면 조합 외에도 선택 영역, 복사·붙여넣기, 실행 취소, 모바일 입력, 접근성을 책임져야 한다. 따라서 이 프로젝트의 목표는 모든 OS의 기본 입력을 대체하는 완제품보다, 입력 동작을 이해하고 제어 범위를 확인하는 실험에 가깝다.
다음 글에서는 스타일과 입력 표면을 분리하려던 첫 시도, 그리고 키보드를 여러 인풋과 공유하도록 바꾼 구조를 다룬다.
Assisted by AI