Flutter Todo 앱, 캘린더 추가하려다 멘붕? 초보자의 기능 욕심 스토리 (feat. Todo Calendar 앱이 된 이유)

2025. 2. 18. 10:10개발 일지 (Develog) - Flutter/할일 캘린더 (Todo-Calendar)

728x90

📌 Flutter Todo List 앱 → Todo Calendar 앱으로 전환 시작

 
이대로 구글 플레이에 배포하려고 했었다. 진심으로.
아무도 사용하지 않아도 상관없다.
 
“나만 쓰면 되지 뭐.”
이런 느낌으로 말이다.
 
하지만...
 
Todo List 앱을 그냥 배포할 수는 없었다.
그래도 누군가 써주길 바라는 진심은 있기 때문이다.
결국 업그레이드를 해야겠다는 생각이 들었다.
 
 
 


📌 구글 플레이 배포? 이대로는 부족하다.

 
잠시 생각해봤다.
 
🤔 "이 앱을 누가 쓸까?"
⚠️ 기능이 특별한 것도 아니고
⚠️ 디자인이 예쁜 것도 아니고
⚠️ 누구나 만들 수 있는 Todo List 앱인데...
 
결국, 사용자가 없을 가능성이 크다. 어쩌지?
 
 
 


📌 새로운 기능 고민 – 그런데 아이디어가 안 떠오른다.

 
기능을 추가하고 싶었다.
하지만 무엇을 넣어야 할지 몰랐다.
 
📌 새로운 기능 후보
✅ 메모 기능?
✅ 태그 추가?
✅ 음성 입력?
 
하지만 뭔가 확 끌리지 않았다.
아이디어를 계속 고민해봤지만 헛수고였다.
 
그렇게 머리를 싸매고 있던 중,
누군가 뜻밖의 아이디어를 던졌다.
 
“할 일 목록에는 캘린더 있는 게 없던데? 그거 한번 만들어봐~”
 
 
 


📌 Todo List → 캘린더 기능 추가? 간단한 줄 알았다.

 
이때까지만 해도…
이게 고난의 시작일 줄은 꿈에도 몰랐다. 😵‍💫
 
"그냥 캘린더 기능만 붙이면 되겠지~"
"아주 간단하겠지~"
 
그렇게 아주 순진한 생각을 하고 있었다.
 
< 메인 이미지 >
 


 
 


📌 Flutter 캘린더? TableCalendar로 쉽게 해결할 수 있을까?

 
“Flutter Todo List에서 캘린더를 추가하려면 어떻게 해야 할까?”
바로 ChatGPT에게 물어봤다.
 
🎯 TableCalendar 패키지 발견!
Flutter 에서 달력을 쉽게 구현할 수 있다고 했다.
"오! 그럼 이거 붙이면 되겠네!"
 
📌 Flutter에서 캘린더 구현하기

  • pubspec.yaml 파일에 의존성 추가:
dependencies:
  table_calendar: ^3.0.6

 
💡여기서 팁 ! 터미널에서 “ flutter pub add table_calendar “ 명령어를 입력하면 최신 패키지를 설치할 수 있다.
 

  • 원하는 위치에 table_calendar 위젯 추가하기 (아래는 기본형)
TableCalendar(
  focusedDay: DateTime.now(),
  firstDay: DateTime(2000, 1, 1),
  lastDay: DateTime(2100, 12, 31),
  calendarFormat: CalendarFormat.month,
)

 
적용 방법도 굉장히 간단하고 쉬웠다.
이때까지만 해도 일이 잘 풀려간다는 생각을 했다.
 
< 캘린더 호출 성공 >
 
 


 


📌 기능 욕심은 끝이 없다 – 당시의 목표 리스트

 
"캘린더만 덜렁 붙이기에는 뭔가 의미가 없잖아?"
 
당연히 할 일 목록과 캘린더를 연결해야 했다.
 
