# Glassmorphism — 디자인 스타일 가이드
## 기본 정보
- **ID**: glassmorphism
- **카테고리**: design-style
- **연도**: 2020
## 설명
반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다.
## 역사·배경
2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.
## 핵심 원칙
- 투명성
- 깊이감
- 우아함
## 주요 특징
- 배경 블러 효과
- 반투명 레이어
- 미묘한 테두리
- 다층 구조
- 부드러운 그림자
## 컬러 시스템 가이드
배경 이미지·그라데이션의 색이 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) — 럭셔리 느낌 강화
## 하면 안 되는 것 (안티패턴)
- 불투명 solid 배경 카드를 glass와 혼용 금지 — 스타일 일관성 파괴
- 단색 배경 위 glass 사용 금지 — blur 처리할 텍스처나 그라데이션 배경 필수
- drop-shadow 강하게 사용 금지 — 미묘한 그림자만 허용 (0 8px 32px rgba(0,0,0,0.1) 수준)
- glass 위에 dense한 정보 나열 금지 — 콘텐츠 양 최소화
## 반드시 포함해야 하는 것
- backdrop-filter: blur() — 없으면 glassmorphism 아님
- 반투명 테두리 (glass-border)
- 배경으로 사용할 컬러풀한 레이어 (그라데이션, 이미지, 블러된 도형 등)
- 여백 — glass 위 콘텐츠는 숨 쉬어야 함
## 모션 가이드
부드러운 ease-in-out, 300~500ms. glass 레이어 등장 시 opacity 0→1 + blur 증가 페이드인. 과도한 모션은 유리의 고요함을 해침.
## 사용 사례
- 모던 랜딩 페이지
- 대시보드 카드
- 모달·팝업 UI
- 프리미엄 앱 온보딩
## 추천 프로젝트 유형
- 프리미엄 랜딩 페이지
- SaaS 대시보드
- 모달·오버레이 UI
- 포트폴리오 사이트
## 장점
- 시각적으로 매우 세련되고 프리미엄한 느낌
- 다채로운 배경과 조화롭게 어울림
- CSS backdrop-filter로 웹에서도 쉽게 구현
## 단점·한계
- backdrop-filter 미지원 브라우저 존재 (IE 등)
- 콘텐츠 가독성 저하 위험
- 복잡한 배경에서 텍스트 대비 확보 어려움
- 남발 시 촌스러워질 수 있음
## 실제 사용 제품·서비스
- macOS Big Sur UI
- Windows 11 일부 UI
- 많은 SaaS 랜딩 페이지
## 접근성
반투명 배경 위 텍스트는 대비율이 낮아질 수 있어 WCAG 검증 필수. 블러 효과는 모션 민감 사용자에게 고려 필요.
## 관련 스타일
- [aurora-design](https://ui.buildersgate.com/styles/aurora-design)
- [neumorphism](https://ui.buildersgate.com/styles/neumorphism)
- [dark-mode](https://ui.buildersgate.com/styles/dark-mode)
- [fluent-design](https://ui.buildersgate.com/styles/fluent-design)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #FFFFFF
- secondary: #F0F0F0
- accent: #E0E0FF
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
- surface: rgba(255, 255, 255, 0.1)
- text: #FFFFFF
- textSecondary: #E0E0E0
- border: rgba(255, 255, 255, 0.2)
### 헤더
- background: rgba(255, 255, 255, 0.1)
- textColor: #FFFFFF
- accentColor: #E0E0FF
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.02em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 4px 6px rgba(0, 0, 0, 0.1)
- md: 0 8px 16px rgba(0, 0, 0, 0.15)
- lg: 0 16px 32px rgba(0, 0, 0, 0.2)
- xl: 0 24px 48px rgba(0, 0, 0, 0.25)
### Border Radius
- none: 0
- sm: 8px
- md: 16px
- lg: 24px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: rgba(255, 255, 255, 0.2)
### 이펙트
- blur: 12px
- opacity: 0.7
- transition: all 0.4s ease-in-out
### 애니메이션
- duration: 400ms
- easing: ease-in-out
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=glow / textTransform=none
- 카드: style=glass / hoverEffect=glow
- 인풋: style=filled / focusEffect=glow
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: spacious
### 특수 효과
- glassmorphism: true
- gradientText: true
- animatedBackground: true
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Glassmorphism이란 무엇인가요?
A: 반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다. 2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.
### Q: Glassmorphism의 핵심 디자인 원칙은 무엇인가요?
A: Glassmorphism의 핵심 원칙은 투명성, 깊이감, 우아함입니다.
### Q: Glassmorphism은 어떤 프로젝트에 적합한가요?
A: Glassmorphism은 모던 랜딩 페이지, 대시보드 카드, 모달·팝업 UI, 프리미엄 앱 온보딩, 프리미엄 랜딩 페이지, SaaS 대시보드, 모달·오버레이 UI, 포트폴리오 사이트 등의 프로젝트에 적합합니다.
### Q: Glassmorphism의 장단점은 무엇인가요?
A: 장점으로는 시각적으로 매우 세련되고 프리미엄한 느낌, 다채로운 배경과 조화롭게 어울림, CSS backdrop-filter로 웹에서도 쉽게 구현이 있습니다. 단점으로는 backdrop-filter 미지원 브라우저 존재 (IE 등), 콘텐츠 가독성 저하 위험, 복잡한 배경에서 텍스트 대비 확보 어려움, 남발 시 촌스러워질 수 있음이 있습니다.
### Q: Glassmorphism에서 색상은 어떻게 사용하나요?
A: 배경 이미지·그라데이션의 색이 glass 레이어를 통해 배어나오는 간접 컬러 시스템 색상 역할은 background: 색감의 핵심 — 그라데이션·이미지·비비드 색상 배경이 전체 색조를 결정, glass-surface: 흰색 또는 원하는 색의 반투명 (rgba, 투명도 10~30% 권장), glass-border: 반투명 흰색 테두리 (rgba(255,255,255,0.3~0.5))입니다. 주의사항: 배경 없이 glass만 단독 사용 금지 — 반드시 blur 처리될 배경 레이어 필요, glass-surface 투명도는 10~30% 범위 권장 — 그 이상이면 glass 아님, 그 이하면 투명도 없음.
### Q: Glassmorphism에 어울리는 폰트 스타일은 무엇인가요?
A: Glassmorphism에는 가볍고 세련된 산세리프. 유리 효과의 우아함과 어울리는 얇은~중간 weight 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 두꺼운 bold 폰트 지양 — 유리의 가벼운 느낌과 충돌, 흰색 텍스트 사용 시 font-weight 300~400 권장 (얇을수록 glass 느낌 강화).
### Q: Glassmorphism 디자인에서 하면 안 되는 것은 무엇인가요?
A: Glassmorphism에서 피해야 할 것: 불투명 solid 배경 카드를 glass와 혼용 금지 — 스타일 일관성 파괴, 단색 배경 위 glass 사용 금지 — blur 처리할 텍스처나 그라데이션 배경 필수, drop-shadow 강하게 사용 금지 — 미묘한 그림자만 허용 (0 8px 32px rgba(0,0,0,0.1) 수준), glass 위에 dense한 정보 나열 금지 — 콘텐츠 양 최소화.
### Q: Glassmorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Glassmorphism을 적용한 대표적인 제품·서비스로는 macOS Big Sur UI, Windows 11 일부 UI, 많은 SaaS 랜딩 페이지 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=glassmorphism
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=glassmorphism&merged=true
2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.
#FFFFFF
핵심 원칙
1
투명성
2
깊이감
3
우아함
주요 특징
배경 블러 효과
반투명 레이어
미묘한 테두리
다층 구조
부드러운 그림자
장단점
장점
+시각적으로 매우 세련되고 프리미엄한 느낌
+다채로운 배경과 조화롭게 어울림
+CSS backdrop-filter로 웹에서도 쉽게 구현
단점 / 한계
−backdrop-filter 미지원 브라우저 존재 (IE 등)
−콘텐츠 가독성 저하 위험
−복잡한 배경에서 텍스트 대비 확보 어려움
−남발 시 촌스러워질 수 있음
적합한 사용처
사용 사례
모던 랜딩 페이지
대시보드 카드
모달·팝업 UI
프리미엄 앱 온보딩
이런 프로젝트에 추천
프리미엄 랜딩 페이지SaaS 대시보드모달·오버레이 UI포트폴리오 사이트
접근성
반투명 배경 위 텍스트는 대비율이 낮아질 수 있어 WCAG 검증 필수. 블러 효과는 모션 민감 사용자에게 고려 필요.
실제 사용 예시
macOS Big Sur UIWindows 11 일부 UI많은 SaaS 랜딩 페이지
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Glass Cards
반투명한 유리 효과를 가진 카드
Glass Effect
배경이 블러 처리되어 투명한 유리 같은 효과를 만듭니다.
Frosted Glass
더 강한 블러로 서리 낀 유리 효과를 표현합니다.
Glass Buttons
투명한 유리 질감의 버튼
Glass Navigation Bar
네비게이션 바에 적용된 글래스모피즘
Glass Modal
모달 다이얼로그에 적용된 유리 효과
Glass Modal
이것은 글래스모피즘 스타일의 모달 창입니다. 배경을 통해 뒤의 내용이 은은하게 비칩니다.
Glass Input Field
입력 필드에 적용된 유리 효과
Glass Typography
유리 배경 위에 사용하는 타이포그래피 — 대비와 블러 조화
Glassmorphism
투명성, 깊이감, 우아함
반투명 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다. 배경의 컬러와 컨텐츠가 함께 보이며 독특한 시각적 층위를 만들어냅니다.
Design Style · 2020 · backdrop-filter: blur
자주 묻는 질문
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 랜딩 페이지 등이 있습니다.