11 KiB
11 KiB
적자 탈출 가계부 - UI 와이어프레임 (핵심 화면)
1. 로그인/회원가입 화면
+----------------------------------+
| |
| [로고 이미지] |
| |
| 적자 탈출 가계부 |
| |
+----------------------------------+
| |
| +----------------------------+ |
| | 이메일 주소 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 로그인 | |
| +----------------------------+ |
| |
| 비밀번호를 잊으셨나요? [찾기] |
| |
| --------- 또는 --------- |
| |
| +----------------------------+ |
| | 소셜 로그인 버튼 | |
| +----------------------------+ |
| |
| 계정이 없으신가요? [회원가입] |
| |
+----------------------------------+
+----------------------------------+
| |
| 회원가입 화면 |
| |
+----------------------------------+
| |
| +----------------------------+ |
| | 이름 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 이메일 주소 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 입력 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 비밀번호 확인 입력 | |
| +----------------------------+ |
| |
| [ ] 이용약관에 동의합니다 |
| [ ] 개인정보 처리방침에 동의합니다 |
| |
| +----------------------------+ |
| | 회원가입 | |
| +----------------------------+ |
| |
| 이미 계정이 있으신가요? [로그인] |
| |
+----------------------------------+
2. 메인 대시보드 화면
+----------------------------------+
| [메뉴] 대시보드 [알림] |
+----------------------------------+
| |
| 안녕하세요, [사용자 이름]님! |
| |
| +----------------------------+ |
| | 이번 달 카드 사용 | |
| | | |
| | [진행 바: 70% 사용] | |
| | | |
| | 1,400,000원 / 2,000,000원 | |
| | 남은 한도: 600,000원 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 카테고리별 지출 현황 | |
| | | |
| | [파이 차트] | |
| | | |
| | 식비: 30% | |
| | 쇼핑: 25% | |
| | 교통: 15% | |
| | 기타: 30% | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 최근 지출 내역 | |
| | | |
| | [아이콘] 스타벅스 | |
| | 2월 27일 · 5,800원 | |
| | | |
| | [아이콘] 마트 | |
| | 2월 26일 · 32,500원 | |
| | | |
| | [아이콘] 택시 | |
| | 2월 25일 · 15,000원 | |
| | | |
| | [더 보기 >] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 다가오는 결제일 | |
| | | |
| | 신한카드: 3일 후 | |
| | 예상 청구액: 1,400,000원 | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [내역] [+] [분석] [설정] |
+----------------------------------+
3. 지출 입력 화면
+----------------------------------+
| [뒤로] 지출 입력 [저장] |
+----------------------------------+
| |
| +----------------------------+ |
| | 금액 입력 | |
| | 15,000 원 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 카테고리 선택 | |
| | [식비 ▼] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 카드 선택 | |
| | [신한카드 ▼] | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 가맹점 입력 | |
| | 식당 이름 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 날짜 선택 | |
| | 2025년 2월 27일 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 메모 입력 | |
| | (선택사항) | |
| +----------------------------+ |
| |
| [카메라] 영수증 사진 촬영 |
| |
| +----------------------------+ |
| | 자주 쓰는 내역 | |
| | | |
| | [식비] 점심 - 8,000원 | |
| | [교통] 택시 - 15,000원 | |
| | [카페] 커피 - 5,500원 | |
| +----------------------------+ |
| |
+----------------------------------+
| [홈] [내역] [+] [분석] [설정] |
+----------------------------------+
4. 지출 목록 화면
+----------------------------------+
| [메뉴] 지출 내역 [검색] |
+----------------------------------+
| |
| +----------------------------+ |
| | 기간 선택 | |
| | [이번 달 ▼] [필터 적용] | |
| +----------------------------+ |
| |
| 총 지출: 1,400,000원 |
| |
| 2025년 2월 |
| +----------------------------+ |
| | 27일 목요일 | |
| | | |
| | [아이콘] 스타벅스 | |
| | 카페/음료 · 신한카드 | |
| | 5,800원 | |
| | | |
| | [아이콘] 식당 | |
| | 식비 · 신한카드 | |
| | 15,000원 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 26일 수요일 | |
| | | |
| | [아이콘] 마트 | |
| | 식료품 · 신한카드 | |
| | 32,500원 | |
| | | |
| | [아이콘] 편의점 | |
| | 식료품 · 현대카드 | |
| | 8,500원 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 25일 화요일 | |
| | | |
| | [아이콘] 택시 | |
| | 교통 · 신한카드 | |
| | 15,000원 | |
| | | |
| | [아이콘] 온라인 쇼핑 | |
| | 쇼핑 · 현대카드 | |
| | 45,000원 | |
| +----------------------------+ |
| |
| [더 불러오기] |
| |
+----------------------------------+
| [홈] [내역] [+] [분석] [설정] |
+----------------------------------+
5. 필터 및 검색 화면
+----------------------------------+
| [뒤로] 필터 적용 |
+----------------------------------+
| |
| +----------------------------+ |
| | 기간 선택 | |
| | | |
| | [시작일] ~ [종료일] | |
| | 2025.02.01 ~ 2025.02.28 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 카드 선택 | |
| | | |
| | [✓] 전체 | |
| | [✓] 신한카드 | |
| | [ ] 현대카드 | |
| | [ ] 국민카드 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 카테고리 선택 | |
| | | |
| | [✓] 전체 | |
| | [✓] 식비 | |
| | [ ] 교통 | |
| | [ ] 쇼핑 | |
| | [ ] 여가/문화 | |
| | [ ] 주거/통신 | |
| | [ ] 기타 | |
| +----------------------------+ |
| |
| +----------------------------+ |
| | 금액 범위 | |
| | | |
| | [최소금액] ~ [최대금액] | |
| | 0원 ~ 제한없음 | |
| +----------------------------+ |
| |
| [초기화] [적용하기] |
| |
+----------------------------------+
디자인 노트
1. 색상 팔레트
- 주요 색상: #3498DB (파란색) - 앱의 주요 브랜드 색상
- 보조 색상: #2ECC71 (녹색) - 긍정적인 지표, 저축 목표 달성
- 경고 색상: #E74C3C (빨간색) - 한도 초과, 경고 알림
- 중립 색상: #ECF0F1 (연한 회색) - 배경
- 텍스트 색상: #2C3E50 (진한 회색) - 주요 텍스트
2. 타이포그래피
- 주요 폰트: 'Noto Sans KR' - 한글 가독성 최적화
- 크기 계층:
- 대제목: 24px
- 중제목: 18px
- 본문: 14px
- 작은 텍스트: 12px
3. 아이콘 및 시각적 요소
- 각 카테고리별 직관적인 아이콘 사용
- 원형 프로그레스 바와 게이지로 한도 사용 현황 표시
- 파이 차트와 막대 그래프로 지출 분석 시각화
4. 사용자 경험 고려사항
- 한 손 조작을 위한 하단 탭 바 디자인
- 자주 사용하는 기능에 빠르게 접근할 수 있는 플로팅 액션 버튼(+)
- 직관적인 색상 코딩 (초과 지출은 빨간색, 안전 지출은 녹색)
- 카드 스와이프 제스처로 추가 작업 접근 (수정, 삭제 등)
5. 접근성 고려사항
- 충분한 대비를 갖는 색상 조합
- 터치 가능한 요소는 최소 44x44dp 크기 유지
- 스크린 리더 호환성을 위한 적절한 레이블 제공
- 다크 모드 지원