나는 이렇게 학습한다/App

Flutter TextField에서 한글 입력 시 자음과 모음이 분리되는 문제 해결하기

daco2020 2024. 11. 20. 23:57
반응형

Flutter 앱에서 TextField를 사용해 한글을 입력할 때, 간혹 자음과 모음이 분리되는 현상이 발생합니다. 예를 들어 "안녕하세요"를 입력하려고 하면 "ㅇㅏㄴㄴㅕㅇㅎㅏㅅㅔㅇㅛ"처럼 입력되는 경우입니다.

 

이 문제는 입력기(IM)가 한글을 조합하는 과정에서 Flutter가 TextField의 값을 바로 수정하도록 구현했을 때 발생합니다. 이번 글에서는 이 문제를 어떻게 해결할 수 있는지 알아보겠습니다.

 

 

자음과 모음이 분리되는 이유

한글은 자음, 모음, 자음을 조합하여 한 글자를 만듭니다. 예를 들어 "안"은 "ㅇ + ㅏ + ㄴ"이 결합된 글자입니다.

 

Flutter에서 onChanged 이벤트를 사용하다 보면 텍스트를 수정하는 과정에서 입력기(IME)가 이 조합 과정을 끝내기도 전에 TextField의 값이 바뀌어 버리게 됩니다. 

 

결과적으로 한글 글자 조합이 중단되고 자음과 모음이 분리된 상태로 입력됩니다. 저의 경우 입력한 글자 수를 실시간으로 확인하고자 하니 이런 문제가 발생했죠.

 

 

Future.microtask로 문제 해결하기

Future.microtask는 Flutter에서 작업을 비동기적으로 처리하도록 도와주는 기능입니다. 특히, 작업을 마이크로태스크 큐에 추가하여 지금 실행 중인 코드가 끝난 직후에 실행시켜 주죠.


이 방식은 입력기의 작업(한글 조합)이 모두 끝난 후에 실행되도록 보장합니다.

 

아래 코드는 Future.microtask로 수정하기 전 코드입니다. 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('노트 작성')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: _controller,
          maxLines: null,
          onChanged: (text) {
            if (_controller.text.length > 300) {
              // 텍스트 길이를 즉시 잘라냄, _controller.value를 바로 수정.
              _controller.value = TextEditingValue(
                text: text.substring(0, 300),
                selection: TextSelection.collapsed(offset: 300),
              );
            }
          },
          decoration: InputDecoration(
            hintText: '내용을 입력하세요...',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }

 

_controller.value를 바로 수정하기 때문에 한글 입력 시 자음과 모음이 분리될 수 있는 문제 발생합니다.

 

다음으로 Future.microtask를 사용해 TextField에서 한글 입력 시 자음과 모음이 분리되지 않도록 처리한 코드입니다.

 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('노트 작성')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: _controller,
          maxLines: null,
          onChanged: (text) {
            if (_controller.text.length > 300) {
              // Future.microtask로 지연 처리
              Future.microtask(() {
                _controller.value = TextEditingValue(
                  text: text.substring(0, 300),
                  selection: TextSelection.collapsed(offset: 300),
                );
              });
            }
          },
          decoration: InputDecoration(
            hintText: '내용을 입력하세요...',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }

 

Future.microtask로 _controller.value를 감싸 IME가 한글 조합을 완료할 시간을 확보합니다.


이렇게 바꾸면 한글 입력을 포함한 다양한 입력기 환경에서 안정적인 동작을 만들 수 있습니다.

 

정리 

  1. 한글 입력 시 자음과 모음이 분리되는 문제는 입력기(IM)의 조합 과정을 보장하지 못해서 발생합니다.
  2. Future.microtask를 사용하면 입력이 끝난 후에 TextField 값을 수정하므로 한글 조합을 보장할 수 있습니다.
반응형