AI 얼굴 번호판 자동 블러(모자이크) 서비스 제작기 - 계기, 가이드, 개발 이슈, 해결책

Ai 얼굴·번호판 자동블러 서비스 '사용'화면

블로그나 SNS에 사진을 올릴 때마다 타인의 얼굴이나 차량 번호판을 일일히 가리는 작업이 번거롭지 않으셨나요? 그래서 복잡한 설치나 서버 업로드 없이 브라우저에서 즉시 개인정보를 보호해 주는 'AI 얼굴·번호판 자동 블러' 도구를 바이브코딩으로 만들게 되었습니다.

오늘은 이 도구의 탄생 비화와 개발 중 마주친 기술적 난관을 어떻게 해결했는지 공유합니다.

매번 포토샵이나 무료 사이트를 켜서 모자이크 처리를 하는 과정은 생각보다 번거로웠습니다. 게다가 "내 사진이 서버에 저장되지는 않을까?" 하는 불안함도 있었습니다. 그래서 저는 두 가지 원칙을 세우고 개발에 착수하게 되었고, 계기는 다음과 같습니다.

이번 프로젝트도 기존 프로젝트와 동일하게 코드 한 줄 한 줄을 직접 짜기보다, 서비스의 핵심 로직과 사용자 경험(UX)에 집중하는 바이브코딩 방식을 채택했습니다. 그리고 기본 설계 가이드는 다음과 같습니다.

프레임워크: Next.js (App Router), Tailwind CSS
AI 모델 (Client-side): 얼굴 감지: @mediapipe/face_detection (매우 빠르고 정확함)
객체 감지 (번호판 등): @tensorflow-models/coco-ssd 또는 MediaPipe Object Detector
이미지 처리: HTML5 Canvas API (감지된 좌표에 블러 처리 적용)
핵심 기술: 브라우저 환경에서 동작하는 경량 AI 객체 탐지 모델
경험: AI와 실시간으로 소통하며 기능을 구현하니, 기획부터 프로토타입 완성까지의 속도가 비약적으로 빨라졌습니다. 하지만 AI와의 협업 중에도 예상치 못한 '디테일'의 한계는 존재했습니다.

개발 도중, 첨부된 이미지가 가로로 길게 늘어나는(Stretch) 문제가 발생했습니다. 원인은 캔버스의 렌더링 타이밍과 기본 해상도의 충돌이었습니다.

원인: Canvas 컴포넌트가 status === "done"일 때만 렌더링되도록 설정되어 있었습니다.
결과: 초기화 함수(initCanvas)를 호출하는 시점에 DOM에 캔버스가 존재하지 않아(null), 캔버스 크기가 브라우저 기본값인 300x150으로 고정되었습니다. 여기에 CSS w-full이 적용되니 가로로 흉하게 늘어난 것이죠.

이 문제를 해결하기 위해 두 가지 핵심 로직을 수정했습니다.

상시 DOM 배치: 캔버스를 조건부 렌더링하지 않고 항상 DOM에 두되, 처리 전에는 hidden 클래스로 숨겼습니다. 이제 canvasRef.current는 언제나 유효합니다.
해상도 고정 로직 변경: 컨테이너 너비(clientWidth)에 의존하는 대신, 이미지의 실제 해상도(naturalWidth)를 기준으로 내부 해상도를 최적화했습니다.

핵심 코드 변화:

// 기존: 컨테이너 너비에 따라 해상도 결정 (hidden 시 0이 되는 문제)

// 변경 후: 이미지 원본 해상도와 최대치(1600px) 중 작은 값으로 고정

const targetWidth = Math.min(img.naturalWidth, 1600);

이렇게 수정하니 왜곡 없이 이미지가 정상적으로 로드 되었고, 정상적으로 처리가 되었습니다.

특징	상세 내용
프라이버시	서버 전송 0%. 모든 처리는 귀하의 기기 내에서 안전하게 완료됩니다.
정확도	최신 AI 모델이 다양한 각도의 얼굴과 번호판을 정밀하게 탐지합니다.
편의성	드래그 앤 드롭 한 번으로 끝! 복잡한 설정이 필요 없습니다.
반응형 디자인	모바일과 데스크톱 어디서든 최적화된 화면을 제공합니다.

이번 'AI 얼굴·번호판 자동 블러' 도구는 제가 기획한 [무료 도구 프로젝트] 시리즈의 7번째 결과물입니다.

시중에 수많은 AI 도구가 나와 있지만, 정작 쓰려고 하면 전면 광고에 가로막히거나 복잡한 회원 가입, 결제 유도 때문에 지치기 마련입니다. 저는 이러한 번거로움을 걷어내고, 오직 '본질'에만 충실한 도구를 직접 만들고 싶었습니다.

제가 바이브코딩을 통해 만들어갈 모든 도구는 다음의 원칙을 철저히 지킵니다.

100% 완전 무료: 유료 플랜이나 숨겨진 결제 유도가 전혀 없습니다. 누구나 제약 없이 기술의 혜택을 누릴 수 있습니다.
프라이버시 우선 (Privacy-First): "내 사진이 어디로 갈까?" 하는 걱정은 이제 그만하세요. 모든 작업은 서버 전송 없이 사용자의 브라우저 내에서만 안전하게 처리됩니다.
극강의 심플함: 회원 가입이나 복잡한 설정 없이, 접속 즉시 작업을 시작할 수 있는 군더더기 없는 UI를 지향합니다.

현재 저는 이 블러 도구를 포함하여, 일상의 소소한 불편함을 해결해 줄 다양한 '무료 AI 툴' 개발 작업을 진행 중입니다.

배포 준비가 완료되는 대로 본 블로그를 통해 가장 먼저 정식 오픈 소식을 전해드리겠습니다. 바이브코딩이라는 새로운 방식으로 탄생할 다음 도구들도 많은 기대 부탁드립니다.

CodeFlowHub | 딸깍코딩 프로그램 제작소