내가 Canvas API를 사용해 무료 브라우저 기반 워터마크 제거기를 만든 방법

Source: Dev.to

저는 최근에 CleanMark를 만들었습니다 — 업로드도, 회원가입도, 비용도 없이 브라우저에서 완전히 실행되는 무료 워터마크 제거 도구입니다.

여기에서 사용해 보세요:

핵심 아이디어

대부분의 워터마크 제거 도구는 이미지를 서버로 전송합니다. CleanMark는 브라우저의 Canvas API를 사용해 모든 작업을 로컬에서 수행하므로 이미지가 기기를 떠나지 않습니다.

Canvas 인페인팅 작동 방식

이 기술은 인페인팅이라고 하며, 주변 픽셀을 기반으로 선택된 영역을 채우는 방식입니다.

기본 흐름

1. 사용자는 브러시 또는 사각형 도구로 워터마크 영역을 선택합니다.
2. 선택 영역은 마스크가 됩니다(흰색 = 제거, 검은색 = 보존).
3. 마스크된 각 픽셀에 대해 인접한 비마스크 픽셀을 샘플링합니다.
4. 그 이웃들의 가중 평균을 사용해 마스크된 영역을 채웁니다.

샘플링 전략은 매우 중요합니다. 단순히 주변 픽셀을 평균하는 순진한 방법은 흐릿한 패치를 만들게 됩니다. 더 나은 방법은 패치 기반 매칭을 사용해 이미지의 다른 곳에서 유사한 텍스처 패치를 찾아 복사하는 것입니다.

CleanMark의 빠른 근사

• 각 마스크된 픽셀에서 동심원 형태로 바깥쪽을 스캔합니다.
• 가까운 픽셀에 더 높은 가중치를 부여합니다.
• 가벼운 블러를 적용해 가장자리를 부드럽게 섞습니다.

이 방법은 단순 배경(그라디언트, 단색, 텍스처)에 잘 작동하며, 대부분의 워터마크 사용 사례를 포괄합니다.

왜 브라우저 전용인가?

• 프라이버시: 이미지가 기기에 남아 있습니다.
• 비용: 서버가 없으므로 호스팅 비용이 없습니다.
• 속도: 업로드/다운로드 왕복이 없습니다.

스택

• Next.js (App Router)
• Canvas API for image processing
• next-intl for i18n (English + Chinese)

다음 계획

• 복잡한 배경에 대한 인페인팅 품질 향상.
• 배치 처리 추가.
• 핵심 알고리즘을 오픈소스화.

브라우저에서 이미지 도구를 개발한다면, Canvas API가 대부분 사람들이 생각하는 것보다 훨씬 강력합니다. 구현에 대해 궁금한 점이 있으면 언제든 물어보세요.