AI 요약관련 정보

• CSS만으로 리퀴드 글래스 효과를 구현하며, 핵심은 SVG의 displacementMap 필터 사용입니다. 💡
• 리퀴드 글래스는 일반 글래스 모피즘과 달리 배경 형태를 동적으로 구부리는 능력이 특징입니다. 🌊
• 구현 과정은 카드 컴포넌트에 CSS filter 속성을 적용하고, SVG 필터의 ID를 URL로 연결하는 방식입니다. 🔗
• SVG 필터는 <filter> 내부에 2D 그라데이션 이미지를 <image>로 삽입하며, 이 이미지는 주로 빨강(X축)과 초록(Y축) 채널을 사용합니다. 🎨
• 이미지 형식은 PNG와 같이 RGB 채널을 지원해야 하며, 데이터 URI로 변환하여 직접 삽입할 수 있습니다. 🖼️
• feDisplacementMap 설정 시 in="SourceGraphic"으로 원본 그래픽에 적용하고, xChannelSelector="R", yChannelSelector="G"로 변위 채널을 지정합니다. ⚙️
• 사용자 정의 이미지 대신 feTurbulence 필터를 사용하여 액체나 얼음 같은 질감을 만들 수도 있습니다. 🧊
• 색수차, 동적 그림자 등 복잡한 효과는 순수 CSS만으로는 구현하기 어려우며, 셰이더 기반 솔루션과 JavaScript가 필요합니다. 🚫