Glass Morphism(글래스모피즘)은 반투명 배경에 흐림 효과를 얹어 유리처럼 보이게 하는 디자인 트렌드입니다. macOS와 Windows 11이 곳곳에서 쓰고 있고, 웹에서도 잘만 쓰면 단번에 모던하고 세련된 인상을 줍니다. 다만 "잘만 쓰면"이라는 단서가 붙죠. 어설프게 적용하면 그냥 반투명한 네모 상자가 되어버리거든요.
이 글에서는 개인 블로그 리뉴얼에서 Glass Morphism을 Tailwind CSS로 체계적으로 적용한 과정을, 원리부터 함정까지 정리합니다.
1. Glass Morphism의 3가지 핵심 요소
화려해 보이지만, 정체는 세 가지 CSS 속성의 조합입니다.
요소
CSS 속성
역할
반투명 배경
background-color + opacity
뒤의 콘텐츠가 비치는 효과
흐림(Blur)
backdrop-filter: blur()
유리 질감 표현의 핵심
미세한 테두리
border + opacity
유리 가장자리의 빛 반사 효과
셋 중 하나라도 빠지면 "유리"가 아니라 "반투명 박스"로 보입니다. 특히 마지막의 미세한 테두리는 있는 듯 없는 듯하지만, 빠지는 순간 가장 티가 나는 요소입니다.
각 속성이 맡는 역할은 이렇습니다. border-white/40은 40% 투명도의 흰 테두리로 유리 가장자리의 빛 반사를 흉내 내고, bg-base-100/70은 70% 투명도의 배경색으로 DaisyUI 테마 색을 그대로 활용합니다. shadow-[...]로 깊이감을 주고, 핵심인 backdrop-blur-xl이 24px 가우시안 블러를 겁니다. 마지막으로 dark: 접두사가 다크모드에서 투명도를 한 단계 더 낮춰줍니다. 이 한 덩어리를 변수로 빼두면, 카드든 패널이든 같은 질감으로 빠르게 찍어낼 수 있습니다.
3. 배경 그라데이션 블롭
여기서 가장 중요한 깨달음 하나. Glass Morphism은 뒤에 비칠 무언가가 있을 때만 살아납니다. 그래서 화면 뒤편에 추상적인 그라데이션 블롭을 깔아둡니다.
포인트가 몇 가지 있습니다. pointer-events-none로 배경이 클릭을 가로채지 않게 하고, fixed로 스크롤해도 제자리에 두고, -z-10으로 모든 콘텐츠 뒤에 깝니다. 그리고 blur-[120px]~blur-[160px] 수준으로 충분히 흐려야, 색 덩어리가 아니라 은은한 그라데이션으로 녹아듭니다. 이 배경이 깔리고 나서야 유리판이 "유리"처럼 보이기 시작합니다.
4. 다크모드 대응 전략
Glass Morphism은 밝은 배경에서는 쉽게 자연스러워지지만, 다크모드에서는 다른 셈법이 필요합니다.
라이트 모드에서는 밝은 테두리와 높은 투명도가 어울립니다.
css
border: 1px solid rgba(255, 255, 255, 0.4); /* 밝은 테두리 */background: rgba(255, 255, 255, 0.7); /* 높은 투명도 */
다크 모드에서는 테두리를 한껏 죽이고 배경 투명도도 크게 낮춥니다.
css
border: 1px solid rgba(255, 255, 255, 0.1); /* 미세한 테두리 */background: rgba(30, 30, 40, 0.15); /* 매우 낮은 투명도 */
sticky top-0으로 상단에 고정하고, backdrop-blur-xl로 스크롤되는 콘텐츠를 흐릿하게 비추고, bg-base-100/70으로 뒤가 살짝 들여다보이게 합니다. 헤더야말로 사용자가 가장 오래 마주하는 영역이라, Glass 효과의 체감이 가장 큰 곳이기도 합니다.
블러 반경이 클수록 비용이 커지고(blur-sm < blur-xl), 화면에 블러 요소가 많을수록 렌더링 비용이 누적됩니다. 그래서 모바일에서는 blur-md 이하로 낮추는 것도 고려하고, 필요하면 will-change: backdrop-filter로 GPU 레이어 힌트를 줄 수 있습니다. 경험상 한 화면에 Glass 요소는 5~6개 이내로 유지하는 것이 안전합니다. 그 이상은 효과보다 끊김이 먼저 눈에 들어옵니다.
8. 자주 하는 실수
배경 없이 Glass를 올리는 실수가 가장 흔합니다. 블러는 뒤에 비칠 콘텐츠가 있어야 의미가 있는데, 흰 배경 위에 Glass를 얹으면 그냥 반투명 상자로 보입니다. 그라데이션 블롭이나 이미지를 반드시 뒤에 깔아주세요.
텍스트 가독성을 무시하는 실수도 자주 봅니다. 반투명 배경에 글자를 올릴 때는 충분한 대비가 필요한데, 경험상 bg-base-100/70 정도가 가독성과 Glass 효과의 균형점이었습니다.
마지막으로 테두리를 빠뜨리는 실수. border-white/40 같은 미세한 테두리가 없으면 Glass 요소가 배경에 묻혀 경계가 사라집니다. 이 작은 한 줄이 유리의 가장자리 반사를 책임지는 핵심입니다.
마무리
Glass Morphism은 적용하긴 쉽지만 잘 적용하긴 어렵습니다. 투명도, 블러 강도, 테두리의 미세한 조절이 완성도를 가릅니다. 같은 속성을 쓰고도 결과가 천차만별인 이유죠.
다행히 Tailwind의 유틸리티 클래스로 Glass 스타일을 한 번 체계화해두면, 일관된 디자인 시스템을 유지하면서도 새 UI를 빠르게 찍어낼 수 있습니다. 규칙을 먼저 정하고, 그 규칙을 모든 요소에 똑같이 적용하는 것. 그게 이번 작업에서 얻은 가장 큰 교훈이었습니다.
