Monday, August 21, 2023

Flutter 활용, 멘션 기능(@mention) 있는 TextField 구현하기
  /   No comments   

1장: 들어가며: 멘션 기능의 개요 및 Flutter 소개

소셜 미디어, 커뮤니티, 개발 플랫폼 등 다양한 분야에서 사용되는 멘션 기능(@mention)은 사용자 간 소통을 더 간편하고 효율적으로 만드는 효과가 있습니다. 이 장에서는 멘션 기능의 개념 및 Flutter를 이용해 멘션 기능을 추가한 TextField 위젯을 만드는 방법에 대해 간략하게 알아보겠습니다.

1.1 멘션 기능(@mention)이란?

멘션 기능은 사용자 이름 앞에 '@' 기호를 붙여 다른 사용자를 특정하여 호출하거나 언급하는 기능으로, 특정 사용자와의 상호작용을 원활하게 해줍니다. 예를 들어, 트위터에서 '@' 기호와 함께 사용자 이름을 입력함으로써 해당 사용자에게 메시지를 보내거나 대화에 초대할 수 있습니다.

1.2 Flutter 소개

Flutter는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크로, 단일 코드베이스를 사용해 iOS와 Android 모바일 어플리케이션을 개발할 수 있습니다. 빠르고, 풍부한 사용자 인터페이스(UI) 구현이 가능하며, 다양한 위젯과 플러그인을 이용해 다양한 기능을 추가할 수 있습니다.

1.3 멘션 기능 추가된 TextField 구현 목표

이 글에서는 Flutter를 사용하여 멘션 기능이 추가된 TextField 위젯을 만드는 과정을 단계별로 설명합니다. 최종적으로 만들어진 위젯에서는 사용자가 '@' 기호를 입력하면 사전에 등록된 사용자 목록이 표시되어, 선택된 사용자를 멘션하는 텍스트를 쉽게 작성할 수 있게 됩니다.

이제 다음 장에서는 Flutter 프로젝트를 시작하고, MentionableTextField 위젯의 기본 구조를 설정하는 방법을 알아보겠습니다.

2장: 기본 구조 설정: MentionableTextField 위젯 만들기

이 장에서는 멘션 기능이 추가된 TextField를 만들기 위해 기본 구조를 설정하는 과정을 다룹니다. 먼저, MentionableTextField 위젯을 만들고 필요한 상태 관리 코드를 설정해봅시다.

2.1 MentionableTextField 위젯 생성

MentionableTextField 위젯을 생성하기 위해 몇 가지 단계를 따릅니다.

  1. 새로운 Stateless 위젯인 MentionableTextField를 만듭니다.
  2. 선택한 사용자 목록과 사용자 목록을 표시하는 데 필요한 데이터를 저장한 TextField 컨트롤러와 함께 해당 위젯을 초기화합니다.
  3. MentionableTextField에 필요한 스타일과 인수를 설정합니다.
  4. build 메소드에서 사용자의 목록과 TextField를 어떻게 표시할지 설정합니다.

다음은 MentionableTextField 위젯의 기본 코드 예시입니다.

<code class="language-dart">
class MentionableTextField extends StatelessWidget {
  final TextEditingController controller;
  final List<String> userNames;

  MentionableTextField({
    required this.controller,
    required this.userNames,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 사용자 목록 UI 구현
        // TextField UI 구현
      ],
    );
  }
}
</code>

2.2 State 관리 설정

MentionableTextField에는 사용자의 입력에 따라 변경되는 데이터, 즉 사용자 목록을 보여주거나 숨기는 상태가 있습니다. 이러한 상태를 관리하기 위해 Flutter에서 제공하는 StatefulWidget과 State 클래스를 사용합니다.

  • StatefulWidget을 만들어 MentionableTextField를 상속받습니다.
    예) class _MentionableTextFieldState extends State<MentionableTextField> {...}
  • 상태 관리를 위한 변수를 추가하고 initState 메소드로 초기화하지만 숨겨진 상태로 보이지 않게 설정합니다.
  • _MentionableTextFieldState 클래스 내에 사용자 목록을 표시하거나 숨기는 로직을 구현합니다.

추가로, TextField 위젯은 사용자가 텍스트를 입력한 후 특정 이벤트를 발생시킬 때 사용되는 onChanged 리스너를 사용해 멘션 기능 로직을 추가할 것입니다. onChanged 이벤트를 활용해 사용자가 언제 '@' 기호를 입력했는지 감지할 수 있습니다.

