문서 파일 정리

This commit is contained in:
hansoo
2025-03-21 16:08:43 +09:00
parent 86c0035561
commit 2d08a7962b
64 changed files with 8460 additions and 45 deletions

View File

@@ -0,0 +1,167 @@
# 적자 탈출 가계부 요구사항 분석
## 사용자 요구사항
### 핵심 사용자 니즈
1. **지출 추적의 용이성**
- 일상적인 지출을 쉽고 빠르게 기록할 수 있어야 함
- 반복적인 지출은 자동 기록 옵션 필요
- 영수증 스캔 또는 사진 촬영으로 지출 정보 자동 입력
2. **재정 상태 가시화**
- 현재 재정 상태를 한눈에 파악할 수 있는 대시보드
- 수입 대비 지출 비율을 명확히 표시
- 카테고리별 지출 분포를 시각적으로 표현
3. **적자 원인 분석**
- 과도한 지출이 발생하는 카테고리 식별
- 예상치 못한 지출 패턴 감지 및 알림
- 월별/주별 지출 추세 분석
4. **절약 가이드**
- 개인 소비 패턴에 기반한 맞춤형 절약 제안
- 카테고리별 적정 지출 가이드라인 제공
- 실천 가능한 구체적 절약 팁 제공
5. **목표 설정 및 추적**
- 저축, 부채 상환 등 재정 목표 설정 기능
- 목표 달성 진행 상황 시각화
- 목표 달성 시 보상 시스템
## 기능적 요구사항
### 1. 사용자 계정 관리
- 회원가입 및 로그인 (이메일, 소셜 로그인)
- 프로필 설정 및 관리
- 다중 기기 동기화
- 데이터 백업 및 복원
### 2. 수입/지출 관리
- 수입 및 지출 항목 추가, 편집, 삭제
- 정기적인 수입/지출 자동 등록
- 카테고리 및 태그 관리
- 영수증 스캔 및 자동 정보 추출
- 지출 증빙 사진 첨부
### 3. 예산 관리
- 월간/주간 총 예산 설정
- 카테고리별 예산 할당
- 예산 대비 실제 지출 추적
- 예산 초과 시 알림
### 4. 분석 및 보고서
- 기간별 수입/지출 요약
- 카테고리별 지출 분석
- 지출 패턴 및 추세 분석
- 맞춤형 재정 건강 보고서
- 절약 가능 영역 식별
### 5. 절약 도구
- AI 기반 맞춤형 절약 제안
- 절약 챌린지 생성 및 참여
- 절약 팁 라이브러리
- 유사 사용자 대비 지출 비교
### 6. 알림 및 리마인더
- 예산 임계치 알림
- 정기 지출 리마인더
- 재정 목표 진행 상황 알림
- 주간/월간 재정 요약 알림
### 7. 금융 계좌 연동
- 은행 계좌 연동
- 신용카드 거래 자동 가져오기
- 계좌 잔액 실시간 확인
- 자산 및 부채 통합 관리
## 비기능적 요구사항
### 1. 사용성
- 직관적이고 사용하기 쉬운 UI/UX
- 최소한의 클릭으로 주요 기능 접근
- 초보자도 쉽게 사용할 수 있는 온보딩 경험
- 다양한 화면 크기 및 기기 지원
### 2. 성능
- 빠른 앱 로딩 및 반응 시간
- 대용량 데이터 처리 시에도 안정적 성능
- 오프라인 모드 지원
- 배터리 소모 최적화
### 3. 보안 및 개인정보
- 은행급 보안 표준 준수
- 개인 재정 데이터 암호화
- 생체 인식 로그인 옵션
- 개인정보 보호 정책 준수
### 4. 확장성
- 사용자 증가에 따른 시스템 확장성
- 새로운 기능 추가를 위한 모듈식 아키텍처
- 다양한 금융 API와의 통합 가능성
- 다국어 및 다중 통화 지원
### 5. 신뢰성
- 99.9% 이상의 서비스 가용성
- 데이터 손실 방지를 위한 자동 백업
- 오류 발생 시 자동 복구 메커니즘
- 정확한 재정 계산 및 분석
## 사용자 페르소나
### 페르소나 1: 신입 직장인 김지현 (27세)
- **상황**: 첫 직장 2년차, 독립 생활 시작, 월급의 대부분을 생활비와 여가 활동에 소비
- **문제점**: 매달 적자 상태, 저축 부족, 지출 관리 어려움
- **목표**: 월급의 20%를 저축하고 불필요한 지출 줄이기
- **니즈**: 쉬운 지출 추적, 과소비 영역 식별, 실용적인 절약 팁
### 페르소나 2: 맞벌이 부부 박서준, 이미나 (35세, 33세)
- **상황**: 결혼 3년차, 아파트 대출 상환 중, 자녀 계획 중
- **문제점**: 각자의 지출 관리 불일치, 공동 재정 계획 부재
- **목표**: 대출 조기 상환 및 자녀 교육비 마련
- **니즈**: 공유 가계부, 장기 재정 계획, 가족 예산 관리
### 페르소나 3: 대학생 이준호 (22세)
- **상황**: 대학 3학년, 아르바이트로 생활비 충당, 학자금 대출 있음
- **문제점**: 불규칙한 수입, 충동적 소비, 재정 지식 부족
- **목표**: 학자금 대출 관리 및 졸업 후 취업 준비 자금 마련
- **니즈**: 불규칙한 수입 관리, 기본적인 재정 교육, 저비용 생활 팁
## 경쟁 분석
### 주요 경쟁 앱 분석
1. **뱅크샐러드**
- 강점: 계좌 연동, 자산 관리, 신용 점수
- 약점: 절약 가이드 부족, 복잡한 UI
2. **토스**
- 강점: 간편한 UI, 송금 기능, 계좌 연동
- 약점: 가계부 기능 제한적, 지출 분석 부족
3. **머니 매니저**
- 강점: 상세한 지출 분석, 다양한 보고서
- 약점: 복잡한 설정, 초보자 진입장벽
4. **캐시워크**
- 강점: 리워드 시스템, 게이미피케이션
- 약점: 실질적 재정 관리 기능 부족
### 차별화 포인트
1. **적자 탈출 특화**: 단순 기록이 아닌 적자 상태 개선에 초점
2. **AI 기반 맞춤형 조언**: 개인 소비 패턴에 기반한 실질적 절약 제안
3. **행동 경제학 활용**: 심리적 접근을 통한 소비 습관 개선
4. **커뮤니티 기반 동기부여**: 비슷한 목표를 가진 사용자들과의 상호작용
## 결론 및 우선순위
### 핵심 기능 우선순위
1. 직관적인 수입/지출 기록 시스템
2. 명확한 재정 상태 시각화 대시보드
3. 카테고리별 예산 설정 및 알림
4. 기본적인 지출 분석 및 보고서
5. 맞춤형 절약 제안 시스템
### 개발 접근 방식
- MVP(Minimum Viable Product) 접근으로 핵심 기능 우선 개발
- 사용자 피드백 기반의 반복적 개선
- 데이터 기반 의사결정을 통한 기능 우선순위 조정
- 사용자 경험을 최우선으로 하는 설계 철학 유지

