3.5 KiB
3.5 KiB
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. 설정 화면
- 언어 설정 (영어/한국어)
- 통화 설정
- 알림 설정
- 테마 설정 (라이트/다크 모드)
- 앱 정보 및 피드백
사용자 흐름
초기 설정 흐름
- 앱 설치 후 첫 실행
- 언어 선택 화면
- 간단한 온보딩 (3-4 화면)
- 첫 구독 추가 안내
구독 추가 흐름
- 홈 화면에서 '+' 버튼 클릭
- 서비스 선택 (검색 또는 목록에서 선택)
- 구독 정보 입력
- 저장 및 확인
알림 흐름
- 결제 예정 알림 수신
- 알림 클릭
- 해당 구독 상세 화면으로 이동
반응형 디자인
- 다양한 화면 크기에 적응하는 레이아웃
- 태블릿 지원을 위한 분할 화면 레이아웃
- 향후 웹 버전을 위한 확장 가능한 디자인
접근성
- 고대비 모드 지원
- 스크린 리더 호환성
- 충분한 터치 타겟 크기 (최소 44x44pt)
- 색상만으로 정보를 구분하지 않음
애니메이션 및 전환
- 부드러운 화면 전환 (페이드, 슬라이드)
- 미묘한 피드백 애니메이션
- 데이터 로딩 상태를 위한 스켈레톤 화면
- 카드 확장/축소 애니메이션