Read Original
#Frontend

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

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

Summary

포토샵 없이 브라우저에서 끝내는 초정밀 이미지 보정: SVG 필터의 모든 것

feTurbulence부터 feColorMatrix까지, 미리캔버스 엔진팀이 밝히는 고급 웹 그래픽스 기법

본 아티클은 미리캔버스 디자인 엔진에서 활용되는 수준 높은 SVG 필터 기술을 심도 있게 소개합니다. 외부 파일 로드 없이 수학적 난수 패턴을 만들어 내는 기법부터, 픽셀 단위로 색 영역을 조작하고 4x5 컬러 매트릭스를 직접 계산하는 수학적 원리까지 다루며 프론트엔드 그래픽 제어의 실전적인 해결책을 제시합니다.

  • 01수학적 Perlin 노이즈를 생성해 외부 리소스 로드 없이 물결 및 종이 질감 왜곡의 기초를 마련하는 feTurbulence 응용 방법
  • 02포토샵의 Curves 기능처럼 영역별 매핑을 실시간 보간하는 piecewise linear(table) 방식의 고화질 톤 컨트롤 기법
  • 03지수 곡선식을 통해 어두운 곳과 밝은 곳의 명암 대비를 자연스럽게 조정하는 감마(gamma) 전달 함수 실전 활용
  • 04RGBA 채널 전체를 직접 믹싱하여 그레이스케일, 세피아, 채널 스왑 등을 커스텀 제어하는 4x5 행렬 연산법

RECOMMENDATION

클라이언트 웹 환경에서 고성능의 디자인 편집 툴을 개발하거나 고도화된 실시간 그래픽스 변환 로직을 설계해야 하는 프론트엔드 개발자들에게 강력하게 권장합니다.

The Problem

브라우저 환경에서 외부 이미지 리소스 파일에 의존하지 않고, 순수 웹 표준 기술만을 사용하여 노이즈 생성, 정교한 구간별 톤 커브 조절, 세밀한 RGBA 색상 채널 제어 등을 한계 없이 구현해야 하는 배경이 있었습니다.

The Solution

SVG 필터가 제공하는 고급 프리미티브인 feTurbulence를 활용하여 자체 프로시저럴 노이즈를 생성했고, feComponentTransfer의 table 및 gamma 타입을 통한 비선형 톤 보정을 도입했으며, feColorMatrix의 4x5 행렬 연산을 직접 제어하여 고도화된 색상 변환을 적용했습니다.

The Result

외부 리소스 로딩 없이 클라이언트 사이드 연산만으로 자연스러운 물결 왜곡, 포토샵 스타일의 S자 대비 강화, 채널별 시네마틱 그레이딩, 세피아 및 정교한 흑백 변환 등의 시각 효과를 실시간으로 안전하게 렌더링할 수 있게 되었습니다.

Trade-off

feTurbulence의 numOctaves 값을 높일수록 풍부한 질감 표현이 가능해지나 CPU/GPU 연산 비용이 함께 증가하며, 다중 필터 효과를 직접적인 단일 행렬 곱셈으로 연산하는 것보다 브라우저의 안정성을 위해 개별 feColorMatrix를 파이프라인으로 연결하는 설계 타협이 요구됩니다.

03

Key Concepts

Concept · 01

feTurbulence

Perlin 또는 turbulence 수학적 난수 함수를 기반으로 외부 이미지 데이터 없이 내부 연산만으로 정교한 노이즈 텍스처를 만들어내는 SVG 프리미티브입니다.

  • baseFrequency와 numOctaves 파라미터를 조절하여 왜곡의 형태와 디테일을 세밀하게 정립했습니다.
  • 생성된 노이즈 맵을 feDisplacementMap과 결합하여 이미지에 출렁이는 물결 효과를 가미했습니다.
Concept · 02

feComponentTransfer

이미지 내 RGBA 채널의 입력값을 특정 매핑 함수나 테이블 곡선 형태를 기반으로 변환하여 대비와 톤을 재정의하는 색상 제어 요소입니다.

  • type='table'을 사용하여 입력값 범위를 다차원 선형 보간함으로써 고해상도의 S자 커브 대비 강화를 구현했습니다.
  • type='gamma'의 지수 곡선 방식을 채택하여 명암의 분포를 물리적으로 자연스럽게 조율했습니다.
Concept · 03

feColorMatrix

RGBA 및 상수 오프셋 값을 포함한 4행 5열(4x5) 행렬 연산을 실행하여 채널 간 기여도를 완벽하게 재구성할 수 있는 가장 범용적인 색 보정 필터입니다.

  • 인간의 시각 인지 휘도 특성을 적용한 가중치 수식으로 자연스러운 모노톤 흑백 변환을 처리했습니다.
  • R과 B의 대각 행렬 가중치 위치를 치환하여 강렬하고 개성적인 보색 대비를 이끌어 내는 채널 스왑(Channel Swap)을 정의했습니다.