View File

@@ -0,0 +1,345 @@
# 적자 탈출 가계부 UI/UX 설계
## 디자인 철학
'적자 탈출 가계부'의 UI/UX 설계는 다음과 같은 핵심 원칙을 기반으로 합니다:
1. **단순성**: 복잡한 재정 관리를 단순하고 직관적인 인터페이스로 제공
2. **접근성**: 재정 지식 수준에 관계없이 누구나 쉽게 사용할 수 있는 설계
3. **동기부여**: 사용자의 재정 개선을 위한 지속적인 동기부여 요소 포함
4. **개인화**: 사용자의 상황과 목표에 맞춘 개인화된 경험 제공
5. **신뢰성**: 재정 데이터의 정확성과 보안을 시각적으로 전달
## 브랜드 아이덴티티
### 색상 팔레트
#### 주요 색상
- **주 색상(Primary)**: #4CAF50 (녹색) - 재정적 성장과 안정을 상징
- **보조 색상(Secondary)**: #2196F3 (파란색) - 신뢰성과 안정감을 표현
- **강조 색상(Accent)**: #FF9800 (주황색) - 주의와 행동 촉구를 위한 색상
#### 기능적 색상
- **긍정/성공**: #4CAF50 (녹색) - 예산 내 지출, 목표 달성 등
- **주의/경고**: #FF9800 (주황색) - 예산 임계치 접근, 주의 필요 항목
- **부정/위험**: #F44336 (빨간색) - 예산 초과, 적자 상태 등
- **중립/정보**: #2196F3 (파란색) - 일반 정보, 팁 등
#### 배경 색상
- **기본 배경**: #FFFFFF (흰색)
- **보조 배경**: #F5F5F5 (연한 회색)
- **카드 배경**: #FFFFFF (흰색)
- **다크 모드 기본 배경**: #121212 (어두운 회색)
### 타이포그래피
#### 폰트 패밀리
- **기본 폰트**: Noto Sans KR - 가독성이 높고 한글 지원이 우수한 폰트
- **숫자 폰트**: Roboto - 숫자 표시에 최적화된 폰트
#### 폰트 크기
- **헤더 1**: 24sp - 화면 제목
- **헤더 2**: 20sp - 섹션 제목
- **헤더 3**: 18sp - 서브 섹션 제목
- **본문 텍스트**: 16sp - 일반 텍스트
- **보조 텍스트**: 14sp - 부가 정보
- **작은 텍스트**: 12sp - 레이블, 힌트
#### 폰트 스타일
- **굵기**: Regular(400), Medium(500), Bold(700)
- **강조**: 중요 금액이나 비율은 Bold 처리
- **색상 대비**: 텍스트와 배경 간 충분한 대비 확보 (WCAG 2.1 AA 기준 준수)
### 아이콘 및 이미지
#### 아이콘 스타일
- **라인 아이콘**: 주요 네비게이션 및 기능에 사용
- **필 아이콘**: 활성 상태 및 강조 표시에 사용
- **일관된 스타일**: Material Design 아이콘 세트 기반
#### 이미지 가이드라인
- **일러스트레이션**: 미니멀하고 친근한 스타일의 일러스트레이션
- **온보딩 이미지**: 각 핵심 기능을 시각적으로 설명하는 이미지
- **성취 배지**: 재정 목표 달성 시 제공되는 시각적 보상
## 화면 구조
### 주요 화면 흐름
```
1. 온보딩/로그인 → 2. 홈 대시보드 → 3. 상세 기능
↑ ↓
└───────────────────┘
```
### 네비게이션 구조
```
[바텀 네비게이션]
홈 - 거래내역 - 예산 - 분석 - 더보기
[더보기 메뉴]
- 프로필 설정
- 카테고리 관리
- 알림 설정
- 절약 챌린지
- 도움말/FAQ
- 설정
```
## 주요 화면 설계
### 1. 온보딩 및 로그인
#### 온보딩 화면
- **목적**: 앱의 핵심 가치와 주요 기능 소개
- **구성**:
- 4-5개의 슬라이드로 핵심 기능 소개
- 각 슬라이드는 일러스트레이션, 제목, 간단한 설명으로 구성
- 마지막 슬라이드에 시작하기 버튼
- **인터랙션**:
- 스와이프로 슬라이드 전환
- 건너뛰기 옵션 제공
#### 로그인/회원가입 화면
- **목적**: 사용자 인증 및 계정 생성
- **구성**:
- 이메일/비밀번호 로그인
- 소셜 로그인 옵션 (카카오, 네이버, 구글)
- 회원가입 링크
- 비밀번호 찾기 링크
- **보안 요소**:
- 생체인식 로그인 옵션
- 자동 로그인 설정
### 2. 홈 대시보드
#### 대시보드 화면
- **목적**: 재정 상태 한눈에 파악 및 주요 기능 접근
- **구성**:
- 이번 달 예산 대비 지출 현황 (프로그레스 바)
- 오늘/이번 주 지출 요약
- 주요 카테고리별 지출 현황 (미니 차트)
- 최근 거래내역 (최대 3개)
- 맞춤형 절약 팁 또는 알림
- **인터랙션**:
- 카드 탭으로 상세 화면 이동
- 당겨서 새로고침
- 빠른 지출/수입 추가 버튼 (FAB)
#### 재정 건강 점수 카드
- **목적**: 사용자의 재정 상태를 점수화하여 동기 부여
- **구성**:
- 종합 점수 (0-100점)
- 주요 평가 영역별 미니 점수 (예산 관리, 저축, 부채 관리)
- 전월 대비 변화 표시
- 개선 가능 영역 하이라이트
- **인터랙션**:
- 탭하여 상세 분석 및 개선 방법 확인
### 3. 거래 관리
#### 거래 목록 화면
- **목적**: 모든 수입/지출 내역 조회 및 관리
- **구성**:
- 기간 필터 (일/주/월/연/커스텀)
- 카테고리/태그 필터
- 거래 목록 (날짜별 그룹핑)
- 각 거래 항목에 금액, 카테고리, 메모 표시
- **인터랙션**:
- 스와이프로 수정/삭제
- 길게 누르기로 다중 선택
- 스크롤 시 날짜 헤더 고정
#### 거래 추가/편집 화면
- **목적**: 새 거래 추가 또는 기존 거래 편집
- **구성**:
- 수입/지출/이체 탭
- 금액 입력 (계산기 스타일)
- 날짜 선택
- 카테고리 선택 (자주 사용하는 카테고리 상단 표시)
- 메모 입력
- 반복 거래 설정 옵션
- 사진/영수증 첨부 옵션
- **편의 기능**:
- 최근 사용 카테고리 빠른 접근
- 자동 완성 제안
- 영수증 스캔 버튼
### 4. 예산 관리
#### 예산 개요 화면
- **목적**: 전체 및 카테고리별 예산 현황 파악
- **구성**:
- 월간 총 예산 대비 지출 현황
- 카테고리별 예산 카드 (프로그레스 바 포함)
- 위험/초과 카테고리 하이라이트
- 남은 기간 대비 잔여 예산 분석
- **인터랙션**:
- 카테고리 카드 탭하여 상세 내역 확인
- 예산 편집 버튼
#### 예산 설정 화면
- **목적**: 총 예산 및 카테고리별 예산 설정
- **구성**:
- 월간 총 수입 입력
- 권장 예산 배분 제안
- 카테고리별 예산 금액 설정
- 예산 기간 설정 (월간/주간)
- **스마트 기능**:
- 과거 지출 패턴 기반 예산 제안
- 적자 위험 알림
- 카테고리 간 예산 조정 제안
### 5. 분석 및 인사이트
#### 지출 분석 화면
- **목적**: 소비 패턴 분석 및 인사이트 제공
- **구성**:
- 기간별 지출 추이 그래프
- 카테고리별 지출 비중 파이/도넛 차트
- 전월 대비 변화 분석
- 주요 지출처 Top 5
- **인터랙션**:
- 차트 요소 탭하여 상세 정보 확인
- 기간 변경 옵션
- 분석 유형 전환 (금액/비율)
#### 절약 인사이트 화면
- **목적**: AI 기반 맞춤형 절약 제안 제공
- **구성**:
- 주요 절약 가능 영역 카드
- 각 제안별 예상 절약 금액
- 실천 방법 및 팁
- 유사 사용자 대비 지출 비교
- **인터랙션**:
- 제안 카드 탭하여 상세 정보 확인
- 제안 저장 또는 챌린지로 전환 옵션
- 피드백 제공 (유용함/유용하지 않음)
### 6. 절약 챌린지
#### 챌린지 목록 화면
- **목적**: 사용자 참여 가능한 절약 챌린지 제공
- **구성**:
- 추천 챌린지 카드
- 진행 중인 챌린지 진행 상황
- 완료한 챌린지 히스토리
- 인기 챌린지 랭킹
- **인터랙션**:
- 챌린지 카드 탭하여 상세 정보 확인
- 참여하기 버튼
- 진행 상황 업데이트
#### 챌린지 상세 화면
- **목적**: 특정 챌린지의 상세 정보 및 진행 상황 제공
- **구성**:
- 챌린지 설명 및 목표
- 예상 절약 금액
- 진행 기간 및 단계
- 현재 진행 상황
- 참여자 수 및 성공률
- **동기부여 요소**:
- 진행 상황 시각화
- 달성 시 보상 안내
- 참여자 익명 후기
## 주요 인터랙션 패턴
### 데이터 입력 패턴
- **빠른 입력**: 최소한의 탭으로 기본 정보 입력
- **단계적 상세화**: 필요에 따라 추가 정보 입력
- **자동 제안**: 과거 패턴 기반 자동 완성 제안
- **기본값 활용**: 자주 사용하는 값 기본 설정
### 피드백 패턴
- **시각적 피드백**: 상태 변화를 색상과 애니메이션으로 표현
- **촉각적 피드백**: 주요 액션 시 햅틱 피드백 제공
- **토스트 메시지**: 작업 완료 또는 오류 시 간결한 알림
- **진행 상태 표시**: 로딩 중 상태를 명확히 표시
### 내비게이션 패턴
- **바텀 네비게이션**: 주요 섹션 간 빠른 이동
- **제스처 기반**: 스와이프, 핀치 등 직관적 제스처 활용
- **계층적 구조**: 명확한 뒤로가기 경로 제공
- **컨텍스트 유지**: 화면 전환 시 사용자 컨텍스트 유지
## 접근성 고려사항
### 시각적 접근성
- **충분한 대비**: 텍스트와 배경 간 WCAG 2.1 AA 기준 준수
- **확대 가능**: 텍스트 크기 조정 지원
- **색상 독립적**: 색맹/색약자를 위한 대체 표시 방법 제공
- **다크 모드**: 시스템 설정에 따른 다크 모드 지원
### 조작 접근성
- **충분한 터치 영역**: 최소 44x44dp의 터치 영역 확보
- **키보드 접근성**: 외부 키보드 사용 지원
- **음성 지원**: 스크린 리더 호환성 확보
- **한 손 조작**: 주요 기능 한 손으로 접근 가능하도록 설계
## 반응형 설계
### 다양한 화면 크기 및 플랫폼 지원
- **반응형 디자인**: 모든 화면 크기에 맞게 자동 조정되는 레이아웃
- **모바일 최적화**: 다양한 스마트폰 화면 크기 대응
- **태블릿 레이아웃**: 큰 화면에서의 공간 활용 최적화
- **데스크톱 뷰**: 웹 브라우저와 데스크톱 앱에서의 확장된 레이아웃
- **방향 대응**: 세로/가로 모드 전환 지원
- **PWA 지원**: 홈 화면 설치 및 오프라인 기능 제공
### 적응형 콘텐츠
- **우선순위 기반**: 화면 크기에 따라 중요 콘텐츠 우선 표시
- **레이아웃 조정**: 화면 크기에 따른 그리드 시스템 조정
- **요소 크기 조정**: 터치 영역 및 가독성 유지
## 프로토타입 및 테스트
### 프로토타입 계획
- **로우 피델리티**: 주요 화면 흐름 및 구조 검증용 와이어프레임
- **미디엄 피델리티**: 주요 인터랙션 및 사용성 테스트용 프로토타입
- **하이 피델리티**: 시각적 디자인 및 세부 인터랙션 검증용 프로토타입
### 사용성 테스트 계획
- **태스크 기반 테스트**: 주요 사용 시나리오 기반 테스트
- **A/B 테스트**: 주요 디자인 결정사항에 대한 비교 테스트
- **히트맵 분석**: 사용자 터치 패턴 분석
- **사용자 인터뷰**: 정성적 피드백 수집
## 구현 가이드라인
### 컴포넌트 시스템
- **아토믹 디자인**: 재사용 가능한 UI 컴포넌트 체계 구축
- **스타일 가이드**: 일관된 디자인 적용을 위한 가이드라인
- **컴포넌트 라이브러리**: Lovable UI 컴포넌트 라이브러리 구축
- **뉴모피즘 스타일**: 입체적이고 부드러운 UI 디자인 적용
- **Tailwind CSS**: 효율적인 스타일링 및 반응형 디자인 구현
### 애니메이션 및 전환
- **목적성 애니메이션**: 사용자 이해를 돕는 의미 있는 애니메이션
- **자연스러운 전환**: 화면 간 부드러운 전환 효과
- **CSS 트랜지션**: 웹 표준 기술을 활용한 효율적인 애니메이션 구현
- **성능 최적화**: 60fps 유지를 위한 최적화
- **하드웨어 가속**: 웹 브라우저의 GPU 가속 활용
## 구현 기술 스택
### 프론트엔드 기술
- **React**: 컴포넌트 기반 UI 개발
- **Vite**: 빠른 개발 및 빌드 환경 제공
- **Tailwind CSS**: 효율적인 스타일링 및 반응형 디자인
- **Capacitor**: 네이티브 기능 접근 및 앱 패키징
- **D3.js/Chart.js**: 데이터 시각화 및 차트 구현
### 테스트 도구
- **Jest**: 단위 테스트 및 컴포넌트 테스트
- **Cypress**: E2E 테스트 및 사용자 시나리오 검증
- **Lighthouse**: 웹 성능 및 접근성 테스트
## 결론
'적자 탈출 가계부'의 UI/UX 설계는 사용자가 재정 관리를 쉽고 효과적으로 할 수 있도록 직관적이고 동기부여적인 경험을 제공하는 데 중점을 두고 있습니다. 단순한 데이터 기록을 넘어, 사용자의 재정 상태 개선을 위한 인사이트와 행동 변화를 유도하는 요소들을 통합하였습니다.
웹 기반 기술과 Capacitor를 활용하여 다양한 플랫폼에서 일관된 사용자 경험을 제공하면서도, 뉴모피즘 스타일의 Lovable UI 컴포넌트를 통해 차별화된 디자인을 구현합니다. 이러한 접근은 개발 효율성을 높이고 유지보수를 용이하게 하면서도 사용자에게 매력적인 인터페이스를 제공합니다.
이 설계는 초기 MVP 출시 후 사용자 피드백과 사용 패턴 분석을 통해 지속적으로 개선될 예정입니다. 특히 사용자의 지속적인 앱 사용과 재정 습관 개선을 위한 요소들을 강화해 나갈 계획입니다.

