핵심 요약
미리디가 SVG 필터를 활용해 브라우저에서 이미지 보정을 구현하는 고급 기법들을 소개했습니다.
구현 방법
- feTurbulence로 프로시저럴 노이즈를 생성하고 feDisplacementMap과 결합해 물결/질감/왜곡 효과의 기반을 만듭니다.
- feComponentTransfer의 type="table"과 type="gamma"로 구간별 톤 커브를 설계하고, tableValues와 gamma 보정으로 색상 보정을 세밀하게 제어합니다.
- feColorMatrix 4×5 매트릭스를 직접 계산해 RGBA 4채널 전체를 한 번에 변환하는 색상/채널 조합을 구현합니다.
- baseFrequency, numOctaves, seed 등 파라미터를 조합해 fractalNoise, turbulence 등 다양한 노이즈 텍스처를 얻고, 이를 서로 다른 필터로 조합해 여러 시각적 효과를 연출합니다.
주요 결과
- 노이즈 기반 텍스처 생성과 변위 맵 연결로 브라우저에서 다양한 물결·질감 효과를 구현할 수 있습니다.
- 톤 커브(table, gamma)와 색상 매트릭스의 조합으로 구간별 색 보정 및 컬러 매핑을 세밀하게 수행할 수 있습니다.
- 여러 필터 조합 예시를 통해 프랙탈 노이즈 단독 시각화, 물결 왜곡, 격렬한 왜곡 등 다양한 시나리오를 시연합니다.
