Ears바이브코딩 용어사전디자인 스타일
글래스모피즘 (Glassmorphism)
글래스모피즘은 반투명한 배경에 블러(backdrop-blur)를 걸어 젖빛 유리 너머로 뒤가 비쳐 보이게 만드는 디자인 스타일로, 화려한 배경 위에 떠 있는 카드·패널에 깊이감을 줍니다.
최종 업데이트
유리(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가 만듭니다