표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Glassmorphism
반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다.
- YEAR
- 2020
- MOOD
- 테크·미래적 · 럭셔리
- PRIMARY#FFFFFF
- SECONDARY#F0F0F0
- ACCENT#E0E0FF
- BG
- SURFACE
취급 표시
- 둥근 모서리
- 가는 테두리
- 번지는 바탕
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 3단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 2단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 4단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 3단계
- 테크·미래적
- 럭셔리
함께 보면 좋은 스타일
어디에 쓰나
실제로 쓰는 곳
- macOS Big Sur UI
- Windows 11 일부 UI
- 많은 SaaS 랜딩 페이지
사용 사례
- 모던 랜딩 페이지
- 대시보드 카드
- 모달·팝업 UI
- 프리미엄 앱 온보딩
이런 프로젝트에 맞습니다
- 프리미엄 랜딩 페이지
- SaaS 대시보드
- 모달·오버레이 UI
- 포트폴리오 사이트
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.
핵심 원칙
- 투명성
- 깊이감
- 우아함
주요 특징
- 배경 블러 효과
- 반투명 레이어
- 미묘한 테두리
- 다층 구조
- 부드러운 그림자
장점과 한계
장점
- 시각적으로 매우 세련되고 프리미엄한 느낌
- 다채로운 배경과 조화롭게 어울림
- CSS backdrop-filter로 웹에서도 쉽게 구현
한계
- backdrop-filter 미지원 브라우저 존재 (IE 등)
- 콘텐츠 가독성 저하 위험
- 복잡한 배경에서 텍스트 대비 확보 어려움
- 남발 시 촌스러워질 수 있음
컬러 시스템
배경 이미지·그라데이션의 색이 glass 레이어를 통해 배어나오는 간접 컬러 시스템
색의 역할
- background: 색감의 핵심 — 그라데이션·이미지·비비드 색상 배경이 전체 색조를 결정
- glass-surface: 흰색 또는 원하는 색의 반투명 (rgba, 투명도 10~30% 권장)
- glass-border: 반투명 흰색 테두리 (rgba(255,255,255,0.3~0.5))
- text: 배경 대비 높은 흰색 또는 진한 색 — 유리 위에서 가독성 확보
- accent: 유리 내부의 강조 요소 — 배경과 어울리되 대비 확보
제약
- 배경 없이 glass만 단독 사용 금지 — 반드시 blur 처리될 배경 레이어 필요
- glass-surface 투명도는 10~30% 범위 권장 — 그 이상이면 glass 아님, 그 이하면 투명도 없음
- glass 레이어 3개 이상 중첩 금지 — 가독성 붕괴
- backdrop-filter: blur(8~20px) 범위 권장 — 너무 낮으면 효과 없음, 너무 높으면 배경 식별 불가
다크모드 — 배경을 어두운 그라데이션으로 교체. glass-surface를 rgba(0,0,0,0.2~0.4)로 반전. 텍스트는 흰색 유지
명도 대비 — 반투명 배경 특성상 WCAG 자동 보장 어려움 — 텍스트에 text-shadow 또는 semi-opaque 배경 추가로 4.5:1 수동 확보
타이포그래피
가볍고 세련된 산세리프. 유리 효과의 우아함과 어울리는 얇은~중간 weight
글꼴은 최대 2종 · 스케일 비율 1.25 (Major Third) — 지나친 크기 차이는 glass의 가벼운 미감을 해침
- 두꺼운 bold 폰트 지양 — 유리의 가벼운 느낌과 충돌
- 흰색 텍스트 사용 시 font-weight 300~400 권장 (얇을수록 glass 느낌 강화)
- 텍스트 그림자(text-shadow) 또는 backdrop 추가로 가독성 보완 필수
- heading에서 letter-spacing 약간 넓게 (0.05~0.1em) — 럭셔리 느낌 강화
설계 제약
반드시 포함
- backdrop-filter: blur() — 없으면 glassmorphism 아님
- 반투명 테두리 (glass-border)
- 배경으로 사용할 컬러풀한 레이어 (그라데이션, 이미지, 블러된 도형 등)
- 여백 — glass 위 콘텐츠는 숨 쉬어야 함
하지 말 것
- 불투명 solid 배경 카드를 glass와 혼용 금지 — 스타일 일관성 파괴
- 단색 배경 위 glass 사용 금지 — blur 처리할 텍스처나 그라데이션 배경 필수
- drop-shadow 강하게 사용 금지 — 미묘한 그림자만 허용 (0 8px 32px rgba(0,0,0,0.1) 수준)
- glass 위에 dense한 정보 나열 금지 — 콘텐츠 양 최소화
모션 — 부드러운 ease-in-out, 300~500ms. glass 레이어 등장 시 opacity 0→1 + blur 증가 페이드인. 과도한 모션은 유리의 고요함을 해침.
접근성
반투명 배경 위 텍스트는 대비율이 낮아질 수 있어 WCAG 검증 필수. 블러 효과는 모션 민감 사용자에게 고려 필요.
자주 묻는 질문
Glassmorphism이란 무엇인가요?
반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다. 2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.
Glassmorphism의 핵심 디자인 원칙은 무엇인가요?
Glassmorphism의 핵심 원칙은 투명성, 깊이감, 우아함입니다.
Glassmorphism은 어떤 프로젝트에 적합한가요?
Glassmorphism은 모던 랜딩 페이지, 대시보드 카드, 모달·팝업 UI, 프리미엄 앱 온보딩, 프리미엄 랜딩 페이지, SaaS 대시보드, 모달·오버레이 UI, 포트폴리오 사이트 등의 프로젝트에 적합합니다.
Glassmorphism의 장단점은 무엇인가요?
장점으로는 시각적으로 매우 세련되고 프리미엄한 느낌, 다채로운 배경과 조화롭게 어울림, CSS backdrop-filter로 웹에서도 쉽게 구현이 있습니다. 단점으로는 backdrop-filter 미지원 브라우저 존재 (IE 등), 콘텐츠 가독성 저하 위험, 복잡한 배경에서 텍스트 대비 확보 어려움, 남발 시 촌스러워질 수 있음이 있습니다.
Glassmorphism에서 색상은 어떻게 사용하나요?
배경 이미지·그라데이션의 색이 glass 레이어를 통해 배어나오는 간접 컬러 시스템 색상 역할은 background: 색감의 핵심 — 그라데이션·이미지·비비드 색상 배경이 전체 색조를 결정, glass-surface: 흰색 또는 원하는 색의 반투명 (rgba, 투명도 10~30% 권장), glass-border: 반투명 흰색 테두리 (rgba(255,255,255,0.3~0.5))입니다. 주의사항: 배경 없이 glass만 단독 사용 금지 — 반드시 blur 처리될 배경 레이어 필요, glass-surface 투명도는 10~30% 범위 권장 — 그 이상이면 glass 아님, 그 이하면 투명도 없음.
Glassmorphism에 어울리는 폰트 스타일은 무엇인가요?
Glassmorphism에는 가볍고 세련된 산세리프. 유리 효과의 우아함과 어울리는 얇은~중간 weight 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 두꺼운 bold 폰트 지양 — 유리의 가벼운 느낌과 충돌, 흰색 텍스트 사용 시 font-weight 300~400 권장 (얇을수록 glass 느낌 강화).
Glassmorphism 디자인에서 하면 안 되는 것은 무엇인가요?
Glassmorphism에서 피해야 할 것: 불투명 solid 배경 카드를 glass와 혼용 금지 — 스타일 일관성 파괴, 단색 배경 위 glass 사용 금지 — blur 처리할 텍스처나 그라데이션 배경 필수, drop-shadow 강하게 사용 금지 — 미묘한 그림자만 허용 (0 8px 32px rgba(0,0,0,0.1) 수준), glass 위에 dense한 정보 나열 금지 — 콘텐츠 양 최소화.
Glassmorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Glassmorphism을 적용한 대표적인 제품·서비스로는 macOS Big Sur UI, Windows 11 일부 UI, 많은 SaaS 랜딩 페이지 등이 있습니다.