이미지 워터마크 도구
이미지에 텍스트 또는 이미지 워터마크 추가, 위치, 투명도, 크기 조절 지원
이미지를 여기에 드래그하거나 클릭하여 선택하세요
JPG, PNG, WebP, BMP 형식 지원, 한 번에 여러 장 선택 가능
이미지 워터마크란?
이미지 워터마크란 이미지 위에 텍스트 또는 이미지 표시를 추가하여 저작권 보호, 출처 표시 또는 브랜드 홍보에 사용하는 것을 의미합니다. 워터마크는 다양한 위치, 투명도, 크기 및 회전 각도를 설정할 수 있으며 이미지를 보호하면서도 주요 내용의 관람에 영향을 주지 않습니다. 이 도구는 브라우저에서 로컬로 처리하며 서버에 업로드하지 않아 프라이버시와 보안을 보호합니다. 대량 이미지에 적용할 때는 워터마크의 위치와 불투명도를 통일해야 하며, 피사체 얼굴, 상품 정보, 문서 내용처럼 중요한 부분을 가리지 않는지 확인해야 합니다.
사용 방법
사용 방법
- 이미지를 드래그하거나 클릭해 업로드하세요(여러 장 가능)
- 워터마크 종류를 선택하세요. 텍스트 또는 이미지
- 워터마크 내용, 위치, 불투명도, 크기, 회전을 설정하세요
- "워터마크 추가" 버튼을 누르고 미리 본 뒤 다운로드하세요
워터마크 확인
- 여러 크기에서 미리보세요. 큰 이미지에서 또렷한 워터마크가 썸네일에서는 너무 강하거나 잘 안 보일 수 있습니다.
- 나중에 위치, 불투명도, 문구를 바꿀 수 있도록 워터마크 없는 원본을 보관하세요.
활용 사례
기술 원리
워터마킹은 전적으로 2D 캔버스에서 이루어집니다. 소스 이미지는 ctx.drawImage를 통해 원본 픽셀 크기의 HTMLCanvasElement에 그려지고, 텍스트 또는 로고는 ctx.fillText로 문자열을, 두 번째 drawImage 호출로 래스터 오버레이를 합성합니다. 불투명도는 ctx.globalAlpha로 제어되며, 이는 뒤따르는 모든 알파 채널에 곱해집니다. 50% 투명 PNG에 globalAlpha 0.5를 적용하면 최종 픽셀은 25%가 되며, 이것이 '워터마크가 안 보이는 이유' 버그 리포트의 가장 흔한 원인입니다. 위치 지정은 표준 캔버스 변환을 사용합니다. ctx.translate는 원점을 배치 앵커(좌상단, 우상단, 중앙, 우하단 또는 3×3 격자의 각 셀)로 이동하고, ctx.rotate(angle)는 그 원점을 중심으로 대각선 스탬프를 기울이며, 드로우 호출은 추가 오프셋 없이 마크를 배치합니다. 타일 워터마크는 회전된 소스로 CanvasPattern.createPattern을 호출하고 전체 캔버스에 ctx.fillRect을 사용하여, 원본 크기에 관계없이 전체 페이지 DRAFT 줄무늬가 균등한 간격을 유지하도록 합니다. 폰트 메트릭은 CSS 픽셀을 보고하는 ctx.measureText에서 오므로, 2x 디스플레이의 미리보기에 맞는 28px 라벨이 1x 모바일 내보내기에서 잘릴 수 있습니다. 내보내기 단계에서는 'image/png', 'image/jpeg', 'image/webp'와 선택적 quality 파라미터로 canvas.toBlob을 호출합니다. 캔버스는 소스 해상도에서 실행되므로 출력은 원본 픽셀 크기를 유지하지만 소스 EXIF 방향, ICC 프로필 또는 기타 메타데이터는 포함하지 않습니다. 약 30개 이상의 큰 파일 배치는 UI 스레드를 차단하기 시작하는데, toBlob은 비동기이지만 드로우 스택은 메인 스레드에서 동기적으로 실행되기 때문입니다. 무거운 작업량은 OffscreenCanvas가 있는 Web Worker로 캔버스 작업을 옮기면 이점을 얻을 수 있습니다.
- 합성 스택: 기반에 ctx.drawImage, 마크에 ctx.fillText(또는 두 번째 drawImage), 투명도 곱셈에 ctx.globalAlpha.
- 알파 연산: globalAlpha는 각 픽셀의 기존 알파에 곱해지므로 0.5-alpha PNG 위의 0.5 마크는 0.5가 아닌 0.25로 렌더링됩니다.
- 회전: 앵커로 ctx.translate, 라디안 단위의 ctx.rotate(angle), 그런 다음 원점(0,0)에서 드로우하여 변환이 배치 포인트 중심을 유지합니다.
- 타일링: createPattern은 fillRect가 전체 캔버스에 칠할 수 있는 CanvasPattern을 반환하여 어떤 원본 크기에서도 간격을 균일하게 유지합니다.
- 텍스트 메트릭: measureText는 CSS 픽셀을 보고하므로 2x 미리보기에서 크기 조정된 라벨이 1x 모바일 내보내기에서 이미지 경계를 벗어날 수 있습니다. 확실하지 않을 때는 canvas.width에 비례하여 크기를 조정하세요.
- 내보내기: toBlob('image/png' | 'image/jpeg' | 'image/webp', quality)는 소스 해상도를 유지하지만 EXIF와 ICC를 제거합니다. 세로/가로 정확성이 중요하면 드로우 전에 EXIF 방향 기준으로 회전하세요.
예시
오른쪽 하단 저작권 텍스트
유형: 텍스트 워터마크
텍스트: "(c) 2026 ToolAct Studio"
폰트: 28 px, 흰색 (#FFFFFF)
위치: 오른쪽 하단
불투명도: 50%
용도: 포트폴리오 사진, 블로그 메인 이미지이미지 전체에 대각선 타일형 초안 표시
유형: 텍스트 워터마크, 타일
텍스트: "DRAFT - DO NOT SHARE"
폰트: 48 px, 연한 회색 (#CCCCCC)
회전: -30도
불투명도: 25%
타일 간격: 200 px
용도: 클라이언트 검토용 미공개 제품 사진왼쪽 상단 PNG 로고, 15% 비율
유형: 이미지 워터마크
워터마크 파일: brand-logo.png (투명 배경)
위치: 왼쪽 상단, 20 px 안쪽
비율: 원본 이미지 너비의 15%
불투명도: 80%
결과: 1920 px 메인 이미지에서 로고가 288 px 너비로 표시상품 사진 30장 일괄 처리
입력: JPG 상품 사진 30장, 각 2000 x 2000 px
워터마크: 텍스트 "shop.toolact.com"
위치: 하단 중앙, 여백 40 px
불투명도: 60%, 출력 형식: JPG, 품질 92
처리 시간: 약 8초, 총 출력: 24 MB자주 묻는 질문
워터마크 작업을 위해 이미지가 업로드되나요?
아니요. 워터마크는 브라우저에서 canvas를 사용해 이미지에 합성됩니다. 원본 데이터도 워터마크가 적용된 결과물도 기기 외부로 나가지 않습니다.
어떤 워터마크 스타일이 지원되나요?
텍스트 워터마크(사용자 지정 문자열, 폰트 크기, 색상, 불투명도, 회전, 전면 도배용 타일/반복)와 이미지 워터마크(자체 로고를 원하는 위치와 불투명도로 오버레이)가 지원됩니다. 대부분의 빌드에서 둘을 동시에 적용할 수 있습니다.
워터마크는 어디에 배치하면 좋나요?
모서리 배치(보통 우측 하단)는 시각적 방해가 가장 적지만 잘라내기 쉽습니다. 이미지 전체에 타일링한 워터마크는 깔끔히 제거하기 어렵지만 시각적 매력이 떨어집니다. 중앙의 반투명 워터마크는 둘의 균형을 맞춥니다. 가독성과 저작권 보호 중 무엇이 우선인지에 따라 선택하세요.
워터마크는 제거될 수 있나요?
단일 모서리 워터마크는 자르기나 콘텐츠 인식 채우기로 일반적으로 제거할 수 있으며, 배경이 단조로운 사진에서는 특히 쉽습니다. 타일 형태의 반투명 워터마크는 더 어렵습니다. 어떤 워터마크도 완전히 제거 불가능하지는 않으니, 실질적 보호 수단이 아닌 억제 효과와 저작권 표시로 받아들이세요.
출력 형식과 품질은 어떻게 되나요?
PNG는 워터마크 가장자리를 선명하게 보존합니다(라인 아트와 스크린샷에 권장). JPEG는 결과를 재인코딩하므로 워터마크가 약간 부드러워질 수 있으며, 깔끔한 출력을 위해 품질 90 이상을 선택하세요. 페이지에서 형식과 품질을 직접 고를 수 있습니다.
EXIF와 메타데이터는 보존되나요?
대부분 보존되지 않습니다. canvas 기반 처리는 보통 EXIF와 ICC 프로파일을 제거합니다. 카메라 메타데이터, GPS 위치, 타임스탬프가 사라져 프라이버시 측면에서는 이점이지만, 워터마크가 적용된 사본은 더 이상 감식용 원본이 아닙니다.
여러 이미지에 일괄 워터마크를 적용할 수 있나요?
네. 여러 파일을 끌어다 놓으면 동일한 워터마크가 각각에 적용됩니다. 배치 크기는 브라우저 메모리에 의해 제한되며, 매우 큰 배치는 처리 속도가 느려지거나 모바일에서 메모리 부족이 발생할 수 있습니다. 안정성을 위해 약 20~50장 단위로 나눠 처리하세요.