# 적자 탈출 가계부 - 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 크기 유지 - 스크린 리더 호환성을 위한 적절한 레이블 제공 - 다크 모드 지원