# Glassmorphism — 디자인 스타일 가이드
## 기본 정보
- **ID**: glassmorphism
- **카테고리**: design-style
- **연도**: 2020
## 설명
반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다.
## 역사·배경
2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.
## 핵심 원칙
- 투명성
- 깊이감
- 우아함
## 주요 특징
- 배경 블러 효과
- 반투명 레이어
- 미묘한 테두리
- 다층 구조
- 부드러운 그림자
## 사용 사례
- 모던 랜딩 페이지
- 대시보드 카드
- 모달·팝업 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
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=glassmorphism
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=glassmorphism&merged=true
Glassmorphism
반투명한 유리 효과를 활용한 모던하고 세련된 디자인 스타일입니다.
2020년 macOS Big Sur 발표와 함께 급부상. CSS backdrop-filter의 브라우저 지원 확대로 웹에서도 인기 폭발.
주요 특징
- 배경 블러 효과
- 반투명 레이어
- 미묘한 테두리
- 다층 구조
- 부드러운 그림자
장단점
장점
- +시각적으로 매우 세련되고 프리미엄한 느낌
- +다채로운 배경과 조화롭게 어울림
- +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