Glassmorphism, 2020 iOS Big Sur의 반투명 블러

한 줄로

반투명 + 흐림 + 약한 테두리. 유리(glass) 같은 디자인입니다. 2020년 macOS Big Sur 출시와 함께 다시 부활했습니다.

어디서 왔나

반투명 효과 자체는 새 것이 아닙니다.

2007 Windows Aero: Vista/7의 반투명 테두리.

2013 iOS 7: control center의 반투명.

2020 macOS Big Sur: Apple이 시스템 전체에 본격 적용.

2020년 큰 변화입니다. Apple이 macOS Big Sur에서 도크, 사이드바, 메뉴를 모두 반투명 + 강한 블러로 다시 디자인했습니다. 이 미적 흐름이 트위터/디자이너 커뮤니티에서 "glassmorphism"이라 명명됐습니다.

명명자는 정확히 알려져 있지 않습니다. 우크라이나 디자이너 Mikhail Cvetkov가 2020년 Dribbble 글에서 본인 디자인을 "neumorphism의 다음 트렌드"로 소개하며 glassmorphism 용어가 폭발적으로 퍼졌다고 알려져 있습니다.

5가지 핵심 요소

1. 배경 흐림(backdrop blur): 뒷 콘텐츠가 흐릿하게 보임.

2. 반투명: 30~70% 알파.

3. 밝은 테두리: 흰색 또는 라이트 그레이 1px 테두리.

4. 다채로운 배경: 흐림이 잘 보이려면 배경에 색 변화 필요.

5. 그림자: 약한 그림자로 떠 있는 느낌.

CSS 구현

.glass-card { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); }

핵심은 backdrop-filter: blur()입니다. 이 속성이 2020년대 들어 모든 브라우저에서 지원되면서 glassmorphism이 웹에서도 가능해졌습니다.

함정

성능 비용: 블러 효과는 GPU를 많이 씁니다. 저사양 기기에서 끊깁니다.

접근성: 텍스트가 배경에 묻혀 대비가 약해질 수 있습니다. WCAG 색 대비 4.5:1 유지가 어렵습니다.

다양한 배경: 단색 배경에서는 효과가 없습니다. 사진/그라데이션 배경에서만 빛납니다.

유행 vs 지속 가치

Glassmorphism은 2020~2021년 큰 유행 후 살짝 식었습니다. 다만 시스템 컴포넌트(상태바, 토스트, 모달 배경)에는 여전히 적절합니다. 전체 페이지를 glassmorphism으로 도배하는 건 트렌드 노이즈입니다.

바이브 메이커가 챙길 한 가지

glassmorphism을 핵심 브랜드 미감으로 삼는 건 위험합니다. 트렌드는 곧 식습니다. 다만 모달, 헤더, 떠 있는 UI 요소에 부분적으로 쓰면 깊이감이 자연스럽습니다.

관련

Skeuomorphism · Neumorphism · Flat design