🫥 사진 속 얼굴, 서버 없이 브라우저에서 모자이크하기

사진을 서버에 올리지 않고 브라우저 안에서만 얼굴을 찾아 모자이크하는 작은 웹 도구를 만들었다. 구글 MediaPipe의 온디바이스 얼굴 검출로 동작하며, 모자이크·블러·검은 박스·이모지 중 골라 가릴 수 있다.

블로그에 작은 도구 하나를 추가했습니다. 얼굴 모자이크 — 사진 속 얼굴을 자동으로 찾아 가려주는 웹 도구입니다.

사진을 SNS나 블로그에 올릴 때, 같이 찍힌 사람의 얼굴을 가려야 할 때가 있죠. 보통은 앱을 깔거나, 얼굴 사진을 모르는 웹사이트에 업로드해야 합니다. 그런데 얼굴 사진을 남의 서버에 올린다는 게 영 찜찜합니다. 그래서 사진이 아예 내 브라우저 밖으로 나가지 않는 도구를 만들었습니다.

서버 없이 얼굴을 찾을 수 있는 핵심은 온디바이스 AI입니다. 구글의 MediaPipe Face Detector라는 얼굴 검출 모델을 브라우저에서 직접 돌립니다. 모델 파일(약 200KB)만 한 번 내려받으면, 그다음부터는:

  1. 사진을 캔버스에 올리고
  2. 브라우저 안에서 얼굴 위치를 찾고
  3. 그 영역에 효과를 입힙니다

이 모든 게 내 컴퓨터 안에서 일어납니다. 사진은 단 한 번도 서버로 전송되지 않아요.

가리는 방식은 아래와 같이 4가지 방식으로 구현했습니다.

  • 모자이크 — 픽셀을 뭉개는 전통적 방식
  • 블러 — 부드럽게 흐리기
  • 검은 박스 — 완전히 가리기
  • 이모지 — 😀🐱⭐ 로 덮기

강도와 가리는 범위도 슬라이더로 조절할 수 있습니다. 얼굴 검출 모델도 완벽하진 않아서 옆얼굴이나 작게 찍힌 얼굴은 놓치기도 하는데, 그럴 땐 마우스로 직접 영역을 드래그해서 추가하거나, 잘못 잡힌 곳을 클릭해서 지울 수 있게 했습니다.

사실 이 도구는 Claude Code로 개발했습니다. 코딩을 잘 몰라도, “사진 얼굴을 모자이크하는 웹페이지를 만들어줘"라고 대화하듯 시키면 이 정도는 만들어집니다. 여러분도 충분히 직접 만들 수 있어요. 그리고 보안이라는 관점에서 보면, 직접 만들어 쓰는 게 사실 가장 확실합니다. 물론 그게 귀찮은 분들은 제가 만들어 둔 걸 그냥 써보세요. 어차피 사진은 브라우저 밖으로 안 나가니까요.

써보기

👉 얼굴 모자이크 도구 열기

상단 메뉴의 도구에서도 언제든 들어올 수 있습니다.

이 글은 CC BY-NC-SA 4.0 라이선스를 따릅니다. 본 블로그의 글은 정보 제공과 학습 기록을 위한 것으로, 투자 조언이 아닙니다. 투자 판단의 책임은 투자자 본인에게 있습니다.