---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-06
---

# 리퀴드 글라스 (Liquid Glass)

> 한 줄 정의
> 배경을 블러·굴절시키는 반투명 유리 레이어가 콘텐츠 위에 떠 있는 스타일. Apple이 2025년(iOS 26·macOS Tahoe) 전 플랫폼 디자인 언어로 채택하며 표준이 됐다.

![[preview-liquid-glass.jpg]]

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 앱 크롬 — 네비게이션 바·툴바·플로팅 컨트롤 | 배경이 단색/저채도 (유리 효과가 안 보임) |
| 미디어(사진·영상·지도) 위 오버레이 UI | 텍스트 대비를 보장 못 하는 곳 |
| 모바일 우선 제품, 애플 생태계 톤 매칭 | `backdrop-filter` 폴백 없는 구형 환경 |

## 스타일 DNA

### 색 — 유리는 무채색, 색은 배경이 낸다

| 토큰 | 값 | 역할 |
|------|-----|------|
| glass-fill | `linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.10))` | 유리 몸체 |
| glass-border | `rgba(255,255,255,.5)` | 테두리 |
| specular | `rgba(255,255,255,.7~.95)` | 상단 하이라이트 |
| 배경 | 채도 높은 그라디언트/사진 | 유리가 굴절시킬 재료 |

- 유리 자체에 색을 칠하지 않는다. 배경이 화려할수록 유리가 산다 — **배경 설계가 절반**이다.

### 형태

- radius 크게: `20~32px`, 컨트롤은 pill(`999px`).
- 레이어 위계: 유리 두께(blur 강도·불투명도)로 z-깊이를 표현 — 위에 뜰수록 blur ↑, 불투명도 ↑.

### 모션

- 유리는 정적이어도 배경이 움직이면 살아 보인다 — 배경 그라디언트 슬로우 시프트가 가성비 최고.
- 등장은 scale `0.96→1` + opacity, 150~250ms ease-out.

## 핵심 레시피 (CSS)

```css
.glass {
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.10));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow:
    0 24px 60px rgba(20,10,60,.28),          /* 부양 그림자 */
    inset 0 1px 0 rgba(255,255,255,.7),       /* 상단 모서리 하이라이트 */
    inset 0 -1px 0 rgba(255,255,255,.15);     /* 하단 미광 */
}
/* specular — 상단에 가는 빛줄기 */
.glass::before {
  content: ""; position: absolute; left: 8%; top: 0; width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}
/* 폴백 — backdrop-filter 미지원 시 불투명도로 대체 */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(255,255,255,.82); }
}
```

- `saturate(180%)`가 핵심 — blur만 걸면 뿌옇고 죽은 유리가 된다. 통과하는 색을 증폭해야 "리퀴드"다.
- 가장자리 굴절까지 가려면 SVG `feDisplacementMap`을 쓰는 고급 기법이 있으나 비용이 크다 — 크롬 요소엔 위 레시피로 충분.

> [!WARNING] 접근성
> - 유리 위 텍스트는 배경에 따라 대비가 요동친다 → 텍스트 뒤 스크림(어두운 반투명층) 또는 `text-shadow`로 하한 보장, 본문 4.5:1.
> - `prefers-reduced-transparency: reduce`에서 불투명 배경으로 강등하는 분기를 처음부터 넣는다 (Apple도 시스템 설정으로 제공).

## 흔한 실수

- 유리에 브랜드 색을 직접 칠함 → 그냥 반투명 색판. 색은 배경에, 유리는 무채색에.
- 모든 카드를 유리로 → 위계 소멸. 유리는 **떠 있는 것**(크롬·오버레이)에만.
- blur만 걸고 saturate 생략 → 뿌연 아크릴. 하이라이트/보더 생략 → 두께감 없는 비닐.

## 실물 레퍼런스

**정석 — 원전(Apple)**
- [Apple HIG — Materials](https://developer.apple.com/design/human-interface-guidelines/materials) — 공식 가이드라인. 두께 위계·접근성 강등 규칙의 출처.
- [WWDC25 — Meet Liquid Glass](https://developer.apple.com/videos/play/wwdc2025/219/) — 렌징(굴절)·환경 적응 동작의 설계 의도를 디자이너가 직접 설명.
- [WWDC25 — Get to know the new design system](https://developer.apple.com/videos/play/wwdc2025/356/) — 시스템 전체에서 유리가 어디에/왜 쓰이는지.
- [Apple — Liquid Glass 기술 개요](https://developer.apple.com/documentation/technologyoverviews/liquid-glass) — 구현 관점 요약 문서.

**웹 구현 — 기법**
- [kube.io — Liquid Glass in the Browser](https://kube.io/blog/liquid-glass-css-svg/) — feDisplacementMap 굴절의 수학까지 파는 최고 심층 (크로미움 한정 주의).
- [CSS-Tricks — Getting Clarity on Apple's Liquid Glass](https://css-tricks.com/getting-clarity-on-apples-liquid-glass/) — 웹 구현 시도들의 지형 정리 + 접근성 논점.
- [LogRocket — Liquid Glass with CSS and SVG](https://blog.logrocket.com/how-create-liquid-glass-effects-css-and-svg/) — 단계별 튜토리얼.
- [FreeFrontend — CSS Liquid Glass 모음](https://freefrontend.com/css-liquid-glass/) — 코드 스니펫 10+.
- [CodePen — CSS/SVG Liquid Glass](https://codepen.io/rebane2001/pen/OPVQXMv) — 드래그하며 굴절을 체감하는 데모.

**실앱 관찰**
- [Mobbin](https://mobbin.com) — iOS 26 실앱 스크린샷·플로우. 유리 크롬이 실제 어디에 붙는지 관찰용.

- 로컬 데모: `스타일/_previews/스타일-데모.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · [[UI 시각 체계]] (깊이·레이어 절) · 인접 스타일: [[그레인 블러]] (분위기 축), [[데이터 디자인]] (반대 축 — 물성 없는 정보 우선)