# 적자 탈출 가계부 - UI 와이어프레임 (추가 화면) ## 1. 예산 설정 화면 ``` +----------------------------------+ | [뒤로] 카드 한도 설정 | +----------------------------------+ | | | +----------------------------+ | | | 카드 선택 | | | | [신한카드 ▼] | | | +----------------------------+ | | | | +----------------------------+ | | | 월간 한도 설정 | | | | | | | | [슬라이더] | | | | 2,000,000원 | | | | | | | | 권장 한도: 1,800,000원 | | | | (월 소득의 40%) | | | +----------------------------+ | | | | +----------------------------+ | | | 카테고리별 한도 설정 | | | | | | | | [식비] | | | | [슬라이더] 600,000원 | | | | (전체 한도의 30%) | | | | | | | | [쇼핑] | | | | [슬라이더] 400,000원 | | | | (전체 한도의 20%) | | | | | | | | [교통] | | | | [슬라이더] 200,000원 | | | | (전체 한도의 10%) | | | | | | | | [여가/문화] | | | | [슬라이더] 300,000원 | | | | (전체 한도의 15%) | | | | | | | | [기타] | | | | [슬라이더] 500,000원 | | | | (전체 한도의 25%) | | | | | | | | [+ 카테고리 추가] | | | +----------------------------+ | | | | +----------------------------+ | | | 알림 설정 | | | | | | | | [✓] 한도 70% 도달 시 알림 | | | | [✓] 한도 90% 도달 시 알림 | | | | [✓] 결제일 3일 전 알림 | | | +----------------------------+ | | | | [초기화] [저장하기] | | | +----------------------------------+ | [홈] [내역] [+] [분석] [설정] | +----------------------------------+ ``` ## 2. 분석 화면 ``` +----------------------------------+ | [메뉴] 분석 [공유] | +----------------------------------+ | | | +----------------------------+ | | | 기간 선택 | | | | [이번 달 ▼] | | | +----------------------------+ | | | | +----------------------------+ | | | 카테고리별 지출 | | | | | | | | [파이 차트] | | | | | | | | 식비: 30% (600,000원) | | | | 쇼핑: 20% (400,000원) | | | | 교통: 10% (200,000원) | | | | 여가: 15% (300,000원) | | | | 기타: 25% (500,000원) | | | +----------------------------+ | | | | +----------------------------+ | | | 월별 지출 추이 | | | | | | | | [막대 그래프] | | | | 12월 1.5백만원 | | | | 1월 1.8백만원 | | | | 2월 1.4백만원 | | | +----------------------------+ | | | | +----------------------------+ | | | 요일별 지출 패턴 | | | | | | | | [선 그래프] | | | | 월 화 수 목 금 토 일 | | | +----------------------------+ | | | | +----------------------------+ | | | 지출 인사이트 | | | | | | | | • 이번 달 식비는 전월 대비 | | | | 15% 감소했습니다 | | | | | | | | • 주말 지출이 평일보다 | | | | 30% 높습니다 | | | | | | | | • 카페에서의 지출이 월 | | | | 45,000원으로 높은 편입니다| | | | | | | | [더 보기 >] | | | +----------------------------+ | | | +----------------------------------+ | [홈] [내역] [+] [분석] [설정] | +----------------------------------+ ``` ## 3. 설정 화면 ``` +----------------------------------+ | [뒤로] 설정 | +----------------------------------+ | | | +----------------------------+ | | | 프로필 관리 | | | | | | | | [프로필 이미지] | | | | 홍길동 | | | | example@email.com | | | | | | | | [프로필 편집 >] | | | +----------------------------+ | | | | +----------------------------+ | | | 카드 관리 | | | | | | | | [카드 목록 >] | | | | [카드 추가 >] | | | +----------------------------+ | | | | +----------------------------+ | | | 알림 설정 | | | | | | | | [✓] 한도 알림 | | | | [✓] 결제일 알림 | | | | [✓] 지출 분석 알림 | | | | [✓] 푸시 알림 | | | | [ ] 이메일 알림 | | | +----------------------------+ | | | | +----------------------------+ | | | 앱 설정 | | | | | | | | 테마 | | | | [라이트 ⊙] [다크 ○] | | | | | | | | 시작 화면 | | | | [대시보드 ▼] | | | | | | | | 언어 | | | | [한국어 ▼] | | | +----------------------------+ | | | | +----------------------------+ | | | 데이터 관리 | | | | | | | | [데이터 백업 >] | | | | [데이터 복원 >] | | | | [데이터 초기화 >] | | | +----------------------------+ | | | | +----------------------------+ | | | 앱 정보 | | | | | | | | 버전: 1.0.0 | | | | [이용약관 >] | | | | [개인정보처리방침 >] | | | | [오픈소스 라이선스 >] | | | +----------------------------+ | | | | [로그아웃] | | | +----------------------------------+ | [홈] [내역] [+] [분석] [설정] | +----------------------------------+ ``` ## 4. 카드 관리 화면 ``` +----------------------------------+ | [뒤로] 카드 관리 | +----------------------------------+ | | | +----------------------------+ | | | 신한카드 | | | | | | | | [카드 이미지] | | | | **** **** **** 1234 | | | | 월 한도: 2,000,000원 | | | | 결제일: 매월 1일 | | | | | | | | [편집] [삭제] | | | +----------------------------+ | | | | +----------------------------+ | | | 현대카드 | | | | | | | | [카드 이미지] | | | | **** **** **** 5678 | | | | 월 한도: 1,500,000원 | | | | 결제일: 매월 15일 | | | | | | | | [편집] [삭제] | | | +----------------------------+ | | | | +----------------------------+ | | | 국민카드 | | | | | | | | [카드 이미지] | | | | **** **** **** 9012 | | | | 월 한도: 1,000,000원 | | | | 결제일: 매월 25일 | | | | | | | | [편집] [삭제] | | | +----------------------------+ | | | | [+ 카드 추가하기] | | | +----------------------------------+ | [홈] [내역] [+] [분석] [설정] | +----------------------------------+ ``` ## 5. 카드 추가 화면 ``` +----------------------------------+ | [뒤로] 카드 추가 | +----------------------------------+ | | | +----------------------------+ | | | 카드 정보 입력 | | | | | | | | 카드 이름 | | | | [신한카드] | | | | | | | | 카드 종류 | | | | [신용카드 ▼] | | | | | | | | 카드 번호 (선택사항) | | | | [**** **** **** 1234] | | | | | | | | 카드사 | | | | [신한카드 ▼] | | | | | | | | 카드 색상 | | | | [색상 선택기] | | | +----------------------------+ | | | | +----------------------------+ | | | 결제 정보 설정 | | | | | | | | 월간 한도 | | | | [2,000,000원] | | | | | | | | 결제일 | | | | [매월 1일 ▼] | | | +----------------------------+ | | | | [취소] [저장하기] | | | +----------------------------------+ ``` ## 화면 간 이동 흐름도 ``` +----------------+ +----------------+ +----------------+ | 로그인/회원가입 |---->| 메인 대시보드 |<--->| 지출 목록 | +----------------+ +----------------+ +----------------+ ^ ^ ^ | | | v v v +----------------+ +----------------+ +----------------+ | 카드 관리 |<--->| 설정 화면 | | 지출 입력 | +----------------+ +----------------+ +----------------+ ^ ^ ^ | | | v v v +----------------+ +----------------+ +----------------+ | 카드 추가 | | 프로필 관리 | | 필터/검색 | +----------------+ +----------------+ +----------------+ ^ | v +----------------+ +----------------+ +----------------+ | 카테고리 관리 |<--->| 분석 화면 |<--->| 예산 설정 | +----------------+ +----------------+ +----------------+ ``` ## 주요 사용자 흐름 ### 1. 신규 사용자 온보딩 흐름 ``` 로그인/회원가입 → 기본 정보 입력 → 카드 추가 → 월간 한도 설정 → 메인 대시보드 ``` ### 2. 지출 기록 흐름 ``` 메인 대시보드 → [+] 버튼 → 지출 입력 → 저장 → 메인 대시보드 (업데이트된 정보) ``` ### 3. 지출 분석 흐름 ``` 메인 대시보드 → 분석 탭 → 기간 선택 → 카테고리별/월별/요일별 분석 확인 ``` ### 4. 한도 관리 흐름 ``` 메인 대시보드 → 설정 탭 → 카드 관리 → 카드 선택 → 한도 설정 → 저장 → 메인 대시보드 ``` ### 5. 지출 내역 검색 흐름 ``` 메인 대시보드 → 내역 탭 → 검색 아이콘 → 검색어 입력/필터 적용 → 검색 결과 확인 ``` ## 모바일 반응형 고려사항 1. **화면 크기 최적화** - 다양한 모바일 화면 크기에 맞게 UI 요소 조정 - 작은 화면에서는 중요 정보 우선 표시 2. **터치 인터랙션** - 모든 터치 영역은 최소 44x44dp 크기 유지 - 스와이프, 핀치 줌 등 모바일 제스처 지원 3. **키보드 입력 최적화** - 숫자 입력 시 숫자 키패드 자동 표시 - 입력 필드 포커스 시 자동 스크롤 조정 4. **오프라인 사용성** - 네트워크 연결 없이도 기본 기능 사용 가능 - 데이터 동기화는 네트워크 연결 시 자동 수행