# 이미지 가리기 — 검게 칠하기, 모자이크, 흐리게

가린 부분은 파일에서 지워집니다. 파일 안에 숨겨 두는 것이 아닙니다.

> 사진이나 캡처 화면의 이름, 주소, 계좌번호를 가리고 다시 저장합니다. 가려진 픽셀은 사각형 아래 남아 있는 것이 아니라 파일에서 사라집니다. 모든 작업은 브라우저 안에서 이뤄집니다.

이 페이지는 브라우저 안에서만 동작하는 대화형 도구입니다(https://abox.tools/ko/이미지-가리기/). 도구에 넘긴 어떤 것도 업로드되지 않습니다. 아래는 이 페이지가 도구에 대해 글로 설명하는 내용 전부입니다. 도구를 쓰려면 이 주소를 여세요.

## 이미지는 **절대 업로드되지 않습니다**. 서버가 아예 없으니까요.

이미지를 디코딩하고, 그 위에 칠하고, 다시 인코딩하는 일은 모두 이 브라우저가 이미 갖고 있는 코덱으로 합니다. 이 도구에는 네트워크 기능이 아예 없어서 무언가를 가져올 수도, 보낼 수도 없습니다. 이 사이트의 다른 어떤 페이지보다 여기서 그 사실이 중요합니다. 가리기 도구에 올라오는 이미지는 이름과 주소와 계좌번호가 아직 읽히는 바로 그 이미지이기 때문입니다.

- ✗ 업로드 없음
- ✗ 계정 없음
- ✗ 워터마크 없음
- ✓ 오프라인 작동
- ✓ 오픈 소스

## 가린 부분이 정말로 사라지도록 이미지를 가리는 방법

1. **이미지를 고릅니다.** 캡처 화면이든 스캔본이든 사진이든, 브라우저가 열 수 있는 것이면 됩니다. 디스크에서 바로 읽어 들이고, 그동안 어디로도 나가지 않습니다.
2. **보이면 안 되는 곳에 상자를 그립니다.** 그다음 것에도 하나 더 그리면 됩니다. 상자는 끌어서 옮기고 손잡이로 크기를 바꿉니다. Tab 키로 상자에 옮겨 가 화살표 키로 다룰 수도 있습니다. 상자 아래 보이는 것이 실제 결과이고, 파일을 쓰는 바로 그 코드가 그린 것입니다.
3. **검게 칠하기, 모자이크, 흐리게 중에 고릅니다. 되도록 검게 칠하세요.** 검게 채우면 아무것도 남지 않습니다. 모자이크와 흐리게는 픽셀을 그 자신의 평균으로 바꿀 뿐이라, 배경에 찍힌 얼굴에는 충분해도 글자로 읽히는 것에는 부족합니다.
4. **“가리고 저장”을 누른 뒤 파일을 확인합니다.** 그다음에 보이는 이미지는 완성된 파일을 다시 디코딩한 것입니다. 편집 프로그램에서 열어 레이어를 찾아보거나, 가린 글자를 선택해 보세요. 평평한 이미지 한 장뿐이고, 가린 자리는 파일이 쓰이기 전에 덮어써졌습니다.

## 자세한 설명

[가린 부분이 정말로 사라지도록 이미지를 가리는 방법](https://abox.tools/ko/가이드/이미지-가리기/): 대부분의 프로그램이 그리는 검은 사각형은 이미지 위에 얹혀 있어서 옆으로 밀어낼 수 있습니다. 진짜 가리기와 덮어 두기의 차이, 모자이크한 글자가 다시 읽히는 이유, 그리고 보내기 전에 파일을 확인하는 방법.

## 상자 속 다른 도구

- [EXIF 확인 및 제거](https://abox.tools/ko/exif-정보-삭제/): 사진이 나에 대해 뭘 흘리고 있는지 확인하고, 빼냅니다.
- [DICOM 뷰어](https://abox.tools/ko/dicom-뷰어/): CT, MRI, 엑스레이, 초음파를 창과 헤더와 계측까지.
- [이미지를 ICO로](https://abox.tools/ko/파비콘-만들기/): 그림 하나를 넣으면, 브라우저와 윈도우와 맥이 요구하는 모든 크기가 나옵니다.
- [이미지를 데이터 URI로](https://abox.tools/ko/이미지-base64-변환/): 사진 전체를 텍스트 한 줄로. CSS나 HTML에 그대로 붙여 넣으세요.

## 자주 묻는 질문

### 제 이미지가 어딘가로 업로드되나요?

아닙니다. 파일을 디코딩하고 가리고 다시 인코딩하는 일은 모두 이 브라우저가 이 기기에서 합니다. 이 도구에는 네트워크 기능이 아예 없어서 무언가를 가져오지도, 보내지도 않습니다. 페이지의 `Content-Security-Policy`에는 접속할 수 있는 주소가 모두 적혀 있고, 그중 어느 것도 이 사이트의 것이 아닙니다. 페이지를 한 번 불러온 뒤 인터넷을 끊어도 그대로 작동합니다.

### 가린 부분이 정말 파일에서 사라지나요?

네, 그래서 이 도구가 있습니다. 이미지는 픽셀 버퍼로 디코딩되고, 상자는 그 안의 픽셀을 덮어쓰고, 버퍼는 새 파일로 인코딩됩니다. 인코더가 무언가를 받기 전에 원래 값은 이미 메모리에서 사라지기 때문에 숨길 레이어도, 지울 주석도, 되돌릴 기록도 없습니다. 확인은 남의 주장을 확인하듯 하시면 됩니다. 결과를 이미지 편집기에서 열어 두 번째 레이어를 찾아보거나, 가린 글자를 선택해 보세요.

### 모자이크나 흐리게 처리한 부분을 복원할 수 있나요?

가능한 경우가 있고, 고르기 전에 읽어 둘 값어치가 있는 대목은 이것 하나입니다. 검게 채우면 아래 있던 것이 전부 한 가지 색으로 바뀌므로 아무것도 남지 않습니다. 테두리도, 평균값도, 글자 수도 남지 않습니다. 모자이크는 각 블록을 그 블록의 평균으로 바꾸는데, 평균의 격자는 여전히 아래 있던 것에 대한 측정값입니다. 흔한 글꼴에 크기도 짐작되는 글자라면, 후보 문자열을 똑같이 그려 평균을 맞춰 보는 방식으로 원본을 되살린 연구가 공개돼 있습니다. 흐리게는 합성곱이고, 합성곱은 원리상 되돌릴 수 있습니다. 배경에 찍힌 얼굴은 모자이크로 두셔도 되지만, 글자로 읽히는 것은 검게 칠하세요.

### 문서 프로그램에서 검은 사각형을 그리는 것과 무엇이 다른가요?

대부분의 프로그램이 그 사각형을 이미지 안이 아니라 이미지 옆에 저장하기 때문입니다. PDF 뷰어나 슬라이드, 워드프로세서, 레이어가 있는 이미지 편집기에서 그린 도형은 위치를 가진 채 문서 위에 얹혀 있는 개체입니다. 옮기거나 지우거나 다른 프로그램에서 열면 가려 두었던 것이 그대로 다시 나옵니다. 신문사도, 법원도, 정부 부처도 그런 방식으로 문서를 공개한 적이 있습니다. 여기서는 사각형이 아예 저장되지 않습니다. 남는 것은 원래 값 위에 쓰인 픽셀 값뿐입니다.

### EXIF와 GPS 정보도 지워지나요?

네, 부수적으로 지워집니다. 저장이란 픽셀로 채운 캔버스를 인코딩하는 일이고, 캔버스는 태그를 갖고 있지 않습니다. 촬영 위치도, 카메라 기종도, 시각도, 내장 썸네일도 새 파일에는 그냥 쓰이지 않습니다. 썸네일은 특히 중요합니다. 이미지의 작은 두 번째 사본인데 사진을 편집해도 늘 새로 만들어지지는 않아서, 가린 사진이 가리기 전 썸네일을 달고 나가면 작업 전체가 무의미해집니다. 이미지를 다시 인코딩하지 않고 메타데이터만 없애고 싶다면 [EXIF 확인 및 제거](https://abox.tools/ko/exif-정보-삭제/)가 컨테이너 쪽을 다시 씁니다.

### 어떤 형식을 읽고 쓸 수 있나요?

브라우저가 디코딩할 수 있는 것은 모두 읽습니다. 실제로는 JPEG, PNG, WebP, GIF, BMP이고 요즘 브라우저 대부분에서는 AVIF도 됩니다. 쓰는 쪽은 JPEG, PNG, WebP인데, 브라우저에 들어 있는 인코더가 그것들이기 때문입니다. “자동”에서는 JPEG는 JPEG로, 나머지는 PNG로 나옵니다. 사진은 사진다운 용량을 유지하고, 캡처 화면에 남겨 둔 글자는 또렷하게 남습니다. 이 선택은 가리기와는 무관합니다. 인코더가 볼 때 픽셀은 이미 사라진 뒤입니다.

### 마우스 없이도 할 수 있나요?

됩니다. “가운데에 상자 추가”로 하나를 올리고, Tab 키로 상자 사이를 옮기고, 화살표 키로 선택된 상자를 움직이고, Alt와 화살표 키로 크기를 바꿉니다. Shift를 누르면 한 번에 10픽셀씩 움직이고 Delete 키로 지웁니다. 상자마다 이미지 아래에 크기와 위치, 무슨 일을 하는지, 그리고 지우기 단추가 있는 줄도 함께 나오므로 도구 전체를 키보드로 쓸 수 있고 스크린 리더로 읽을 수 있습니다.

### 휴대폰에서도 되나요?

됩니다. 그리기, 옮기기, 크기 바꾸기가 마우스 이벤트가 아니라 포인터 이벤트라 손가락으로도 똑같이 되고, 터치 화면에서는 손잡이가 더 크게 그려집니다. 화면의 이미지는 작업하는 동안 화면 크기로 다시 그려지고, 파일 자체는 단추를 누르는 순간 원래 해상도 그대로 가려집니다.

### 무료인가요? 계정이 필요한가요?

무료이고 계정도, 로그인도, 체험 기간도, 워터마크도 없습니다. 이미지 크기 제한도 없습니다. 비용을 대는 서버가 없고 작업이 이 기기에서 일어나기 때문입니다. 사이트는 광고로 운영되지만, 광고 쪽에 이미지에 관한 것은 아무것도 넘기지 않습니다.

## 이 약속을 직접 확인하는 방법

- **이미지가 나갈 곳이 없습니다.** 이 페이지가 접속할 수 있는 주소는 Content-Security-Policy에 모두 적혀 있고, 그중 어느 것도 이 사이트의 것이 아닙니다. 파일이 모일 수 있는 수신 지점이 여기에는 없고, 있다 해도 그리로 보낼 코드가 없습니다.
- **가려진 픽셀은 나가는 길이 아니라 여기서 사라집니다.** 이미지는 픽셀 버퍼로 디코딩되고, 상자는 그 버퍼에 직접 쓰이고, 버퍼가 인코더로 넘어갑니다. 상자를 별도 레이어로 갖고 있는 이미지는 이 페이지 어디에도 없습니다. 애초에 만들어지지 않기 때문입니다. `src/redact.js`를 보시면 됩니다.
- **여기서는 아무것도 가져오지 않습니다.** `src/` 어디에도 `fetch`도, `XMLHttpRequest`도, `sendBeacon`도 없습니다. 하는 일은 `getImageData`와 바이트를 도는 세 개의 반복문, 그리고 `canvas.toBlob`뿐이고, 모두 브라우저에 이미 들어 있는 기능입니다.
- **상자에 대해서는 어디에도 보고하지 않습니다.** 어디에 그렸는지, 몇 개인지, 얼마나 큰지, 어떤 방식을 골랐는지는 페이지를 닫을 때까지 이 페이지의 메모리에만 있습니다. 그것을 실어 나르는 분석 이벤트는 이 저장소에 하나도 없고, 내려받은 뒤 나오는 그 한 가지 질문이 보내는 것은 좋아요/싫어요와 도구 이름뿐입니다.
- **오프라인에서도 작동합니다.** 네트워크를 끊어도 도구는 그대로입니다. 애초에 네트워크 단계가 없었기 때문입니다. 가장 간단한 증명이고, 여권을 가리기 전에 한 번 해 볼 만한 확인입니다.

**직접 확인해 보세요.** 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 `dist` 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다: https://github.com/A-Box-of-Tools/website

먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 `config/site.toml`, 픽셀을 덮어쓰는 세 함수는 `src/redact.js`, 화면에 보이는 것이 바로 그 세 함수로 그려지는 이유는 `src/preview.js`입니다.