# 적자 탈출 가계부 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 출시 후 사용자 피드백과 사용 패턴 분석을 통해 지속적으로 개선될 예정입니다. 특히 사용자의 지속적인 앱 사용과 재정 습관 개선을 위한 요소들을 강화해 나갈 계획입니다.