iOS SwiftUI Preview와 UINavigationController

Preview와 UINavigationController 기본 개념

1. 기본 프리뷰 구성하기

프리뷰에서 기본 뷰 컨트롤러를 보여주는 방법을 알아보자.

#Preview { 
    AddNumberViewController() // 기본 프리뷰 
}

이렇게 하면 네비게이션 바가 없는 기본 뷰만 보이게 된다.

2. 네비게이션 컨트롤러 적용하기

네비게이션 기능을 테스트하려면 다음과 같이 설정하면 된다:

#Preview { 
    UINavigationController(rootViewController: AddNumberViewController()) 
}

네비게이션 컨트롤러를 사용하면 이런 장점이 있다:

• 실제 앱과 동일한 환경에서 테스트할 수 있다
• 네비게이션 바 UI를 확인할 수 있다
• 뒤로가기 같은 네비게이션 기능을 테스트할 수 있다

프리뷰 활용 팁

1. 여러 디바이스 프리뷰

// 단일 디바이스
#Preview { 
    let viewController = AddNumberViewController()
    viewController.preferredContentSize = CGSize(width: 375, height: 667)
    return viewController 
}

// 여러 디바이스 동시에 보기
#Preview("iPhone 15 Pro") { 
    let vc = AddNumberViewController()
    vc.preferredContentSize = CGSize(width: 393, height: 852)
    return vc
}

#Preview("iPhone SE") {
    let vc = AddNumberViewController()
    vc.preferredContentSize = CGSize(width: 375, height: 667)
    return vc
}

2. 다크모드/라이트모드 확인하기

#Preview {
    let vc = AddNumberViewController()
    vc.overrideUserInterfaceStyle = .dark // 다크모드로 보기
    return UINavigationController(rootViewController: vc)
}

3. 상태별로 보기

#Preview("기본 상태") {
    AddNumberViewController()
}

#Preview("데이터가 있는 상태") {
    let vc = AddNumberViewController()
    // 데이터 설정
    return vc
}

실전 활용 예시

1. 프리뷰 그룹 활용하기

#Preview("디바이스 테스트") {
    Group {
        AddNumberViewController()
            .previewDevice("iPhone 15 Pro")
        AddNumberViewController()
            .previewDevice("iPhone SE")
    }
}

2. 다국어 지원 테스트

#Preview {
    let vc = AddNumberViewController()
    vc.preferredContentSize = CGSize(width: 375, height: 667)
    return vc
}
.environment(\.locale, Locale(identifier: "ko-KR"))

3. 글자 크기 테스트

#Preview {
    let vc = AddNumberViewController()
    vc.preferredContentSize = CGSize(width: 375, height: 667)
    return vc
}
.environment(\.sizeCategory, .accessibilityExtraLarge)

다양한 환경 테스트하기

#Preview("여러 환경") {
    Group {
        // 기본 모드
        UINavigationController(rootViewController: AddNumberViewController())
            .previewDisplayName("기본")
        
        // 다크 모드
        let darkVC = AddNumberViewController()
        darkVC.overrideUserInterfaceStyle = .dark
        return UINavigationController(rootViewController: darkVC)
            .previewDisplayName("다크모드")
            
        // 큰 글씨 모드
        let largeTextVC = AddNumberViewController()
        return UINavigationController(rootViewController: largeTextVC)
            .environment(\.sizeCategory, .accessibilityLarge)
            .previewDisplayName("큰 글씨")
    }
}

정리

SwiftUI Preview를 사용하면 이런 점이 좋다:

• UI를 실시간으로 확인할 수 있다
• 다양한 환경에서 쉽게 테스트할 수 있다
• 디버깅 시간을 줄일 수 있다
• UI 개발 효율이 높아진다

이런 프리뷰 기능들을 잘 활용하면 UI 개발 과정에서 생길 수 있는 문제들을 미리 발견하고 해결할 수 있다.