SVG 필터 효과의 모든 것: feGaussianBlur와 feColorMatrix 기초 및 활용

단순한 평면 벡터 그래픽에 그림자나 유리 질감, 유기적인 끈적임(Gooey) 같은 고급 아트 그래픽 효과를 부여하려면 SVG 필터(Filter)를 정복해야 합니다. 대표적인 가우시안 블러 필터(`feGaussianBlur`)와 채널 가공 행렬(`feColorMatrix`)의 기본 동작 방식을 심층 해부합니다.

1. SVG 필터 선언 구조 (<filter>)

SVG 내부의 `<defs>` 태그 영역 내부에 필터를 정의하고 도형의 `filter` 속성으로 참조합니다.

<svg width="0" height="0">
  <defs>
    <filter id="basic-blur">
      <!-- stdDeviation 속성으로 블러 강도 설정 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
</svg>

<!-- 실제 사용 -->
<rect width="100" height="100" fill="#3b82f6" filter="url(#basic-blur)" />

2. feColorMatrix: 행렬 수학을 통한 픽셀 채널 가공

`feColorMatrix`는 이미지의 R, G, B, A(투명도) 픽셀 정보에 행렬을 연산하여 색상을 대치하거나, 미세 투명 영역을 날려버리는 고급 그래픽 효과를 수행합니다.

<feColorMatrix type="matrix" values="
  1 0 0 0 0
  0 1 0 0 0
  0 0 1 0 0
  0 0 0 18 -7" />

알파값 증폭: 4번째 행의 `18`과 `-7` 값은 투명도의 경계를 극단적으로 대비시켜 블러 처리된 물체들의 겹치는 부분을 진흙처럼 들러붙게 뭉개줍니다. (Gooey 효과의 근원)

"SVG 필터는 브라우저 하드웨어 가속을 기반으로 작동하므로 대량의 비트맵 필터보다 렌더링 성능이 월등히 뛰어납니다."

3. CSS Filter 속성과의 시너지 효과

브라우저 환경에 따라 CSS의 `filter: blur(...)` 속성을 사용하는 것보다 SVG 필터를 인라인 마크업으로 로드하여 사용하면 웹킷(WebKit)이나 오래된 브라우저 엔진에서도 항상 동일한 품질을 나타내는 이점이 있습니다.

4. 요약: 무한한 그래픽 표현의 문

가우시안 블러와 행렬 연산을 활용하여 기존 CSS로는 다룰 수 없었던 2.5D 그래픽과 네온 글로우 필터를 개척해 보십시오.