CSS, SVG, 물리 연산을 사용한 Apple WWDC 2025 Liquid Glass 효과 재현

이 글에서는 Apple WWDC 2025에서 선보인 멋진 Liquid Glass UI 효과를 재현하는 방법을 자세히 설명합니다. CSS, SVG displacement map, 물리 기반 굴절 계산을 사용하여 설득력 있는 근사치를 얻을 수 있습니다. 저자는 굴절의 원리를 설명하고, 빛이 서로 다른 매체를 통과할 때 어떻게 휘어지는지, 그리고 수학 함수가 어떻게 유리 표면의 형태를 기술하는지 자세히 설명합니다. 그런 다음 SVG displacement map을 사용하여 굴절 효과를 시뮬레이션합니다. 이 글은 돋보기, 검색 상자, 스위치, 슬라이더 등의 UI 구성 요소를 Liquid Glass 효과로 만드는 것으로 마무리됩니다. 참고로, 최적의 성능은 현재 SVG 필터를 백드롭 필터로 지원하는 Chrome에서 확인됩니다.