Flutter로 커뮤니티 앱을 개발하던 중, 대댓글 입력창에 상대방 닉네임 태그(@홍길동)를 표시하고 한글을 입력할 때, 닉네임 태그가 갑자기 사라지는 문제가 발생했다. 비슷한 문제를 겪는 개발자들에게 도움이 되길 바라며 문제 해결 과정을 기록한다.
문제 상황
대댓글 입력창에서 TextField에 TextEditingController를 연결해 사용자 입력을 감지하고 있었다. 대댓글 입력 모드에서는 상대방 닉네임을 @홍길동처럼 텍스트 앞에 표시하고, 유저가 이어서 댓글을 입력할 수 있도록 했다.
그런데 한글 입력 도중, 특히 초성(ㅎ)이나 중성(ㅏ)을 입력하는 단계에서 닉네임 태그가 통째로 사라졌다. 입력을 멈추고 커서를 이동하거나 영문을 입력하면 이런 현상은 발생하지 않았다. 문제는 한글 조합 중에 텍스트 필드가 임시적으로 비어있는 상태로 인식되면서, 입력창의 listener가 닉네임을 지워버리는 것이었다.
원인 분석
처음에는 TextEditingController의 addListener를 통해 입력 텍스트가 비어있는지 확인하고 닉네임 태그를 유지할지 결정하는 로직을 작성했다. 한글 입력 중 텍스트가 사라지는 현상이 발생한 이유는 다음과 같았다.
1️⃣ 한글 입력은 IME(입력기)를 통해 조합 상태(Composing)를 거쳐 완성된다.
2️⃣ 이때 controller.text 값은 조합 중간에 임시로 비어있는 것으로 감지될 수 있다.
3️⃣ 나는 text.isEmpty 조건으로 닉네임 태그 삭제 로직을 동작하도록 했기 때문에, 입력 중 text가 비어있다고 판단하고 clearReplyMode()를 호출해버렸다.
4️⃣ 그 결과 한글 입력의 초성-중성 조합 중에 닉네임 태그가 사라지는 문제가 발생했다.
시행착오
처음에는 text.isEmpty로만 판단했다가 한글 입력 도중 태그가 삭제됐다.
controller.value.composing.isCollapsed를 이용해 조합 중 상태를 감지하려고 했으나, 한글 입력 시점과 로직 실행 타이밍의 차이로 여전히 문제가 남았다.
한글 조합이 끝나기 전에 listener가 너무 빨리 동작해서 text가 비어있는 것으로 처리되기 때문이었다.
해결 방법: 딜레이를 주고 재확인
IME의 입력기 조합이 완료된 후 텍스트를 확인하기 위해 약간의 딜레이를 주고 재확인하는 로직을 작성했다. 이렇게 하면 한글 입력 중 닉네임 태그가 실수로 삭제되지 않는다.
void _updateSendButtonState() {
final controllerValue = widget.controller.commentController.value;
final currentText = controllerValue.text;
final isComposing = !controllerValue.composing.isCollapsed;
final validatedText = currentText.replaceAll('\u200B', '').trim();
_isTextFieldValid.value = validatedText.isNotEmpty;
if (widget.controller.repliesToNickname.isNotEmpty) {
if (!isComposing && validatedText.isEmpty && currentText != '\u200B') {
// 딜레이 후 최종 확인
Future.delayed(const Duration(milliseconds: 100), () {
final delayedText = widget.controller.commentController.text
.replaceAll('\u200B', '')
.trim();
final delayedComposing = widget.controller.commentController.value.composing;
if (delayedText.isEmpty && delayedComposing.isCollapsed) {
widget.controller.clearReplyMode(); // 닉네임 태그 삭제
}
});
}
}
}Future.delayed를 통해 100ms 정도의 짧은 시간을 두고, 조합 완료 후 텍스트와 composing 상태를 다시 체크했다. 이렇게 하면 한글 입력 도중 임시로 비워진 상태에서도 태그가 지워지지 않고, 진짜로 입력이 끝나고 텍스트가 비어있을 때만 태그를 삭제하도록 처리할 수 있었다.
핵심 포인트
한글 입력은 조합 상태를 거쳐 완성되므로, IME 조합 중에는 TextField의 text 값이 비어있을 수 있다.
즉각적인 판단 대신 약간의 딜레이 후 재확인으로 안정적으로 처리해야 한다.
controller.value.composing.isCollapsed를 통해 조합 상태를 감지하고, 텍스트 완성 후에 판단하도록 했다.
결론
이번 문제는 Flutter의 TextField와 한글 입력 방식(IMEs)의 특성에서 비롯된 입력 처리 문제였다.
한글 입력 시 발생할 수 있는 IME 조합 처리 문제를 이해하고, 딜레이 후 재확인 로직으로 안정적으로 닉네임 태그 유지 기능을 구현했다.
같은 문제를 겪는 개발자들에게 도움이 되길 바라며, Flutter 개발 시 한글 입력 처리의 특성을 꼭 고려하길 추천한다.
