한글 조합 중에는 오타를 판정하지 않는다

멀쩡한 타자가 빨갛게 물든다

타자속도 측정기는 입력한 글자를 지문과 실시간으로 비교해 틀린 글자를 빨갛게 표시합니다. 영어라면 간단합니다. 한 번의 키 입력이 한 글자입니다.

한글은 다릅니다. "한"을 치려면 ㅎ, ㅏ, ㄴ 세 번을 누르고, 그 과정에서 ㅎ → 하 → 한 순으로 조합되며 매번 input 이벤트가 발생합니다. 이 중간 상태를 그대로 채점하면 어떻게 될까요?

지문의 정답이 "한"인데 사용자가 ㅎ을 누른 순간 "ㅎ ≠ 한"이므로 오타로 판정됩니다. "하"에서도 오타입니다. "한"이 되어서야 정답이 됩니다. 결과적으로 정확히 치고 있는 사람의 화면이 계속 빨갛게 깜빡입니다.정확도 통계도 엉망이 됩니다.

조합 중인지 아는 방법

브라우저는 IME 조합 상태를 알려 줍니다.compositionstart와 compositionend 이벤트가 있고,input 이벤트에는 isComposing 플래그가 붙습니다.

이걸 기준으로 두 가지 경로를 나눴습니다.

• 조합 중인 글자 — 채점하지 않습니다. 중립 스타일로 미리보기만 보여 줍니다. 사용자는 자기가 뭘 치고 있는지 보이지만 빨간색은 뜨지 않습니다
• 확정된 글자 — compositionend 이후, 또는 애초에 조합이 필요 없는 글자에 대해서만 채점합니다

이 구분 하나로 불필요한 오타 표시가 원천적으로 사라집니다. 조건문으로 예외를 거르는 게 아니라, 애초에 판정 대상이 아닌 상태를 분리한 것입니다.

붙여넣기와 숫자 튐

같은 맥락에서 두 가지를 더 다뤘습니다.

붙여넣기 차단. 지문을 복사해 붙여넣으면 타수가 무한대가 됩니다.paste 이벤트를 가로채 막고, 왜 막혔는지 토스트로 알려 줍니다. 조용히 막으면 사용자는 고장인 줄 압니다.

대시보드 갱신 주기. 타수와 정확도를 매 입력마다 갱신하면 숫자가 정신없이 튑니다. 특히 초반에는 분모가 작아 한 글자에 수십 타씩 출렁입니다. 250ms 간격으로 갱신하도록 했습니다. 실시간이라는 느낌은 유지하면서 읽을 수 있는 숫자가 됩니다.

한글을 다루는 도구의 공통 함정

한글 입력을 실시간으로 처리하는 기능을 만든다면 조합 상태는 거의 항상 문제가 됩니다. 검색어 자동완성, 실시간 유효성 검사, 글자 수 세기 모두 마찬가지입니다.

기억할 것은 하나입니다. 조합 중인 글자는 아직 사용자가 입력한 것이 아닙니다.화면에 보이더라도 확정 전까지는 판단을 유보해야 합니다.