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

ProgressiveBlur를 구현할 때 처음에는 가장 단순한 Box Blur부터 시도했어요. 구현이 쉽고 shader로 옮기기도 어렵지 않아 보였기 때문이에요.

하지만 실제 결과물은 Figma의 ProgressiveBlur와 꽤 달랐어요. blur가 강하게 뭉개지고 서로 섞여서, 서브픽셀 단위까지 보는 디자인 조직에서 쓰기에는 시각 품질이 부족했어요.

어떤 blur 알고리즘이 이론적으로 좋은지보다, Figma 결과물에 가장 가까운 시각 결과를 어떤 방식으로 만들지가 더 중요했어요. Box Blur, Gaussian Blur를 거쳐 결국 Dual Kawase Blur를 선택했어요.

처음엔 Box Blur 정도면 충분하겠다고 봤어요. 구현이 가장 단순했고 이해하기 쉬웠으며 shader 언어로 표현하기도 어렵지 않았어요.

ProgressiveBlur는 단순히 흐리게 보이면 되는 효과가 아니었어요. 이 컴포넌트는 서브픽셀 단위까지 보는 디자인 조직에서 쓸 예정이었고, Figma의 ProgressiveBlur와 얼마나 가까운지가 중요한 기준이었어요.

Box Blur를 적용해보니 blur가 너무 강하게 뭉개지고 서로 섞였어요. 비슷한 blur 효과처럼 보이긴 했지만, Figma에서 기대한 점진적인 blur 품질과는 거리가 있었어요. 그래서 구현 난도가 낮은 알고리즘을 고르는 문제에서, 실제 시각 결과를 기준으로 알고리즘을 다시 좁히는 문제로 바뀌었어요.

Figma의 ProgressiveBlur 결과를 기준으로 삼았어요. 먼저 Box Blur를 적용해보고, Figma 결과와 어느 지점이 다른지 비교했어요. 결과물이 너무 강하게 뭉개지고 섞여서 시각 품질이 부족하다는 걸 확인했어요.

그 다음 Gaussian Blur를 검토했어요. 중심부는 Figma와 비슷했지만, 텍스처 가장자리 샘플링 영역에서 blur가 약해지는 문제가 있었어요. ProgressiveBlur처럼 위치에 따라 blur 강도가 달라지는 효과에서는 이 가장자리 차이가 눈에 띄었어요.

텍스처 가장자리 문제와 전체 시각 품질을 함께 고려해 Dual Kawase Blur를 최종 후보로 선택했어요. Dual Kawase Blur는 downsample과 upsample로 blur를 만드는 방식이에요. 이미지 해상도를 단계적으로 줄이고 다시 키우는 과정에서 브라우저/GPU의 텍스처 리샘플링을 일부 활용했고, 큰 blur radius를 직접 샘플링하는 방식보다 구조적으로 더 유리하다고 봤어요.

Box Blur나 Gaussian Blur에서 멈추지 않고 Dual Kawase Blur로 갔어요.

Box Blur는 구현이 쉬웠지만 뭉개짐이 컸고, Gaussian Blur는 중심부는 괜찮았지만 가장자리에서 blur가 약해졌어요. Dual Kawase Blur는 구현 난도가 더 높았고 shader 언어와 WebGL 렌더링 흐름을 더 깊이 이해해야 했어요. 그래도 앞선 두 알고리즘의 한계를 함께 줄일 수 있었어요.

성능 수치를 직접 재진 않았기 때문에 성능 우위를 단정하진 않았어요. 다만 큰 blur radius를 직접 샘플링하는 Gaussian 방식보다 downsample/upsample을 쓰는 Dual Kawase Blur가 구조상 더 유리하다고 봤어요. 이번 대상이 DOM이 아니라 canvas texture로 다룰 수 있는 에셋이었던 점도 WebGL 기반 접근을 선택할 수 있었던 이유였어요.

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

서브픽셀 단위까지 보는 기준에서도 받아들일 만한 수준의 결과를 만들었고, 이 알고리즘을 이후 WebGL 렌더 파이프라인으로 구현하는 방향으로 이어갈 수 있었어요.

이 작업에서 Kawase Blur라는 알고리즘을 새로 배웠고, 처음으로 shader 언어를 공부해 실제 제품 컴포넌트에 적용했어요.

알고 있던 Box Blur나 Gaussian Blur에서 멈추지 않고, 실제 결과물을 비교하면서 알고리즘을 바꿔간 경험이었어요. 구현이 쉬운 방법에서 멈췄다면 Figma에서 기대한 ProgressiveBlur와는 계속 다른 결과가 나왔을 거예요. 결국 이 작업에서는 만들기 쉬운지보다, 디자이너가 보던 결과에 얼마나 가까워질 수 있는지가 더 중요한 기준이었어요.