IT

SwiftUI NavigationBar 커스터마이징 완벽 가이드 (iOS 26 Liquid 제거 포함)

초코모찌롤 2026. 4. 3. 10:08
반응형
SwiftUI NavigationBar 커스터마이징 완벽 가이드 (iOS 26 Liquid 제거 포함)

SwiftUI NavigationBar 커스터마이징 완벽 가이드 (iOS 26 Liquid 제거 포함)

SwiftUI NavigationBar는 기본 제공 기능만으로는 실무 요구사항을 만족시키기 어렵습니다.

특히 최근 iOS 26에서는 Liquid 스타일이 적용되면서 디자인 제어가 더욱 까다로워졌습니다.

이 글에서는 NavigationBar를 완전히 제어하는 방법을 정리합니다.


1. 기본 NavigationStack 구조


NavigationStack {
    Text("Hello")
        .navigationTitle("Title")
}

👉 기본 구조는 간단하지만 커스터마이징 한계 존재


2. NavigationBar 숨기기


.navigationBarHidden(true)
또는 (iOS 16+)

.toolbar(.hidden, for: .navigationBar)

👉 커스텀 네비게이션을 만들기 위한 첫 단계


3. iOS 26 Liquid 효과 제거

iOS 26에서는 NavigationBar가 반투명 / Liquid 스타일로 변경되었습니다.

해결 방법 (UIKit Appearance)


let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white
appearance.shadowColor = .clear

UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance

👉 완전히 불투명 스타일로 변경


4. 커스텀 NavigationBar 만들기

실무에서는 NavigationBar를 직접 구현하는 경우가 많습니다.


VStack(spacing: 0) {

    HStack {
        Button(action: {
        }) {
            Image(systemName: "chevron.left")
        }

        Spacer()

        Text("Title")

        Spacer()

        Image(systemName: "bell")
    }
    .padding()
    .background(Color.white)

    Divider()

    contentView
}

👉 완전한 UI 제어 가능


5. SafeArea 대응


.safeAreaInset(edge: .top) {
    CustomNavigationBar()
}

👉 상단 고정 가능


6. 뒤로가기 버튼 커스터마이징


.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button(action: {
        }) {
            Image(systemName: "chevron.left")
        }
    }
}

👉 기본 버튼 대체 가능


7. 타이틀 정렬 문제

SwiftUI 기본 NavigationTitle은 중앙 정렬입니다.

해결

  • 커스텀 NavigationBar 사용
  • HStack으로 직접 구성

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

  • 기본 NavigationBar에 억지 커스터마이징
  • SafeArea 고려 없이 overlay 사용
  • NavigationStack과 상태 분리 안됨

9. 실무 추천 구조

  • NavigationStack + Custom NavigationBar
  • Router 기반 화면 관리
  • SafeAreaInset으로 위치 제어

10. 결론

NavigationBar의 핵심은 다음입니다.

기본을 버리고 구조를 가져가라

  • 기본 NavigationBar → 제한적
  • Custom NavigationBar → 완전 제어

특히 iOS 26 이후에는 커스텀 구조가 사실상 필수입니다.


다음 글에서는 SwiftUI 전체 앱 구조 설계 (Router + Tab + Navigation 통합)를 다루면 실무 아키텍처까지 완성됩니다.

반응형