지금까지 기본 구조를 설정하였습니다. 다음 장에서는 사용자 검색 및 선택 인터페이스를 구현하는 방법에 대해 알아보겠습니다.

3장: 멘션 기능 추가: 사용자 검색 및 선택 인터페이스 구현

이제 기본 구조 설정이 완료되었으니 사용자 검색 및 선택 인터페이스를 구현해보겠습니다. 이 과정에서 사용자에게 검색 결과를 표시해주는 UI를 만들고, 사용자가 검색 결과를 선택할 경우 해당 결과를 처리하는 로직을 작성합니다.

3.1 사용자 검색 UI 구현

사용자가 멘션 기능을 활용할 때 사용자 목록을 보여주기 위한 UI 컴포넌트를 구성합니다. 여기서 사용자 목록은 ListView.builder를 활용해 렌더링합니다. 아래 예시 코드를 참고하세요.

<code class="language-dart">
Column(
  children: [
    Visibility(
      visible: _showUsers,
      child: Container(
        height: 200,
        child: ListView.builder(
          itemCount: userNames.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(userNames[index]),
              onTap: () {
                // 사용자 선택 로직 구현
              },
            );
          },
        ),
      ),
    ),
    // TextField UI 구현
  ],
)
</code>

_showUsers는 bool 타입의 상태 변수로서 사용자 목록이 표시될지 여부를 결정하며, initState 메소드에서 false로 초기화합니다.

3.2 TextField에서 멘션 입력 감지

사용자가 '@' 기호를 입력했는지를 추적하려면 TextField의 onChanged 콜백 함수를 사용해야 합니다. onChanged 콜백을 이용해 TextField의 텍스트가 변경될 때마다 메소드를 호출하여 '@' 기호가 나타나면 사용자 목록을 표시하도록 설정합니다.

<code class="language-dart">
TextField(
  controller: controller,
  onChanged: (text) {
    if (text.endsWith('@')) {
      // 사용자 목록 표시 로직 구현
      setState(() {
        _showUsers = true;
      });
    }
  },
)
</code>

3.3 사용자 선택 로직 구현

사용자가 목록에서 사용자를 선택하면 해당 사용자를 멘션 텍스트로 삽입하고 목록을 숨깁니다. 이 작업은 ListView.builder의 ListTile의 onTap 콜백 함수에서 처리할 수 있습니다. 사용자가 선택한 사용자 이름을 기존의 TextField 텍스트에 추가하고, 사용자 목록을 숨기는 로직을 작성하세요.

<code class="language-dart">
ListTile(
  title: Text(userNames[index]),
  onTap: () {
    setState(() {
      controller.text += '${userNames[index]} ';
      controller.selection = TextSelection.collapsed(offset: controller.text.length);
      _showUsers = false;
    });
  },
)
</code>

이렇게 함으로써 사용자 검색 및 선택 인터페이스가 구현됩니다. 다음 장에서는 멘션 텍스트의 스타일과 전체 TextField UI 디자인을 적용하는 방법을 설명하겠습니다.

4장: 멘션 스타일 및 TextField UI 디자인 적용

이 장에서는 멘션 기능이 포함된 TextField 내에서 멘션 텍스트에 대한 스타일을 어떻게 적용하고, 전체 TextField UI 디자인을 완성하는 방법을 설명합니다.

4.1 멘션 텍스트 스타일 적용

텍스트 스타일을 지정할 수 있는 TextSpan 위젯과 RichText 위젯을 사용하여 모든 텍스트가 동일한 스타일을 적용받지 않고, '@' 기호로 시작하는 멘션 부분에만 다른 스타일을 적용할 수 있습니다. 이를 위해 조건문을 활용하여 텍스트 구성요소를 분석하고 스타일을 지정하세요.

아래 예시 코드를 참고하며 구현한 TextField를 RichText로 대체하여 멘션 스타일을 적용하도록 수정해주세요.

<code class="language-dart">
// 멘션 텍스트 스타일 예시
RichText(
  text: TextSpan(
    children: [
      for (var part in controller.text.split(' '))
        TextSpan(
          text: '$part ',
          style: part.startsWith('@') 
            ? TextStyle(color: Colors.blue) 
            : TextStyle(color: Colors.black),
        ),
    ],
  ),
)
</code>

