[Flutter 9기 창업반] 앱 개발 창업 부트캠프 28일차

🛠️ TIL – 약 등록 & 홈 카드 UI 흐름 정리

1. 약 등록 플로우 구조 정리

• 약 등록 플로우를 단계별 화면로 명확히 나눔
  • 복용 기간 (meds_duration)
  • 복용 시간/횟수 (meds_schedule)
  • 알람 설정 (alarm_setting)
  • 처방 사유 입력 (meds_reason)
• 각 화면은 실제 데이터 연결 전, UI/플로우 먼저 완성하는 방향으로 진행

 

 

2. 복용 스케줄 화면 개선

• 하루 복용 시간(아침/점심/저녁/취침 전) 다중 선택 UI 구현
• 다음 버튼 클릭 시
  • 알람 설정 여부를 묻는 팝업 노출
• 팝업 내부 여백(contentPadding)을 조절해
  → 팝업 크기는 padding 값이 커질수록 커진다는 것 명확히 이해

 

3. 알람 설정 페이지 구현

• 선택한 복용 시간(아침/저녁 등)을 기반으로 한 알람 설정 UI 구성
• 시간 선택은 showTimePicker 사용
• 실제 알람 로직은 나중에 연결하기로 하고
  • 현재는 UI + 상태 변경 흐름만 구현
• 이후 구조 확장을 고려해
  • _AlarmItem, _AlarmRow 등 내부 전용 클래스 분리
  • “언더스코어 = 내부 전용” 개념 다시 정리

 

4. 처방 사유 입력 화면 구현

• 직접 입력(TextField) + 태그 선택(Grid) 병행 UI 구현
• 입력값/선택값 중 하나라도 있으면 저장 가능하도록 조건 처리
• SnackBar 제거
  • 실제 에러 안내보다, 플로우 완성에 집중하기로 결정
• 저장 버튼 클릭 시
  • 홈으로 이동하도록 연결
  • 스택 상태가 애매해질 수 있어 pushAndRemoveUntil 개념 정리

 

 

5. 홈 구조 & 카드 UI 방향 결정

• 기존 홈(HomePage)은 그대로 유지
• 카드 UI 전용 임시 홈 페이지(HomeMedsCardPreviewPage) 생성
  • 실제 데이터 연결 전, 카드 디자인 실험용
• “카드가 있을 때만 홈이 바뀌는 문제”를 피하기 위한 선택

 

 

6. 약 카드 UI 1차 구현

• 카드 구조 정리
  • 배경: 사용자가 촬영/선택한 이미지
  • 그 위에 색상 오버레이(불투명도 약 80%)
    → 약 타입(처방약/한약/영양제 등)별로 색상 구분
  • 상단: 약 타입 라벨 + 복용 스케줄 요약
  • 중앙: 처방 사유(태그/텍스트)
  • 하단: 복용 종료일까지 남은 일수
• 알람 관련 UI(복용 완료 체크, 남은 시간 등)는
  • 카드에서 전부 제거하기로 결정
  • 알람/복용 체크는 별도 페이지로 분리하는 방향이 더 낫다고 판단

 

7. 설계 방향에 대한 중요한 결정

• 카드 UI에 모든 기능을 넣는 것은 복잡도가 너무 높음
• 알람 체크는:
  • 전용 “복용 체크 페이지”를 따로 두고
  • 하단 네비게이션에 뱃지(미복용 개수 표시)로 연결하는 방향이 더 자연스럽다고 판단
• 지금 단계에서는:
  • 카드는 정보 요약 + 상태 표시 역할만
  • 인터랙션 최소화

 

 

오늘의 핵심 배운 점

• UI는 기능보다 먼저 분리 설계하는 게 훨씬 덜 고통스럽다
• 카드 하나에 모든 기능을 넣으려 하면 망한다
• 간단한게 최고다