software

iOS에서 Flutter를 사용해 키보드를 닫는 “Done” 버튼 표시 방법 (간단하고 재사용 가능한 접근법)

발행: (2026년 1월 13일 오후 06:31 GMT+9)
6 min read
원문: Dev.to

Source: Dev.to

Flutter에서 텍스트가 많은 화면을 만들 때, iOS 키보드를 어떻게 닫는지가 가장 간과되는 UX 요소 중 하나입니다. 특히 멀티라인이나 숫자 입력 필드에서는 더욱 그렇습니다. Android 키보드는 보통 “Done” 또는 “Close”와 같은 액션 버튼을 제공하지만, iOS는 이를 생략하는 경우가 많아 사용자가 입력 영역 밖을 탭하거나 불편하게 스크롤해야만 키보드를 내릴 수 있습니다.

iOS 키보드 위에 커스텀 “Done” 버튼 오버레이를 추가하는 것은 매우 간단합니다. 아래에서는 이 기능이 왜 중요한지, 텍스트 입력 UX를 어떻게 개선하는지, 그리고 Flutter 믹스를 사용해 깔끔하고 재사용 가능한 솔루션을 구현하는 방법을 살펴봅니다.

iOS에 커스텀 “Done” 버튼이 필요한 이유

  • 멀티라인 필드에서는 키보드 해제 버튼이 표시되지 않는다.
  • 숫자 키보드에는 Return/Done 키가 없다.
  • 바텀 시트가 키보드에 가려지는 경우가 많다.
  • 입력 영역 밖을 탭해서 닫는 것이 항상 명확하거나 가능한 것은 아니다.
  • 키보드 오버레이가 중요한 CTA 버튼을 가릴 수 있다.

이러한 문제들은 콘텐츠 제작 화면, 폼, 메모 작성 인터페이스 등 사용자가 몇 단어 이상을 입력해야 하는 모든 상황에서 UX 마찰을 일으킵니다. 커스텀 오버레이를 사용하면 키보드 바로 위에 명확하고 직관적인 Done 버튼을 배치하여 사용자가 즉시 키보드를 닫을 수 있습니다.

믹스를 사용할 때의 장점

  • 보일러플레이트 코드 중복이 없다.
  • 위젯 트리를 깔끔하게 유지한다.
  • 여러 페이지에서 재사용 가능하다.
  • 오버레이 삽입 및 제거를 자동으로 관리한다.
  • iOS 전용으로 안전하게 동작한다 (Platform.isIOS가 true일 때만 실행).

믹스 적용하기

아래는 페이지에 믹스를 통합하는 최소 예시입니다. 믹스는 포커스 변화와 오버레이 관리를 자동으로 처리합니다.

// Example: TextInputPage with a reusable Done‑button mixin
class TextInputPage extends StatefulWidget {
  @override
  _TextInputPageState createState() => _TextInputPageState();
}

class _TextInputPageState extends State
    with KeyboardDoneButtonMixin { // <-- your mixin
  final TextEditingController _articleController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Article Editor')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: _articleController,
          focusNode: focusNode, // provided by the mixin
          maxLines: null,
          decoration: const InputDecoration(
            hintText: 'Start typing...',
          ),
        ),
      ),
    );
  }
}

오버레이 동작 방식

  • 오버레이 활성화 – 텍스트 필드가 포커스를 얻으면 믹스가 키보드 바로 위에 OverlayEntry를 삽입한다.
  • 동적 위치 지정 – MediaQuery.of(context).viewInsets.bottom이 실시간으로 키보드 높이를 제공해 완벽하게 정렬한다.
  • 안전한 제거 – 포커스가 사라지거나 사용자가 Done 버튼을 탭하면 오버레이가 깔끔하게 사라진다.
  • iOS 전용 – Android, Web, 데스크톱 플랫폼에서는 오버레이가 절대 나타나지 않는다.

일반적인 사용 사례

  • 채팅 애플리케이션.
  • 폼 기반 워크플로우.
  • 메모 작성 또는 콘텐츠 제작 화면.

경험 확장하기

오버레이는 일반 위젯이므로 다음과 같은 커스터마이징이 가능하다:

  • 앱 테마에 맞게 스타일을 적용한다.
  • 입출력 애니메이션을 추가해 세련된 느낌을 만든다.

키보드 위에 작은 Done 버튼 하나만 추가해도 iOS에서 텍스트 입력 경험을 크게 향상시킬 수 있습니다. 특히 콘텐츠 제작이나 폼 기반 워크플로우에서 더욱 효과적입니다. 믹스 방식을 사용하면 코드베이스를 깔끔하고 확장 가능하게 유지하면서 네이티브 느낌의 UX를 제공할 수 있습니다.

Back to Blog

관련 글

더 보기 »