메모 태그 분류 — 주제별로 필터링하는 법

메모가 많아질수록 필요한 메모를 찾는 건 점점 어려워진다.
이럴 때 태그 분류는 사용자가 메모를 주제별로 정리하고, 쉽게 찾아볼 수 있도록 돕는다.

이번 글에서는 Flutter 메모 앱에 태그 입력, 저장, 필터링 기능을 도입해보자.

---

🏷️ 메모에 태그 필드 추가하기

모델에 tags라는 문자열 필드를 추가하자. 간단하게 콤마(,)로 구분된 태그로 구성한다.

class Memo {
  final int? id;
  final String content;
  final String tags;

  Memo({this.id, required this.content, this.tags = ""});

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'content': content,
      'tags': tags,
    };
  }

  factory Memo.fromMap(Map<String, dynamic> map) {
    return Memo(
      id: map['id'],
      content: map['content'],
      tags: map['tags'],
    );
  }
}

---

🗃️ DB 테이블 수정

CREATE TABLE memos (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  content TEXT,
  tags TEXT
)

기존 DB에서 테이블을 마이그레이션 하거나, 초기 개발 중이라면 새로 생성해도 된다.

---

📝 메모 작성 시 태그 입력

TextEditingController _tagController = TextEditingController();

TextField(
  controller: _tagController,
  decoration: InputDecoration(
    labelText: '태그 (쉼표로 구분)',
    hintText: '예: 일기, 업무, 공부',
  ),
)

이렇게 입력된 태그는 문자열 그대로 저장하고, 나중에 split하여 리스트로 활용할 수 있다.

---

🔍 태그별 메모 필터링

특정 태그를 기준으로 메모를 필터링하려면 SQL 쿼리에서 LIKE 연산을 사용할 수 있다.

Future<List<Memo>> fetchMemosByTag(String tag) async {
  final db = await MemoDatabase.database;
  final result = await db.query(
    'memos',
    where: 'tags LIKE ?',
    whereArgs: ['%$tag%'],
  );
  return result.map((e) => Memo.fromMap(e)).toList();
}

단순한 문자열 검색이므로 “공부” 태그만 필터링해도 “공부,일기”에 포함된 메모가 함께 나온다.

---

📱 태그 선택 UI 구성

final List<String> tagOptions = ['일기', '업무', '공부', '개인', '기타'];

Wrap(
  spacing: 8,
  children: tagOptions.map((tag) {
    return ChoiceChip(
      label: Text(tag),
      selected: selectedTag == tag,
      onSelected: (selected) {
        setState(() {
          selectedTag = selected ? tag : null;
          _loadFilteredMemos();
        });
      },
    );
  }).toList(),
)

ChoiceChip을 사용하면 감성적이고 직관적인 태그 UI를 만들 수 있다.

---

💡 UX 개선 팁

• 태그 입력은 자동완성(autocomplete) 형태로 개선 가능
• 태그 컬러를 랜덤 또는 지정해서 시각적으로 구분
• 중복 태그 입력 방지 로직도 고려

---

🧘 마무리하며

기록한 메모가 많아지는 건 좋은 일이다.
하지만 그 메모를 잘 찾지 못한다면, 기록은 흘러가는 텍스트일 뿐이다.

태그는 기억을 붙잡는 작은 고리다.
Flutter 메모 앱에 이 작은 고리를 걸어보자.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 메모 앱 만들기 여정입니다.