docs: IME 충돌 문제 해결 과정 추가 (250912)

- 글로벌 키보드 포커스와 한글 입력 충돌 문제
- 다양한 해결 시도와 실패 과정 기록
- 최종적으로 기능 제거로 해결
- IME 관련 웹 플랫폼 한계 교훈 정리
This commit is contained in:
happybell80 2025-09-12 11:41:50 +09:00
parent f0d740c0ca
commit 4d5d708147

View File

@ -184,4 +184,53 @@ document.addEventListener('touchstart', (e) => {
3. **기능 구현 vs UX**
- 기술적으로 가능 ≠ 구현해야 함
- 사용자 경험이 최우선
- 때로는 안 하는 것이 더 나은 선택
- 때로는 안 하는 것이 더 나은 선택
---
## 2025-09-12 IME 충돌 문제 발견 및 해결
### 문제 발생
글로벌 키보드 포커스 구현 1개월 후 한글 입력 버그 발견:
- **증상**: "로빙" 입력 시 "f→ㅗ→로빙" 또는 "ㅗ빙" 출력
- **원인**: keydown 이벤트에서 즉시 focus() 호출이 IME 조합 과정 방해
### 시도한 해결책들
**1차 시도 - composition 이벤트 처리**
```javascript
if (e.isComposing || isComposing) return; // IME 입력 중 체크
```
- 결과: 속도 개선되었으나 첫 글자 영문 출력 지속
**2차 시도 - setTimeout 지연**
```javascript
setTimeout(() => textareaRef.current?.focus(), 0);
```
- 결과: 첫 자음 누락 ("ㄹ" 사라짐) 새로운 문제 발생
**3차 시도 - textarea 직접 이벤트**
```javascript
onCompositionStart={() => setIsComposing(true)}
onCompositionEnd={() => setIsComposing(false)}
```
- 결과: 부분 개선, 하지만 완벽하지 않음
### 근본적 깨달음
- **핵심 문제**: 글로벌 키보드 캡처와 IME는 본질적으로 충돌
- **업계 표준**: "/" 키 같은 제한적 단축키만 사용 (Discord, Slack도)
- **브라우저 한계**: IME 조합 중 DOM/포커스 변경 시 조합 깨짐
### 최종 해결 - 완전 제거
```javascript
// 글로벌 키보드 이벤트 90줄 삭제
// 대신 간단한 autoFocus 사용
<textarea autoFocus ... />
```
### 교훈
1. **IME 고려 필수**: 한글/중국어/일본어 사용자 위해 초기 설계부터 고려
2. **복잡함 < 단순함**: 107줄 삭제, 6줄로 해결
3. **서구 중심 UX 한계**: Discord/Slack도 IME 환경에선 타협
4. **"아무데나 타이핑"의 함정**: 편의 기능이 오히려 기본 기능 방해
5. **웹 플랫폼 제약**: OS 레벨 입력기를 웹에서 완벽 제어 불가