SwiftUI NavigationTitle 왼쪽 정렬 구현 방법 (iOS)

SwiftUI NavigationTitle 왼쪽 정렬 구현 방법 (iOS)

SwiftUI에서 NavigationStack이나 NavigationView를 사용할 때 상단 제목은 보통 navigationTitle로 설정한다. 그런데 기본 navigationTitle은 원하는 형태로 자유롭게 정렬하기가 어렵다.

특히 iOS에서 inline 타이틀은 가운데 정렬처럼 보이고, large title은 기본적으로 leading 방향으로 보이지만 디자인에 따라 “항상 왼쪽 정렬된 커스텀 타이틀”이 필요할 때가 있다.

이 글에서는 SwiftUI에서 NavigationTitle을 왼쪽 정렬처럼 구현하는 방법을 정리한다.

기본 navigationTitle 동작 방식

SwiftUI에서 가장 기본적인 타이틀 설정은 다음과 같다.

NavigationStack {
    Text("Home View")
        .navigationTitle("홈")
}

여기서 display mode를 inline으로 주면 다음처럼 작성한다.

NavigationStack {
    Text("Home View")
        .navigationTitle("홈")
        .navigationBarTitleDisplayMode(.inline)
}

하지만 이 방식은 기본 시스템 타이틀을 사용하는 것이기 때문에 정렬을 세밀하게 직접 제어하기 어렵다.

왼쪽 정렬이 바로 안 되는 이유

SwiftUI의 navigationTitle은 시스템 네비게이션 바 동작을 따르기 때문에, 텍스트 정렬을 일반 Text처럼 자유롭게 바꾸는 방식이 아니다.

즉, 아래처럼 textAlignment를 주는 방식은 적용되지 않는다.

.navigationTitle("홈")
// .multilineTextAlignment(.leading) 같은 식으로 제어 불가

그래서 “진짜 navigationTitle을 왼쪽 정렬”한다기보다, 기본 타이틀을 숨기고 leading 위치에 커스텀 뷰를 올리는 방식으로 구현하는 경우가 많다.

가장 많이 쓰는 방법: toolbar의 topBarLeading 사용

실무에서 가장 많이 쓰는 방법은 기본 제목을 비워두거나 최소화하고, toolbar의 leading 위치에 직접 Text를 넣는 것이다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("Home View")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .topBarLeading) {
                        Text("홈")
                            .font(.headline)
                    }
                }
        }
    }
}

이렇게 하면 상단 왼쪽 영역에 타이틀처럼 보이는 텍스트를 직접 배치할 수 있다.

iOS 버전에 따라 leading placement 다르게 보기

SwiftUI에서는 toolbar placement가 플랫폼과 iOS 버전에 따라 조금씩 다르게 보일 수 있다. 최근 코드에서는 topBarLeading을 많이 사용하고, 이전 예제에서는 navigationBarLeading을 사용하는 경우도 있다.

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Text("설정")
            .font(.headline)
    }
}

기본적으로 최신 SwiftUI 코드에서는 topBarLeading 쪽이 더 자연스럽다.

기본 타이틀과 겹치지 않게 처리하기

커스텀 leading 타이틀을 넣었는데 기본 navigationTitle까지 같이 쓰면 중복되어 보일 수 있다. 그래서 아래처럼 기본 타이틀은 비워두고 inline 모드만 유지하는 식으로 정리하는 경우가 많다.

NavigationStack {
    List {
        Text("Item 1")
        Text("Item 2")
    }
    .navigationTitle("")
    .navigationBarTitleDisplayMode(.inline)
    .toolbar {
        ToolbarItem(placement: .topBarLeading) {
            Text("목록")
                .font(.headline)
        }
    }
}

이 방식이 가장 깔끔하다.

버튼과 같이 사용하는 패턴

실제 프로젝트에서는 왼쪽 정렬된 제목 옆이나 반대편에 버튼을 함께 배치하는 경우가 많다. 예를 들어 설정 화면, 편집 화면, 상세 화면에서 자주 사용된다.

NavigationStack {
    Text("Detail View")
        .navigationTitle("")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                Text("상세")
                    .font(.headline)
            }

            ToolbarItem(placement: .topBarTrailing) {
                Button("편집") {
                    print("편집")
                }
            }
        }
}

이렇게 하면 왼쪽에는 제목, 오른쪽에는 액션 버튼이 놓이는 구조를 만들 수 있다.

아이콘과 함께 왼쪽 타이틀 만들기

텍스트만 두지 않고 아이콘과 조합해서 커스텀 타이틀을 만들 수도 있다.

ToolbarItem(placement: .topBarLeading) {
    HStack(spacing: 6) {
        Image(systemName: "setting")
        Text("설정")
            .font(.headline)
    }
}

이 패턴은 커스텀 네비게이션 바 느낌을 줄 때 유용하다.

large title과의 차이점

large title은 기본적으로 화면 상단에서 leading 느낌으로 보인다. 하지만 디자인적으로 완전히 같은 것은 아니다.

• large title: 시스템이 관리하는 큰 제목
• inline + toolbar leading: 커스텀 왼쪽 제목

즉, 단순히 왼쪽에 크게 보이는 제목이 필요하면 large title을 써도 되지만, 정확한 위치나 스타일을 맞추고 싶다면 toolbar 방식이 더 적합하다.

실제 프로젝트에서 자주 쓰는 형태

다음과 같은 화면에서 이 방식이 많이 쓰인다.

• 설정 화면
• 목록 화면
• 검색 화면
• 상세 화면
• 커스텀 디자인이 중요한 메인 화면

특히 기본 시스템 타이틀보다 브랜드 폰트나 커스텀 컬러를 적용해야 할 때 유용하다.

주의할 점

1. 기본 뒤로가기 버튼과 간격 확인

leading 위치에는 시스템 back 버튼도 함께 들어올 수 있다. Push된 상세 화면에서는 왼쪽 공간이 좁아질 수 있으므로, 텍스트가 너무 길면 겹쳐 보일 수 있다.

2. 너무 큰 커스텀 뷰는 피하기

toolbar 영역은 높이가 제한적이기 때문에 큰 VStack이나 복잡한 커스텀 뷰를 넣으면 레이아웃이 어색해질 수 있다.

3. navigationTitle과 중복 사용 주의

기본 타이틀과 커스텀 타이틀을 동시에 쓰면 UI가 어색해질 수 있다. 하나의 방식으로 통일하는 편이 좋다.

정리

• SwiftUI에는 navigationTitle을 직접 왼쪽 정렬하는 전용 API가 없다.
• inline 제목은 시스템 네비게이션 바 규칙을 따른다.
• 왼쪽 정렬처럼 만들려면 toolbar의 topBarLeading에 커스텀 Text를 넣는 방식이 가장 많이 쓰인다.
• 기본 navigationTitle과 중복되지 않게 비워두는 방식이 깔끔하다.

SwiftUI 관련 글

• SwiftUI NavigationStack 사용 방법 정리 (iOS 16+)
• SwiftUI List Separator 제거 방법 (iOS)
• SwiftUI Toggle 사이즈 조절 방법 (iOS)
• SwiftUI NavigationTitle 왼쪽 정렬 구현 방법 (iOS)
• SwiftUI TabView 커스텀 탭바 만들기 (iOS)