SVG 필터 프리미티브 구현 수식과 feColorMatrix 색상 행렬 가이드

직접 해보기 →

웹 그래픽 및 이미지 처리에서 단순 CSS blur나 brightness 수준을 넘어, 사진에 회화 같은 포스터화(Color Matrix), 범프 맵 기반의 3D 입체 엠보싱(Emboss), 또는 무정형 웨이브 블러 효과를 부여할 때 활용되는 가장 강력한 고급 웹 표준 기술이 바로 **SVG 필터 마스크(SVG Filters & Primitives)**입니다.

SVG 태그 내부에 filter 노드를 선언하고 feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap 등 필터 프리미티브(Filter Primitives) 노드 체인을 결합하면, 자바스크립트 계산 없이 캔버스 수준의 고성능 이미지 왜곡 효과를 이끌어낼 수 있습니다. 본 글에서는 SVG 필터 원시 노드의 연결 공식과 색상 행렬 수식을 해설합니다.

---

1. feColorMatrix 4x5 색상 변환 행렬 수식 공식

SVG 필터의 핵심 노드 중 하나인 feColorMatrix는 픽셀의 원본 RGBA 색상 베치 벡터를 4x5 변환 행렬 곱으로 연산하여 색상을 완전 재구성합니다:

[ \begin{bmatrix} R' \ G' \ B' \ A' \end{bmatrix} = \begin{bmatrix} a_{00} & a_{01} & a_{02} & a_{03} & a_{04} \ a_{10} & a_{11} & a_{12} & a_{13} & a_{14} \ a_{20} & a_{21} & a_{22} & a_{23} & a_{24} \ a_{30} & a_{31} & a_{32} & a_{33} & a_{34} \end{bmatrix} \begin{bmatrix} R \ G \ B \ A \ 1 \end{bmatrix} ]

주요 필터 프리미티브 노드 체인 역할:

• feGaussianBlur (stdDeviation="N"): 가우시안 커널 블러를 픽셀 단위로 적용합니다.
• feTurbulence (baseFrequency="N"): 펄린 노이즈(Perlin Noise) 알고리즘으로 자연스러운 수면 파동이나 구름 질감 노이즈를 동적 생성합니다.
• feDisplacementMap: 생성된 노이즈 맵의 수치에 따라 입력 이미지 픽셀 좌표를 물리적으로 밀어 왜곡시킵니다.

---

2. SVG 수면 물결 왜곡 필터 구현 코드 예시

다음은 텍스트 및 이미지에 수면 파동 왜곡을 입히는 SVG 필터 선언 소스입니다:

<svg width="0" height="0" style="position: absolute;">
  <filter id="water-ripple-filter">
    <!-- 1. 노이즈 파동 생성 -->
    <feTurbulence type="fractalNoise" baseFrequency="0.02 0.05" numOctaves="2" result="noise" />

    <!-- 2. 노이즈 맵 기반 좌표 왜곡 파이프라인 -->
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<div class="filter-applied-card">
  <h2>RIPPLE EFFECT</h2>
  <p>SVG 필터 마스크로 연출한 수면 물결 왜곡 아트웍</p>
</div>

.filter-applied-card {
  width: 320px;
  padding: 32px;
  background: linear-gradient(135deg, #0284c7, #6366f1);
  color: #ffffff;
  border-radius: 16px;

  /* SVG 필터 ID 바인딩 */
  filter: url(#water-ripple-filter);
}

[!NOTE] 수십 개의 SVG 필터 어트리뷰트와 feColorMatrix 행렬 20개 숫자를 수동으로 계산하며 튜닝하기 어렵다면, SVG 필터 생성기 도구를 활용하면 노이즈 주파수, 블러 스케일, 색상 변환 행렬을 슬라이더로 조절하고 즉시 내보낼 수 있는 SVG 필터 코드 소스를 복사해 사용할 수 있습니다.

---

3. 실무 UI 그래픽 디자인 시 필터 성능 지침

1. numOctaves 수치 최적화: feTurbulence 노이즈의 옥타브 수치(numOctaves)가 올라갈수록 구름 질감이 극도로 정밀해지지만, 브라우저 연산 부하가 기하급수적으로 높아집니다. 모바일 60fps 유지를 위해서는 1~2 수준의 옥타브를 유지하는 것이 좋습니다.
2. 사파리(Safari) GPU 렌더링 영역 짤림 방지: SVG 필터를 적용했을 때 뭉개진 블러 영역의 가장자리가 사각형 박스로 싹둑 베이는 현상이 생길 수 있습니다. filter 요소를 x="-20%" y="-20%" width="140%" height="140%" 형태로 필터 바운더리 영역을 확장 선언해주면 깔끔한 렌더링 결과를 얻을 수 있습니다.