View File

@@ -0,0 +1,127 @@
# 적자 탈출 가계부 - MVP 기능 목록
이 문서는 적자 탈출 가계부 앱의 MVP(Minimum Viable Product) 기능 목록을 정의합니다. 우선순위는 MoSCoW 방법론에 따라 분류되었습니다:
- **Must have**: 반드시 포함되어야 하는 핵심 기능
- **Should have**: 중요하지만 MVP 출시에 필수적이지는 않은 기능
- **Could have**: 있으면 좋지만 없어도 MVP 가치에 크게 영향을 미치지 않는 기능
- **Won't have**: MVP에서는 제외되는 기능 (향후 업데이트에서 고려)
## 카드 한도 관리
### Must have
- 월간 카드 사용 한도 설정 기능
- 현재 카드 사용액과 남은 한도 실시간 표시
- 한도 대비 사용 비율을 시각적으로 표현하는 그래프/게이지
- 한도의 특정 비율(70%, 90%)에 도달했을 때 알림 기능
### Should have
- 카테고리별 지출 한도 설정 기능
- 여러 개의 카드 등록 및 개별 한도 설정
- 일/주/월 단위 한도 사용 추이 그래프
- 결제일 전 예상 청구액 알림
### Could have
- 한도 설정 시 사용자의 상환 능력 기반 금액 추천
- 카테고리별 한도 초과 시 세부 알림 설정
- 한도 자동 조정 기능 (과거 사용 패턴 기반)
- 한도 초과 시 지출 제한 옵션
### Won't have (MVP)
- 신용카드사 API 연동을 통한 자동 한도 설정
- 다중 통화 지원
- 신용점수 영향 분석
- 카드사 혜택 기반 한도 최적화
## 카드 사용 내역 관리
### Must have
- 카드 사용 내역 수동 입력 기능
- 날짜, 금액, 카테고리 기본 정보 입력
- 내역 조회 및 기본 필터링 (날짜, 금액)
- 내역 수정 및 삭제 기능
### Should have
- 자주 사용하는 내역 템플릿 저장 및 빠른 입력
- 카테고리별 내역 필터링 및 검색
- 내역에 메모 추가 기능
- 월별 내역 요약 보기
### Could have
- 영수증 사진 촬영을 통한 내역 자동 입력
- 위치 기반 자주 가는 가게 자동 완성
- 내역 태그 지정 및 태그 기반 필터링
- 내역 데이터 내보내기 (CSV/Excel)
### Won't have (MVP)
- 은행/카드사 API 연동을 통한 자동 내역 동기화
- 음성 인식을 통한 내역 입력
- 영수증 OCR 고급 분석 (품목별 상세 내역)
- 업무/개인 지출 자동 분류
## 대시보드 및 분석
### Must have
- 메인 대시보드에 현재 카드 사용 현황 표시
- 이번 달 주요 지출 요약
- 카테고리별 지출 비율 기본 차트
- 다가오는 결제일 및 예상 청구액 표시
### Should have
- 전월 대비 지출 변화 비교
- 지출이 많은 상위 카테고리 표시
- 주간/월간 지출 트렌드 그래프
- 기본 지출 인사이트 제공
### Could have
- 시간대별/요일별 지출 패턴 분석
- 불필요한 지출 식별 및 절약 제안
- 맞춤형 월간 지출 리포트
- 지출 목표 대비 진행 상황 추적
### Won't have (MVP)
- AI 기반 고급 지출 패턴 분석
- 다년간 재정 건전성 예측
- 소비 성향 심층 분석
- 타 사용자 대비 소비 패턴 비교
## 사용자 관리 및 설정
### Must have
- 기본 회원가입 및 로그인 기능
- 프로필 정보 관리
- 기본 알림 설정 (켜기/끄기)
- 데이터 백업 및 복원 기능
### Should have
- 소셜 로그인 연동
- 알림 세부 설정 (시간, 유형별)
- 앱 테마 설정 (라이트/다크 모드)
- 데이터 동기화 기능
### Could have
- 생체 인증 로그인 (지문, 얼굴 인식)
- 앱 화면 레이아웃 커스터마이징
- 다국어 지원
- 개인정보 보호 강화 설정
### Won't have (MVP)
- 다중 사용자 지원 (가족 계정)
- 공동 카드 관리 기능
- 고급 데이터 분석 설정
- 타 금융 앱과의 연동
## 제외 기능 (명확한 정의)
MVP 단계에서는 다음 기능들을 명확히 제외합니다:
1. **자동 내역 동기화**: 은행/카드사 API 연동을 통한 자동 내역 가져오기는 MVP에서 제외
2. **다중 사용자 지원**: 가족 구성원 초대 및 공동 계정 관리는 향후 업데이트에서 구현
3. **AI 기반 고급 분석**: 심층적인 AI 분석 및 예측 기능은 MVP에서 제외
4. **고급 OCR 기능**: 영수증 상세 분석 및 자동 품목 분류는 향후 업데이트에서 구현
5. **타 금융 앱 연동**: 다른 금융 앱이나 서비스와의 연동은 MVP에서 제외
6. **다중 통화 지원**: 해외 카드 사용 및 다중 통화 관리는 MVP에서 제외
7. **음성 인식 기능**: 음성을 통한 내역 입력 및 명령은 향후 업데이트에서 구현
8. **고급 데이터 시각화**: 복잡한 인터랙티브 차트 및 고급 시각화는 MVP에서 제외
이러한 제외 기능들은 MVP 출시 후 사용자 피드백과 우선순위에 따라 향후 업데이트에서 순차적으로 구현할 계획입니다.

