SwiftUI 가계부 앱 개발기 9편 – UI 개선 및 사용자 경험(UX) 향상 전략

이번 글에서는 SwiftUI 기반 가계부 앱에서 사용자 경험(UX)을 향상시키기 위해 적용한 UI 디자인 전략과 개선사항을 정리합니다.
iOS 사용자에게 익숙한 인터페이스, 깔끔한 레이아웃, 반응형 동작을 통해 만족도를 높였습니다.

1. 통일된 UI 스타일 가이드 적용

앱 전반에 걸쳐 폰트, 색상, 마진, 코너 반경 등의 디자인 요소를 통일했습니다.

적용 사례:

  • Rounded Font와 15~18pt 사이의 가독성 좋은 텍스트 크기
  • padding(.horizontal) 및 padding(.vertical)로 요소 간 간격 조정
  • 카드 스타일 레이아웃에 cornerRadius, shadow, background 적용

코드 예시:

swift
Text("카테고리 관리")
    .font(.system(size: 15, weight: .semibold, design: .rounded))
    .padding(.top, 8)

2. Navigation 구조 vs 모달 구조 통일

기존에는 어떤 화면은 NavigationLink, 어떤 화면은 .sheet로 띄워 화면 전환 방식에 일관성이 없었습니다.

이를 다음처럼 정리했습니다:

  • 항목 추가 화면 → 모달(.sheet)
  • 카테고리/카드 관리 → .sheet (모달)로 변경
  • 설정 → Navigation 방식 유지

이로써 뒤로가기 위치, 닫기 버튼, 제목 위치 등 UI 흐름이 일관되게 유지됩니다.

3. iOS 스타일 요소 적극 활용

iOS 사용자에게 익숙한 컴포넌트를 적극 활용했습니다.

주요 적용 요소:

  • SegmentedPicker: 수입/지출/전체 유형 필터
  • Form & Section: 설정화면, 필터 설정 화면
  • Toggle, DatePicker: 앱 잠금, 기간 필터

이로 인해 별도의 설명 없이도 사용자가 쉽게 앱 기능을 익히고 사용할 수 있습니다.

4. 다크 모드 및 시스템 테마 대응

사용자의 시스템 설정에 따라 자동으로 Light / Dark 모드가 적용되도록 설정했습니다.

  • SwiftUI의 .preferredColorScheme 적용
  • @AppStorage(“colorScheme”)를 활용한 사용자 설정 저장

5. 버튼 & 인터랙션 피드백 개선

버튼 클릭 시 색상 변화 및 햅틱 피드백을 적용해 조작감을 높였습니다.

Button("추가") {
    UIImpactFeedbackGenerator(style: .light).impactOccurred()
    // 추가 처리
}
  • @AppStorage(“isHapticsEnabled”) 설정 저장
  • 설정에서 햅틱 on/off 가능

6. 레이아웃 반응성 개선 (iPhone / iPad 대응)

화면 크기에 따라 적절하게 콘텐츠를 정렬하고, 너비 기준 동작 분기를 도입했습니다.

  • .frame(maxWidth: .infinity, alignment: .leading)
  • .horizontalSizeClass 활용한 iPad 대응

7. 마무리

이번 편에서는 SwiftUI 가계부 앱에서 UI 디자인의 일관성, 사용성 개선, iOS 친화적인 구성 방식 등을 통해

사용자 경험을 한층 향상시키는 전략을 소개했습니다.

이로써 SwiftUI 기반 가계부 앱 개발기는 마무리됩니다.

이 시리즈가 SwiftUI 앱 개발 및 배포를 계획 중인 분들에게 유용한 가이드가 되었기를 바랍니다.

시리즈 목록