docs: IME 충돌 문제 해결 과정 추가 (250912)
- 글로벌 키보드 포커스와 한글 입력 충돌 문제 - 다양한 해결 시도와 실패 과정 기록 - 최종적으로 기능 제거로 해결 - IME 관련 웹 플랫폼 한계 교훈 정리
This commit is contained in:
parent
f0d740c0ca
commit
4d5d708147
@ -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 레벨 입력기를 웹에서 완벽 제어 불가
|
||||
Loading…
x
Reference in New Issue
Block a user