코드에서 볼 수 있듯이, '@' 기호로 시작하는 멘션 부분의 텍스트 색상을 파란색으로 변경하는 예시를 사용했습니다. 원하는 스타일 요소를 추가하여 멘션 텍스트를 적절하게 강조하십시오.

4.2 멘션 텍스트 선택 및 이동 동작 처리

멘션 기능을 추가한 TextField에서 사용자가 텍스트를 선택하거나 커서를 이동할 때 적절한 동작을 처리하는 것이 중요합니다. 이를 위해 TextField의 키보드 및 선택 동작을 관리하는 EditableText 위젯을 이용합니다. 커서가 멘션 텍스트에 들어갈 경우 동작을 제한하거나 멘션 전체를 선택하게 조정할 수 있습니다.

4.3 전체 TextField UI 디자인 완성

마지막으로 전체 TextField 외형에 대한 디자인 옵션을 추가하고 참조할 수 있는 방법을 알아봅니다. 이를 위해 InputDecoration 클래스를 사용하여 TextField에 다양한 스타일 요소를 포함할 수 있습니다. 예제로 다음과 같은 속성을 적용하십시오:

  • 테두리: OutlineInputBorder
  • 지시 텍스트: "메시지를 작성하십시오."
  • 패딩 및 컨텐트 정렬: 여백, 텍스트 정렬 등을 적용

위 방법을 통해 멘션 기능이 추가된 TextField UI 디자인을 완성할 수 있습니다.

이제 완성된 MentionableTextField 위젯을 사용하여 필요한 곳에 멘션 기능을 포함한 텍스트 필드를 추가할 수 있습니다. 이를 통해 사용자 간 원활한 상호작용을 제공하는 효과적인 애플리케이션을 만들 수 있으며, 필요한 경우 다양한 스타일과 기능 조정을 추가할 수 있습니다.

5장: 성능 최적화 및 사용성 개선

이 장에서는 멘션 기능이 포함된 TextField 위젯의 성능 최적화와 사용성을 개선하는 방법에 대해 설명합니다. 성능 최적화는 앱의 반응성과 효율성을 높이며, 사용성 개선은 사용자 경험(UX)을 향상시킵니다.

5.1 성능 최적화

멘션 기능이 단일 ListView 또는 작은 사용자 목록에 있을 경우 성능 문제는 미미할 수 있지만, 사용자 목록이 늘어나고 화면에 더 많은 엘리먼트가 추가되면 성능 문제가 발생할 수 있습니다. 성능을 최적화하기 위해 다음과 같은 방법을 고려할 수 있습니다.

  • **페이징**: 서버에서 사용자 데이터를 가져올 때 페이징을 적용하여 한 번에 너무 많은 항목을 가져오지 않도록 하세요.
  • **지연 로딩(Lazy Loading)**: 사용자가 필요한 데이터만 가져올 수 있도록 ListView.builder를 사용하여 스크롤 시 필요한 항목만 로드하도록 처리합니다.
  • **캐싱**: 사용자 데이터가 자주 변경되지 않는 경우 앱 내에 임시로 사용자 데이터를 저장하여 네트워크 호출을 줄이는 것이 좋습니다.

5.2 사용성 개선

멘션 기능이 추가된 TextField의 사용성을 개선하려면 다음 사항을 고려하세요.

  • **텍스트 스타일링**: 멘션된 사용자 이름에 다른 텍스트 스타일링을 적용하여 사용자가 쉽게 구분할 수 있게 합니다.
  • **멘션 기능 표시**: 키보드 액세서리 뷰나 버튼 등을 사용하여 사용자에게 '@'을 입력하여 멘션 기능을 활성화할 수 있다는 것을 알려줍니다.
  • **검색 결과 필터링**: 사용자가 '@'을 입력한 후 글자를 입력하면 목록이 실시간으로 필터링되어 관련된 사용자만 표시되도록 해 검색 과정을 용이하게 합니다.
  • **엔터 키 동작**: 엔터 키를 눌렀을 때 멘션 입력을 완료하고 사용자 목록을 숨기는 로직을 구현하여 키보드에서의 동작을 쉽게 처리하도록 합니다.

위 방법을 통해 구현된 멘션 기능이 포함된 TextField는 성능 최적화 및 사용성 개선을 고려하여 원활한 상호 작용을 제공할 것입니다. 이러한 향상된 사용자 경험은 애플리케이션 사용 및 사용자 확보에 긍정적인 영향을 미치게 됩니다.


0 개의 댓글:

Post a Comment