108 lines
3.5 KiB
Markdown
108 lines
3.5 KiB
Markdown
# Subscription Manager - UI/UX 디자인 가이드
|
|
|
|
## 디자인 철학
|
|
Subscription Manager는 미니멀하고 직관적인 디자인을 추구합니다. 라인 아트 스타일의 시각적 요소를 활용하여 깔끔하고 현대적인 느낌을 줍니다. 사용자가 복잡한 구독 정보를 쉽게 이해하고 관리할 수 있도록 명확한 시각적 계층 구조를 제공합니다.
|
|
|
|
## 색상 팔레트
|
|
- **주 색상**: #3A86FF (밝은 파란색) - 브랜드 아이덴티티
|
|
- **보조 색상**: #8338EC (보라색) - 강조 요소
|
|
- **중립 색상**:
|
|
- #FFFFFF (흰색) - 배경 (라이트 모드)
|
|
- #121212 (진한 회색) - 배경 (다크 모드)
|
|
- #F5F5F5 (연한 회색) - 카드 배경 (라이트 모드)
|
|
- #2A2A2A (중간 회색) - 카드 배경 (다크 모드)
|
|
- **기능 색상**:
|
|
- #FF006E (핑크) - 경고/삭제
|
|
- #38B000 (녹색) - 성공/추가
|
|
- #FFBE0B (노란색) - 알림/주의
|
|
|
|
## 타이포그래피
|
|
- **기본 폰트**: Roboto (Android), San Francisco (iOS)
|
|
- **제목**: 18-24pt, 볼드
|
|
- **부제목**: 16pt, 미디엄
|
|
- **본문**: 14pt, 레귤러
|
|
- **작은 텍스트**: 12pt, 레귤러
|
|
|
|
## 아이콘 스타일
|
|
- 라인 아트 스타일의 심플한 아이콘
|
|
- 2px 스트로크 두께
|
|
- 둥근 모서리
|
|
- 일관된 크기와 패딩
|
|
|
|
## 주요 화면 구성
|
|
|
|
### 1. 홈 화면 (대시보드)
|
|
- 상단: 총 월간 구독 비용 요약
|
|
- 중앙: 다가오는 결제 타임라인
|
|
- 하단: 카테고리별 비용 분포 차트
|
|
- 플로팅 액션 버튼: 새 구독 추가
|
|
|
|
### 2. 구독 목록 화면
|
|
- 구독 서비스 카드 리스트
|
|
- 각 카드: 서비스 로고, 이름, 비용, 다음 결제일
|
|
- 정렬 옵션: 가격순, 이름순, 다음 결제일순
|
|
- 필터 옵션: 카테고리별
|
|
|
|
### 3. 구독 상세 화면
|
|
- 서비스 정보 (로고, 이름, 설명)
|
|
- 비용 정보 (금액, 결제 주기)
|
|
- 결제 일정 (다음 결제일, 이전 결제 내역)
|
|
- 사용량 통계 (가능한 경우)
|
|
- 편집/삭제 버튼
|
|
|
|
### 4. 구독 추가/편집 화면
|
|
- 서비스 선택 (미리 정의된 서비스 또는 사용자 정의)
|
|
- 비용 입력
|
|
- 결제 주기 선택
|
|
- 시작일 선택
|
|
- 카테고리 선택
|
|
- 메모 추가 옵션
|
|
|
|
### 5. 분석 화면
|
|
- 시간별 비용 추이 그래프
|
|
- 카테고리별 비용 분포 파이 차트
|
|
- 가장 비용이 많이 드는 서비스 순위
|
|
- 연간 총 비용 예측
|
|
|
|
### 6. 설정 화면
|
|
- 언어 설정 (영어/한국어)
|
|
- 통화 설정
|
|
- 알림 설정
|
|
- 테마 설정 (라이트/다크 모드)
|
|
- 앱 정보 및 피드백
|
|
|
|
## 사용자 흐름
|
|
|
|
### 초기 설정 흐름
|
|
1. 앱 설치 후 첫 실행
|
|
2. 언어 선택 화면
|
|
3. 간단한 온보딩 (3-4 화면)
|
|
4. 첫 구독 추가 안내
|
|
|
|
### 구독 추가 흐름
|
|
1. 홈 화면에서 '+' 버튼 클릭
|
|
2. 서비스 선택 (검색 또는 목록에서 선택)
|
|
3. 구독 정보 입력
|
|
4. 저장 및 확인
|
|
|
|
### 알림 흐름
|
|
1. 결제 예정 알림 수신
|
|
2. 알림 클릭
|
|
3. 해당 구독 상세 화면으로 이동
|
|
|
|
## 반응형 디자인
|
|
- 다양한 화면 크기에 적응하는 레이아웃
|
|
- 태블릿 지원을 위한 분할 화면 레이아웃
|
|
- 향후 웹 버전을 위한 확장 가능한 디자인
|
|
|
|
## 접근성
|
|
- 고대비 모드 지원
|
|
- 스크린 리더 호환성
|
|
- 충분한 터치 타겟 크기 (최소 44x44pt)
|
|
- 색상만으로 정보를 구분하지 않음
|
|
|
|
## 애니메이션 및 전환
|
|
- 부드러운 화면 전환 (페이드, 슬라이드)
|
|
- 미묘한 피드백 애니메이션
|
|
- 데이터 로딩 상태를 위한 스켈레톤 화면
|
|
- 카드 확장/축소 애니메이션 |