사용자 맞춤 컬러 태그 시스템 구현

캘린더에 일정이 많아질수록, 구분과 시각적 구별이 중요해진다.
이럴 때 컬러 태그를 사용하면 일정 유형을 한눈에 파악할 수 있다.

이번 글에서는 Flutter에서 사용자 맞춤형 태그 시스템을 설계하고, 각 태그에 컬러를 부여해 시각적으로 구분하는 기능을 구현해본다.

---

🏷️ 태그 데이터 구조 설계

이벤트마다 태그와 색상을 함께 저장할 수 있도록 모델을 수정한다.

class Event {
  final String title;
  final String tag;
  final Color tagColor;

  Event({
    required this.title,
    required this.tag,
    required this.tagColor,
  });
}

컬러는 Color 객체로 관리하거나, Hex 코드로 DB에 저장할 수도 있다.

---

🎨 태그 선택 UI 만들기

✅ 태그 입력 + 색상 선택

TextEditingController _tagController = TextEditingController();
Color _selectedColor = Colors.blue;

Row(
  children: [
    Expanded(
      child: TextField(
        controller: _tagController,
        decoration: InputDecoration(labelText: '태그 입력'),
      ),
    ),
    GestureDetector(
      onTap: _pickColor,
      child: Container(
        width: 30,
        height: 30,
        decoration: BoxDecoration(
          color: _selectedColor,
          shape: BoxShape.circle,
        ),
      ),
    ),
  ],
)

색상 선택은 flutter_colorpicker 패키지를 활용해 컬러 피커 다이얼로그를 띄우면 UX가 좋다.

---

📅 달력에 컬러 태그 표시하기

calendarBuilders: CalendarBuilders(
  markerBuilder: (context, date, events) {
    final color = events.isNotEmpty ? events.first.tagColor : null;

    return color != null
      ? Container(
          width: 6,
          height: 6,
          margin: EdgeInsets.only(top: 2),
          decoration: BoxDecoration(
            color: color,
            shape: BoxShape.circle,
          ),
        )
      : SizedBox.shrink();
  },
),

이벤트마다 다른 색상으로 마커를 표시해 한눈에 일정 카테고리를 구분할 수 있게 된다.

---

📖 태그 목록 관리

• 태그는 중복 없이 저장 (Set으로 관리)
• 사용자가 직접 태그 이름과 색상 지정 가능
• 기본 태그(업무, 개인, 운동 등) 몇 개는 미리 제공

UI에서 ChoiceChip으로 선택 가능한 태그 리스트를 제공하면 UX가 훌륭하다.

---

🧘 마무리하며

일정을 구분 짓는 건 단순한 기능이 아니라 기억을 구조화하는 방식이다.
Flutter 캘린더 앱에 컬러 태그 기능을 더하면, 더 직관적이고 아름다운 일정 관리가 가능해진다.

색으로 기억하는 캘린더, 지금 시작해보자.

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