SwiftUI 가계부 앱 개발기 6편 – 통계 화면 구성: 월별 그래프 및 유형별 정리

이번 글에서는 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) 지원을 통한 글로벌 대응 전략을 소개합니다.

시리즈 목록