한글 입력 시 발생하는 IME 이슈 및 타이핑 로직 오류 해결

서비스 개발을 하다가 한글 입력 시 올바른 글자를 입력했음에도 불구하고 시스템이 오타로 판정하는 버그를 발견했다. 로직 자체의 결함보다는 브라우저의 한글 처리 방식인 IME(Input Method Editor)에 대한 이해 부족이 원인이었다.

 

1. 문제 상황

"무리"라는 단어를 입력할 때, 시스템은 다음과 같은 흐름으로 입력을 감지한다.

1. 'ㅁ' 입력 -> 원문 '무'와 불일치 (오타 판정)
2. 'ㅜ' 입력 ('무' 완성) -> 일치
3. 'ㄹ' 입력 -> 원문 '리'와 불일치 (오타 판정)

단순하게 onChange 이벤트에서 입력값과 원문을 1:1로 비교할 경우, 한글처럼 초성·중성·종성이 결합되는 조합형 문자는 완성 전 단계에서 반드시 오류가 발생하게 된다.

 

2. 원인 분석: IME와 브라우저 이벤트

한글, 일본어, 중국어와 같이 여러 키를 조합하여 하나의 문자를 만드는 언어는 IME(Input Method Editor)를 거쳐 입력된다. 브라우저는 이 과정에서 다음과 같은 Composition 이벤트를 발생시킨다.

• compositionstart: 한글 조합이 시작될 때
• compositionupdate: 글자가 조합 중일 때 (예: 'ㅎ' -> '하' -> '한')
• compositionend: 조합이 완료되어 커서가 다음으로 넘어가거나 입력이 확정될 때

일반적으로 사용하는 onChange 이벤트는 이 조합 과정의 모든 중간 상태를 포함하여 호출된다. 즉, 글자가 완성되지 않은 '조합 중'인 상태에서도 비교 로직이 실행되기 때문에 발생하는 문제였다.

 

3. 해결 방법: Composition 상태 관리

핵심은 글자의 조합이 완료된 시점에만 비교 로직을 실행하거나, 조합 중인 글자를 예외 처리하는 것이다.

잘못된 접근 (기존 방식)

• 입력 이벤트(onChange) 발생 시 즉시 문자열 비교 실행.
• 조합 중간 단계의 데이터가 비교 대상에 포함되어 오타로 처리됨.

올바른 접근 (개선 방식)

1. isComposing 플래그를 사용하여 현재 IME 조합이 진행 중인지 파악한다.
2. compositionstart 시점에서 플래그를 true로, compositionend 시점에서 false로 변경한다.
3. 입력 검증 로직은 isComposing이 false인 상태이거나, 한글 특성을 고려하여 글자가 완전히 구성된 후에만 동작하도록 제어한다.

4. 기술적 통찰

이 문제는 데스크탑 브라우저뿐만 아니라 모바일 환경에서도 동일하게 나타난다. 특히 한국어 환경에서 타이핑 게임, 채팅 UI, 입력값 유효성 검사 기능을 구현할 때는 반드시 IME 처리를 고려해야 한다.

 

다국어 환경의 웹 서비스를 개발할 때는 입력 방식(Input Method)과 브라우저의 이벤트 흐름을 깊이 있게 이해하는 것이 UX 저해 요소를 제거하는 핵심이다.

 

5.마치며

유사한 기능을 구현 중이라면 onChange 하나만 신뢰하기보다, composition 이벤트를 통해 한글의 특수성을 반드시 고려하길.