Xcode 13 + iOS 15 에서 지정한 Navigation Bar의 색이 나오지 않을 때 해결방법

안녕하세요! 클래스메소드 CX사업본부 모바일사업부의 정하은입니다?

지난 달은 갑작스레 일이 쌓이는 바람에 블로그 쓰는 걸 쉬었는데 이번 달에는 대신 지난 달에 못 쓴 이 글 포함 2개를 올리기로 정했기 때문에 뒤늦게 나마 올립니다. (Xcode13으로 업데이트 된 지 좀 지났지만 아직 Xcode 14 버전이 안나왔으니 세이프인 걸로 합리화..ㅎㅎ)

이번 글에서는 Xcode 13 + iOS 15에서 Navigation Bar의 tintColor가 적용되지 않을 때 해결하는 방법에 대해서 다루어보도록 하겠습니다.

Navigation Bar의 색이 사라졌다?

위 제목의 상황은 제가 참여하는 프로젝트에서 Xcode 환경을 13 버전으로 옮기는 과정에서 앱에 문제가 없는지 확인을 하려고 앱을 실행했을 때 발견한 문제인데요.

아래와 같이 AppDelegate 에서 barTintColor 로 색을 지정했었습니다.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // Override point for customization after application launch.
  UINavigationBar.appearance().isTranslucent = false
  UINavigationBar.appearance().barTintColor = .lightGray

  return true
 }

iOS 14에서 실행할 때만 해도 정상적으로 나오던 색이 iOS 15에서 실행하면 사라져버리는 것이었어요.

위의 사진에서도 보이듯이 iOS14에서는 회색으로 잘 반영이 되어있는데, iOS15에서 실행하니 Navigation Bar가 시꺼멓게..

아예 Navigation Bar가 사라져버린 것인가 하고 확인을 해보니, 그건 또 아니었구요.

원인

반투명 여부에 관련된 isTranslucent 설정이 false 로 지정된 것이 원인이었는데요.

찾아보니 WWDC21에서 아래와 같은 공지가 있었습니다.

While UIKit does its best to make this new appearance seamless in your app, there are a few issues you may encounter. You should audit your code for places where you may be setting a bar’s translucent property to false and check for any UIViewControllers that have non-standard edgesForExtendedLayout. Both of these conditions will cause visual issues with the new appearance.

이렇게 UIKit (Navigation Bar) 의 기능 확장으로 인하여 사양이 바뀌게 되어 기존 방식을 사용할 수 없게 되었습니다.

해결방법

이 방법은 UINavigationBarAppearance를 사용하는 것으로 해결이 가능합니다.

Apple Developer Forum에서도 이와 같은 내용의 질문이 올라온 적이 있는데 아래와 같은 코드로 appearance 인스턴스 생성 후, background 색상을 지정합니다.

scrollEdge는 스크롤 하기 전, standard는 스크롤 하는 중인 상태를 나타냅니다.

let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.systemBackground
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance

그러면 아래와 같이 Navigation Bar의 색상이 정상적으로 나타나는 것을 확인할 수 있어요 ?

Storyboard를 사용할 시

아래와 같이 체크를 하시면 위에 적었던 코드와 동일하게 구현이 가능합니다.

마무리하며

이번에 Xcode 13으로 업데이트 되면서 이 문제 외에도 라이브러리나 UILabel의 Autoshrink 문제 등 자잘한 문제가 많았는데요.

아직 이 Navigation Bar 문제 외에는 확실한 해결방법이 없다보니 소개를 못한 게 아쉽네요ㅠㅠ 추후 업데이트 버전에서 수정이 될 지 모르겠지만 꼭 수정이 되어 해결방법이 소개가 되었으면 좋겠다고 생각합니다.

올해 iOS 엔지니어로서의 기록은 이번 글로 마지막이지만 내년에도 iOS 엔지니어로서 열심히 공부할 계획이니 앞으로 더 좋은 글로 찾아뵙고 싶습니다!