사진 모자이크·블러 처리

사진에서 얼굴·번호판·글자를 골라 가리고 원본 크기로 저장합니다

사진 모자이크·블러 처리는 사진 속에서 알아보면 안 되는 곳을 직접 골라 덮는 도구입니다. 사진 위를 끌어 네모나 타원을 그리거나 붓으로 칠하면, 그 자리가 곧바로 모자이크, 흐림, 칠하기 가운데 고른 방법으로 바뀝니다. 가린 곳마다 방법과 세기를 따로 정할 수 있어서, 같은 사진 안에서 얼굴은 모자이크로, 전화번호는 검은 칠로 가리는 식으로 나눠 쓸 수 있습니다.

모든 처리는 브라우저 안의 캔버스에서 이루어지고 사진은 서버로 올라가지 않습니다. 저장 파일은 원본과 같은 크기이며, 화소 수가 4,096 × 4,096을 넘는 아주 큰 사진만 휴대폰 브라우저의 한계 안으로 줄입니다. 저장 파일은 캔버스에서 새로 만들어지므로 원본에 있던 위치, 촬영 기기, 촬영 일시 같은 사진 정보가 들어가지 않습니다.

이럴 때 씁니다

• 중고 거래나 후기에 택배 상자 사진을 올릴 때: 운송장에는 받는 사람 이름, 전화번호, 주소, 운송장 번호가 한꺼번에 적혀 있습니다. 처음에 열려 있는 예시 사진이 바로 이 경우이며, 이름은 칠하기로, 바코드는 모자이크로 가려 두었습니다.
• 대화·주문·송금 화면을 캡처해서 보여 줄 때: 상대방 이름과 프로필 사진, 계좌번호, 주문번호가 화면 곳곳에 흩어져 있습니다. 붓으로 줄을 따라 칠하거나 네모를 여러 개 그려 한 번에 가리면 됩니다.
• 단체 사진이나 행사 사진을 공개할 때: 동의를 받지 못한 사람이나 아이의 얼굴만 골라 타원으로 덮습니다. 얼굴 모양에 맞춘 타원은 네모보다 주변 배경을 덜 건드립니다.
• 도로·주차장 사진이나 블랙박스 화면을 올릴 때: 다른 차의 번호판과 지나가는 사람의 얼굴이 함께 찍힙니다. 번호판처럼 글자와 숫자로 된 곳은 칠하기가 안전하다는 점을 아래에서 설명합니다.
• 문서·신분증 사진을 보내야 할 때: 상대가 확인해야 하는 부분만 남기고 주민등록번호 뒷자리, 주소, 사진 같은 나머지를 덮습니다. 여러 장을 열어 한 번에 ZIP으로 받을 수도 있습니다.

쓰는 순서

1. 사진 열기: 사진 고르기를 누르거나, 사진을 작업면에 끌어 놓거나, 복사한 이미지를 붙여 넣습니다. 한 번에 12장까지 열 수 있고 2장 이상이면 사진 띠가 나타납니다. JPG 사진에 위치 정보가 들어 있으면 이름 아래 꼬리표로 알려 줍니다.
2. 도구 고르기: 네모는 글자 줄과 번호판, 타원은 얼굴, 붓은 비스듬한 줄이나 모양이 불규칙한 곳에 알맞습니다. 붓을 고르면 붓 굵기 막대가 나타납니다.
3. 가리는 방법과 세기 고르기: 모자이크는 블록 크기, 흐림은 흐림 반경을 막대로 정하고, 칠하기는 검정, 흰색, 주변 색 가운데 고릅니다. 가린 곳을 고른 상태에서 바꾸면 그 곳만 바뀌고, 아무것도 고르지 않았을 때 바꾸면 앞으로 그릴 곳에 쓰입니다.
4. 그리고 고치기: 사진 위를 끌어 그립니다. 한 번 누르기만 하면 그 자리에 짧은 변의 6분의 1 크기 네모가 생깁니다. 그린 곳은 끌어서 옮기고, 네 모서리를 끌어 크기를 바꿉니다. 키보드로는 Enter로 새 네모를 만들고 방향키로 옮기며, + 와 − 로 크기를, Delete로 지우기를, Ctrl+Z로 되돌리기를 합니다.
5. 원래 크기로 확인하기: 무대의 사진은 화면에 맞춰 줄어 있어 실제보다 촘촘해 보입니다. 아래 확인 창은 고른 곳을 원래 크기(100%)로 보여 주고, 판정 문장과 블록 자가 얼마나 가려졌는지 알려 줍니다.
6. 저장하기: PNG나 JPG를 고르고 저장을 누릅니다. 사진이 여러 장이면 모두 저장(ZIP)으로 한꺼번에 받고, 복사나 공유로 바로 붙여 넣을 수도 있습니다.

