# CSS로 구현한 Liquid Glass

> Clean Markdown view of GeekNews topic #21762. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=21762](https://news.hada.io/topic?id=21762)
- GeekNews Markdown: [https://news.hada.io/topic/21762.md](https://news.hada.io/topic/21762.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-07-01T10:31:01+09:00
- Updated: 2025-07-01T10:31:01+09:00
- Original source: [atlaspuplabs.com](https://atlaspuplabs.com/blog/liquid-glass-but-in-css)
- Points: 20
- Comments: 3

## Summary

Apple의 최신 **Liquid Glass 그래픽** 효과를 CSS와 SVG의 고급 필터 기법(backdrop-filter, box-shadow, DisplacementMap 등)으로 브라우저에서 구현하는 방법을 설명합니다.

## Topic Body

- Apple이 WWDC25에서 공개한 **Liquid Glass 디자인 언어**의 핵심 효과를 CSS와 SVG 필터 조합으로 재현하는 방법  
- **Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration** 등 실제 유리 재질을 모방하는 다양한 레이어를 단계별로 CSS/SVG로 구현  
- 주요 효과 구현에는 **backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend** 등 고급 CSS·SVG 기술 사용  
- **브라우저 호환성은 Chrome 중심**이며, Safari/Firefox에서는 SVG 필터가 동작하지 않아 Blur·Shadow만 적용됨  
- 복잡한 효과일수록 **GPU 사용량이 크고, UI 전반에 남용 시 성능 저하**가 발생할 수 있어 핵심 영역 위주 사용 권장  
  
---  
  
### Liquid Glass란?  
  
- Apple의 최신 디자인 언어로, 실제 유리처럼 **빛의 반사·굴절, 색 변화, 입체감**을 모방한 고급 그래픽 효과를 지향함  
- UI 요소에 깊이감과 생동감을 더하는 데 활용되며, 시각적으로 매끄럽고 물리적 감촉을 연상시키는 특징이 있음  
  
### 효과의 주요 레이어 및 구현 방법  
  
#### 1. Specular Highlights(유리의 반사광)  
  
- 유리 가장자리에 하이라이트를 추가해 깊이와 입체감을 강조함  
- CSS의 **inset box-shadow** 여러 개를 중첩 적용해, 각도별로 빛이 반사되는 느낌을 표현  
    ```css  
    box-shadow:  
        inset 10px 10px 20px rgba(153, 192, 255, 0.1),  
        inset 2px 2px 5px rgba(195, 218, 255, 0.2),  
        inset -10px -10px 20px rgba(229, 253, 190, 0.1),  
        inset -2px -2px 30px rgba(247, 255, 226, 0.2);  
    ```  
- [Fresnel Effect]를 참고해, 빛의 반사 강도를 자연스럽게 조정함  
  
#### 2. Blur(배경 블러)  
  
- 유리 뒤쪽 콘텐츠에만 블러를 적용하기 위해 **backdrop-filter: blur(20px);** 사용  
- 실제 요소 자체가 아닌, 배경 콘텐츠에만 효과가 적용됨  
  
#### 3. Color Filter(색상 강조)  
  
- **contrast(80%) saturate(120%)** 등의 backdrop-filter를 추가로 적용해, 유리 뒤 콘텐츠의 **채도 증가·대비 감소**로 선명한 색감 구현  
    ```css  
    backdrop-filter: blur(20px) contrast(80%) saturate(120%);  
    ```  
  
### 4. 굴절(Refraction) 시뮬레이션  
  
- 유리의 곡면이 배경을 비틀어 보이게 하는 **굴절 효과**는 CSS 단독으론 구현 한계가 있어, SVG 필터와 결합하여 구현  
- **Displacement Map**: SVG의 gradient를 활용해, 가장자리에선 픽셀을 압축하고 중앙부는 늘어나는 왜곡 맵(Identity Map)을 생성  
  
    - 예시 SVG의 빨간/파란 그라디언트로 X/Y 방향 픽셀 이동량을 정의  
    - 그라디언트 ramp를 조절해 가장자리 압축·중앙 확장 패턴을 설계  
    - SVG를 Data URL로 변환해 **feImage**로 로드, **feDisplacementMap**에서 좌표 변형에 활용  
  
- **Ripple Distortion**: feTurbulence(노이즈 텍스처)와 추가 feDisplacementMap 조합으로 유리 표면의 미세한 파동까지 묘사  
  
- **Chromatic Aberration(색수차)**: feColorMatrix, feOffset, feBlend 조합으로 RGB 각 채널을 분리·오프셋 후 합성하여, 실제 유리에서 관찰되는 빛 분산 효과 모방  
  
### CSS/SVG 효과 적용 방법  
  
- SVG filter를 정의한 후, **filter: url(#filterId);** 를 활용해 DOM 요소에 적용  
- 모든 효과가 결합된 필터 체인은 실제 유리 패널같은 질감·빛 왜곡·색상 변조를 동시에 재현함  
  
### 호환성 및 성능 주의점  
  
- **SVG displacement filter는 Chrome에서만 정상 지원**. Safari, Firefox 등에서는 효과가 제한됨(Blur/Shadow만 남음)  
- Glass 요소가 많거나 애니메이션 적용 시 **GPU 부하가 크고, 렌더링 성능 저하** 발생  
- 현실적으로는 **Hero/Feature 영역** 등 강조가 필요한 일부 UI에만 사용하는 것이 적합함  
  
### 참고 및 크레딧  
  
- 본 구현법은 Smashing Magazine의 ["A Deep Dive Into The Wonderful World Of SVG Displacement Filtering"](https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/)과 Apple Liquid Glass 공식 문서에 기반함  
- SVG displacement, CSS backdrop-filter, box-shadow 등 최신 웹 기술의 조합적 활용이 핵심임

## Comments



### Comment 40845

- Author: geek12356
- Created: 2025-07-01T17:16:31+09:00
- Points: 2

이 분이 구현하신 게 더 자연스러운 것 같네요  
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

### Comment 42012

- Author: zabefofoon
- Created: 2025-08-01T17:41:46+09:00
- Points: 1
- Parent comment: 40845
- Depth: 1

이건 safari에서는 적용안되네요

### Comment 40843

- Author: bobross0
- Created: 2025-07-01T16:22:47+09:00
- Points: 1

웹에서 구현하기에는 아직 여전히 어색하네요ㅎㅎ