View File

@@ -0,0 +1,354 @@
# 적자 탈출 가계부 - 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. **오프라인 사용성**
- 네트워크 연결 없이도 기본 기능 사용 가능
- 데이터 동기화는 네트워크 연결 시 자동 수행

View File

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

View File

@@ -0,0 +1,16 @@
# 기획 및 설계
이 폴더에는 적자 탈출 가계부 프로젝트의 기획 및 UI/UX 설계에 관한 문서가 포함되어 있습니다.
## 문서 목록
- [[1. Project/2. ZELLYY/젤리의 적자 탈출/01_기획_및_설계/MVP_기능_목록]] - 최소 기능 제품(MVP)의 기능 목록
- [[주요 사용 시나리오]] - 주요 사용 사례 시나리오
- [[1. Project/2. ZELLYY/젤리의 적자 탈출/01_기획_및_설계/UI_와이어프레임_핵심화면]] - 핵심 화면 와이어프레임
- [[1. Project/2. ZELLYY/젤리의 적자 탈출/01_기획_및_설계/UI_와이어프레임_추가화면]] - 추가 화면 와이어프레임
## 기획 요약
적자 탈출 가계부 프로젝트는 사용자 중심의 설계 원칙을 바탕으로, 직관적이고 사용하기 쉬운 인터페이스를 통해 개인 재무 관리를 지원합니다.
주요 기능으로는 수입/지출 기록, 예산 설정 및 관리, 재무 분석 및 보고서, 알림 및 목표 설정 등이 있으며, 이를 통해 사용자가 자신의 재정 상태를 명확히 파악하고 개선할 수 있도록 돕습니다.

