IME별 composition 이벤트 변화

IME에 따라 compositionstart, compositionupdate, compositionend의 발생 시점과 CompositionEvent.data 값이 다르다. 아래는 각 IME에서의 대표적인 이벤트 순서와 data 예시다. 실제 동작은 OS·브라우저·IME 버전에 따라 달라질 수 있으므로, 에디터 구현 시에는 이벤트로 넘어온 문자열만 신뢰하고, 필요하면 타겟 환경에서 로그로 확인하는 것이 좋다.

---

1. 공통: 이벤트 의미

이벤트	의미	CompositionEvent.data
compositionstart	조합 세션 시작. IME가 “조합 중” 모드로 들어감.	조합으로 대체될 기존 선택 영역의 문자열. 없으면 빈 문자열.
compositionupdate	조합 중 문자열이 바뀜.	현재 조합 중인 문자열(preedit).
compositionend	조합 종료(commit 또는 취소).	commit이면 확정된 최종 문자열; 취소면 빈 문자열.

---

2. 한글 IME (2벌식): “가” 입력

2.1 시나리오

사용자가 ㄱ → ㅏ 순서로 눌러 “가”를 만든 뒤, 스페이스로 확정한다.

2.2 이벤트 순서 예시(한 가지 패턴)

IME·브라우저에 따라 compositionupdate 호출 횟수와 data에 오는 문자열이 다를 수 있다.

패턴 A: 자모마다 compositionupdate

순서	이벤트	data	비고
1	compositionstart	""	조합 시작
2	compositionupdate	”ㄱ”	ㄱ 입력 직후. 일부 IME는 “ㄱ”을 preedit으로 보냄.
3	compositionupdate	”가”	ㅏ 입력 직후. (L,V,T)=(0,0,0) → 완성형 “가”.
4	compositionend	”가”	스페이스로 commit.

패턴 B: 완성형만 compositionupdate

순서	이벤트	data	비고
1	compositionstart	""	조합 시작
2	compositionupdate	”가”	ㅏ 입력 직후. “ㄱ” 단계는 data에 안 보내고 “가”만 보내는 IME도 있음.
3	compositionend	”가”	스페이스로 commit.

패턴 C: compositionupdate가 한 번만

순서	이벤트	data	비고
1	compositionstart	""	조합 시작
2	compositionupdate	”가”	ㅏ 입력 시. “ㄱ” 입력 시에는 compositionupdate가 발생하지 않을 수도 있음.
3	compositionend	”가”	스페이스로 commit.

2.3 “각” 입력 예시(ㄱ → ㅏ → ㄱ)

순서	이벤트	data (예시)	비고
1	compositionstart	""
2	compositionupdate	”ㄱ” 또는 “가”	ㄱ, ㅏ 입력에 따라 다름.
3	compositionupdate	”가”	ㅏ 입력 후.
4	compositionupdate	”각”	ㄱ(종성) 입력 후.
5	compositionend	”각”	스페이스 또는 다음 자모로 commit.

2.4 취소( Esc )

순서	이벤트	data	비고
1	compositionstart	""
2	compositionupdate	”가” (또는 중간 상태)
3	compositionend	""	취소 시 data는 빈 문자열.

---

3. 일본어 IME (로마자 → 히라가나): “か” 입력

3.1 시나리오

사용자가 k → a 순서로 눌러 “か”(히라가나)를 만든 뒤, Enter 또는 다음 키로 확정한다.

3.2 이벤트 순서 예시

순서	이벤트	data (예시)	비고
1	compositionstart	""	로마자 “k” 입력 시 조합 시작.
2	compositionupdate	”ｋ” 또는 “か”	IME에 따라 “반각 로마자” 또는 “히라가나”가 올 수 있음.
3	compositionupdate	”か”	“a” 입력 후 “か”로 변환.
4	compositionend	”か”	Enter 또는 다음 문자 입력으로 commit.

