# Glassmorphism

> 반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다.

- 층: 스타일 (디자인 스타일)
- ID: glassmorphism
- 연도: 2020
- 무드 태그: 테크·미래적, 럭셔리
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/glassmorphism

## 정의

반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다.

## 역사·배경

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 증가 페이드인. 과도한 모션은 유리의 고요함을 해침.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: 0 (여백 −2 ↔ +2 빽빽)
- 온도감: -1 (차가움 −2 ↔ +2 따뜻함)
- 시대감: +1 (레트로 −2 ↔ +2 미래적)
- 격식: 0 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 모던 랜딩 페이지
- 대시보드 카드
- 모달·팝업 UI
- 프리미엄 앱 온보딩

## 추천 프로젝트 유형

- 프리미엄 랜딩 페이지
- SaaS 대시보드
- 모달·오버레이 UI
- 포트폴리오 사이트

## 장단점

### 장점

- 시각적으로 매우 세련되고 프리미엄한 느낌
- 다채로운 배경과 조화롭게 어울림
- CSS backdrop-filter로 웹에서도 쉽게 구현

### 단점·한계

- backdrop-filter 미지원 브라우저 존재 (IE 등)
- 콘텐츠 가독성 저하 위험
- 복잡한 배경에서 텍스트 대비 확보 어려움
- 남발 시 촌스러워질 수 있음

## 실제 사용 제품·서비스

- macOS Big Sur UI
- Windows 11 일부 UI
- 많은 SaaS 랜딩 페이지

## 접근성

반투명 배경 위 텍스트는 대비율이 낮아질 수 있어 WCAG 검증 필수. 블러 효과는 모션 민감 사용자에게 고려 필요.

## 자주 묻는 질문

### Q1. Glassmorphism이란 무엇인가요?

반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다. 2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.

### Q2. Glassmorphism의 핵심 디자인 원칙은 무엇인가요?

Glassmorphism의 핵심 원칙은 투명성, 깊이감, 우아함입니다.

### Q3. Glassmorphism은 어떤 프로젝트에 적합한가요?

Glassmorphism은 모던 랜딩 페이지, 대시보드 카드, 모달·팝업 UI, 프리미엄 앱 온보딩, 프리미엄 랜딩 페이지, SaaS 대시보드, 모달·오버레이 UI, 포트폴리오 사이트 등의 프로젝트에 적합합니다.

### Q4. Glassmorphism의 장단점은 무엇인가요?

장점으로는 시각적으로 매우 세련되고 프리미엄한 느낌, 다채로운 배경과 조화롭게 어울림, CSS backdrop-filter로 웹에서도 쉽게 구현이 있습니다. 단점으로는 backdrop-filter 미지원 브라우저 존재 (IE 등), 콘텐츠 가독성 저하 위험, 복잡한 배경에서 텍스트 대비 확보 어려움, 남발 시 촌스러워질 수 있음이 있습니다.

### Q5. 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 아님, 그 이하면 투명도 없음.

### Q6. Glassmorphism에 어울리는 폰트 스타일은 무엇인가요?

Glassmorphism에는 가볍고 세련된 산세리프. 유리 효과의 우아함과 어울리는 얇은~중간 weight 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 두꺼운 bold 폰트 지양 — 유리의 가벼운 느낌과 충돌, 흰색 텍스트 사용 시 font-weight 300~400 권장 (얇을수록 glass 느낌 강화).

### Q7. Glassmorphism 디자인에서 하면 안 되는 것은 무엇인가요?

Glassmorphism에서 피해야 할 것: 불투명 solid 배경 카드를 glass와 혼용 금지 — 스타일 일관성 파괴, 단색 배경 위 glass 사용 금지 — blur 처리할 텍스처나 그라데이션 배경 필수, drop-shadow 강하게 사용 금지 — 미묘한 그림자만 허용 (0 8px 32px rgba(0,0,0,0.1) 수준), glass 위에 dense한 정보 나열 금지 — 콘텐츠 양 최소화.

### Q8. Glassmorphism을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Glassmorphism을 적용한 대표적인 제품·서비스로는 macOS Big Sur UI, Windows 11 일부 UI, 많은 SaaS 랜딩 페이지 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- 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)

### 타이포그래피

- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0.02em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 8px / md 16px / lg 24px / full 9999px
- shadow sm: 0 4px 6px rgba(0, 0, 0, 0.1)
- shadow md: 0 8px 16px rgba(0, 0, 0, 0.15)
- shadow lg: 0 16px 32px rgba(0, 0, 0, 0.2)
- border: 1px solid rgba(255, 255, 255, 0.2)

### 컴포넌트 형태

- button: pill / hover glow / text none
- card: glass / hover glow
- input: filled / focus glow
- badge: pill / subtle
- icon: lucide / stroke 1.5 / size 24px
- layout: boxed / section spacious
- animation: 400ms ease-in-out
- specialEffects: glassmorphism, gradientText, animatedBackground

## 관련 링크

### 관련 스타일

- [Aurora Design](https://ui.buildersgate.com/styles/aurora-design)
- [Neumorphism](https://ui.buildersgate.com/styles/neumorphism)
- [Dark Mode Design](https://ui.buildersgate.com/styles/dark-mode)
- [Fluent Design System](https://ui.buildersgate.com/styles/fluent-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/glassmorphism)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/glassmorphism)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/glassmorphism)

### 비교

- [Glassmorphism vs Aurora Design](https://ui.buildersgate.com/compare/aurora-design-vs-glassmorphism)
- [Glassmorphism vs Claymorphism](https://ui.buildersgate.com/compare/claymorphism-vs-glassmorphism)
- [Glassmorphism vs Corporate Memphis](https://ui.buildersgate.com/compare/corporate-memphis-vs-glassmorphism)
- [Glassmorphism vs Dark Mode Design](https://ui.buildersgate.com/compare/dark-mode-vs-glassmorphism)
- [Glassmorphism vs Fluent Design System](https://ui.buildersgate.com/compare/fluent-design-vs-glassmorphism)
- [Glassmorphism vs Gradient Design](https://ui.buildersgate.com/compare/glassmorphism-vs-gradient-design)
- [Glassmorphism vs Neumorphism](https://ui.buildersgate.com/compare/glassmorphism-vs-neumorphism)

### 쓰임새별 추천

- [SaaS 대시보드](https://ui.buildersgate.com/for/saas-dashboard)
- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)

---

HTML 버전: https://ui.buildersgate.com/styles/glassmorphism

이 문서는 https://ui.buildersgate.com/styles/glassmorphism.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.