글래스모피즘이란 — CSS로 유리 질감 UI 만들기
글래스모피즘(Glassmorphism)은 반투명한 서리 낀 유리처럼 뒤가 흐릿하게 비치는 UI 스타일입니다. 카드·내비게이션·팝업 위에 입히면 화면에 깊이와 세련된 느낌을 줄 수 있죠. 핵심은 의외로 단순한 CSS 몇 줄이며, 배경이 비쳐야 효과가 산다는 한 가지만 기억하면 됩니다.
글래스모피즘이란
2020년 무렵 디자인 트렌드로 떠오른 표현 방식으로, 윈도우·iOS의 반투명 패널처럼 뒤 배경을 흐리게 통과시켜 유리판을 겹쳐 놓은 듯한 질감을 만듭니다. 평평한 플랫 디자인에 살짝 입체감과 층위를 더하고 싶을 때 잘 어울립니다. 핵심 조건은 단 하나 — 유리 뒤에 비칠 무언가(사진, 그라데이션, 겹친 요소)가 있어야 한다는 점입니다.
핵심 CSS 네 가지
아래 네 속성이 글래스 효과의 전부입니다. 흐림과 반투명 배경이 본체, 테두리와 그림자가 마무리입니다.
| 속성 | 역할 | 예시 값 |
|---|---|---|
| backdrop-filter | 요소 뒤 배경을 흐리게 | blur(12px) |
| background | 반투명 배경 (뒤가 비침) | rgba(255,255,255,0.15) |
| border | 유리 가장자리 빛 반사 | 1px solid rgba(255,255,255,0.3) |
| box-shadow | 떠 있는 듯한 깊이 | 0 8px 32px rgba(0,0,0,0.2) |
합치면 이런 모양입니다 — backdrop-filter: blur(12px); background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; 사파리 대응을 위해 -webkit-backdrop-filter: blur(12px);도 함께 적어 둡니다. 둥근 모서리는 필수는 아니지만 유리 카드 느낌을 더해 줍니다.
가독성·접근성 주의
- 반투명 배경 위의 글자는 대비가 떨어지기 쉽습니다 — 배경 불투명도를 올리거나 흐림을 키워 뒤를 더 뭉개세요.
- 본문처럼 긴 텍스트에는 유리 효과보다 불투명 배경이 안전합니다. 글래스는 짧은 라벨·버튼·카드 헤더에 잘 맞습니다.
- 명도 대비 4.5:1 이상을 권장합니다 — 검사 도구로 확인하면 접근성을 놓치지 않습니다.
- 흐림에만 의존한 구분선은 약하므로, 옅은 테두리로 가장자리를 분명히 잡아 주세요.
브라우저 지원과 성능
최신 크롬·엣지·파이어폭스·사파리에서 backdrop-filter가 동작합니다. 사파리 계열은 -webkit- 접두사를 함께 적어야 하고, 지원하지 않는 환경에서는 흐림이 빠지므로 반투명 배경만으로도 읽히게 설계하는 것이 안전합니다. 흐림은 실시간으로 뒤 화면을 다시 그리는 비용이 큰 효과라, 화면에 글래스 요소를 너무 많이 겹치면 스크롤이 버벅일 수 있습니다. 핵심 영역 한두 곳에만 절제해 쓰는 편이 보기에도 성능에도 좋습니다.
흐림 효과는 요소 뒤에 비칠 배경이 있어야만 보입니다. 부모나 페이지에 단색 배경만 있으면 흐릴 것이 없어 그냥 반투명 회색 박스처럼 보입니다. 사진·그라데이션·다른 요소가 카드 뒤로 겹쳐 보이는 위치에 두어야 유리 질감이 살아납니다. 또 backdrop-filter는 요소 자신이 반투명(rgba 배경)이어야 뒤가 비치므로 배경 불투명도도 함께 확인하세요.
반투명 배경은 뒤 내용이 비쳐 글자 대비가 떨어지기 쉽습니다. 배경 불투명도를 조금 더 올리거나, 흐림 정도를 키워 뒷배경을 더 뭉개면 대비가 좋아집니다. 글자에 옅은 그림자를 주거나, 본문처럼 긴 텍스트에는 유리 효과 대신 불투명 배경을 쓰는 것도 방법입니다. 명도 대비는 검사 도구로 4.5:1 이상을 확인하는 것이 안전합니다.
최신 크롬·엣지·파이어폭스·사파리에서 지원되지만, 사파리 계열은 -webkit-backdrop-filter 접두사도 함께 적어 주어야 안전합니다. 지원하지 않는 환경에서는 흐림이 빠지므로, 그 경우에도 반투명 배경만으로 읽을 수 있게 디자인하는 것이 좋습니다. 흐림은 실시간 합성이라 비용이 큰 편이니 화면에 글래스 요소를 너무 많이 겹치지 않는 것이 성능에 유리합니다.