애플, Liquid Glass 효과를 웹 콘텐츠에 추가하는 비공개 CSS 속성 도입

1 day ago 2

애플이 iOS 26에서 사용할 수 있는 비공개 CSS 속성 -apple-visual-effect 를 추가
이 속성은 Liquid Glass와 표준 blur 소재와 같은 새로운 디자인 효과를 웹 콘텐츠에도 적용할 수 있게 함
해당 기능은 Safari 브라우저나 WKWebView에서 기본적으로 활성화되어 있지 않음
WKWebView에서 사용하려면 useSystemAppearance 라는 비공개 설정을 켜야 하는데, 이를 변경하면 App Store 승인이 어려워짐
이 기능은 주로 Apple 내부에서 자체적으로 사용되는 것으로 보이며, 일반 개발자들은 당장 활용할 수 없음

개요

저자는 WebKit의 GitHub ChangeLog를 취미로 자주 들여다보며 iOS의 차기 업데이트를 예측함
최근 WWDC 직후 WebKit에 “[Materials] Rename 'hosted blur' materials to reference 'glass'”라는 Pull Request가 올라온 것을 발견함
2025년 WWDC에서 강조된 Liquid Glass는 iOS 7 이후 가장 큰 사용자인터페이스(UI) 변경점임
기존에는 네이티브 UI에만 적용되는 디자인 변화였으나, 이번 PR에서 웹 뷰와의 연관성을 암시함

Apple의 비공개 CSS 속성

PR에서 Apple이 -apple-visual-effect라는 비공개 CSS 속성을 도입했음이 드러남
이 속성을 통해 iOS 26에서는 Liquid Glass 효과(예: -apple-system-glass-material) 적용이 가능함
모든 버전에서 표준 blur 소재(-apple-system-blur-material-thin 등) 사용하는 것도 가능함
공식 디자인 가이드에도 이러한 소재들이 언급되어 있음

실제 적용 가능성

Safari에서 CSS를 편집해 적용해 보려 해도, 웹에서는 동작하지 않음
WKWebView 기반 앱에서도 기본적으로 비활성화됨
WKPreferences의 useSystemAppearance 값을 true로 변경해야 동작하지만, 이 설정 자체가 비공개여서 공식 경로로는 활용 불가능함
비공식적으로 해킹하여 값을 활성화 후 아래와 같은 CSS를 적용하면 효과를 볼 수 있음 .toolbar { border-radius: 50%; -apple-visual-effect: -apple-system-glass-material; height: 75px; width: 450px; }

CSS 예시 및 조건부 적용

Apple이 이 효과를 CSS 속성으로 만들어, 지원 여부에 따라 다양한 규칙을 간단히 지정할 수 있도록 함
예를 들어 @supports쿼리를 사용해, 지원 기기에서만 -apple-visual-effect 적용 가능
.toolbar { border-radius: 50%; height: 75px; width: 450px; background: rgba(204, 204, 204, 0.7); } @supports (-apple-visual-effect: -apple-system-glass-material) { background: transparent; -apple-visual-effect: -apple-system-glass-material }

의미와 한계점

Apple 내부를 제외하면 일반 개발자가 쓸 수 없는 기능임
하지만 이를 통해 "왜 앱 내 webview가 종종 좋지 않은 평판을 얻는지"에 대한 힌트를 얻을 수 있음
Seamless하게 잘 통합된 webview는 사용자가 존재 자체를 인식하지 못해, 문제가 드러날 일이 적음
Apple이 이를 개발했다는 것은 자사 서비스나 앱에서 실제 활용 중임을 간접적으로 시사함
일상 속에서 알게 모르게 webview 기반 UI를 경험하고 있을 가능성이 있음

Read Entire Article