diff --git a/troubleshooting/250807_happybell80_프론트엔드UX개선.md b/troubleshooting/250807_happybell80_프론트엔드UX개선.md index 90327bf..2bb1dcd 100644 --- a/troubleshooting/250807_happybell80_프론트엔드UX개선.md +++ b/troubleshooting/250807_happybell80_프론트엔드UX개선.md @@ -184,4 +184,53 @@ document.addEventListener('touchstart', (e) => { 3. **기능 구현 vs UX** - 기술적으로 가능 ≠ 구현해야 함 - 사용자 경험이 최우선 - - 때로는 안 하는 것이 더 나은 선택 \ No newline at end of file + - 때로는 안 하는 것이 더 나은 선택 + +--- + +## 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 사용 +