민감한 이미지를 무작위 웹사이트에 업로드하는 것이 지겨워서, 로컬 전용 블러 툴을 만들었습니다
Source: Dev.to
문제
며칠 전, 기술 블로그 글을 준비하고 있었습니다. 게시하기 전에 스크린샷에 있는 몇 개의 이메일 주소와 얼굴을 흐리게 처리해야 했습니다.
대부분의 개발자들이 하는 대로, 저는 무료 온라인 이미지 흐림 도구를 검색하고 첫 번째 결과를 클릭한 뒤 이미지를 업로드했습니다.
그때 저는 멈췄습니다.
- 그 이미지가 어디로 가고 있던 걸까요?
- 어딘가 서버에 저장되고 있었을까요?
- 얼마나 오래 보관될까요?
- 누가 그 파일에 접근할 수 있었을까요?
그 웹사이트에는 개인정보 보호정책도 없고, 데이터 보관에 대한 언급도 없으며, 처리 후 파일이 삭제된다는 보증도 없었습니다. 그 불안감이 저를 사로잡았고, 그래서 저는 더 나은 무언가를 만들기로 결심했습니다.
Blur‑image.org 소개
- 모든 무거운 작업은 브라우저에서 JavaScript, Canvas API, 그리고 로컬 처리 파이프라인을 통해 수행됩니다.
- 이미지 변환을 위한 백엔드 호출이 없습니다.
- 전송되는 API 키가 없습니다.
- 이미지 메타데이터를 기록하는 분석 추적기가 없습니다.
- 탭을 닫는 순간, 편집 흔적이 모두 사라집니다.
Features
1. Selective Blur Tool
- Canvas‑based 브러시와 선택 영역 렌더링.
- 흐리게 할 영역을 칠하고, 흐림 강도를 동적으로 조정하며, 여러 개의 독립적인 흐림 영역을 생성.
- 모든 작업은 좌표 맵 형태로 메모리에 로컬 저장되며, 절대 직렬화되거나 외부로 전송되지 않음.
2. Full Image Blur Tool
- 전체 캔버스에 적용되는 전역 컨볼루션 효과.
- 강도 조절 가능.
- 전체 흐림 적용 후 특정 영역을 다시 칠해 복원 (로컬 마스크 오버레이).
3. Face Blur Tool
- 클라이언트‑사이드 얼굴 탐지 모델 (TensorFlow.js 등) 이 도구에 번들됨.
- 여러 얼굴을 감지하고, 경계 상자를 그린 뒤 가우시안 흐림 또는 픽셀화 적용.
- 감지된 영역을 수동으로 조정 가능.
- 핵심 상세: 모델은 한 번 브라우저 메모리에 로드될 뿐이며, 이미지 데이터를 외부 엔드포인트로 전송하지 않음.
4. Sensitive Information Blur Tool
- OCR이 브라우저 호환 텍스트 감지 엔진을 사용해 로컬에서 실행.
- 정규식과 경계 상자 인식을 결합해 전화번호, 이메일 주소, 신분증 번호, 물리적 주소 등을 스캔.
- 흐리게 처리, 제거하거나 감지를 수동으로 추가.
- 텍스트 내용이 디바이스를 떠나는 일은 없음.
5. Text Blur Tool
- 단어 또는 줄 수준의 일반 텍스트 감지.
- 흐림 또는 픽셀화 적용—UI 목업, 코드 스크린샷, 텍스트를 가려야 하지만 가독성은 유지하고 싶은 이미지에 이상적.
6. Pixelate Image Tool
- 선택된 영역을 낮은 해상도로 다운스케일한 뒤, 최근접 이웃 보간법으로 업스케일.
- 픽셀 블록 크기 제어 가능.
- 전체 이미지 또는 사용자가 선택한 영역에 적용.
- 픽셀화는 식별 가능한 세부 정보를 더 공격적으로 제거하므로 흐림보다 강력함.
7. Motion Blur Tool
- 지정된 각도와 거리 따라 픽셀을 샘플링하는 방향성 흐림 효과.
- 가능한 경우 CSS 필터 또는 WebGL 셰이더를 이용해 GPU‑가속.
- 표준 가우시안 흐림과는 다른 역동적이고 창의적인 효과 제공.
로컬 처리의 중요성
- 데이터 흐름 보안: 이미지 데이터에 대한 중간자 공격이 없습니다.
- 서버 침해 없음: 사용자 업로드가 브라우저를 떠나지 않아 노출 위험이 사라집니다.
- 명확한 소유권: 데이터 보관에 대한 법적 회색 지대가 없습니다.
- 오프라인 기능: 페이지가 로드되면 인터넷 연결을 끊어도 여전히 블러, 픽셀화 및 얼굴 감지를 할 수 있습니다.
성능은 사용자의 장치와 브라우저에 따라 달라집니다. 고해상도 얼굴 감지나 OCR이 포함된 큰 이미지일수록 처리 시간이 길어지고 메모리를 더 많이 사용합니다. 이 도구는 다음과 같이 완화합니다:
- 합리적인 기본 스케일로 이미지를 처리합니다.
- 출력 품질을 사용자가 제어할 수 있게 합니다.
로컬 처리에 1초를 더 기다리는 것이 민감한 이미지를 알 수 없는 서버에 업로드하는 것보다 훨씬 더 좋습니다.
이 문서는 누구를 위한 것인가?
- 개발자는 튜토리얼에서 API 키, 이메일 주소, 내부 엔드포인트 등을 가리고 싶을 때.
- 디자이너는 클라이언트 데이터를 포함한 목업을 공유할 때.
- 누구든지 무료 온라인 도구의 업로드 버튼을 누르는 것이 불편한 경우.
시도해 보기
Blur‑image.org 를 방문하고 한 번 사용해 보세요.
피드백
저는 현재 개선 작업을 진행 중이며, 다른 개발자들의 의견을 진심으로 환영합니다:
- 얼굴 인식이 여러분의 테스트 이미지에서 잘 작동하나요?
- OCR이 문서 처리에 충분히 빠른가요?
- 로컬 처리 속도가 너무 느려지는 경우가 있나요?
댓글에 생각을 남겨주시거나 직접 연락 주세요.
Why I Built This
I built this to solve my own problem, but I want it to be genuinely useful for other developers who care about privacy as much as I do.
Thanks for reading. Go blur something without worrying about who is watching.