이미지 블러

사진을 끌어다 놓고 흐림 방식과 반경을 고른 뒤 결과를 내려받거나 비슷한 CSS 필터를 복사합니다. 긴 변이 1600픽셀을 넘는 이미지는 처리 전에 그 크기로 줄이므로, 설정한 반경은 원본이 아니라 축소된 이미지를 기준으로 적용됩니다. 4000픽셀로 들어온 사진에서는 같은 숫자가 더 세게 작용합니다.

반경은 도달 거리가 아니라 표준편차입니다. 캔버스와 CSS의 blur(<length>)는 둘 다 길이를 가우스 분포의 σ로 받으므로, 눈에 보이는 번짐은 입력한 숫자의 몇 배가 됩니다. 흰 한 줄 화소로 직접 재 보면 blur(4px)는 21픽셀에 걸쳐 빛을 퍼뜨리고 봉우리를 255분의 23까지 낮추며, blur(16px)에서는 봉우리가 3까지 떨어집니다. 반경이 커지면 대비는 거의 사라지고, 희미한 꼬리는 채널당 8비트가 담을 수 있는 한계 아래로 내려갑니다.

방향이 있는 두 방식이야말로 실제로 다릅니다. 수평과 수직 모션은 한 축으로 밀어 놓은 이미지 사본 2r+1개를 각각 1/(2r+1)씩 겹쳐 평균을 내므로, 초점이 흐려지는 것이 아니라 직선으로 끌린 자취가 남습니다. 반경 8에서는 사본 하나가 255⁄17 ≈ 15단계에 해당해 양자화 바닥에 가깝기 때문에 가장 바깥 사본이 반올림으로 사라집니다. 실제로 재 보면 이름값 17픽셀이 아니라 15픽셀 폭으로 나왔습니다. 반면 상자 방식은 예외입니다. 선명한 원본 위에 살짝 흐리고 조금 납작해진 사본을 얹어서, 이름이 가리키는 균일 커널 평균이 아니라 안개 같은 느낌을 만듭니다.

복사 단추에 기대기 전에 알아 둘 점이 하나 있습니다. CSS는 살아 있는 요소용 대역이고, 방향이 있는 두 방식에 대해서는 방향성조차 없습니다. 실제 결과물은 내려받은 PNG입니다.