CSS Wave 필터로 물결 효과 만들기 – 객체에 사인파 왜곡 적용하기

CSS Wave 필터란?

Wave(웨이브) 필터는 객체에 사인파(sine wave) 왜곡을 적용해 마치 물결처럼 출렁이는 듯한 시각 효과를 만들어 주는 CSS 필터입니다. 이미지나 텍스트 요소에 적용하면 정적인 콘텐츠에도 역동적이고 부드러운 느낌을 더할 수 있습니다.

Wave 필터의 주요 매개변수

Wave 필터에서 사용할 수 있는 매개변수는 다음과 같습니다.

번호	매개변수 및 설명
1	Add 값이 1이면 원본 이미지가 물결 효과가 적용된 이미지에 함께 추가되고, 0이면 추가되지 않습니다.
2	Freq 물결(파도)의 개수를 지정합니다.
3	Light 물결 위에 비치는 빛의 세기를 설정합니다. (0부터 100까지)
4	Phase 사인파가 시작되는 각도(위상)를 지정합니다. (0부터 100까지)
5	Strength 물결 효과의 강도를 결정합니다.

예제

다음 코드를 실행하면 이미지와 텍스트에 물결 효과를 적용해 볼 수 있습니다.

<html>
   <head>
   </head>

   <body>
      <img src="/css/images/logo.png" alt="CSS Logo" style="FILTER: Chroma(Color = #000000)
         Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
      <p>텍스트 예제:</p>
      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div>
   </body>

</html>

참고: Wave 필터는 인터넷 익스플로러(IE)에서만 동작하는 레거시 기능입니다. 최신 브라우저에서는 SVG 필터(feTurbulence, feDisplacementMap)나 CSS 애니메이션을 활용하면 보다 호환성 좋은 물결 효과를 구현할 수 있습니다.