Box-Blur 부터 Gaussian을 거쳐 KawaseBlur 까지

처음엔 Box Blur 정도면 충분하겠다고 봤어요. 구현이 가장 단순했고 이해하기 쉬웠으며 shader 언어로 표현하기도 어렵지 않았거든요. 그런데 실제 결과물은 기대와 많이 달랐어요. blur가 너무 강하게 뭉개지고 서로 섞여서 Figma의 ProgressiveBlur와는 꽤 다르게 보였어요. ProgressiveBlur는 시각 품질이 중요한 효과였고 서브픽셀 단위까지 보는 디자인 조직에서 쓸 컴포넌트였어요. 그래서 Figma 결과물과의 차이를 줄이는 게 중요했어요.

Figma의 ProgressiveBlur 결과를 기준으로 두고, Box Blur, Gaussian Blur, Dual Kawase Blur를 차례로 비교하면서 알고리즘을 좁혔어요. 단순한 Box Blur부터 적용해보고, Figma의 ProgressiveBlur와 어느 지점이 다른지 확인했어요. 결과물이 너무 강하게 뭉개지고 섞여서 시각 품질이 부족했어요. Gaussian Blur는 중심부는 Figma와 비슷했지만, 텍스처 가장자리 샘플링 영역에서 blur가 약해지는 문제가 있었어요.

텍스처 가장자리 문제와 ProgressiveBlur의 시각 품질을 함께 고려해 Dual Kawase Blur를 최종 후보로 선택했어요. Dual Kawase Blur는 downsample과 upsample로 blur를 만드는 방식이에요. 업/다운샘플링 과정에서는 이미지 해상도를 강제로 줄이고 그 해상도를 기준으로 픽셀을 다시 읽어요. 이때 어떤 픽셀을 기준으로 축소하고 다시 샘플링할지는, 모든 계산을 직접 구현하기보다 브라우저/GPU의 텍스처 리샘플링에 일부 맡길 수 있었어요.

Figma와 가장 가까운 결과를 만들려고 Box Blur와 Gaussian Blur를 거쳐 Dual Kawase Blur를 골랐어요. 앞 두 알고리즘은 각각 뭉개짐과 가장자리 약화라는 한계가 분명했고, Dual Kawase Blur만 그 두 문제를 함께 넘어섰어요. 대신 구현 난도가 더 높았고 shader 언어와 WebGL 렌더링 흐름을 더 깊이 이해해야 했어요. 그래도 Figma의 ProgressiveBlur와 분간하기 어려울 만큼 거의 같은 결과를 만들었어요.

성능 수치를 직접 재진 않았어요. 다만 큰 blur radius를 직접 샘플링하는 Gaussian 방식보다 downsample/upsample을 쓰는 Dual Kawase Blur가 구조상 더 유리하다고 봤어요. 특히 이번 대상은 DOM이 아니라 canvas texture로 다룰 수 있는 에셋이라 브라우저/GPU의 텍스처 리샘플링을 활용하는 WebGL 방식이 더 맞았어요.

Dual Kawase Blur로 Figma의 ProgressiveBlur와 거의 같은 시각 결과를 만들었어요. 가장자리로 갈수록 blur가 약해지는 문제가 줄었고, 실제 비교에서도 분간하기 어려울 만큼 가까운 결과였어요. 서브픽셀 단위까지 보는 그 까다로운 기준에서도 받아들일 만한 수준의 결과를 만들었어요.

이 작업에서 Kawase Blur라는 알고리즘을 새로 배웠고 처음으로 shader 언어를 공부해 실제 제품 컴포넌트에 적용했어요. 알고 있던 Box Blur나 Gaussian Blur에서 멈추지 않고 Figma와 거의 같은 결과를 만들려고 결과물을 비교하면서 알고리즘을 바꿔간 경험이었어요.