[Flutter] 일정 관리 앱 UI 설계 과정 - 네모진 투두

Ⅰ UI 설계를 시작하며

‘네모진 투두’ 앱의 UI는 단순히 일정을 나열하는 것을 넘어, 사용자가 더 직관적으로 일정을 관리할 수 있도록 구성하는 데 중점을 두었습니다.

특히 일정 생성부터 완료까지의 흐름이 자연스럽게 이어지도록 흰색 카드 디자인을 공통적으로 적용했으며, 일정 생성 화면에서는 최소한의 동작만으로 일정을 빠르게 등록할 수 있도록 설계했습니다.

 

Ⅱ 메인 화면 설계

상단바

• 일주일 간격의 날짜 선택 버튼으로 일정을 확인할 날짜를 선택
• 선택한 날짜의 일정 진행도를 표시

일정 목록

• 해당 날짜에 해당하는 모든 일정을 출력
• 시간이 빠른 순서대로 정렬하되, 시간을 설정하지 않은 일정을 최우선 출력
• 체크 박스를 통해 일정 완료 체크
• 세부 항목을 모두 완료하면, 해당 일정도 자동 완료 처리

 

Ⅲ 일정 생성 화면 설계

새 일정

• 일정을 생성할 날짜와 시간 선택
• 일정 제목 입력

세부 항목

• 해당 일정에 등록할 일정 세부 사항 입력

색상 선택

• 일정이 출력될 때 사용할 색상 선택

반복 설정

• 일정을 반복하고 싶은 경우 반복할 옵션을 선택
• 빠르게 반복 일정을 생성하기 위한 매일, 일주일, 한달 버튼
• 복수 요일 / 일자 지정을 위한 반복 기능 제공