SwiftUI 가계부 앱 개발기 3편 – 필터 기능 구현

가계부 앱을 사용할 때 사용자는 원하는 내역만 빠르게 확인하길 원합니다.
이를 위해 우리는 SwiftUI 기반 필터 기능을 구현하여 유형(수입/지출/전체), 카테고리, 기간에 따라 데이터를 선별할 수 있도록 구성했습니다.

필터 기능의 핵심 목표

• 원하는 내역만 빠르게 탐색
• 다국어 대응 가능한 유연한 UI 구성
• 사용자 경험(UX)을 고려한 직관적 흐름

1. 유형 필터 (수입 / 지출 / 전체)

유형 필터는 사용자가 수입, 지출, 전체 중 하나를 선택할 수 있도록 합니다.

swift
Picker("유형", selection: $selectedType) {
   Text(NSLocalizedString("all", comment: "전체")).tag("all")
   Text(NSLocalizedString("income", comment: "수입")).tag("income")
   Text(NSLocalizedString("expense", comment: "지출")).tag("expense")
}

.pickerStyle(.segmented)

이 Picker는 SegmentedPickerStyle을 사용해 iOS 스타일의 탭 인터페이스를 제공합니다.

2. 카테고리 필터

유형 필터에 따라 필터링되는 카테고리를 동적으로 제공합니다.

let filteredCategories = fetchedCategories.filter { $0.type == selectedType }

• selectedType이 바뀔 때마다 카테고리 목록도 자동으로 갱신됩니다.
• 사용자가 직접 추가한 수입/지출 카테고리도 연동됩니다.

카테고리는 기본적으로 전체 항목이 포함되며, 사용자 추가 항목도 함께 나열됩니다.

3. 기간 필터 (오늘 / 어제 / 일주일 / 한달 / 사용자 지정)

기간 필터는 최근 사용 내역을 조회할 수 있게 도와주는 핵심 기능입니다.

Picker(selection: $selectedDate) {
   Text("전체").tag("all")
   Text("오늘").tag("today")
   Text("어제").tag("yesterday")
   Text("1주일").tag("week")
   Text("한달").tag("month")
   Text("직접 선택").tag("custom")
}

• 사용자가 직접 선택을 누르면 DatePicker를 통해 시작/종료 날짜를 선택할 수 있습니다.
• 날짜 선택은 @Binding 형태로 외부에서도 접근 가능하도록 처리했습니다.

4. 다국어 처리 및 초기값 설정

필터 항목은 NSLocalizedString을 사용하여 한국어/영어 등의 다국어에 대응하도록 구성했습니다.

if selectedDate.isEmpty {
   selectedDate = NSLocalizedString("all", comment: "전체")
}
if selectedAllCategory.isEmpty {
   selectedAllCategory = NSLocalizedString("all", comment: "전체")
}

• 필터 설정 화면 진입 시 초기값이 설정되지 않았다면 전체로 초기화됩니다.
• 다국어 상황에서도 내부 로직은 income, expense, all 등 내부 고정 키값을 기준으로 처리됩니다.

5. 마무리

필터 기능은 단순히 보기 편한 UI를 넘어서 사용자 데이터를 의미 있게 분류하고 탐색하는 핵심 도구입니다.

SwiftUI의 바인딩과 상태 관리, CoreData 연동을 적절히 활용함으로써 사용자 맞춤형 탐색 기능을 구현할 수 있습니다.

SwiftUI 가계부 앱 개발기 4편 – 카테고리 관리 기능 구현 에서는 필터와 연동된 카테고리 관리 기능 구현에 대해 다뤄보겠습니다.

시리즈 목록