이미지 블러
이미지에 블러(흐림) 효과를 적용합니다
이미지를 드래그하거나 클릭하여 업로드
이미지 블러 도구
이 도구는 CSS filter: blur(px) 속성을 Canvas 2D 컨텍스트에 적용해 이미지를 흐리게 만듭니다. 이는 가우시안 블러(Gaussian Blur)를 브라우저 렌더링 엔진이 GPU 가속으로 실시간 처리하는 방식으로, 서버에서 픽셀 단위로 연산하는 방식보다 훨씬 빠릅니다. 슬라이더 값은 블러 반경(px)을 의미하며, 값이 클수록 더 넓은 범위의 픽셀을 평균내어 흐림 정도가 강해집니다. 개인정보가 담긴 신분증·차량 번호판 가리기, 사진 배경을 흐리게 해 피사체를 부각시키는 아웃포커스 효과, 섬네일에 미리보기 느낌을 주는 용도 등에 활용됩니다.
자주 묻는 질문
어떤 용도로 사용하나요?
얼굴이나 신분증, 차량 번호판처럼 노출하면 안 되는 정보를 가리는 개인정보 보호 용도로 가장 많이 사용됩니다. 그 외에도 인물 사진의 배경을 흐리게 해 아웃포커스 효과를 내거나, 유튜브 섬네일·블로그 커버 이미지에 은은한 배경 질감을 넣을 때도 활용됩니다.
특정 부분만 블러 처리할 수 있나요?
현재는 이미지 전체에 동일한 블러 값을 적용하는 방식만 지원합니다. 얼굴이나 번호판 등 특정 영역만 부분적으로 블러 처리하려면 영역을 선택해 마스킹하는 별도 기능이 필요한데, 이는 향후 개선 과제입니다.
파일이 서버로 전송되나요?
아니요. CSS 블러 필터를 Canvas 컨텍스트에서 그리는 방식으로 이미지 데이터가 브라우저 메모리 밖으로 나가지 않습니다. 얼굴이 나온 사진이나 신분증처럼 민감한 이미지도 안전하게 처리할 수 있습니다.
결과 형식은?
Canvas.toDataURL API를 사용해 PNG 형식으로 저장됩니다. PNG는 무손실 압축이라 블러 처리된 이미지의 색상 정보가 추가로 손실되지 않습니다.
어떤 형식이 지원되나요?
PNG, JPG, WebP, GIF(첫 프레임) 등 브라우저의 Image 객체가 디코딩할 수 있는 모든 래스터 이미지 형식을 입력으로 받을 수 있습니다.
원본 해상도가 유지되나요?
네. 화면에 보이는 미리보기는 가로 400px로 축소되어 있지만, 실제 다운로드 시에는 원본 이미지의 원본 해상도 그대로 블러 처리해 저장합니다.
블러 알고리즘은?
브라우저 표준 CSS 필터 함수인 blur()를 사용합니다. 이는 가우시안 블러 근사 알고리즘으로, 각 픽셀 값을 주변 반경 내 픽셀들의 가중 평균으로 대체해 부드럽게 흐리는 효과를 만듭니다.
블러 강도 추천값은?
인물 사진의 배경을 자연스럽게 흐리게 하려면 3~8px 정도가 적당하고, 신분증이나 번호판처럼 정보를 완전히 알아볼 수 없게 가리려면 15~30px 이상을 권장합니다. 50px에 가까울수록 원본 형태를 거의 알아볼 수 없는 수준까지 뭉개집니다.