문제
expo 기반의 react native 앱 개발 도중, react navigation을 사용하는 헤더에 liquid glass 효과가 자동으로 적용되는 문제가 발생했습니다.
liquid glass란, iOS 26에서 새롭게 도입된 UI 디자인으로, 반투명한 유리 질감을 추가하는 효과입니다.
이미지를 보면 알 수 있다시피, 네비게이션의 양쪽 버튼에 어색하게 liquid glass 효과가 들어가 있는 것을 알 수 있습니다.
의도하지 않은 효과가 적용되면서 앱의 디자인 일관성이 깨진 듯 보였습니다.
해결
이 문제는 iOS 26부터 새롭게 추가된 UIDesignRequiresCompatibility 설정을 통해서 해결할 수 있습니다.
이 key는 앱이 최신 UI 디자인을 사용할지, 이전 SDK 버전의 호환성 모드를 사용할지 결정하는 Boolean 값입니다.
Apple 공식문서에 따르면, 이 설정은 최신 SDK의 디자인을 검토하고 개선하는 동안 임시로 사용하도록 권장되는 옵션입니다.
true로 설정하면 시스템이 이전 SDK 버전에서 빌드했을 때의 UI 스타일을 사용하는 호환성 모드로 앱을 실행하고, false로 설정하거나 key를 생략하면 현재 실행 중인 최신 UI 디자인(liquid glass 효과를 포함하는)을 사용합니다.
따라서, app.json 파일의 ios.infoPlist 섹션에 해당 키를 추가하면 문제를 해결할 수 있습니다.
// app.json
...
"infoPlist": {
"ITSAppUsesNonExemptEncryption": false,
"UIDesignRequiresCompatibility": true, // 추가
...
}
...UIDesignRequiresCompatibility를 true로 설정한 후, 앱을 다시 빌드하여 테스트했을 때 liquid glass 효과가 사라지고 이전 스타일의 헤더로 나타나는 것을 확인할 수 있었습니다.
다만 Apple은 이 설정을 임시 해결책임을 명시하고 있어서, 장기적으로는 앱의 UI를 iOS 26의 새로운 디자인 가이드라인에 맞추어서 개선하는 것이 좋을 듯합니다.
ref:
https://www.reddit.com/r/expo/comments/1njwc75/expo_54_react_navigation_forces_liquid_glass/
Reddit의 expo 커뮤니티: Expo 54 & React Navigation forces Liquid Glass header buttons. Help!
expo 커뮤니티에서 이 게시물을 비롯한 다양한 콘텐츠를 살펴보세요
www.reddit.com
UIDesignRequiresCompatibility | Apple Developer Documentation
A Boolean value that indicates whether the system runs the app using a compatibility mode for UI.
developer.apple.com
