13 KiB
13 KiB
적자 탈출 가계부 - 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. 지출 내역 검색 흐름
메인 대시보드 → 내역 탭 → 검색 아이콘 → 검색어 입력/필터 적용 → 검색 결과 확인
모바일 반응형 고려사항
-
화면 크기 최적화
- 다양한 모바일 화면 크기에 맞게 UI 요소 조정
- 작은 화면에서는 중요 정보 우선 표시
-
터치 인터랙션
- 모든 터치 영역은 최소 44x44dp 크기 유지
- 스와이프, 핀치 줌 등 모바일 제스처 지원
-
키보드 입력 최적화
- 숫자 입력 시 숫자 키패드 자동 표시
- 입력 필드 포커스 시 자동 스크롤 조정
-
오프라인 사용성
- 네트워크 연결 없이도 기본 기능 사용 가능
- 데이터 동기화는 네트워크 연결 시 자동 수행