"TableCalendar를 활용해 날짜별 할 일을 표시하는 방법은?"
 
그리고 어떻게 띄워야 할 지도 정해야 했고,
기본형 캘린더에 부가적인 기능을 더 추가해야 했다.
 
“단순히 생각하면 간단한 기능들이네 뭐.”
생각했지만 . . .
 
캘린더 아이콘은 PopupMenuButton 왼쪽에 위치함.
캘린더 아이콘을 클릭하면 메인 화면에 오늘 날짜 기준의 캘린더가 호출됨.
👉 캘린더 UI 추가

Flutter로 To-Do 리스트 앱에 캘린더 기능 추가하기 (TableCalendar 활용) (1)

자, 이번 시간에는 Flutter를 사용해 To-Do 리스트 앱에 캘린더 기능을 추가해봅시다.이번 글에서는 TableCalendar 패키지를 활용해 날짜별로 할 일 목록을 표시하는 방법을 단계적으로 설명하겠습니다

steadybuilder.tistory.com

 
 
캘린더에는 오늘 추가한 할 일의 목록이 짤막하게 나오도록 구성.
캘린더의 특정 일자를 클릭하면 그 날짜의 할 일 목록이 표시됨.
👉 특정 날짜별 할 일 표시

Flutter로 To-Do 리스트 앱에 캘린더 기능 추가하기 (TableCalendar 활용) (2)

저번 시간에는 캘린더 패키지를 이용해서 띄우기까지 성공했습니다.자, 이번 시간에는 Flutter를 사용해 To-Do 리스트 앱에 캘린더 기능을 한층 더 살려봅시다. 할 일 리스트에 날짜 정보 추가하기

steadybuilder.tistory.com

 
 
이렇게까지 구성하는데 시간이 꽤 걸렸다.
역시 처음부터 설계를 잘 해야 했다.
 
 
 


📌 캘린더 기능 추가 – 그런데 할 일이 표시가 안 된다?

 
으악.
적용했지만 깔끔한 캘린더만 덩그러니 떠 있다.
 
😨 "이제 Todo List를 어떻게 캘린더에 넣지?"
😨 "날짜별로 할 일을 보여주려면 어떻게 해야 하지?"
 
막막해졌다.
 
일정 데이터를 캘린더와 연결하는 것부터 고민해야 했다.
그런데 결국 일이 터지고야 말았다.
 
 
 


📌 TableCalendar 할 일 연동? 동기화 문제로 멘붕 왔다.

 
점점 동기화 문제가 생기기 시작했다.
😱 "Flutter에서 할 일 목록과 캘린더를 동기화할 때 발생하는 문제 해결 방법은?"
 
⚠️ ChatGPT에게 질문했을 때 발생한 문제
❌ ChatGPT는 특정 코드 조각만 수정해줄 뿐, 전체 프로젝트의 흐름을 보면서 수정해주지는 못했다.
❌ 기존 기능이 포함된 코드가 삭제되거나 반영되지 않았다.
❌ 부분 코드만 수정하면서 버그가 발생하기 시작했다.
❌ 기존 코드까지 고려해서 자동으로 수정될 거라 생각했지만… 현실은 기존 기능이 삭제되거나 엉망진창이 됐다.
 
단순히 구글링 + ChatGPT 의 코드를 짜깁기 하는 방식으로는 해결이 어려웠다.
뭔가 더 생각을 해야했다. 하다보면 되겠지 뭐. 이렇게도 해보고 저렇게도 해보고 . . .
 
결국 실패다. 읔.
 
 
 


📌 결국 결단을 내리다.

 
캘린더 기능을 추가하려면
전체 구조를 다시 손봐야 한다는 결론이 나왔다.
 
결국, 코드 전체 구조를 뜯어고치는 결정을 내렸다.
과연 Todo Calendar 기능을 온전히 구현할 수 있을까?
 
 
 
 

728x90