이번 글에서는 SwiftUI 가계부 앱에서 통계 시각화 화면을 구현하는 방법을 설명합니다.
사용자는 월별 수입/지출 변화를 확인하고, 유형별/카테고리별 분석을 통해 더 나은 재정 관리를 할 수 있습니다.
1. 통계 탭 구성 개요
하단 탭에서 접근 가능한 통계
화면은 다음과 같은 구조로 구성됩니다:
- 상단 세그먼트:
"그래프"
,"지출"
,"수입"
선택 - 그래프 보기: 막대형 그래프로 월별 수입/지출 표시
- 지출/수입 보기: 월별 카테고리별 합계 리스트
세그먼트 변경 시 각 콘텐츠가 동적으로 변경되도록 구성합니다.
2. ChartKit을 활용한 막대그래프
Charts 프레임워크를 활용하여 수입과 지출을 한 화면에 시각화합니다.
swift
Chart {
ForEach(sortedMonths, id: \.self) { month in
BarMark(
x: .value("Month", month),
y: .value("Amount", income[month] ?? 0)
)
.foregroundStyle(.green)
BarMark(
x: .value("Month", month),
y: .value("Amount", expense[month] ?? 0)
)
.foregroundStyle(.red)
}
}
.frame(height: 300)
- 초록색 막대: 수입
- 빨간색 막대: 지출
- Toggle을 통해 금액 표시 유무를 설정할 수 있음
3. 지출/수입 탭 – 카테고리별 월간 정리
통계 화면에서 지출/수입 탭으로 전환 시, 월별로 카테고리 항목과 총합을 List 형태로 표시합니다.
swift
List {
ForEach(sortedMonths, id: \.self) { month in
Section(header: Text("\(month) 수입/지출")) {
ForEach(monthlyTotals[month].keys.sorted(), id: \.self) { key in
HStack {
Text(key)
Spacer()
Text("₩\(monthlyTotals[month]![key]!, specifier: "%.0f")")
}
}
}
}
}
- 월별 그룹핑된 리스트
- 항목별 총액 표시
- 정렬 방식은 오름차순/내림차순 토글 가능
4. 통계와 필터 연동
기존 필터 기능에서 선택한 값(유형, 카테고리, 기간)은 통계 화면에도 적용됩니다.
- 선택된 기간에 해당하는 데이터만 통계에 포함
- 선택된 유형(수입/지출)에 따라 필터링
- 특정 카테고리만 골라서 분석 가능
이를 위해 @State 또는 @Binding을 통해 상호 연결되도록 구성합니다.
5. 사용자 경험을 고려한 UI 요소
- 스크롤 가능한 그래프
- 카테고리별 합계 강조
- 토글 버튼을 통한 데이터 표현 제어
- 세그먼트 컨트롤로 간편한 탭 전환
전체적으로 iOS 스타일을 유지하면서도 사용자가 직관적으로 재정 상태를 확인할 수 있도록 설계합니다.
6. 마무리
이번 편에서는 수입/지출 데이터를 활용한 시각적 통계 화면 구성과
사용자의 선택에 따라 유연하게 반응하는 데이터 필터링 구조를 설명했습니다.
SwiftUI 가계부 앱 개발기 7편 – 다국어(Localization) 지원: 한국어/영어 국제화 처리에서는 다국어(Localization) 지원을 통한 글로벌 대응 전략을 소개합니다.
시리즈 목록
- SwiftUI 가계부 앱 개발기 1편 – 프로젝트 생성과 폴더 구조 설계
- SwiftUI 가계부 앱 개발기 2편 – Core Data 모델 구성과 Entity 설계
- SwiftUI 가계부 앱 개발기 3편 – 필터 기능 구현
- SwiftUI 가계부 앱 개발기 4편 – 카테고리 관리 기능 구현
- SwiftUI 가계부 앱 개발기 5편 – 카드 관리 기능: 결제일 및 청구 주기 설정
- SwiftUI 가계부 앱 개발기 6편 – 통계 화면 구성: 월별 그래프 및 유형별 정리
- SwiftUI 가계부 앱 개발기 7편 – 다국어(Localization) 지원: 한국어/영어 국제화 처리
- SwiftUI 가계부 앱 개발기 8편 – iOS 앱 배포를 위한 설정: App Store 심사 준비
- SwiftUI 가계부 앱 개발기 9편 – UI 개선 및 사용자 경험(UX) 향상 전략