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

(alastair.is)

1P by GN⁺ 6시간전 | ★ favorite | 댓글 1개

애플이 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를 경험하고 있을 가능성이 있음

▲

GN⁺ 6시간전 [-]

Hacker News 의견

운영체제(OS) 기능을 오직 자사 앱에만 제공하는 행위는 분명히 경쟁을 저해하는 관행임. 휴대폰, 운영체제 시장에서의 우월적 지위를 이용해 경쟁사에는 허용하지 않는 기능을 앱 시장에서 자사만 쓰는 것은 명백한 사례임
- 원래는 Apple에 대해 분노하고 싶었지만, 그런 마음이 들지 않음. WinAPI 문서만 읽어봐도 "reserved" 매개변수가 엄청 많음. 운영체제 개발자들은 종종 내부에서만 쓸 목적으로 기능을 만듦. 이번엔 단순한 UI 개선이어서 굳이 비공개로 할 필요는 없다고 보지만, 아마도 Apple은 이걸 계속 관리하기 싫어서 비공개로 둔 것 같음
- 비표준 CSS 속성이 모두 “경쟁 저해적”이라는 것인가? Google의 “-webkit-tap-highlight-color” 역시 마찬가지로 비난받아야 하는지 의문임. 독점적인 CSS 속성을 만드는 관행 자체를 금지해야 한다는 논리인데, 내겐 이런 주장이 과장된 것으로 보임
- 법적인 의미에서 진짜 "명백한 경쟁 저해적 행위"인지는 확실하지 않음. 미국의 경우 경쟁법인 Sherman Act와 Clayton Act가 적용됨. 이 법률에서 열거된 "명백한 위법 행위(per se)" 목록에는 포함되지 않으므로, "합리의 원칙(rule of reason)"이 적용될 것임. 이 경우 해당 행위가 직접적으로 경쟁에 해를 끼치고, 별다른 긍정적 효과나 덜 제한적인 대안이 없는 경우에만 인정됨. CSS 속성이 실제로 경쟁에 어떤 피해를 주는지 입증하기 어렵고, 원하는 사람이 “liquid glass” CSS를 직접 만들어도 아무도 막지 않으니 적용되긴 어렵다고 생각함
- 컴퓨터 하드웨어처럼 훨씬 더 제한적인 경우는 어떻게 생각하는지 궁금함. 예를 들어 비디오 게임 콘솔은 모든 코드가 암호화 서명되어야 하고, 제조사의 허가 없이는 서드파티가 어떤 소프트웨어도 배포할 수 없음
- 만약 UI 글자가 잘 안 읽히게 만드는 것이 경쟁에서의 우위라고 본다면 그렇게 볼 수도 있겠음
“Alastair의 앱 내 웹뷰 대이론”이 마음에 듦: 앱 내 웹뷰가 악명이 높은 주된 이유는 잘 통합된 웹뷰는 사용자가 눈치채지도 못하기 때문임
- 웹뷰를 실제로 구현해 본 적 있는 사람과, 웹앱을 그냥 네이티브 앱에 감싸서 내면 된다고 들은 사람 사이에는 큰 차이가 있음. 대부분은 후자에 해당함
- 그래서 아마 이 기능이 도입된 것 같음. 보통 앱이 써드파티 UI 툴킷을 쓰는지 확인하는 저렴한 방법은 시스템 테마를 바꿔보면서 앱이 테마나 색상/스케일 변화를 잘 따라오는지 보는 것임. Apple이 제공하는 앱들도 일부가 테마를 제대로 반영하지 않아서 결국 비공개 CSS 속성을 만들었을 것임. 반면 일부 타 오에스 벤더는 테마 제어 기능 자체를 없애서 여러 미완성 툴킷 관리 문제를 피함
- 누구나 딱 하나라도 완벽하게 통합된 웹뷰 앱을 예로 댈 수 있다면 인정하겠음. 평균적인 사용자는 눈치 못 챌 수도 있으나, 정말 있었다면 Hacker News에서 꼭 한 번은 거론되었을 것임. “근데 Foo 앱도 웹뷰로 만들었잖아, 그래서 완전 잘 되잖아” 하는 식으로 웹뷰 논쟁 때마다 반박 자료로 쓰였을 것
- “가발은 항상 가짜로 보임. 진짜 같았던 가발은 한 번도 못 봤음” 같은 느낌임
“Apple이 꼭 쓰기 때문에 이 기능이 만들어졌을 것”이라는데 어디에서 쓰이는지 아무도 모름. 추측을 해보면, 아마도 iCloud 설정(설정 앱 내부)이나 App Store/Music/TV 앱의 계정 페이지(우측 상단 프로필 아이콘Tap) 등임. 이런 페이지들은 대부분 마치 네이티브처럼 보이려는 숨은 웹뷰임. 장기 누르기를 하면 <a>링크에 웹페이지 미리보기가 나오는 게 단서임. Tips 앱의 사용자 가이드 등도 후보임. 내가 먼저 확인해볼 만한 곳임
"Apple이 어디엔가 쓸 것이라" 추측하는데, 실제로 우리가 어느 곳에서 쓰는지 못 알아챘다는 점이 흥미로움. 일상적으로 iOS에서 웹뷰를 자주 접하고 있으면서도 전혀 인식하지 못하고 있었음
- 특히 설정 앱, 특히 계정이나 iCloud 쪽은 웹뷰 같다고 종종 의심함. 로딩 시 아이콘이 늦게 뜨는 것 같은 작은 차이에서 추측이 가능함
- App Store 앱도 웹뷰를 아주 많이 활용하는 듯함
- Mail과 Calendar 앱도 웹뷰를 꽤 쓰는 것으로 알고 있음
- 내 생각엔 Apple.com에도 쓸 예정임. 과거 iOS에서 배경 흐림 효과에 backdrop-filter를 썼던 것과 같은 방식임
- Apple Music도 웹뷰를 상당히 많이 쓰는 듯함
좋은 발견임. Apple의 새로운 글래스 UI는 비판을 많이 받지만, 나는 오히려 마음에 듦. OS가 다시 뭔가 실제 개성을 가진 것처럼 느껴지고, 단조롭고 밋밋한 느낌에서 벗어난 느낌임. 클릭 가능 영역도 더 쉽게 보이고 버튼과 일반 텍스트를 시각적으로 구별할 수 있게 됨. 환영할 만한 변화로 생각함. 단순히 “추억” 때문이 아니라 실제로 실용적인 변화임. iOS 26 Beta를 먼저 설치해서 웹사이트 테스트를 하고 있는데, 약간의 이슈들은 있지만 전반적으로 OS에 더 많은 개성을 주는 방향이 좋은 것 같음. 일반 사용자도 좋아할 것임
- 글래스 효과와 미적 요소는 마음에 들지만, 여러 앱에서 기능성 면에서는 과거보다 더 불편해진 부분이 있음. 쉽게 접근하던 버튼들이 메뉴 아래 숨겨지고 찾기 더 어려워졌음
- 내 생각에는 일반 대중은 넓게 보면 이 변화를 좋아하지 않을 것임. 이처럼 “운영체제에 개성이 있어야 한다”고 생각하는 사람은 소수의 테크 매니아들 뿐임. 대다수는 OS를 단지 어떤 일을 처리하는 ‘수단’으로 보기 때문에, 이런 시각적 변화는 흥미거리 그 이상 의미가 없는 경우가 많음. 특히 liquid glass 디자인 중 가장 불만인 부분이 신규 바텀 탭 바임. Apple Music이 가장 심함. Search 인터페이스를 쓰기 위해 클릭 수가 하나 더 늘었고, Search Box 클릭 후에도 따로 눌러야 키보드가 뜸. 그리고 모든 인터랙션에 복잡하고 느린 애니메이션이 추가됨. 예를 들어 Home에서 Library로 가면, 탭 바 위로 거품처럼 탭이 커지며 반짝이듯 이동하는데, 이건 산만할 뿐 도움이 안 됨. Reduce Transparency나 Reduce Motion 같은 접근성 설정이 이런 애니메이션에 적용되지 않음. 실제로 최근 Apple의 여러 기본앱이 접근성 옵션 적용을 깜빡하거나, 미흡하게 처리함. 예를 들어, Reduce Motion을 켜면 앨범 클릭 같은 일부 애니메이션은 간소화되지만, 왼쪽 스와이프나 다른 동작에서는 여전히 과한 애니메이션임. Apple Podcasts, iMessage 역시 마찬가지. Reduce Transparency는 일부 앱에서는 투명도를 낮추는 대신 모든 배경을 검정(#000000)으로 넣는 식. iOS 전반에 이런 사례가 넘쳐남. 출시 며칠을 앞두고도 dropdown, 비활성 키보드 버튼 같은 곳에 접근성 옵션이 반영되지 않음
- “클릭 타겟 크기를 시각적으로 알 수 있고 버튼이 텍스트와 분명하게 다르다”고 하는데, 사실 기준이 높은 것은 아님
- 개인적으로는 “이 디자인은 정말 끔찍하다”는 쪽임. Apple이 뭘 생각한 건지 모르겠음
어쩌면 Apple은 아직 아무도 이 기능을 쓰지 않기를 바라는 것일 수도 있음. 최신 OS 발표로 많은 개발자가 당장 도입할 가능성이 높아서, 공개하기 전에 내부적으로 활용을 확정하고자 한 것일 수 있음. 이 스레드에서 일부 근거 없는 비난이 오가는 것도 사실임. 어느 쪽이 맞을지는 아직 모름
“Apple이 쓸 목적이니까”라는 명제가 사실 항상 맞는 건 아님. 실제 소프트웨어에는 사용하지 않는 코드나 기능이 엄청 많음. 개발 방향을 여러 번 바꾸면서 2번째 단계에서 추가된 CSS 프로퍼티가 4번째 단계에서는 아예 사라지는 식임
liquid jelly가 트렌드가 되지 않기를 진심으로 바람
- liquid glass를 좋아하든 싫어하든, “UI 크롬은 앱 콘텐츠를 감싸는 것”에서 “UI가 콘텐츠 위를 덮는 것”으로의 패러다임 변화는 미래 지향적임. AR과도 잘 맞고, 다양한 화면 크기에 따라 UI와 콘텐츠를 구분할 수 있게 함. 이번 구현 자체는 장단점이 있지만, 이 접근법은 앞으로 더 널리 쓰일 것임. Overlay UI 모델이 꼭 투명할 필요도 없음. 오페이크하지만 떠 있는 형태도 가능함
- 젊은 세대는 Aero/Glass 시절의 미학에 대한 향수에 사로잡혀 있음. Apple이 도입했기 때문에 트렌드화될 가능성이 높음. 산업 전반적으로 Apple이 하는 건 무조건 따라하는 분위기임
- 개인적으로 바운스/지글 효과만 빼면 좋겠음. 지나치게 흔들리고 떨려서, 원래의 유리 느낌 대신 젤리 같은 blob으로 보임
- 나도 이게 유행하지 않길 바라는 쪽이지만, 솔직히 Apple이 하면 결국 다들 따라할 것이라고 생각함
- 이미 유행 중임
WKPreferences에서 useSystemAppearance라는 설정을 켜야 한다는데, 이게 비공개라 앱스토어 승인을 못 받는다는 얘기임. 사실인지 궁금함. iOS 개발에 정통하지 않지만, 다양한 내부 API를 써서 홈스크린 위젯을 애니메이션으로 만든 앱을 디컴파일하는 영상을 본 기억이 있음
- 그런 건 App Store 심사를 통과하지 못함
- 이 영상을 말하는 건가?
둥근 모서리와 넓은 패딩 이후로 본 것 중 가장 못생긴 유행임. 하루 빨리 사라지길 바람

답변달기