UI 가이드스타일
글래스모피즘Glassmorphism
글래스모피즘은 반투명한 배경에 블러(backdrop-blur)를 걸어 젖빛 유리 너머로 뒤가 비쳐 보이게 만드는 디자인 스타일입니다. 화려한 배경 위에 떠 있는 카드·패널에 깊이감을 줍니다.
- 이렇게 생겼습니다
- 뒤가 흐릿하게 비치는 반투명 유리 카드.
- 프롬프트에 쓰는 이름
- Glassmorphism · 다른 이름: 유리 효과, Frosted Glass, 블러 카드
유리(glass) + 형태주의(-morphism)의 합성어입니다. macOS Big Sur, iOS 제어 센터, Windows 11의 아크릴 패널이 대표 사례입니다. 성립 조건이 하나 있습니다. 뒤에 비칠 것이 있어야 합니다. 단색 배경 위의 글래스모피즘은 그냥 흐린 회색 카드입니다. 그라데이션이나 이미지 배경 위에서만 효과가 삽니다.
글래스모피즘 카드
배경이 카드 뒤로 흐릿하게 비쳐 깊이감을 만듭니다.
레시피
핵심 CSS는 세 줄입니다. 반투명 배경(rgba 또는 낮은 opacity의 흰색) + backdrop-filter: blur() + 미세한 반투명 보더(유리 가장자리의 빛). 여기에 은은한 그림자를 더하면 떠 있는 느낌이 완성됩니다.
주의할 점이 있습니다. 반투명 배경 위 텍스트는 대비가 배경에 따라 출렁입니다. 본문 텍스트가 올라가는 면에는 과한 투명도를 피하고, 장식적인 표면에 쓰는 것이 안전합니다.
AI에게 시키기
히어로 섹션 위에 글래스모피즘 카드를 만들어줘.
- 배경: 컬러 그라데이션 (유리 효과가 보이도록)
- 카드: 흰색 8~12% 투명 배경 + backdrop-blur 12~16px
- 1px 반투명 흰색 보더, 부드러운 그림자
- 카드 안 텍스트 대비(WCAG AA) 확보
혼동 주의
- 뉴모피즘: 이름은 비슷하지만 정반대 재질입니다. 유리가 아니라 배경과 같은 재질이 눌리고 튀어나온 느낌입니다.
- 단순 반투명: blur 없이 opacity만 낮춘 것입니다. 젖빛 유리 느낌은
backdrop-filter가 만듭니다.