View File

@@ -0,0 +1,315 @@
# 적자 탈출 가계부 - 사용자 경험 전략
## 1. 개요
이 문서는 적자 탈출 가계부 애플리케이션의 사용자 경험(UX) 전략을 정의합니다. 사용자 중심 설계 원칙을 바탕으로, 사용자가 재정 관리를 쉽고 효과적으로 할 수 있도록 하는 경험을 제공하는 것을 목표로 합니다.
## 2. 사용자 경험 비전
### 비전 선언문
"적자 탈출 가계부는 사용자가 재정 관리에 대한 부담감 없이, 직관적이고 보람 있는 방식으로 지출을 추적하고 관리할 수 있게 함으로써, 재정적 안정과 목표 달성을 지원합니다."
### 핵심 UX 원칙
1. **단순함(Simplicity)**: 복잡한 재정 관리를 단순하고 접근하기 쉬운 경험으로 변환
2. **투명성(Transparency)**: 사용자의 재정 상태를 명확하고 이해하기 쉽게 표현
3. **통찰력(Insightfulness)**: 단순한 데이터 표시를 넘어 의미 있는 통찰력 제공
4. **동기부여(Motivation)**: 긍정적인 재정 습관 형성을 위한 동기 부여 요소 통합
5. **개인화(Personalization)**: 사용자의 고유한 재정 상황과 목표에 맞춘 경험 제공
## 3. 사용자 여정 맵
### 3.1 신규 사용자 온보딩 여정
| 단계 | 사용자 행동 | 사용자 생각/감정 | 터치포인트 | UX 전략 |
|------|------------|-----------------|-----------|---------|
| 인지 | 앱 발견 및 다운로드 | "재정 관리가 필요한데 쉽게 할 수 있을까?" | 앱스토어, 광고 | 명확한 가치 제안, 간결한 스크린샷 |
| 설치 | 앱 설치 및 실행 | "설정이 복잡하지 않았으면 좋겠다" | 앱 설치 화면 | 빠른 설치, 최소한의 권한 요청 |
| 가입 | 계정 생성 | "개인정보가 안전할까? 가입이 오래 걸리지 않을까?" | 가입 화면 | 간소화된 가입 프로세스, 소셜 로그인 옵션 |
| 온보딩 | 기본 설정 및 튜토리얼 | "이 앱을 어떻게 사용해야 할까?" | 온보딩 화면 | 대화형 튜토리얼, 단계별 가이드 |
| 초기 설정 | 카드 정보 및 예산 설정 | "내 상황에 맞게 설정할 수 있을까?" | 설정 화면 | 가이드 제공, 기본값 추천, 나중에 수정 가능함을 안내 |
| 첫 사용 | 첫 지출 기록 | "입력이 쉬울까? 내 데이터가 정확히 반영될까?" | 지출 입력 화면 | 간편한 입력 UI, 즉각적인 피드백, 성공 메시지 |
### 3.2 일상적 사용 여정
| 단계 | 사용자 행동 | 사용자 생각/감정 | 터치포인트 | UX 전략 |
|------|------------|-----------------|-----------|---------|
| 접속 | 앱 열기 | "오늘의 재정 상태를 확인해야지" | 앱 아이콘, 알림 | 빠른 로딩, 주요 정보 즉시 표시 |
| 지출 확인 | 최근 지출 및 잔액 확인 | "얼마나 썼지? 한도가 얼마나 남았지?" | 대시보드 | 시각적 표현, 한눈에 파악 가능한 UI |
| 지출 입력 | 새 지출 기록 | "이 지출을 빠르게 기록하고 싶다" | 지출 입력 화면 | 빠른 입력 옵션, 자주 쓰는 항목 제안 |
| 분석 확인 | 지출 패턴 분석 | "내 소비 패턴이 어떻게 되지?" | 분석 화면 | 직관적인 차트, 의미 있는 인사이트 제공 |
| 예산 조정 | 예산 검토 및 조정 | "이번 달 예산을 조정해야 할까?" | 예산 화면 | 쉬운 조정 UI, 변경 영향 미리보기 |
| 목표 확인 | 저축 목표 진행 상황 확인 | "목표 달성이 얼마나 남았지?" | 목표 화면 | 진행 상황 시각화, 격려 메시지 |
### 3.3 알림 및 피드백 여정
| 단계 | 사용자 행동 | 사용자 생각/감정 | 터치포인트 | UX 전략 |
|------|------------|-----------------|-----------|---------|
| 알림 수신 | 한도 접근 알림 확인 | "이번 달 지출이 많았나?" | 푸시 알림 | 명확한 메시지, 행동 유도 버튼 |
| 대응 결정 | 알림에 대한 대응 결정 | "어떻게 대응해야 할까?" | 알림 상세 화면 | 상황 설명 및 추천 행동 제시 |
| 행동 실행 | 지출 조정 또는 한도 변경 | "이렇게 조정하면 괜찮을까?" | 지출/한도 조정 화면 | 쉬운 조정 옵션, 결과 미리보기 |
| 피드백 확인 | 조치 결과 확인 | "내 조치가 효과가 있을까?" | 결과 화면 | 즉각적인 피드백, 긍정적 강화 |
| 습관 형성 | 정기적인 재정 검토 | "정기적으로 확인하는 습관이 생겼다" | 주간/월간 리포트 | 정기 리포트, 개선 추세 강조 |
## 4. 핵심 UX 전략
### 4.1 직관적인 데이터 시각화
사용자가 복잡한 재정 데이터를 쉽게 이해할 수 있도록 직관적인 시각화 전략을 적용합니다.
**구현 방안:**
- 한도 대비 사용량을 원형 또는 선형 게이지로 표시
- 카테고리별 지출을 도넛 차트로 시각화
- 시간에 따른 지출 추이를 선 그래프로 표현
- 색상 코드를 활용하여 상태 표시 (녹색: 안전, 노란색: 주의, 빨간색: 위험)
- 숫자와 그래프의 균형 있는 조합으로 정보 전달
**기대 효과:**
- 복잡한 재정 정보의 이해도 향상
- 직관적인 상태 인식으로 빠른 의사결정 지원
- 시각적 패턴 인식을 통한 지출 습관 파악
### 4.2 마찰 없는 데이터 입력
사용자가 지출 데이터를 쉽고 빠르게 입력할 수 있도록 마찰을 최소화합니다.
**구현 방안:**
- 홈 화면에서 바로 접근 가능한 빠른 입력 버튼
- 자주 사용하는 지출 항목 원터치 입력
- 최근 방문한 가맹점 자동 제안
- 영수증 사진 촬영을 통한 자동 데이터 추출 (향후 기능)
- 음성 인식을 통한 지출 입력 (향후 기능)
**기대 효과:**
- 데이터 입력에 대한 심리적 장벽 감소
- 지속적인 앱 사용 유도
- 더 정확하고 완전한 재정 데이터 확보
### 4.3 맥락 기반 인사이트
단순한 데이터 표시를 넘어, 사용자의 상황과 목표에 맞는 맥락화된 인사이트를 제공합니다.
**구현 방안:**
- "지난 달 대비" 비교 분석 제공
- 비정상적인 지출 패턴 감지 및 알림
- 카테고리별 지출 추세 분석
- 사용자 목표 기반 맞춤형 조언
- 유사한 사용자 그룹과의 익명 비교 (향후 기능)
**기대 효과:**
- 의미 있는 재정 통찰력 제공
- 사용자의 재정 의사결정 개선
- 앱의 지속적인 가치 인식 강화
### 4.4 점진적 동기 부여
사용자가 재정 관리를 지속할 수 있도록 점진적인 동기 부여 요소를 통합합니다.
**구현 방안:**
- 작은 성취에 대한 축하 메시지 및 애니메이션
- 연속 사용 스트릭 및 마일스톤 보상
- 목표 달성 진행률 시각화
- 주간/월간 챌린지 제공
- 재정 건전성 점수 및 개선 추적
**기대 효과:**
- 재정 관리의 습관화 촉진
- 앱 사용의 즐거움 증가
- 장기적인 사용자 유지율 향상
### 4.5 상황별 알림 전략
사용자에게 적시에 관련성 높은 정보를 제공하는 알림 전략을 구현합니다.
**구현 방안:**
- 한도 도달 임계값 기반 알림 (70%, 90% 등)
- 비정상적인 지출 패턴 감지 시 알림
- 결제일 접근 시 예상 청구액 알림
- 목표 달성 또는 중요 마일스톤 알림
- 사용자 설정 기반 맞춤형 알림 옵션
**기대 효과:**
- 재정적 위험 상황의 사전 인지
- 적시에 조치를 취할 수 있는 기회 제공
- 중요한 재정 이벤트 누락 방지
## 5. 화면별 UX 전략
### 5.1 대시보드 화면
**목적**: 사용자의 현재 재정 상태를 한눈에 파악할 수 있게 함
**UX 전략:**
- 가장 중요한 정보(남은 한도, 주요 지출)를 상단에 배치
- 시각적 계층 구조로 정보의 중요도 표현
- 스크롤 없이 핵심 정보 확인 가능한 레이아웃
- 탭 또는 스와이프로 다양한 기간(일/주/월) 전환
- 주요 행동(지출 추가, 분석 보기)에 쉽게 접근 가능한 버튼
**주요 인터랙션:**
- 카드 한도 게이지 탭 시 상세 내역으로 이동
- 최근 거래 목록 스와이프로 빠른 작업(편집, 삭제)
- 풀다운 제스처로 데이터 새로고침
- 그래프 요소 탭하여 상세 데이터 확인
### 5.2 지출 입력 화면
**목적**: 사용자가 빠르고 정확하게 지출 정보를 입력할 수 있게 함
**UX 전략:**
- 단계적 입력 흐름으로 복잡성 감소
- 가장 자주 사용하는 필드 우선 배치
- 스마트 기본값 제안으로 입력 시간 단축
- 명확한 시각적 피드백으로 입력 상태 인지
- 오류 발생 시 즉각적이고 구체적인 안내
**주요 인터랙션:**
- 금액 입력 시 숫자 키패드 자동 활성화
- 카테고리 선택 시 시각적 아이콘으로 빠른 인식
- 자주 방문하는 가맹점 자동완성
- 저장 버튼은 항상 화면에 고정되어 접근성 확보
- 뒤로 가기 시 입력 데이터 임시 저장
### 5.3 분석 화면
**목적**: 사용자의 지출 패턴과 트렌드를 이해하기 쉽게 시각화
**UX 전략:**
- 가장 관련성 높은 인사이트를 상단에 배치
- 다양한 시각화 방식으로 다각적 데이터 표현
- 복잡한 분석을 쉬운 언어로 설명하는 텍스트 요약
- 필터 및 기간 설정으로 맞춤형 분석 지원
- 발견된 패턴에 기반한 실행 가능한 제안 제공
**주요 인터랙션:**
- 차트 요소 탭하여 세부 정보 확인
- 기간 선택기로 다양한 시간대 분석
- 카테고리 필터로 특정 지출 유형 집중 분석
- 차트 간 스와이프로 다양한 분석 뷰 전환
- 인사이트 카드 저장 및 공유 기능
### 5.4 예산 및 목표 화면
**목적**: 사용자가 재정 목표를 설정하고 진행 상황을 추적할 수 있게 함
**UX 전략:**
- 목표 진행 상황의 시각적 표현
- 목표 달성까지 남은 금액/시간 명확히 표시
- 목표 달성 가능성에 대한 예측 제공
- 목표 조정이 쉬운 인터페이스
- 성취감을 주는 마일스톤 및 축하 요소
**주요 인터랙션:**
- 슬라이더로 목표 금액/기간 쉽게 조정
- 목표 카드 탭하여 상세 정보 및 히스토리 확인
- 목표 달성 시 축하 애니메이션 및 공유 옵션
- 목표 템플릿으로 빠른 새 목표 생성
- 목표 우선순위 드래그 앤 드롭으로 조정
### 5.5 설정 화면
**목적**: 사용자가 앱 경험을 자신의 필요에 맞게 커스터마이징할 수 있게 함
**UX 전략:**
- 논리적 카테고리로 설정 옵션 그룹화
- 가장 자주 변경하는 설정을 상단에 배치
- 각 설정의 목적과 영향을 명확히 설명
- 복잡한 설정은 단계별 가이드 제공
- 설정 변경 시 즉각적인 피드백 제공
**주요 인터랙션:**
- 토글 스위치로 간단한 켜기/끄기 설정
- 중요 설정 변경 시 확인 대화상자
- 설정 검색 기능으로 빠른 접근
- 설정 프로필 저장 및 불러오기
- 모든 설정 초기화 옵션 (안전장치 포함)
## 6. 마이크로인터랙션 전략
마이크로인터랙션은 사용자 경험의 감성적 측면을 강화하고, 앱 사용의 즐거움을 높이는 중요한 요소입니다.
### 6.1 피드백 애니메이션
- **지출 입력 완료**: 저장 버튼 클릭 시 성공적인 저장을 나타내는 체크 마크 애니메이션
- **한도 임계값 도달**: 한도의 75%, 90% 도달 시 시각적 경고 애니메이션
- **목표 달성**: 저축 목표 달성 시 축하 애니메이션 및 색종이 효과
- **데이터 로딩**: 스켈레톤 로딩 상태로 데이터 로드 진행 상황 표시
- **오류 발생**: 부드러운 흔들림 애니메이션으로 오류 상태 표시
### 6.2 전환 효과
- **화면 전환**: 자연스러운 슬라이드 또는 페이드 전환 효과
- **모달 표시**: 배경 흐림 효과와 함께 모달이 부드럽게 나타남
- **목록 항목 추가/삭제**: 항목이 추가되거나 삭제될 때 부드러운 확장/축소 효과
- **탭 전환**: 탭 간 전환 시 콘텐츠가 자연스럽게 전환되는 효과
- **카드 확장/축소**: 카드 탭 시 부드럽게 확장되어 상세 정보 표시
### 6.3 햅틱 피드백
- **중요 작업 완료**: 지출 저장, 목표 달성 등 중요 작업 완료 시 긍정적 햅틱 피드백
- **경고 상황**: 한도 초과, 오류 발생 등 주의가 필요한 상황에서 경고성 햅틱 피드백
- **상호작용 확인**: 버튼 탭, 슬라이더 조정 등 사용자 입력 확인을 위한 미세한 햅틱 피드백
- **진행 상태 변화**: 목표 진행률이 10% 단위로 증가할 때마다 성취감을 주는 햅틱 피드백
- **알림 수신**: 중요도에 따라 다른 패턴의 햅틱 피드백으로 알림 구분
## 7. 접근성 전략
모든 사용자가 앱을 효과적으로 사용할 수 있도록 포괄적인 접근성 전략을 구현합니다.
### 7.1 시각적 접근성
- **고대비 모드**: 시각 장애가 있는 사용자를 위한 고대비 색상 테마
- **텍스트 크기 조정**: 시스템 설정에 반응하는 동적 텍스트 크기
- **색상 독립적 정보 전달**: 색맹/색약 사용자를 위해 색상에만 의존하지 않는 정보 전달
- **스크린 리더 지원**: 모든 UI 요소에 적절한 접근성 레이블 제공
- **충분한 터치 타겟**: 최소 44x44pt 크기의 터치 영역으로 정확한 조작 지원
### 7.2 인지적 접근성
- **명확한 언어**: 전문 용어 대신 이해하기 쉬운 일상 언어 사용
- **일관된 패턴**: 앱 전체에 걸쳐 일관된 UI 패턴 및 상호작용 방식 유지
- **단계적 복잡성**: 복잡한 작업을 관리 가능한 단계로 분할
- **오류 복구**: 실수를 쉽게 복구할 수 있는 방법 제공
- **도움말 및 툴팁**: 컨텍스트에 맞는 도움말 및 설명 제공
### 7.3 운동 능력 접근성
- **제스처 대안**: 복잡한 제스처에 대한 대체 상호작용 방법 제공
- **조정 가능한 타이밍**: 시간 제한이 있는 상호작용의 시간 조정 가능
- **최소한의 입력**: 반복적인 입력을 최소화하는 설계
- **음성 입력**: 텍스트 입력의 대안으로 음성 입력 지원 (향후 기능)
- **키보드 접근성**: 외부 키보드 사용 시 완전한 기능 접근성 보장
## 8. 사용자 경험 측정 및 개선
지속적인 UX 개선을 위한 측정 및 피드백 수집 전략을 수립합니다.
### 8.1 핵심 UX 지표
- **작업 완료율**: 사용자가 주요 작업(지출 입력, 예산 설정 등)을 성공적으로 완료하는 비율
- **작업 완료 시간**: 주요 작업 완료에 소요되는 평균 시간
- **오류율**: 사용자가 경험하는 오류 빈도
- **사용자 유지율**: 일일, 주간, 월간 활성 사용자 비율
- **사용자 만족도**: NPS(Net Promoter Score) 및 사용자 만족도 설문 결과
### 8.2 데이터 수집 방법
- **인앱 분석**: 사용자 행동 및 상호작용 패턴 추적
- **히트맵 및 세션 녹화**: 사용자 상호작용의 시각적 분석 (개인정보 보호 준수)
- **인앱 피드백**: 간단한 인앱 설문 및 피드백 메커니즘
- **사용성 테스트**: 정기적인 사용성 테스트 세션
- **앱스토어 리뷰 분석**: 사용자 리뷰 및 평점 분석
### 8.3 지속적 개선 프로세스
- **정기적 UX 감사**: 분기별 UX 감사를 통한 개선 영역 식별
- **A/B 테스트**: 주요 UX 변경사항에 대한 A/B 테스트
- **사용자 피드백 루프**: 사용자 피드백 수집, 분석, 구현의 지속적 순환
- **UX 개선 로드맵**: 우선순위가 지정된 UX 개선 계획 유지
- **경쟁 분석**: 경쟁 앱의 UX 모니터링 및 벤치마킹
## 9. 결론
적자 탈출 가계부의 사용자 경험 전략은 사용자가 재정 관리를 쉽고, 효과적이며, 지속 가능하게 할 수 있도록 설계되었습니다. 단순함, 투명성, 통찰력, 동기부여, 개인화라는 핵심 원칙을 바탕으로, 사용자의 재정적 웰빙을 지원하는 직관적이고 보람 있는 경험을 제공하는 것을 목표로 합니다.
이 전략은 고정된 것이 아니라, 사용자 피드백과 행동 데이터를 바탕으로 지속적으로 발전하고 개선될 것입니다. 사용자의 필요와 기대가 변화함에 따라, 우리의 UX 전략도 함께 진화할 것입니다.

