Read Original
#Frontend

미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기

미리캔버스의 SVG 필터 활용기: 브라우저에서 이미지 보정하기
01

Summary

Safari에서도 안 깨지는 웹 그래픽의 비밀, SVG 필터 파이프라인 완전 정복!

미리캔버스 엔진팀이 공개하는 CSS의 한계를 넘는 강력한 복합 오버레이 레이어 합성 기술

본 아티클은 CSS 스타일링만으로는 제어하기 힘든 이너 섀도우, 바깥쪽 아웃라인 등의 복합 오버레이 효과를 SVG 필터 파이프라인을 통해 구현하는 최적화 여정을 담고 있습니다. 웹킷 엔진을 포함한 크로스 브라우저 호환성 버그를 우회하고, 포토샵 레이어와 유사한 그래픽 합성을 브라우저 네이티브 기술로 구현하는 실무 팁을 전합니다.

  • 01feComposite 마스킹 연산을 두 번 연속 적용하여 CSS box-shadow inset 효과를 SVG 도형 및 텍스트에 고스란히 재현
  • 02feMorphology dilate 프리미티브를 사용해 원본 크기의 손상 없이 외곽 영역으로만 팽창하는 균일한 아웃라인 구현
  • 03다중 필터를 속성에 나열하는 방식 대신 feMerge 기반의 단일 필터 내부 레이어 합성 기법을 통한 렌더링 안정성 확보
  • 04WebKit 기반 Safari 환경에서 다중 필터 속성 선언 시 스타일이 누락되는 크로스 브라우징 치명적 이슈 규명 및 해결책 제시

RECOMMENDATION

웹 기반 그래픽 에디터나 풍부한 시각 효과가 필요한 UI 컴포넌트를 설계 중이며, Safari를 포함한 멀티 브라우저에서 동일한 그래픽 퀄리티를 유지하려는 시니어 프론트엔드 엔지니어에게 적극 추천합니다.

The Problem

웹 브라우저에서 CSS만으로는 SVG 도형이나 텍스트에 정교한 이너 섀도우 및 외곽선 효과를 일관되게 렌더링하기 어려우며, 특히 다양한 필터를 조합할 때 브라우저 간의 스펙 미지원으로 마스킹이나 레이아웃 깨짐 현상이 발생합니다.

The Solution

feFlood, feComposite, feMorphology, feMerge 등 다양한 SVG 프리미티브를 단일 필터 파이프라인 내에 체인 구조로 연결하고, feMergeNode를 통해 레이어를 최종 합성하는 방식을 도입했습니다.

The Result

Safari(WebKit), Chromium, Firefox를 포함한 모던 브라우저 엔진 전반에서 깨짐 현상 없이 고품질의 드롭 섀도우, 이너 섀도우, 아웃라인 다중 합성을 완벽히 구현하였습니다.

Trade-off

다양한 효과를 단일 필터로 통합해야 하므로 오프셋과 블러 값에 맞춰 필터 영역(x, y, width, height)의 크기를 사전에 넉넉하게 확장해 주지 않으면 이미지 외곽 영역이 잘려 나가는 제약이 따릅니다.

03

Key Concepts

Concept · 01

feComposite

두 개의 이미지 입력을 대상 영역의 알파 채널 정보(Porter-Duff 연산자)를 바탕으로 교집합 또는 차집합 형태로 픽셀 합성하는 SVG 프리미티브입니다.

  • feFlood로 생성한 색 레이어를 도형 영역에 정확히 마스킹하거나, 이너 섀도우 구현 시 그림자를 도형 내부 영역 안으로 크롭하는 역할을 수행합니다.
Concept · 02

feMorphology

커널 반경(radius) 값을 기준으로 이미지의 픽셀 경계를 팽창(dilate)시키거나 수축(erode)시켜 실루엣 두께를 조정하는 형태학 연산 도구입니다.

  • operator='dilate'를 사용해 원본 알파 영역을 사방으로 고르게 확장함으로써 깨끗하고 일정한 바깥쪽 테두리(아웃라인)를 렌더링합니다.
Concept · 03

feMerge

필터 내부에서 생성된 여러 개의 중간 결과물들을 선언한 순서대로 쌓아 하나의 최종 그래픽으로 합성하는 레이어 병합 시스템입니다.

  • 드롭 섀도우, 아웃라인, 원본 레이어의 렌더링 순서(z-index)를 제어하여 레이어 중첩 문제를 완전하게 제어하고 해결합니다.