13 KiB
13 KiB
적자 탈출 가계부 UI/UX 설계
디자인 철학
'적자 탈출 가계부'의 UI/UX 설계는 다음과 같은 핵심 원칙을 기반으로 합니다:
- 단순성: 복잡한 재정 관리를 단순하고 직관적인 인터페이스로 제공
- 접근성: 재정 지식 수준에 관계없이 누구나 쉽게 사용할 수 있는 설계
- 동기부여: 사용자의 재정 개선을 위한 지속적인 동기부여 요소 포함
- 개인화: 사용자의 상황과 목표에 맞춘 개인화된 경험 제공
- 신뢰성: 재정 데이터의 정확성과 보안을 시각적으로 전달
브랜드 아이덴티티
색상 팔레트
주요 색상
- 주 색상(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 출시 후 사용자 피드백과 사용 패턴 분석을 통해 지속적으로 개선될 예정입니다. 특히 사용자의 지속적인 앱 사용과 재정 습관 개선을 위한 요소들을 강화해 나갈 계획입니다.