모자이크, 흐림, 칠하기는 남기는 정보가 다릅니다

세 방법은 보기에는 모두 '가린 것'이지만 저장 파일에 남는 정보의 양이 다릅니다. 모자이크는 블록마다 평균 색을, 흐림은 윤곽과 밝기의 흐름을 남깁니다. 칠하기만 원래 픽셀을 단색으로 바꿔 아무것도 남기지 않습니다. 목록과 판정 창의 색 띠는 이 차이를 초록(칠하기), 노랑(블록이 적은 모자이크), 빨강(흐림, 블록이 많은 모자이크)으로 나타냅니다.

글자를 모자이크나 흐림으로 가리면 안 되는 까닭은 연구로 확인되어 있습니다. Hill 등(2016)은 모자이크와 흐림으로 가린 문서에서 은닉 마르코프 모델로 글자를 되살려 냈고, 두 방법이 널리 쓰이지만 글자를 가리는 데는 알맞지 않다고 결론 내렸습니다. 그리고 이미지 속 글자를 가릴 때는 단색 막대가 모든 중요한 경우에 가장 좋은 선택이라고 권했습니다. 화면 캡처를 모자이크한 글자를 되살리는 공개 도구 Depix도 있습니다. Depix는 글꼴과 글자 크기를 알고 같은 방식으로 모자이크한 견본과 비교하는 방법을 씁니다.

이미지에서 칠하기가 안전한 까닭은 PDF의 검은 상자와 다르기 때문입니다. PDF에서는 글자 위에 상자만 얹으면 글자 자체가 파일에 남을 수 있지만, 이 도구는 칠한 곳의 픽셀 값을 바꾼 새 이미지를 만들어 저장하므로 원래 픽셀이 파일에 남지 않습니다.

모자이크 세기는 '짧은 변의 블록 수'로 봅니다

같은 블록 크기라도 사진이 크면 약하게, 작으면 강하게 가려집니다. 그래서 이 도구는 블록 크기(px)와 함께 가린 곳의 짧은 변에 블록이 몇 개 들어가는지를 보여 줍니다. 얼굴 가로가 300px인데 블록이 50px이면 300 ÷ 50 = 6블록이고, 블록이 20px이면 15블록입니다. 붓으로 칠한 곳은 붓 굵기를 짧은 변으로 셉니다.

블록 자의 기준점은 McPherson 등(2016)의 실험에서 가져왔습니다. 이 연구는 모자이크한 얼굴 사진으로 신경망을 학습시켜, 모자이크한 얼굴이 누구인지 맞히게 했습니다. FaceScrub 자료(530명)는 얼굴을 224 × 224px로 맞춘 뒤 모자이크했고, AT&T 자료(40명)는 얼굴이 가운데 있는 92 × 112px 사진을 그대로 썼습니다. 그래서 AT&T의 블록 수는 사진 가로 기준이며, 얼굴만 세면 이보다 조금 적습니다.

표에서 두 가지를 읽을 수 있습니다. 첫째, 가로 14블록으로 모자이크해도 530명 가운데 절반 넘게 맞혔으므로 블록이 14개를 넘으면 얼굴 윤곽이 많이 남습니다. 이 도구는 이 경우를 빨강(형태가 많이 남음)으로 표시합니다. 둘째, 후보가 40명으로 적으면 6블록 남짓으로 줄여도 96%를 맞혔습니다. 사진을 볼 사람이 이미 아는 얼굴이라면 블록을 아무리 키워도 옷차림, 머리 모양, 주변 사람으로 알아볼 수 있다는 뜻이므로, 그런 사진은 칠하기를 쓰는 편이 안전합니다. 연구는 사람이 아니라 학습한 기계가 맞힌 비율이며, 사람이 맞히는 비율과 같지 않습니다.

이 도구가 가리는 방법