일본어 IME는 변환(変換) 전에는 “조합 중”이고, Enter로 변환 확정 시 commit된다. 변환 후 再変換 시에는 별도 composition 세션이 시작될 수 있다.

3.3 “変換中” (변환 후보 선택 중)

순서	이벤트	data (예시)	비고
1	compositionstart	""	Space로 변환 시작.
2	compositionupdate	”漢字” (선택 중인 후보)	후보가 바뀔 때마다 compositionupdate.
3	compositionend	”漢字”	Enter로 후보 확정 = commit.

---

4. 중국어 IME (병음): “中” 입력

4.1 시나리오

사용자가 z h o n g 순서로 눌러 병음 “zhong”을 입력한 뒤, 숫자 키 또는 클릭으로 후보 “中”을 선택해 확정한다.

4.2 이벤트 순서 예시

순서	이벤트	data (예시)	비고
1	compositionstart	""	첫 글자(예: z) 입력 시.
2	compositionupdate	”z”
3	compositionupdate	”zh”
4	compositionupdate	”zho”
5	compositionupdate	”zhon”
6	compositionupdate	”zhong”
7	compositionupdate	”中” (또는 후보 목록의 첫 항목)	후보가 뜨면 data에 한자 또는 병음이 올 수 있음.
8	compositionend	”中”	후보 선택 확정 = commit.

중국어 IME는 조합 중에는 병음 문자열, 후보 선택 후에는 한자가 data로 올 수 있다. IME에 따라 compositionupdate 호출 횟수와 data 내용(병음 vs 한자)이 다르다.

---

5. 유럽권(데드 키·악센트): “é” 입력

5.1 시나리오

사용자가 acute accent(´) 데드 키를 누른 뒤 e를 눌러 “é”를 만든다.

5.2 이벤트 순서 예시

일부 환경에서는 composition 이벤트 없이 바로 “é”(U+00E9)가 insertText로 들어올 수 있다. composition을 쓰는 경우 예시는 다음과 같다.

순서	이벤트	data (예시)	비고
1	compositionstart	""	데드 키 입력 시.
2	compositionupdate	”´” 또는 ""	데드 키만 눌렀을 때.
3	compositionend	”é”	“e” 입력 시 조합 완료·commit.

브라우저·OS에 따라 composition 없이 beforeinput/input만 오고, inputType이 insertText, data가 “é”인 경우도 있다. 에디터는 composition 이벤트가 오면 조합 구간으로 처리하고, 오지 않으면 일반 insertText로 처리하면 된다.

---

6. IME별 차이 요약

IME	compositionupdate 호출	data에 오는 내용	commit 시점
한글(2벌식)	자모마다 1회 ~ 완성형만 1회	“ㄱ”, “가” 또는 “가”만	스페이스·엔터·다음 자모
일본어(로마자)	로마자/히라가나 변환 시	“ｋ”, “か” 등	Enter·다음 문자
일본어(변환)	후보 변경 시	선택 중인 한자 등	Enter로 후보 확정
중국어(병음)	글자마다 또는 후보 표시 시	“z”, “zh”, … “中”	후보 선택 확정
유럽권(데드 키)	없을 수 있음	“é” 등 완성 문자	다음 키 입력 시

---

7. 에디터 구현 시 활용

• IME 중립 처리: “조합 중인지”는 compositionstart 이후 compositionend 이전으로만 판단하고, compositionupdate의 data를 preedit으로만 표시한다.
• commit: compositionend 시점의 data가 비어 있지 않으면 commit 문자열로 문서에 반영한다.
• 취소: compositionend의 data가 빈 문자열이면 preedit만 제거하고 commit하지 않는다.
• 실제 타이밍 확인: 타겟 OS·브라우저·IME 조합에서 addEventListener(“compositionupdate”, e => console.log(e.data)) 등으로 로그를 남겨, 위 예시와 비교해 보면 된다.