Hotwire Native 앱의 네이티브 바 투명성 문제 및 해결
Hotwire Native 앱은 iOS의 투명한 네이티브 요소를 활용하여 웹 콘텐츠를 렌더링합니다. 이로 인해 웹 콘텐츠가 내비게이션 바(상단 바)와 탭 바(하단 바)를 ‘통과하여’ 비쳐 보이는 현상이 발생할 수 있습니다. 이는 다음과 같은 문제점을 야기합니다.
-
시각적 혼란: 웹 콘텐츠와 네이티브 바가 겹쳐 보이면서 정보의 가독성이 저하되고, 앱의 전반적인 미관을 해칩니다.
-
사용자 경험 저하: 의도치 않은 투명성은 사용자에게 앱이 불안정하거나 완성도가 낮다는 인상을 줄 수 있습니다.
문제 해결 방법
다행히 이 문제는 AppDelegate.swift 파일에 간단한 코드 추가를 통해 신속하게 해결할 수 있습니다. 다음 코드를 application(_:didFinishLaunchingWithOptions:) 메서드 내에 추가하면 됩니다.
swift
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions:
[UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
UINavigationBar.appearance().scrollEdgeAppearance = .init()
UITabBar.appearance().scrollEdgeAppearance = .init()
return true
}
}
코드의 효과
위 코드는 UINavigationBar와 UITabBar의 scrollEdgeAppearance 속성을 .init()으로 설정합니다. 이는 다음 두 가지 주요 효과를 가져옵니다.
-
불투명한 바 설정: 내비게이션 바와 탭 바를 불투명하게 만들어 웹 콘텐츠가 더 이상 바 뒤로 비쳐 보이지 않도록 합니다. 이로써 사용자 인터페이스의 시각적 일관성이 확보됩니다.
-
기본 배경색 적용: 불투명하게 설정된 바에는 기본적으로 연한 회색 배경이 적용됩니다. 이는 앱에 깔끔하고 세련된 느낌을 더해주며, 개인적인 취향에 따라서는 기존 투명한 바보다 더 나은 디자인으로 인식될 수 있습니다.