SVG Blend Modes와 Image Multiply: feBlend와 feComposite 그래픽 합성

포토샵이나 디자인 도구에서 널리 쓰이는 곱하기(Multiply), 스크린(Screen), 오버레이(Overlay) 같은 색상 합성 기술을 웹사이트에서 정밀 제어하는 방법은 크게 두 가지입니다. CSS의 `mix-blend-mode`와 SVG의 feBlend / feComposite 필터입니다. 그 중 픽셀 알파 채널 결합과 가장 강력한 호환성을 지닌 SVG 기반 Image Multiply 합성법을 마스터해 보겠습니다.

1. SVG feBlend의 내장 모드 속성

웹 표준으로 제공되는 `feBlend` 필터는 두 가지 입력 그래픽(in, in2)을 결합합니다.

• Multiply (곱하기): 기본 RGB 값을 수학적으로 곱하여 항상 더 어두운 색상 톤을 뽑아내는 기법. 그림자와 듀오톤(Duotone) 이미지 가공의 기초입니다.
• 기타 모드: `screen` (밝게 합성), `darken`, `lighten`, `normal` 제공.

2. feBlend Multiply 마크업 구현 템플릿

<svg width="400" height="300" viewBox="0 0 400 300">
  <defs>
    <filter id="multiply-filter">
      <!-- 외부 이미지를 레이어로 탑재 -->
      <feImage href="../assets/images/static-site-generator-performance.webp" 
               result="bg-img" x="0" y="0" width="400" height="300" />
      <!-- 두 그래픽을 곱하기 모드로 융합 -->
      <feBlend mode="multiply" in="SourceGraphic" in2="bg-img" />
    </filter>
  </defs>
  
  <!-- 필터가 입혀질 컬러 셰이프 -->
  <rect width="400" height="300" fill="#a78bfa" filter="url(#multiply-filter)" />
</svg>

"SVG 블렌딩 필터는 디자이너가 매번 대용량 무거운 듀오톤 이미지를 직접 제작해 서버에 업로드해야 했던 수고를 단 몇 줄의 텍스트 코드로 없애 줍니다."

3. feComposite와의 차이점

`feComposite`는 색상의 배합보다 알파 영역의 논리 연산(Intersection, Union 등)을 전담합니다. 반면 `feBlend`는 색상 간의 산술적인 연산(포토샵의 블렌딩)에 초점이 맞추어져 있어 두 노드를 적절히 연계 사용할 때 진정한 마스킹 효과를 완성할 수 있습니다.

4. 요약: 가볍고 다이내믹한 컬러 매칭

단색 사각형 채우기와 SVG Multiply 필터를 연동하여 웹 로딩 오버헤드 없는 다이내믹 듀오톤 갤러리를 구축해 보십시오.