유리 한 장이 바꾼 화면의 질감

1. 평평했던 화면에 다시 두께가 생겼습니다

2013년 iOS 7이 나오면서 가죽 질감과 반짝이는 버튼이 한꺼번에 사라지고 화면은 납작해졌습니다. 그 뒤로 10년 넘게 우리는 플랫 디자인 위에서 살았죠. 그런데 지난해 6월 WWDC에서 애플이 꺼내 든 리퀴드 글래스(Liquid Glass)는 그 납작한 화면에 다시 두께를 얹었습니다. 버튼과 탭 바가 반투명한 유리처럼 떠 있고, 뒤에 깔린 콘텐츠를 비추고 굴절시키면서 움직입니다. 아이폰, 아이패드, 맥, 워치까지 같은 재질로 묶으면서 운영체제 이름도 iOS 26, macOS 타호 26처럼 연도 기준으로 맞췄고요. 처음 써보면 확실히 예쁩니다. 스크롤할 때 메뉴 뒤로 사진 색이 은은하게 비치는 걸 보고 있으면, 화면이 하나의 '물건'처럼 느껴지는 순간이 있습니다.

2. 예쁜 화면과 읽히는 화면 사이의 줄다리기

문제는 읽기였습니다. 베타가 풀리자마자 알림 글자가 안 보인다, 배경화면에 따라 버튼이 묻힌다는 불만이 쏟아졌고, 애플은 베타를 거듭하며 투명도를 조금씩 낮췄습니다. 결국 iOS 26.1에서는 설정의 디스플레이 및 밝기 메뉴에서 유리 효과를 투명(Clear)과 틴트(Tinted) 중에 고를 수 있게 됐죠. 새 디자인 언어를 발표하고 몇 달 만에 사용자에게 선택권을 넘겨준 건 애플답지 않은, 꽤 드문 장면입니다. 리퀴드 글래스가 성공할지보다 이 장면에 더 눈이 갔습니다. 아무리 공들인 질감이라도 글자가 읽히지 않으면 사용자는 그걸 디자인이 아니라 불편으로 기억하니까요.

3. 웹에서 유리를 흉내 낼 때 생기는 일

웹에서는 유리 유행이 이미 한 번 지나갔습니다. 2020년 말 '글래스모피즘(Glassmorphism)'이라는 이름이 붙으면서 반투명 카드와 흐릿한 배경이 디자인 커뮤니티를 한동안 덮었습니다. CSS의 backdrop-filter 한 줄이면 뒤를 흐리게 만들 수 있으니 구현도 어렵지 않습니다. 그런데 막상 실제 서비스에 넣어 보면 고민이 생깁니다. 뒤에 깔린 이미지가 바뀔 때마다 글자 대비가 달라지고, 흐림 효과는 스크롤할 때마다 다시 계산되기 때문에 사양이 낮은 휴대폰에서는 화면이 버벅이기도 합니다. 애플은 하드웨어와 운영체제를 같이 만드니 이걸 최적화할 수 있지만, 웹사이트는 어떤 기기에서 열릴지 모릅니다. 같은 효과라도 웹에서는 훨씬 조심스럽게 써야 하는 이유입니다.

4. 세컨드펭귄의 시선: 효과를 꺼도 멀쩡한 화면부터

리퀴드 글래스를 보며 다시 정한 기준이 있습니다. 질감은 내용이 잘 보이도록 돕는 만큼만 씁니다. 반투명 헤더를 쓰더라도 밝은 사진, 어두운 사진, 복잡한 사진을 차례로 깔아 보면서 어떤 배경 위에서도 글자가 읽히는지 확인하고, 사용자가 기기에서 투명도 줄이기를 켜 두었다면 그 설정을 따릅니다. 효과가 빠진 상태에서도 화면이 멀쩡해야 그 효과를 얹을 자격이 생긴다고 보는 편이죠. 새 재질을 빨리 들여오는 것보다, 그 위에서 글자가 끝까지 읽히는지 확인하는 데 시간을 더 씁니다.