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

앱 전반 UI 구조화 및 핵심 기능 구현

로그인부터 메인 기능까지 앱의 전반적인 골격 완성 + UI 고도화

 

1. 인증 및 온보딩 (Authentication & Onboarding)

🔑 로그인 페이지 (LoginPage)

• 영문 입력 최적화: 이메일 입력 시 한국어 키보드가 뜨는 불편함을 해소하기 위해 
  keyboardType: TextInputType.visiblePassword와 autocorrect: false를 적용하여
  영문 키패드가 기본으로 뜨도록 설정
• 간편 로그인: 구글과 애플 간편 로그인 버튼을 만들어, 번거롭게 이메일 주소를 치지 않아도
  쉽게 로그인 할 수 있도록 구성
  
  

🚻 성별 설정 페이지 (ProfileGenderPage)

• 직관적인 UI: 텍스트 선택 대신, 파란색(남성), 빨간색(여성) 배경의 큰 카드형 버튼을 구현
• 인터랙션: InkWell을 사용하여 탭 반응을 추가하고,
  선택 시 다음 단계(생년월일)로 자연스럽게 넘어가도록 구현했습니다.
  
  

2. 네비게이션 및 홈 (App Structure)

🧭 하단 네비게이션 (AppBottomNavigation)

• 4탭 구조 완성: 홈 - 캘린더 - 복용체크 - 가족관리의 4단 구조로 개편
• 아이콘 변경: 복용체크 탭의 아이콘을 초반 말풍선(Push)에서
  종 모양(Alert)으로 변경하여 "알림/체크"의 의미를 강조했습니다.
• 뱃지(Badge) 연동: 아직 복용하지 않은 약의 개수를 네비게이션 바에 실시간으로 표시함

📅 캘린더 페이지 (CalendarPage)

• 기본 프레임워크: table_calendar 패키지를 도입하여 캘린더의 기본 틀을 잡았습니다.
• 가독성 튜닝: 모바일 환경에 맞춰 날짜와 요일 칸의 높이를 키우고,
  폰트 사이즈를 20pt 이상으로 설정하여 어르신들도 쉽게 볼 수 있도록 가독성 확보
• 인터랙션: 날짜 선택 시 해당 날짜의 복용 정보를 조회할 준비를 마쳤습니다 (현재 선택된 날짜 State 관리)
  
  
  

3. 복용 체크 페이지 (IntakeCheckPage) - Top Feature

가장 많은 로직과 UI 인터랙션이 들어간 핵심 페이지

✨ 주요 기능

• 시간대별 그룹핑: 아침/점심/저녁 타임라인으로 약 목록을 카드 형태로 시각화
• 실시간 카운트다운: 복용 시간 5분 전부터 타이머가 작동
• 날짜 선택 (Date Selector):
  • 미래 지향적 UX: 오늘을 기준으로 미래 날짜들을 가로 스크롤로 조회할 수 있습니다.
  • 과거 조회: 오늘 바로 이전의 날짜들도 "회색조" 처리하여 이력을 볼 수 있도록 개선했습니다.
  • Mock 조회: 날짜를 바꿀 때마다 과거(완료), 오늘(진행중), 미래(예정)의 상태가 시뮬레이션됩니다.

• 알람 시간 수정: 카드 헤더를 탭하여 TimePicker로 알람 시간을 즉시 조정(유동적인 스케줄 대응)
• 보호자 기능 (Guardian): 약을 놓쳤거나 늦었을 때 보호자가 "복용 푸시 메세지"를 보낼 수 있는
  버튼 UI를 상황별(Active/Missed)로 다르게 처리했습니다.
  
  
  

4. 가족 관리 페이지 (PeoplePage)

단순 목록을 넘어 "관리"가 가능한 기능을 도입했습니다.

✨ 주요 기능

• 상태 아이콘: 텍스트 대신 아이콘으로 상태를 직관적으로 표현했습니다.
  아이콘이 떠 있는 경우 사용자 클릭 시 복용 푸시 메세지를 보낼 수 있는 팝업창이 뜹니다.
  • ⚠️ (Warning): 약을 2시간 이상 놓친 누락 상태 / 다음 약 시간에 꼭 먹어야 함
  중복 복용 방지를 위해 비활성화 된 알람이 있다는 표시.
  • 🔔 (Bell): 복용 시간이 지났음에도 아직 먹지 않은 알림이 있는 상태. 복용 시간 2시간 이후 까지는 활성화됨
• 스와이프 액션 (Slidable): 리스트를 옆으로 밀어 고정(Pin)하거나 삭제하는 제스처 UX를 구현
• 스마트 정렬: 고정된 사용자 -> 약을 놓친 사용자(급함) -> 일반 사용자 순으로 자동 정렬되어,
  보호자가 누구를 먼저 챙겨야 할지 한눈에 알 수 있습니다.
  
  
  

📝 Learned & Reflection

• 캘린더의 날짜 크기나 입력창의 키보드 타입 등 사소해 보이지만
  실제 사용성(특히 어르신 타겟)에 큰 영향을 주는 디테일들을 챙겼습니다.
• 백엔드 없이도 Frontend 레벨에서 정교한 Mock 로직(날짜별 상태 반환, 버튼 활성/비활성)을 구현함으로써,
  기획 의도를 완벽하게 시연해볼 수 있었습니다.
• 복잡한 복용 체크 페이지를 Header와 Card 위젯으로 분리하고,
  내부 상태(Timer, TimePicker)를 캡슐화하여 유지보수성을 높였습니다.