SwiftUI 전체 앱 구조 설계 (Router + Tab + Navigation 통합 아키텍처)

SwiftUI 전체 앱 구조 설계 (Router + Tab + Navigation 통합 아키텍처)

SwiftUI를 어느 정도 사용하다 보면 단순 View 구현을 넘어 앱 전체 구조 설계가 필요해집니다.

특히 아래 요소들이 동시에 등장하면 구조가 복잡해집니다.

• NavigationStack
• TabView
• 딥링크 / 푸시
• WebView 연동

이 글에서는 이 모든 것을 통합하는 실무 아키텍처를 정리합니다.

---

1. 핵심 개념

앱 구조의 핵심은 단 하나입니다.

모든 화면 이동을 "데이터(Route)"로 관리한다

---

2. Route 정의

enum Route: Hashable {
    case home
    case detail(id: Int)
    case web(url: URL)
    case setting
}

👉 모든 화면을 하나의 enum으로 관리

---

3. Router 설계

class Router: ObservableObject {
    @Published var path: [Route] = []
    @Published var selectedTab: Tab = .home

    func push(_ route: Route) {
        path.append(route)
    }

    func pop() {
        path.removeLast()
    }

    func popToRoot() {
        path.removeAll()
    }

    func switchTab(_ tab: Tab) {
        selectedTab = tab
        path.removeAll()
    }
}

---

4. Tab 정의

enum Tab {
    case home
    case profile
    case setting
}

👉 탭도 상태로 관리

---

5. Root 구조

struct RootView: View {
    @StateObject private var router = Router()

    var body: some View {
        NavigationStack(path: $router.path) {

            TabView(selection: $router.selectedTab) {

                HomeView()
                    .tag(Tab.home)

                ProfileView()
                    .tag(Tab.profile)

                SettingView()
                    .tag(Tab.setting)
            }

            .navigationDestination(for: Route.self) { route in
                switch route {
                case .detail(let id):
                    DetailView(id: id)
                case .web(let url):
                    WebView(url: url)
                default:
                    EmptyView()
                }
            }
        }
    }
}

👉 Navigation + Tab 통합

---

6. 딥링크 / 푸시 처리

func handleDeepLink(_ url: URL) {
    if url.path.contains("detail") {
        router.push(.detail(id: 1))
    }
}

func handlePush(_ data: [String: Any]) {
    if let urlString = data["url"] as? String,
       let url = URL(string: urlString) {
        router.push(.web(url: url))
    }
}

👉 외부 이벤트 → Route 변환

---

7. WebView 연동

Web → App 이동도 동일한 구조를 사용합니다.

router.push(.detail(id: 10))

👉 모든 흐름 통일

---

8. 구조 흐름 정리

1. 사용자 이벤트 발생
2. Route 생성
3. Router.push()
4. NavigationStack 반영

---

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

• Navigation과 Tab을 따로 관리
• View에서 직접 navigation 처리
• 딥링크 로직 분산

---

10. 실무 추천 구조

• Router 단일화
• Route enum 기반 설계
• 모든 이동을 Router로 통제

---

11. 결론

SwiftUI 앱 구조의 핵심은 다음입니다.

UI가 아니라 상태로 앱을 설계하라

• Navigation → 상태
• Tab → 상태
• 딥링크 → 상태

이 구조를 만들면 복잡한 앱도 안정적으로 유지할 수 있습니다.

---

다음 글에서는 SwiftUI + TCA 구조 설계 (실무 아키텍처 확장)를 다루면 고급 개발자 수준으로 확장할 수 있습니다.