이 도구가 하는 일
사진 위에 텍스트 한 줄(저작권 표기, 블로그 이름, 인스타그램 아이디 등)을 반투명하게 얹어 새 이미지로 저장합니다. 모서리 네 곳, 가운데 대각선, 전체 반복 타일 중 위치를 고르고 글자 크기·투명도·색·그림자를 조절할 수 있습니다. 로고 이미지 워터마크는 지원하지 않고, 텍스트만 지원합니다.
서버에 사진이 업로드되나요
아니요. 코드는 선택한 파일을 FileReader 로 읽어 브라우저의 캔버스에 그리고 문구를 합성할 뿐, 네트워크로 보내지 않습니다. 결과 PNG도 브라우저 메모리의 Blob으로 만들어 바로 내려받게 합니다. 이 페이지는 외부 이미지 라이브러리를 쓰지 않고 브라우저 내장 캔버스 기능만 사용합니다. 다만 페이지 자체의 접속 기록이나 광고 스크립트 같은 사이트 공통 요소는 사진 처리와 별개로 동작합니다.
미리보기 크기와 저장 해상도
화면에서는 가로 최대 900px로 줄인 미리보기를 보여 주지만, 다운로드할 때는 원본 해상도로 다시 그립니다. 글자 크기 슬라이더 값은 미리보기 기준이므로 큰 사진에서는 저장 시 같은 비율로 커집니다. 즉 미리보기에서 사진 폭의 몇 %로 보이는지가 결과에서도 그대로 유지됩니다. 아래 표는 슬라이더 28px일 때 원본 폭별로 실제 저장되는 글자 크기를 계산한 값입니다.
| 원본 가로(px) | 미리보기 가로(px) | 확대 배율 | 저장 시 글자 크기(px) | 사진 폭 대비 |
|---|---|---|---|---|
| 800 | 800 | ×1.00 | 28 | 3.5% |
| 1,200 | 900 | ×1.33 | 37 | 3.1% |
| 1,920 | 900 | ×2.13 | 60 | 3.1% |
| 3,000 | 900 | ×3.33 | 93 | 3.1% |
| 4,000 | 900 | ×4.44 | 124 | 3.1% |
예를 들어 4000px 폭 사진에서 슬라이더 28px을 고르면 저장 파일에서는 약 124px 높이의 글자가 되고, 800px 폭 사진은 그대로 28px입니다. 900px을 넘는 사진은 폭에 대한 글자 비율이 같게 유지된다는 점이 중요합니다(예제 계산: 28 × 4000 ÷ 900 ≈ 124). 여백은 글자 크기의 절반(최소 14px)이고, 반복 타일은 글자 폭에 글자 크기의 3배를 더한 간격으로 -30도 기울여 채웁니다.
워터마크를 고르는 요령
- 모서리 워터마크: 사진을 해치지 않지만 잘라내기(크롭) 한 번이면 사라집니다. 출처 표기 정도의 용도입니다.
- 가운데 대각선: 크롭으로 없애기 어렵고 눈에 잘 띕니다. 대신 사진 감상에 방해가 됩니다.
- 반복 타일: 어디를 잘라도 문구가 남아 도용 방지에는 가장 유리합니다. 투명도를 20~35% 정도로 낮춰야 사진이 망가지지 않습니다.
- 색과 그림자: 흰색은 어두운 사진에서, 검정은 밝은 사진에서 잘 보입니다. 배경이 복잡하면 그림자를 켜 두는 편이 안전합니다.
- 투명도: 너무 낮으면 읽을 수 없고 너무 높으면 사진이 가려집니다. 50% 전후에서 시작해 사진 중요 부분(얼굴, 상품)과 겹치는지 확인하세요.
한계와 주의점
- 워터마크는 완전한 보호가 아닙니다. 텍스트는 래스터(픽셀)로 합성되므로 이미지 편집 프로그램의 복원·지우개 기능으로 약한 워터마크는 제거될 수 있습니다. 법적 권리를 대신하지 않으며, 중요한 자료는 원본을 따로 보관하고 게시용 해상도만 공개하세요.
- 저장 형식은 항상 PNG입니다. PNG는 무손실이라 사진은 JPEG보다 용량이 몇 배로 커질 수 있습니다. 용량이 문제라면 저장한 PNG를 이미지 형식 변환기에서 JPEG·WebP로 바꾸되, 이때 한 번 더 재인코딩되어 화질이 소폭 떨어질 수 있습니다.
- 메타데이터 제거: 캔버스로 다시 그려 저장하므로 촬영 일시·카메라·GPS 같은 EXIF 정보는 결과 파일에 들어가지 않습니다. 반대로 원본의 EXIF를 유지하고 싶다면 이 도구는 맞지 않습니다.
- 파일 크기·해상도 한계: 코드에 용량 상한은 없지만 브라우저의 캔버스 최대 크기와 기기 메모리가 한계입니다(특히 모바일). 아주 큰 사진에서 저장이 안 되면 안내 문구가 나오며, 사진을 먼저 줄여 쓰세요.
- 움직이는 이미지·특수 형식: 움직이는 GIF는 정지된 한 장으로 저장됩니다. 브라우저가 열지 못하는 형식(예: 일부 환경의 HEIC)은 불러오기에 실패합니다.
- 글꼴: 사이트에서 쓰는 Pretendard 글꼴이 로드되지 않았다면 기본 고딕으로 대체됩니다. 특수문자(©, ®)는 대부분 표시되지만 이모지는 환경에 따라 모양이 다를 수 있습니다.
- 초상권·저작권: 남의 사진에 자기 이름을 넣는 것은 저작권 표시가 되지 않습니다. 본인이 권리를 가진 사진에만 사용하세요.
투명도와 글자색이 실제로 만드는 밝기
캔버스는 글자색과 배경색을 배경 + (글자 - 배경) × 투명도로 섞습니다. 아래는 흰색(255) 글자를 어두운(0), 중간(128), 흰(255) 배경 위에 얹었을 때 글자 한가운데 픽셀이 갖는 밝기(0~255)입니다. 그림자 옵션은 계산에서 뺐습니다.
| 배경 밝기 | 투명도 20% | 투명도 35% | 투명도 50% | 투명도 70% | 투명도 100% |
|---|---|---|---|---|---|
| 0 | 51 | 89 | 128 | 179 | 255 |
| 128 | 153 | 172 | 192 | 217 | 255 |
| 255 | 255 | 255 | 255 | 255 | 255 |
배경 128 위의 흰 글자는 투명도 35%에서 밝기 172로 배경과 44밖에 차이 나지 않아 눈으로 읽기 어렵고, 70%에서 217(차이 89)이 되어 비로소 또렷합니다. 배경이 흰색(255)이면 흰 글자는 투명도와 무관하게 255 그대로라 아예 보이지 않으며, 이때 보이는 것은 그림자뿐입니다. 그래서 밝은 사진에는 검정 계열 글자를 쓰거나 그림자를 켜 두어야 합니다. 반대로 어두운 배경(0)에서는 20%만 되어도 밝기 51로 은은하게 읽히므로, 타일 워터마크는 사진 분위기에 따라 20~35%에서 50% 사이를 오가며 확인하면 됩니다.
큰 사진에서 저장이 안 될 때의 계산
저장 단계는 원본 해상도의 캔버스를 하나 더 만든 뒤 PNG로 인코딩합니다. 캔버스는 대략 가로×세로×4바이트(RGBA)의 메모리를 쓰고, 원본 이미지 디코딩 메모리와 합쳐지므로 실제 사용량은 표 값보다 큽니다. 브라우저·기기마다 캔버스 한계가 달라 어느 크기부터 실패하는지는 단정할 수 없습니다.
| 해상도 | 화소 수 | 캔버스 메모리(약) |
|---|---|---|
| 1,920 × 1,080 | 2.1MP | 7.9MB |
| 4,000 × 3,000 | 12.0MP | 45.8MB |
| 6,000 × 4,000 | 24.0MP | 91.6MB |
| 8,000 × 6,000 | 48.0MP | 183.1MB |
8000×6000(48MP) 사진은 캔버스만 약 183MB라 스마트폰에서는 실패할 수 있습니다. 그럴 때는 사진을 4000px 안팎으로 줄여 다시 시도하세요. 반복 타일은 글자 간격이 글자 크기에 비례하므로 큰 사진일수록 글자를 그리는 횟수가 늘어 저장이 조금 더 오래 걸립니다. 예를 들어 미리보기 900×600에서 글자 28px이면 세로 간격이 28×3=84px이라 줄이 22개(3×600÷84를 올림) 그려진다는 식으로 계산됩니다.
상황별 설정 예시
- 블로그 사진 출처 표기: 가로 1200px 사진, 우측 하단, 글자 28px, 투명도 60%, 그림자 켬. 슬라이더 값 그대로 저장되는 크기는 28 × 1200 ÷ 900 ≈ 37px로 사진 폭의 약 3.1%라 눈에 거슬리지 않으면서, 크롭하지 않는 한 남습니다.
- 중고거래 상품 사진: 상품 위에 글자가 겹치면 사진이 가려지므로 모서리 위치로 닉네임만 넣고 반복 타일은 쓰지 마세요. 도용을 막고 싶다면 상품 중심부를 지나는 가운데 대각선이 효과적이지만 구매자에게는 불편합니다.
- 시안·샘플 전달: 클라이언트에게 보내는 디자인 시안은 반복 타일 20~30%에 "SAMPLE" 같은 짧은 단어를 쓰면 화면 캡처를 해도 문구가 남습니다. 최종 납품본은 워터마크가 없는 원본으로 따로 보냅니다.
결과를 쓰는 방법
쇼핑몰 상품 사진이나 블로그 이미지는 가로 1080~1600px 정도로 줄인 뒤 워터마크를 넣고, 최종 파일이 너무 크면 형식 변환기로 다시 줄이는 순서가 효율적입니다(먼저 줄이면 워터마크 글자가 선명하게 유지됩니다). 한 번 넣은 워터마크는 되돌릴 수 없으므로 워터마크가 없는 원본은 반드시 따로 두세요. 문서(워드·PDF)에 워터마크를 넣고 싶다면문서에 워터마크 넣는 방법이나워드 사용자 지정 워터마크 가이드를 참고하세요.
자주 묻는 질문
어떤 이미지 형식을 올릴 수 있나요?
JPG, PNG, WEBP 등 브라우저가 열 수 있는 이미지를 올릴 수 있습니다. 다운로드되는 파일은 항상 PNG 형식입니다. HEIC 등 브라우저가 열지 못하는 형식은 먼저 JPEG로 바꿔야 합니다.
반복 타일 워터마크는 언제 쓰면 좋나요?
한쪽 구석의 워터마크는 잘라내기 쉽지만, 이미지 전체에 반복되는 타일 워터마크는 잘라내도 문구가 남기 때문에 무단 도용을 막는 데 더 효과적입니다. 대신 투명도를 낮춰 사진이 가려지지 않게 하세요.
저장한 사진이 미리보기보다 큰데요?
정상입니다. 미리보기는 화면용으로 줄여 보여 주고, 저장은 원본 해상도로 합니다. 화면 아래에 저장될 해상도가 표시됩니다.
글자가 잘 안 보이면 어떻게 하나요?
글자 크기를 키우거나 투명도를 높이고, 배경과 대비되는 색을 고르세요. 그림자 옵션을 켜면 밝은 배경 위의 흰색 글자도 읽기 쉬워집니다.
워터마크를 넣으면 화질이 떨어지나요?
PNG는 무손실이라 합성 과정에서 추가 화질 손실은 없습니다. 다만 원본이 JPEG라면 이미 압축된 상태이고, 결과 PNG의 용량이 커질 뿐입니다.
문구를 비워 두면 어떻게 되나요?
입력창이 비어 있으면 기본 문구 "© PlayInfoBox"가 대신 들어갑니다. 워터마크 없이 저장하려는 용도로는 쓸 수 없으니 반드시 원하는 문구를 입력하세요.
글자 크기 슬라이더 최대값(80px)이 작게 느껴지는데요?
슬라이더는 미리보기 폭(최대 900px) 기준입니다. 80px이면 900px 폭의 약 8.9%이고, 원본이 4000px라면 저장 시 약 356px로 커집니다. 사진 폭 대비 비율은 그대로이므로 더 크게 만들고 싶다면 짧은 문구를 쓰는 편이 좋습니다.
여러 장을 한 번에 처리할 수 있나요?
한 번에 한 장만 처리합니다. 다른 사진을 선택해도 문구·위치·색 설정은 그대로 유지되므로, 같은 설정으로 여러 장을 만들 때는 사진을 바꿔 선택하고 장마다 다운로드를 반복하면 됩니다.
다운로드가 안 되고 아무 반응이 없어요.
먼저 이미지를 선택했는지 확인하세요. 선택하지 않으면 안내 문구만 나옵니다. 모바일 일부 브라우저는 파일 저장 방식이 달라 다운로드 폴더나 알림창에서 찾아야 할 수 있고, 너무 큰 사진이면 저장 실패 안내가 표시됩니다.