웹에서 Apple의 액체 유리 효과를 CSS, SVG, 물리 기반 굴절 계산으로 재현하되 접근 방식별 성능·정확도 트레이드오프 분석

Context

웹 브라우저는 실시간 물리 기반 굴절 시뮬레이션을 수행하도록 설계되지 않았기 때문에, Apple의 액체 유리 효과(투명성, 굴절, 유동 변형의 조합)를 재현하려면 빛의 경로 계산과 동적 표면 변형을 동시에 처리해야 한다. 실제 물리의 Snell 법칙(n₁ sin θ₁ = n₂ sin θ₂)을 브라우저 호환 코드로 번역하고, CSS와 SVG의 기본 설계 의도를 초과하는 계산 부하를 관리해야 한다.

Technical Solution

• Pure CSS 접근: transform: skew()와 filter: blur()로 굴절을 시각적으로 모방하되, 실제 물리 계산 없이 정적 애니메이션으로만 구현
• SVG Displacement Maps 활용: 필터로 높이맵 기반 표면 변형을 수행하되, Snell 법칙을 적용하지 않아 균일한 빛 굴절만 구현
• JavaScript 물리 시뮬레이션: 각 픽셀마다 Snell 법칙을 계산하여 정확한 굴절 경로를 구하되, 변형점이 100개를 초과하면 브라우저 속도 저하 발생
• 하이브리드 접근법(CSS + SVG + JavaScript): CSS로 애니메이션(@keyframes) 처리, SVG로 표면 변형 관리, JavaScript로 굴절 각도 계산하여 작업 부하 분산
• WebGL/WebAssembly 오프로드: GPU를 활용하여 계산을 옮겨 복잡도 제한을 제거하되, 학습 곡선이 가파름

Impact

아티클에 정량적 성능 수치가 명시되지 않음

Key Takeaway

대부분의 프로젝트에서는 하이브리드 접근법(CSS + SVG + JavaScript)이 정확도와 성능의 균형을 맞추는 최적해이며, 변형점 100개 초과 또는 실시간 상호작용이 필요한 대규모 구현에서만 WebGL/WebAssembly로 전환해야 한다. Snell 법칙을 생략하면 물리적 신뢰성이 손상되므로 항상 물리 기반 계산을 포함해야 한다.