한글을 입력할 때, 자음과 모음이 자연스럽게 하나의 글자로 조합된다. 그러나 CKEditor5 사용하는 환경 중 Android + 한글 키보드 조합에서 자음/모음이 분리되는 문제가 다양한 형태로 자주 발생되었습니다.

“가 나 다” 를 입력하려고 하면 “ㄱㅏ ㄴㅏ 다” 처럼 자음과 모음이 분리되는 형태로 입력되는 버그

이 현상은 한글 조합 메커니즘, IME의 composition 흐름, 그리고 에디터 내부의 이벤트 처리 구조가 서로 충돌하면서 발생하는 문제입니다.

자모 분리 현상 일어나는 조건

Android 모바일 기기
천지인 조합형 한글 키보드 (combinational IME)
한글 qwerty 키보드
- 띄워쓰기 이후
- 줄바꿈 후

IME와 composition 이벤트

한글은 조합형 문자라, ㄴ +ㅏ = 나 이 과정을 IME(Input Method Editor)라는 시스템이 한글의 완성을 도와줍니다.

IME란 무엇인가!? 사용자가 키보드로 직접 입력할 수 없는 문자(예: 한글, 한자, 일본어..) 를 입력할 수 있게 도와주는 OS Component

IME는 composition 이벤트를 발생시켜서 조합 과정을 단계적으로 처리합니다.

예시 링크

compositionstart : 조합 시작 (예 : ㄴ 입력)

compositionupdate : 조합 중 업데이트 (예 : ㅏ 입력 → 나)

compositionend : 조합 종료 (예 : 나)

beforeinput, input : 조합된 한글 삽입 시 발생

일반적으로 compositionstart가 발생하면, 해당 텍스트를 밑줄 등으로 표시하고, compositionend가되기 전까지 조합을 종료하지 않습니다.

이상적인 이벤트 흐름

compositionstart
compositionupdate + beforeinput(inputType="insertCompositionText")
compositionend
beforeinput(inputType="insertText")
input

Android 환경

Android Chrome 환경에서는 composition 이벤트와 함께 입력된 자음이 실제 DOM에 삽입되기도 합니다. 문제는 CKEditor5 같은 에디터에서 이 자음 입력을 최종 입력으로 착각하고 조기에 처리해버린다는 점입니다!

CKEditor5 내부 이벤트 흐름

IME가 compositionstart 이벤트 발생 → ㄴ이 DOM에 삽입됨
CKEditor5는 이를 일반 입력으로 간주 → CKEditor5 모델에 ㄴ을 확정 삽입
사용자가 ㅏ 입력 → IME는 ㄴ + ㅏ를 나로 조합하려 함
CKEditor5 입장에서는 ㄴ이 완성되어 있기 때문에 ㅏ는 뒤에 붙으며 ㄴ ㅏ가 됨
결과적으로 자음 + 모음이 분리된 형태로 보임

CKEditor5 내부 처리 방식 및 버그 수정

CKEditor5는 내부적으로 다음 두 가지 구조를 갖고있습니다.

View DOM – 실제 브라우저 상에 표시되는 내용

Model – 에디터 내부의 데이터 구조

DOM injector와 marker system이 작동하여 입력 및 변경 사항을 반영합니다

문제 원인

IME의 composition 중간 상태에서 발생하는 변경사항을 CKEditor가 너무 일찍 처리하여, 아직 조합되지 않은 글자가 에디터 내부 Model에 중간 입력값으로 삽입되어 조합 실패

즉, IME가 아직 조합 중인 텍스트를 입력 중인데도 CKEditor는 그것을 확정된 입력으로 착각하고 반영해 버린 것입니다.

임시 방편

CKEditor5 v36 패키지를 직접 수정해서 IME 조합 중에는 에디터가 DOM 수정하지 않도록 막아버리는법

ckeditor5/packages/ckeditor5-engine/src/view/renderer.ts

+ if (!this.isComposing) {
    updateTextNode( actualDomChildren[ i ] as DomText, ( expectedDomChildren[ i ] as DomText ).data );
+ }

compositionstart 시점에 isComposing = true
compositionend 시점에 isComposing = false

composition 중에는 어떤 처리도 하지 않고 compositionend 이후에만 반영하는 방식!

CKEditor5 버그 픽스 및 업데이트

주요 내용

composition 상태 추적을 위한 isComposing flag 도입
composition 중에는 input 처리, DOM 변경, 모델 업데이트 보류
insertCompositionText inputType은 무시
compositionend 이벤트 발생 시 최종 삽입

적용 버전

버전	상태
v42.0.1 이하	자음+모음 분리 현상 존재
v43.0.0 이상	문제 해결, 정상 한글 조합 가능

참고 자료

CKEditor GitHub 이슈 #11569

CKEditor GitHub PR #16755

non-stop.tistory.com 기술 분석

dreammk.tistory.com 실제 사례

IME event handling – developer.squareup.com

CKEditor5에서 천지인 IME 사용 시 한글 자음/모임 분리되는 현상