1. 모자이크: 블록 크기를 B라 하면, 가로 x번째 픽셀은 x ÷ B를 내림한 번호의 블록에 들어갑니다. 격자는 사진의 왼쪽 위 모서리에서 시작하므로 가린 곳이 겹치거나 이웃해도 블록 경계가 어긋나지 않습니다. 블록 안 픽셀의 빨강·초록·파랑은 투명도를 무게로 한 평균을 내어, 반투명한 PNG에서도 가장자리가 검게 번지지 않습니다.
2. 흐림: 가우스 흐림을 상자 흐림 세 번으로 근사합니다. 상자 폭은 Kovesi(2010)의 식 √(12σ²/3 + 1)로 정하며, σ가 화면에 보이는 흐림 반경입니다. W3C 필터 명세도 표준편차 2 이상에서 상자 흐림 세 번이 가우스를 약 3% 안으로 근사한다고 적고 있습니다. 흐림 반경이 4px 이상이면 가린 곳을 1/f(f = ⌊σ ÷ 2⌋, 최대 8)로 줄여 σ ÷ f로 흐린 뒤 다시 키우는데, 줄인 뒤의 σ도 2 이상이라 같은 근사 조건을 지킵니다. 브라우저 내장 캔버스 흐림 필터는 Safari가 기본으로 지원하지 않아, 같은 결과를 내도록 계산을 직접 합니다.
3. 칠하기: 가린 곳을 검정, 흰색 또는 그 곳의 평균 색으로 채웁니다. 주변 색은 눈에 덜 띄게 덮을 때 씁니다.
4. 겹친 곳: 목록 순서대로, 앞에서 가린 결과 위에 다음 곳을 적용합니다. 이름을 칠한 뒤 그 위에 넓은 모자이크를 그려도 모자이크는 이미 칠한 픽셀을 바탕으로 계산되므로 칠한 이름이 다시 드러나지 않습니다.

모자이크 블록 번호 = ⌊x ÷ B⌋, 블록 색 = Σ(색 × 투명도) ÷ Σ투명도, 짧은 변 블록 수 = 짧은 변 ÷ B

예: 블록 25px이면 x = 318인 픽셀은 ⌊318 ÷ 25⌋ = 12번 블록이고, 이 블록은 x = 300부터 324까지입니다. 예시 사진의 연락처 칸은 높이가 64px이라 짧은 변 블록 수가 64 ÷ 25 = 2.56입니다. 흐림 반경 σ = 12px이면 식으로 구한 상자 폭은 23·23·25px이지만, 4px 이상이라 1/6로 줄여 σ = 2(상자 3·3·5px)로 계산합니다.

무대에 보이는 미리보기는 화면에 맞춰 줄인 사진에 같은 계산을 한 것이고, 확인 창과 저장 파일은 원본 크기에서 다시 계산한 것입니다. 블록 경계는 원본 픽셀 기준으로 같은 자리에 오므로, 미리보기에서 본 모양 그대로 저장됩니다.

사진 정보(위치·기기·촬영일)는 저장 파일에 남지 않습니다

스마트폰 사진에는 Exif라는 사진 정보가 붙습니다. Exif 표준(CIPA DC-008)은 위치 정보를 GPS 정보 묶음(태그 번호 34853)에 담도록 정해 두었고, 위치 기록을 켠 휴대폰은 찍은 곳의 위도와 경도를 여기에 적습니다. 얼굴과 주소를 가려도 이 정보가 남아 있으면 사진을 찍은 집이나 학교 위치가 함께 전달될 수 있습니다.

이 도구는 JPG 사진을 열 때 Exif를 읽어 위치 정보, 촬영 기기, 촬영일이 있으면 이름 아래 꼬리표로 보여 줍니다. 저장 파일은 캔버스에서 새로 만들기 때문에 이 정보가 옮겨지지 않습니다. 가린 곳이 하나도 없어도 저장 파일에는 사진 정보가 없으므로, 위치 정보만 지우고 싶을 때도 이 도구로 다시 저장하면 됩니다. 다만 원본 파일을 따로 보내거나 올리면 원본의 정보는 그대로 전달됩니다.

저장 형식과 크기

처음 형식은 연 사진에 맞춰 JPG 사진이면 JPG, 그 밖에는 PNG로 정해지고, 직접 바꾸면 그 뒤로는 바꾼 형식을 씁니다. 저장 크기는 원본과 같습니다. MDN은 iOS 기기가 캔버스 크기를 4,096 × 4,096px로 제한한다고 안내하므로, 화소 수가 16,777,216을 넘는 사진은 가로세로 비율을 지켜 그 안으로 줄여 작업하고 저장하며, 줄였다는 사실을 사진을 열 때 알려 줍니다. 한 장에 30MB, 한 변 16,384px, 화소 5,000만이 넘는 파일은 열지 않습니다.

