상황 인지
이번 프로젝트는 Flutter를 활용한 간단한 투두 리스트 앱을 만드는 과제였다.
처음에는 구조를 이해하는 데 시간을 많이 썼고, 특히 “정적인 화면(UI)”을 구성하는 건 비교적 수월했다.
테마 지정도 미리 정해둔 컬러 코드와 버튼 스타일을 기반으로 만들어놔서 light/dark 테마 전환까지는 크게 문제없이 진행됐다.
홈페이지(HomePage) 화면 구성도 처음엔 단일 파일에 다 몰아 넣었는데, 이후 유지보수를 위해 위젯들을 따로 분리하면서 훨씬 구조가 명확해졌다.
특히 TodoBox, TodoView, TodoBottomSheet처럼 각각의 역할을 나눠 구성하니 전반적인 화면 출력은 잘 나왔다.
그런데 문제는 그 다음이었다.
정적인 화면에서 벗어나서 동적으로 변하는 기능들(추가, 토글, 저장)을 넣으려는 순간부터
에러가 자주 터졌고, 바텀 시트 부분에서는 특히 상태 관리와 입력 처리에서 많이 막혔다.
고민
처음엔 위젯을 전부 StatelessWidget으로만 구성했는데,
투두 입력 후 리스트를 갱신하거나 즐겨찾기 버튼을 눌렀을 때 화면이 즉시 반영되지 않았다.
그래서 이게 왜 그런가 찾아보니, Flutter에서는 데이터가 변할 때마다 setState()로 rebuild를 해줘야 한다는 걸 알게 됐다.
또한 BottomSheet에서 입력한 내용을 상위(HomePage)로 전달하는 구조도 이해가 잘 안 됐다.
Navigator.pop(context, todo)로 데이터를 반환하고 await showModalBottomSheet()로 받는 구조가 생소해서,
처음엔 데이터를 어디서 관리해야 할지 감이 안 잡혔다.
마지막으로 가장 큰 문제는 한글 입력 깨짐 이슈였다.
입력창에 “동물”을 치면 “ㄷㅗㅇㅁㅜㄹ”처럼 글자가 분리되어 입력됐다.
처음에는 키보드 문제나 에뮬레이터 문제인 줄 알았지만,
확인해보니 TextEditingController를 build() 안에서 계속 새로 만들어서 생기는 문제였다.
적용
이 문제들을 하나씩 해결하기 위해 우선 화면 구조부터 다시 정리했다.
- HomePage는 StatefulWidget으로 바꾸어 todos 리스트를 상태로 관리하도록 했다.
- 리스트를 그리는 부분(TodoView)은 그대로 StatelessWidget으로 유지하되, 콜백 함수(onUpdate, onToggleFavorite 등)를 통해 상위로 이벤트를 전달하게 구성했다.
- 이렇게 하니까 상태의 흐름이 “HomePage → TodoView → TodoDetailPage”로 단방향으로 명확해졌다.
입력 깨짐 문제는 조금 더 어려웠다.
Flutter의 조합형 입력 구조를 알게 되었고,
TodoTitleField와 TodoDescriptionField 안에 있던 TextEditingController를 StatefulWidget으로 바꾸어
initState()에서 한 번만 생성하도록 변경했다.
이후 dispose()에서 해제해주어 메모리 누수도 방지했다.
그 결과 한글 입력이 정상적으로 작동했고, 커서 이동도 안정적이었다.
또, 바텀 시트가 키보드에 가려지는 현상이 있었는데
bottom: MediaQuery.of(context).viewInsets.bottom를 통해 하단 여백을 자동으로 조정해
입력창이 항상 보이도록 처리했다.
결과
이전에는 앱이 데이터 변경 시 갱신되지 않거나 입력이 깨졌는데,
지금은 할 일 추가, 수정, 즐겨찾기, 완료 토글, 상세 페이지 반영까지 모두 정상적으로 작동한다.
특히 한글 입력 문제를 해결하면서 Flutter의 빌드 구조와 상태 관리에 대해 확실히 이해하게 됐다.
또한 위젯을 세분화하면서, 한 파일에 모든 코드를 몰아넣기보다
기능별로 분리해서 관리하는 방식의 효율성을 체감했다.
나중에 UI를 수정하거나 기능을 추가할 때도 훨씬 명확하게 위치를 파악할 수 있었다.
내가 배운 점
- Stateless와 Stateful의 차이를 어느정도 이해했다
- TextEditingController는 생명주기 관리가 중요하다.
- Navigator.pop()과 데이터 반환 구조를 조금 알았다.
- UI 구조화의 중요성.
마무리
이번 과제를 하면서 가장 크게 느낀 점은
“Flutter는 결국 상태(State)를 어떻게 관리하느냐에 따라 완성도가 달라진다”였다.
테마나 UI 구성은 익숙해지면 금방 하지만,
그 위에 올라가는 동적인 부분들을 제대로 이해하지 못하면 앱은 금방 깨지거나 버그가 생긴다.
특히 한글 입력 문제처럼 처음엔 사소해보여도,
내부 구조를 이해하지 않으면 절대 해결이 안 되는 부분들이 있었다.
그걸 직접 겪고 해결하면서 “Flutter는 결국 논리적인 흐름을 정확히 이해해야 하는 언어”라는 걸 느꼈다.