# 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)
- 색상만으로 정보를 구분하지 않음

## 애니메이션 및 전환
- 부드러운 화면 전환 (페이드, 슬라이드)
- 미묘한 피드백 애니메이션
- 데이터 로딩 상태를 위한 스켈레톤 화면
- 카드 확장/축소 애니메이션