자주 틀리는 경우

• 작은 미리보기만 보고 블록을 정하는 경우: 큰 사진을 화면에 맞추면 블록이 실제보다 촘촘해 보여 충분히 가려진 것처럼 느껴집니다. 확인 창의 100% 화면과 짧은 변 블록 수를 보세요.
• 글자와 숫자를 흐림으로 가리는 경우: 흐림은 보기에는 깔끔하지만 글자의 윤곽이 남습니다. 이름, 전화번호, 번호판은 칠하기를 쓰세요.
• 가장자리를 빠뜨리는 경우: 글자 끝의 한두 획, 번호판의 첫 글자, 얼굴 옆 귀와 머리 모양이 네모 밖으로 나오곤 합니다. 가릴 곳보다 조금 넉넉하게 그리세요.
• 비친 곳과 다른 곳을 놓치는 경우: 유리창과 거울에 비친 얼굴, 배경 모니터의 화면, 명찰, 택배 상자 옆면의 두 번째 운송장도 확인하세요.
• 원본 파일을 함께 보내는 경우: 메신저에서 사진을 '파일'로 보내거나 원본을 클라우드에 올리면 가리기 전 사진과 사진 정보가 그대로 갑니다. 저장한 새 파일만 보내세요.

한계와 주의

• 얼굴이나 글자를 자동으로 찾지 않습니다. 가릴 곳은 직접 그려야 하며, 빠뜨린 곳이 없는지 저장 전에 원본 보기와 확인 창으로 살펴보세요.
• 모자이크와 흐림은 원래 모습을 추정하는 연구가 있는 방법입니다. 블록 자의 기준점은 한 연구의 얼굴 판별 결과이며, 이 숫자 아래로 가렸다고 누구도 알아볼 수 없다는 보장은 아닙니다.
• HEIC 사진은 Safari 17 이상에서만 열리고 Chrome, Edge, Firefox는 열지 못합니다. 움직이는 GIF는 첫 장면만 다룹니다.
• 계산은 브라우저 캔버스의 기본 설정(sRGB, 채널당 8비트)에서 합니다. 색역이 넓은 사진은 저장할 때 아주 진한 색이 조금 약해질 수 있습니다.
• 페이지를 닫으면 연 사진과 가린 곳 기록이 사라집니다. 원본 사진은 이 도구가 고치지 않으므로 기기에 그대로 남아 있습니다.

기준: 2026-10-20에 아래 논문, 표준, 문서의 해당 문장과 표를 확인했습니다. 연구 표의 숫자와 블록 자의 기준점은 이 도구의 계산과 같습니다.

출처

• 01McPherson, R.; Shokri, R.; Shmatikov, V. (2016). Defeating Image Obfuscation with Deep LearningarXiv 1609.00408, §5.2 사진 크기(FaceScrub 224 × 224, AT&T 92 × 112), 표 2 모자이크·표 3 YouTube 흐림 정답률
• 02Hill, S.; Zhou, Z.; Saul, L.; Shacham, H. (2016). On the (In)effectiveness of Mosaicing and Blurring as Tools for Document RedactionProceedings on Privacy Enhancing Technologies 2016(4), 403–417, 글자 가리기에는 단색 막대를 권함
• 03Depix — 모자이크한 화면 캡처에서 글자를 되살리는 개념 증명 도구선형 상자 필터로 모자이크한 캡처, 같은 글꼴 견본과 비교
• 04CIPA DC-008 — Exif 2.32 (2019)GPS Info IFD Pointer 태그 34853(0x8825), 방향 태그 274
• 05MDN — HTMLCanvasElement.toBlob()기본 형식 image/png, 품질 값은 image/jpeg·image/webp 같은 손실 압축 형식에만 적용
• 06MDN — <canvas> 최대 크기iOS 기기는 캔버스를 4,096 × 4,096px로 제한, 넘으면 그리기가 동작하지 않음
• 07W3C — Filter Effects Module Level 1, feGaussianBlur표준편차 2 이상에서 상자 흐림 세 번이 가우스를 약 3% 안으로 근사
• 08Kovesi, P. (2010). Fast Almost-Gaussian FilteringDICTA 2010, 121–125, n번 평균 필터의 이상적인 폭 √(12σ²/n + 1)
• 09Can I use — HEIF/HEIC image formatSafari 17 이상(macOS·iOS)만 지원, Chrome·Edge·Firefox 미지원

자주 묻는 질문

함께 쓰는 도구