SwiftUI TabView 커스터마이징 완벽 가이드 (높이, 디자인, 상태 유지)

SwiftUI TabView 커스터마이징 완벽 가이드 (높이, 디자인, 상태 유지)

SwiftUI에서 TabView는 간단하게 사용할 수 있지만, 실무에서는 거의 반드시 커스터마이징이 필요합니다.

특히 아래 문제를 많이 겪게 됩니다.

• TabBar 높이 변경이 안됨
• 디자인 커스터마이징 어려움
• 탭 전환 시 상태 초기화

이 글에서는 TabView를 실무에서 사용하는 방식으로 정리합니다.

---

1. 기본 TabView 구조

TabView {
    Text("Home")
        .tabItem {
            Label("Home", systemImage: "house")
        }

    Text("Profile")
        .tabItem {
            Label("Profile", systemImage: "person")
        }
}

👉 기본은 간단하지만 커스터마이징 한계가 있음

---

2. Tab 선택 상태 관리

@State private var selectedTab = 0

TabView(selection: $selectedTab) {
    Text("Home")
        .tag(0)

    Text("Profile")
        .tag(1)
}

👉 상태 기반 제어 가능

---

3. 탭 전환 시 상태 유지

문제:

• 탭 이동 시 View 초기화

해결 방법

• View를 분리
• @StateObject 사용

struct HomeView: View {
    @StateObject private var vm = ViewModel()
}

👉 상태 유지 가능

---

4. TabBar 디자인 커스터마이징

기본 TabView는 제한이 많기 때문에 실무에서는 커스텀 TabBar를 사용합니다.

구조

VStack(spacing: 0) {
    contentView

    HStack {
        Button("Home") { selectedTab = 0 }
        Button("Profile") { selectedTab = 1 }
    }
}

👉 완전한 커스터마이징 가능

---

5. 높이 변경 방법

기본 TabView는 높이 변경이 어렵습니다.

해결

• 커스텀 TabBar 사용
• safeAreaInset 활용

.safeAreaInset(edge: .bottom) {
    CustomTabBar()
}

---

6. 가운데 버튼 (FAB) 구현

ZStack {
    TabView { ... }

    VStack {
        Spacer()
        Button("+") {
        }
        .offset(y: -20)
    }
}

👉 Floating Button 구현

---

7. UIKit Appearance 커스터마이징

UITabBar.appearance().backgroundColor = UIColor.white

👉 기본 스타일 변경 가능

---

8. 실무에서 자주 하는 실수

• 기본 TabView로 모든 것을 해결하려고 함
• 상태 관리 없이 View 생성
• Navigation과 혼합 구조 꼬임

---

9. 실무 추천 구조

• NavigationStack + TabView 분리
• Router 기반 관리
• Custom TabBar 사용

---

10. 결론

SwiftUI TabView의 핵심은 다음입니다.

기본은 간단, 실무는 커스텀

• 상태 관리 필수
• 디자인은 커스텀
• 구조는 분리

이 구조를 이해하면 복잡한 탭 UI도 안정적으로 구현할 수 있습니다.

---

다음 글에서는 SwiftUI NavigationBar 커스터마이징 (iOS 26 대응 포함)을 다루면 UI 구조가 완전히 완성됩니다.