글래스모피즘

컴포넌트

글래스모피즘

Glassmorphism

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

Frosted Glass
blur8px

정의

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

왜 중요한가

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

흔한 실수

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

실무 팁

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

관련 개념