1. 개요
|
|
|
| Windows 10 | iOS 7 |
유리의 질감과 투명도 등을 이용한 UI 디자인.
2. 특징
반투명 디자인과 글래스모피즘 디자인의 가장 큰 차이는 블러 효과의 유무이다. 레이아웃의 뒤가 비쳐 보이는 건 동일하지만 글래스모피즘에서는 상이 흐리게 비치며, 이는 현실의 유리나 카메라의 인물 사진처럼 피사체와 거리감이 있는 것 같은 느낌을 준다. 어떤 경우에는 텍스처를 이용해 유리의 광택이나 무광 유리 등 특유의 질감을 구현하기도 하나, 유리 광택 같은 복잡한 텍스처는 스큐어모피즘의 산물로 여겨져 요즘은 그 빈도가 줄어들었다. 특히 무광 유리의 질감을 구현한 글래스모피즘 디자인은 마치 서리가 낀 것 같다 하여 "Frosted Glassmorphism"이라 부르기도 한다.기존의 반투명 디자인은 레이어 뒤에 텍스트 같은 요소가 있다면 앞의 텍스트와 뒤의 텍스트가 겹쳐 어느 게 어떤 건지 구분이 가질 않는다는 접근성 문제가 있다. 이 텍스트 문제의 경우 글래스모피즘에서는 뒤에 비쳐 보이는 텍스트는 뭉개져서 더 이상 텍스트처럼 보이지 않기 때문에 문제는 덜 하나 이번에는 흐림 효과로 인해 세밀도가 무너지고 단일 색상에 가까워지기 때문에 다 같은 색깔처럼 겹쳐 보이는 문제가 생긴다. 해결책은 반투명 효과와 동일하게 투명도를 줄이거나 색조 효과를 넣는 것. 하지만 전자는 디자인의 미려함이 줄어든다는 단점이 있다. 이러한 문제를 해결하기 위해 나온 게 상술한 Frosted Glassmorphism이며, Microsoft의 Fluent Design System에서는 유리 질감으로 약간의 노이즈를 추가하는 방법을 사용했다.
그 외에도 투명도와 흐림 효과 등 무거운 실시간 연산이 대거 포함되어 있어서 요구사양이 높다는 단점이 있으며,[1][2] 이 때문에 일부 개발사에서는 가우시안 흐림 대신 상자형 흐림 효과를 사용하는 등 조금이라도 요구사양을 낮춰보려 노력하기도 한다.
3. 예시
- iOS 7
- macOS
- Windows Aero: Windows Vista부터 Windows 7까지 적용된 디자인 시스템. Vista 시절에는 요구 사양이 광택 텍스처가 적용되어 있다.
- Windows 10: Fluent Design System 참고.
- Windows 11: 전작에 비해 투명도가 줄어들었다.
4. 여담
여러 장의 비트맵을 필요로 하는 스큐어모피즘과는 다르게 css만으로도 손쉽게 구현할 수 있다. 미니멀리즘 디자인과도 공유하는 장점.5. 관련 문서
[1]
Windows Vista가 처참하게 망한 이유에 이 요구사양 문제도 포함되어 있었다. 당장
Windows Vista는
Windows 7과 동일한
디자인 시스템을 공유하나 그 당시에 7에서처럼 투명한 창을 보기에는 매우 드물었고 거의 Windows Basic 테마를 사용하거나 아무리 사양이 좋아도 검은색의 Windows Standard 테마가 한계였으며, 설령 Aero Glass 활성화에 성공했다 해도 퍼포먼스 이슈 때문에 창을 최대화하면 투명도가 사라지고 검은색이 되는 OS 제한이 있었다. 7에서는 Vista 출시 이후 약 3년의 시간이 흘렀기 때문에 하드웨어의 발전으로 자연스레 이 문제가 덜해졌으나, 특유의 무거운 사양 때문에 게임 퍼포먼스가 떨어지는 문제가 발생해 대다수의 게이머들은 Aero 테마를 끄고 사용했으며, 그조차도 일부 무거운 프로그램을 구동하면 "구성표가 Windows 기본으로 변경되었다"는 알림이 떴다.
[2]
그래서
Windows 10부터는 배터리 절약 모드를 키면 투명도 효과가 전부 사라진다.