Image Watermark (이미지 워터마크)
Image Watermark 도구는 오프스크린 캔버스를 활용해 클라이언트 측에서 텍스트 워터마크를 이미지에 추가합니다. 모든 처리는 브라우저 내에서 이루어지며, 이미지는 서버로 업로드되지 않아 개인정보 보호가 보장됩니다.
Image Watermark는 클라이언트 사이드에서 이미지에 텍스트 워터마크를 추가하는 도구입니다. 이 도구는 OffscreenCanvas를 사용하여 원본 이미지를 먼저 그리고, ctx.globalAlpha를 통해 5%에서 100%까지 투명도를 조절한 워터마크 텍스트를 오버레이합니다. 텍스트는 흰색 채우기와 2px 검은색 외곽선으로 밝고 어두운 배경 모두에서 가독성을 확보합니다. 브라우저에서 직접 처리되므로 이미지가 서버에 업로드되지 않아 개인정보가 안전하며, Resize Image 및 Crop Image와 같은 도구와 함께 사용할 수 있습니다.
사용 방법
- 이미지를 업로드합니다.
- 워터마크 텍스트를 입력하고 글꼴 크기(12-200px)를 설정합니다.
- 워터마크 위치를 '중앙', '대각선', 또는 '우측 하단' 중에서 선택합니다.
- 투명도(5-100%)를 조절하여 워터마크의 가시성을 맞춥니다.
- 변경 사항을 확인하고 결과 이미지를 다운로드합니다.
작동 원리
이 도구는 OffscreenCanvas를 사용해 클라이언트 측에서 이미지를 처리합니다. 먼저 원본 이미지를 캔버스에 그린 뒤, 워터마크 텍스트를 흰색 채우기와 2px 검은색 외곽선으로 렌더링합니다. 텍스트는 CSS sans-serif 폰트로 표시되며, 위치는 중앙 단일 텍스트, -45도 회전 후 세로로 5회 반복하는 대각선, 또는 우측 하단 정렬 중 선택 가능합니다. ctx.globalAlpha로 불투명도를 조정해 배경과 대비를 맞춥니다. 모든 처리는 브라우저 내에서 실행되어 사용자의 이미지가 서버에 전송되지 않습니다.
예시
입력 이미지: sample.jpg (1024x768px)
워터마크 텍스트: Confidential
폰트 크기: 48px
위치: 대각선
투명도: 30%
출력 이미지: sample_watermarked.jpg (1024x768px) - 텍스트가 대각선으로 5회 반복되며, 반투명 상태로 오버레이됨사용 시점
- 개발자: 제품 이미지에 저작권 표시를 추가할 때
- 디자이너: 시안 이미지에 브랜드 로고 텍스트 워터마크를 넣을 때
- SEO 전문가: 웹사이트 이미지 무단 사용 방지를 위해 워터마크 삽입 시
- 학생: 프로젝트 제출 전 이미지 출처를 명확히 하기 위해
이 도구는 Rotate Image 또는 Flip Image 도구와 함께 사용해 이미지 편집 workflow를 확장할 수 있습니다.
자주 묻는 질문
Image Watermark는 어떤 방식으로 워터마크를 추가하나요?
Image Watermark는 OffscreenCanvas를 사용해 클라이언트 측에서 이미지를 렌더링한 뒤, ctx.globalAlpha로 투명도를 조절한 텍스트를 흰색 채우기와 2px 검은색 외곽선으로 오버레이합니다.
내 이미지가 서버로 전송되나요?
아니요. 모든 이미지 처리 과정은 브라우저 내에서 수행되며, 이미지는 서버로 업로드되지 않아 개인정보 보호가 완벽하게 보장됩니다.
워터마크 텍스트의 위치와 크기는 어떻게 설정하나요?
워터마크 위치는 중앙, 대각선(-45도 회전 후 5회 반복), 우측 하단 중 선택할 수 있으며, 폰트 크기는 12px에서 200px 사이에서 조절 가능합니다.
어떤 글꼴이 사용되나요?
워터마크 텍스트는 CSS의 기본 sans-serif 글꼴로 렌더링되어 다양한 시스템에서 일관된 가독성을 제공합니다.
투명도 조절은 어떻게 이루어지나요?
투명도는 ctx.globalAlpha 속성을 통해 5%에서 100%까지 설정할 수 있어, 배경에 따라 워터마크의 가시성을 세밀하게 조절할 수 있습니다.