글래스모피즘

컴포넌트

글래스모피즘

Glassmorphism

글래스모피즘은 반투명 표면 뒤의 배경을 흐리게 처리해 한 면을 젖빛 유리처럼 보이게 만드는 표현 기법입니다.

Frosted Glass
blur8px

정의

글래스모피즘은 화면의 한 표면을 젖빛 유리처럼 보이게 만드는 표현 기법입니다. 방법은 두 가지가 겹쳐 작동합니다. 먼저 그 표면 뒤에 있는 배경을 흐리게 blur 처리해 무엇이 있는지 어렴풋이만 비치게 하고, 그 위에 아주 옅은 흰색을 반투명하게 얹어 표면 자체에 살짝 뿌연 색을 입힙니다. 그러면 뒤 배경이 완전히 가려지지도, 그대로 보이지도 않는 중간 상태가 되어 마치 서리 낀 유리 너머를 보는 듯한 질감이 생깁니다. 카드나 상단 내비게이션처럼 배경 위에 떠 있는 면에 자주 쓰이는 표현입니다.

왜 중요한가

글래스모피즘이 주목받는 이유는 화려한 배경을 살리면서도 그 위에 얹은 요소에 깊이와 세련된 인상을 더해 주기 때문입니다. 배경 사진이나 그라데이션을 그대로 두면서 카드만 반투명 유리로 처리하면, 요소가 배경보다 앞에 떠 있다는 층위가 자연스럽게 느껴져 화면에 입체감이 생깁니다. 완전히 불투명한 카드로 배경을 가려 버리는 것과 달리, 유리 효과는 배경과 전경을 부드럽게 이어 주어 답답함 없이 정보를 얹을 수 있습니다. 다만 이 효과는 시각적 매력이 큰 만큼 함정도 뚜렷합니다. 유리 위에 놓인 글자는 뒤 배경과 뒤섞여 대비가 떨어지기 쉽고, 배경을 실시간으로 흐리는 처리는 기기에 성능 부담을 주기 때문에, 예뻐 보인다고 아무 데나 쓰면 오히려 역효과가 납니다.

흔한 실수

  • 유리 위 텍스트의 대비를 확보하지 않는 경우입니다. 반투명 표면 뒤로 밝고 어두운 배경이 뒤섞여 비치면 글자가 어떤 곳에서는 읽히고 어떤 곳에서는 묻혀, 가독성이 배경에 따라 들쭉날쭉해지고 사용자는 같은 글을 자리마다 다르게 읽게 됩니다.
  • 화면 곳곳에 유리 효과를 남용하는 경우입니다. 모든 면이 반투명하면 오히려 층위 구분이 사라져 무엇이 앞이고 뒤인지 알 수 없게 되고, 화면 전체가 뿌옇게 흐려지며 성능 부담만 커집니다.
  • 배경 흐림을 지원하지 않는 환경을 고려하지 않는 경우입니다. 효과가 빠졌을 때 대비책이 없으면, 어떤 기기에서는 표면이 그대로 투명해져 글자가 배경에 묻히고, 같은 화면이 기기마다 전혀 다르게 보이게 됩니다.

실무 팁

  • 유리 위 글자의 가독성을 반드시 확보하세요. 반투명도를 조금 높여 표면을 더 불투명하게 하거나, 텍스트 아래에 옅은 그림자나 어두운 층을 깔면 배경이 어떻든 대비가 안정적으로 유지됩니다.
  • 성능 부담이 있는 배경 흐림 효과는 꼭 필요한 한두 곳에만 쓰세요. 상단 바나 주요 카드처럼 효과가 값어치를 하는 자리에 아껴 두면 인상은 살리고 부담은 줄입니다.
  • 흐림의 세기와 흰색의 농도는 배경에 맞춰 미세하게 조절하세요. 배경이 복잡할수록 더 흐리고 더 뿌옇게, 단순할수록 옅게 두면 유리 질감은 살면서도 뒤 내용이 어수선하게 비쳐 방해하는 일이 줄어듭니다.

AI에게 시키기

배경 위에 유리 카드·상단바를 새로 만들 때

[배경 — 예: 풀스크린 그라데이션 위에 뜬 가격 카드]에 글래스모피즘을 적용해줘. backdrop-filter: blur(12px)로 뒤 배경을 흐리고, 그 위에 background: rgba(255,255,255,0.15)로 옅은 흰색을 반투명하게 얹고, 1px solid rgba(255,255,255,0.25) 테두리로 유리 가장자리를 살려줘. 이 효과는 이 한 면에만 쓰고 나머지 카드는 불투명하게 둬서 앞뒤 층위가 뭉개지지 않게 해줘. Safari용 -webkit-backdrop-filter도 같이 넣고, 유리 위 본문 글자는 배경이 밝든 어둡든 대비 4.5:1이 유지되도록 흰색 농도를 잡아줘.

유리 위 글자가 배경에 따라 묻혀 안 읽힐 때

아래에 붙여넣을 CSS에서 유리 표면 위 텍스트가 배경의 밝은 부분과 어두운 부분 어디서든 WCAG AA 대비 4.5:1(큰 글자는 3:1)을 넘기도록 고쳐줘. 방법은 둘 중 상황에 맞게 골라줘 — 표면 흰색 불투명도를 0.15에서 0.25~0.35까지 올려 배경을 더 가리거나, 텍스트 아래에만 어두운 스크림 층(예: rgba(0,0,0,0.35))이나 text-shadow: 0 1px 2px rgba(0,0,0,0.5)를 깔아줘. 배경에서 가장 밝은 지점과 가장 어두운 지점 둘 다에 글자를 겹쳐 본 대비 계산을 근거로 제시하고, 유리 질감은 살리는 선에서 최소한으로만 손대줘.

유리 효과가 기기마다 깨지거나 화면 곳곳에 남발됐을 때

아래에 붙여넣을 코드에서 backdrop-filter를 쓴 곳을 전부 점검해줘. 먼저 유리 스타일을 @supports (backdrop-filter: blur(1px)) 안에만 두고, 미지원 브라우저용 폴백으로 background를 rgba(255,255,255,0.9)처럼 충분히 불투명한 단색으로 떨어지게 해서 어떤 기기에서도 글자가 배경에 묻히지 않게 해줘. 그리고 유리 효과가 세 곳 이상 남발됐으면 상단 바나 핵심 카드 한두 곳만 남기고 나머지는 불투명 면으로 되돌려 층위와 성능을 살려줘. 마지막으로 blur 세기는 배경 복잡도에 맞춰 — 복잡한 배경은 16px 안팎으로 세게, 단순한 배경은 8px 안팎으로 옅게 — 조절한 이유와 함께 정리해줘.

관련 개념