Liquid Glass 탭 바 구현은 Apple의 UITabBarAppearance API를 통해 비교적 간단하게 수행할 수 있습니다. TabBarController 내에서 setupTabBarAppearance() 메서드를 통해 다음 단계를 따릅니다.
1. 투명 배경 설정
appearance.configureWithTransparentBackground() 메서드를 호출하여 기본 불투명한 배경을 제거하고 Liquid Glass 효과를 위한 기반을 마련합니다.
2. Liquid Glass 효과 적용
appearance.backgroundEffect = UIBlurEffect(style: .systemMaterial) 코드를 사용하여 핵심적인 흐릿한 유리 효과를 만듭니다. .systemMaterial 스타일의 UIBlurEffect는 시그니처인 프로스트 글라스(frosted glass) 모양을 생성하며, 라이트 모드와 다크 모드에 자동으로 적응합니다.
3. 아이콘 및 텍스트 색상 구성
탭 바 항목의 아이콘과 텍스트 색상은 시스템 색상을 사용하여 사용자 인터페이스 설정에 자동으로 반응하도록 합니다.
-
기본 상태:
appearance.stackedLayoutAppearance.normal.iconColor = .systemGray및appearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.systemGray]를 통해 아이콘과 텍스트를systemGray로 설정합니다. -
선택된 상태:
appearance.stackedLayoutAppearance.selected.iconColor = .label및appearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor.label]를 통해 선택된 항목을label색상으로 설정합니다.
4. 모든 상태에 적용
tabBar.standardAppearance = appearance와 tabBar.scrollEdgeAppearance = appearance를 모두 설정하여 콘텐츠가 탭 바 뒤로 스크롤될 때도 유리 효과가 일관되게 유지되도록 합니다. 이로써 탭 바는 콘텐츠가 흐릿하게 보이는 반투명 효과를 가지게 됩니다.
Hotwire Native 앱에 미치는 영향
Hotwire Native와 같은 하이브리드 앱을 구축할 때, 이와 같은 작은 UI 개선은 앱의 인지된 품질에 큰 영향을 미칩니다. 사용자가 앱이 웹 기반이라는 것을 알아차리지 못하게 하는 데 도움이 되며, 이는 순수 UIKit으로 구현되어 Hotwire Native의 웹 뷰 컨트롤러와 완벽하게 통합됩니다. 충돌이나 복잡성 없이 아름답고 네이티브한 iOS 디자인을 제공합니다.