View File

@@ -0,0 +1,118 @@
# 적자 탈출 가계부 - 주요 사용 시나리오
## 시나리오 1: 월간 카드 한도 설정 및 관리
### 사용자: 김미영 (32세, 여성, 직장인)
#### 배경
김미영은 매달 급여 350만원을 받는 직장인입니다. 최근 몇 개월간 신용카드 사용이 늘어 매달 말에 카드 대금이 예상보다 많이 나와 재정적 스트레스를 느끼고 있습니다. 이번 달부터는 카드 사용을 체계적으로 관리하기로 결심했습니다.
#### 시나리오 흐름
1. **앱 설치 및 가입**
- 미영은 앱스토어에서 '적자 탈출 가계부' 앱을 검색하여 설치합니다.
- 이메일과 기본 정보로 간단하게 회원가입을 완료합니다.
2. **카드 정보 등록**
- 미영은 자주 사용하는 신용카드 정보(카드명, 결제일)를 등록합니다.
- 보안을 위해 카드 번호는 일부만 입력합니다.
3. **월간 한도 설정**
- 미영은 이번 달 카드 사용 한도를 설정합니다.
- 월 급여 350만원 중 고정 지출(월세, 공과금 등)을 제외한 금액을 고려하여 카드 사용 한도를 150만원으로 설정합니다.
- 식비, 교통비, 쇼핑, 문화생활 등 카테고리별 세부 한도도 설정합니다.
4. **일상적인 사용**
- 점심 식사 후 카페에서 커피를 마시고 12,000원을 카드로 결제합니다.
- 앱에 접속하여 지출 내역을 '식비' 카테고리로 간단히 기록합니다.
- 대시보드에서 현재까지 사용한 금액(48만원)과 남은 한도(102만원)를 한눈에 확인합니다.
5. **한도 접근 알림**
- 월 중반, 쇼핑 카테고리의 한도(30만원)의 80%에 도달했을 때 앱에서 알림을 받습니다.
- 미영은 알림을 확인하고 이번 달 남은 기간 동안 쇼핑을 자제하기로 결정합니다.
6. **월말 결산**
- 월말에 미영은 앱에서 이번 달 지출 분석 리포트를 확인합니다.
- 카테고리별 지출 비율과 전월 대비 변화를 확인하고, 다음 달 한도를 조정할 계획을 세웁니다.
#### 결과
미영은 앱을 통해 카드 사용을 실시간으로 추적하고 한도를 관리함으로써, 이전보다 20% 적은 금액을 카드로 사용하게 되었습니다. 예상치 못한 과다 청구 없이 계획된 범위 내에서 지출하게 되어 재정적 스트레스가 크게 줄었습니다.
---
## 시나리오 2: 충동 구매 방지를 위한 실시간 알림
### 사용자: 박지훈 (23세, 남성, 대학생)
#### 배경
박지훈은 아르바이트와 용돈으로 월 120만원의 수입이 있는 대학생입니다. 온라인 쇼핑과 배달 앱 사용이 잦아 종종 계획에 없던 지출이 발생하고, 월말에는 항상 돈이 부족한 상황입니다. 특히 친구들과 어울릴 때 충동적으로 카드를 사용하는 습관이 있습니다.
#### 시나리오 흐름
1. **앱 설정**
- 지훈은 친구의 추천으로 '적자 탈출 가계부' 앱을 설치합니다.
- 학생 신분임을 고려하여 월 카드 사용 한도를 60만원으로 설정합니다.
- 특히 '엔터테인먼트' 카테고리에 15만원, '식비(배달음식)' 카테고리에 20만원의 한도를 설정합니다.
2. **실시간 알림 설정**
- 지훈은 충동 구매를 방지하기 위해 다음과 같은 알림을 설정합니다:
- 하루 지출이 2만원을 초과할 경우
- 특정 카테고리 한도의 70% 도달 시
- 주말 저녁(충동 구매가 잦은 시간대)에 카드 사용 전 확인 알림
3. **일상적인 사용**
- 수업 후 친구들과 만나 저녁 식사와 영화 관람을 계획합니다.
- 식사 비용 15,000원을 결제하려는 순간, 앱에서 "오늘 지출이 이미 18,000원 발생했습니다. 추가 지출 시 일일 한도를 초과합니다."라는 알림을 받습니다.
- 지훈은 알림을 확인하고 더 저렴한 메뉴로 변경하여 주문합니다.
4. **충동 구매 상황**
- 주말 저녁, 온라인 쇼핑몰에서 세일 중인 옷을 발견하고 구매하려고 합니다.
- 결제 직전, 앱에서 "엔터테인먼트 카테고리 한도의 85%를 사용했습니다. 신중한 소비를 권장합니다."라는 알림을 받습니다.
- 지훈은 잠시 생각한 후, 정말 필요한 물건인지 재고하고 구매를 다음 달로 미루기로 결정합니다.
5. **주간 리포트 확인**
- 일요일 저녁, 지훈은 앱에서 이번 주 지출 요약 리포트를 확인합니다.
- 지난주보다 배달음식 지출이 30% 감소했음을 확인하고 만족감을 느낍니다.
- 절약한 금액을 학자금 대출 이자 납부를 위한 저축 목표에 할당합니다.
#### 결과
지훈은 앱의 실시간 알림 기능을 통해 충동 구매를 크게 줄일 수 있었습니다. 특히 소비 결정을 내리기 전에 현재 재정 상태를 상기시켜주는 알림이 효과적이었습니다. 3개월 사용 후, 월 평균 15만원을 추가로 저축할 수 있게 되었습니다.
---
## 시나리오 3: 부부 공동 카드 관리
### 사용자: 이준호 (35세, 남성, IT 개발자) & 김수진 (33세, 여성, 마케터)
#### 배경
이준호와 김수진은 결혼 2년차 맞벌이 부부입니다. 두 사람 모두 각자의 신용카드와 함께 공동 카드도 사용하고 있어 지출 관리가 복잡합니다. 특히 누가 얼마나 사용했는지 실시간으로 파악하기 어려워 종종 예상보다 많은 카드 대금이 청구되어 갈등이 발생하곤 합니다.
#### 시나리오 흐름
1. **가족 계정 설정**
- 준호가 '적자 탈출 가계부' 앱을 설치하고 가족 계정을 생성합니다.
- 수진을 가족 구성원으로 초대하여 두 사람이 공동으로 앱을 사용할 수 있도록 설정합니다.
- 개인 카드와 공동 카드를 모두 등록하고, 공동 카드의 월 사용 한도를 200만원으로 설정합니다.
2. **카드별 사용자 지정**
- 공동 카드에 대해 준호와 수진 모두 사용자로 지정합니다.
- 각자의 개인 카드는 해당 소유자만 관리할 수 있도록 설정합니다.
- 공동 카드의 카테고리별 한도를 설정합니다: 식비(80만원), 생활용품(50만원), 교통비(30만원), 기타(40만원)
3. **일상적인 사용**
- 준호가 퇴근길에 공동 카드로 마트에서 장을 봐 65,000원을 결제합니다.
- 앱에 지출을 '생활용품' 카테고리로 기록합니다.
- 수진은 실시간으로 준호의 지출 내역을 확인하고, 자신이 계획했던 생활용품 구매를 조정합니다.
4. **한도 관리**
- 월 중반, 식비 카테고리가 한도의 75%에 도달했다는 알림을 두 사람 모두 받습니다.
- 부부는 앱 내 채팅 기능을 통해 남은 기간 동안의 식비 계획을 논의합니다.
- 외식 횟수를 줄이고 집에서 식사를 더 자주 하기로 결정합니다.
5. **월말 결산 및 계획**
- 월말에 부부는 함께 앱에서 이번 달 지출 분석을 검토합니다.
- 공동 카드 사용 내역을 카테고리별, 사용자별로 확인합니다.
- 다음 달 예상 지출(차량 보험료 갱신)을 고려하여 카테고리별 한도를 조정합니다.
#### 결과
준호와 수진은 앱을 통해 공동 카드 사용 내역을 실시간으로 공유하고 관리함으로써, 예상치 못한 과다 지출을 방지할 수 있었습니다. 특히 서로의 지출을 투명하게 확인할 수 있어 재정 관련 갈등이 크게 줄었고, 매달 100만원 이상을 안정적으로 저축할 수 있게 되었습니다.