사진에 글씨 넣기

사진을 올리고 문구를 적으면 원본 크기 그대로 글씨가 얹힙니다

사진에 글씨 넣기는 이미 찍은 사진 위에 문구를 겹쳐 그린 다음, 사진과 같은 가로·세로 크기의 이미지 한 장으로 저장하는 도구입니다. 문구는 여덟 개까지 넣을 수 있고, 하나하나가 글꼴·크기·기울기·색·외곽선·배경을 따로 가집니다. 무대에서 글씨를 손가락이나 마우스로 끌어 자리를 잡고, 오른쪽 아래 점으로 크기를, 위쪽 점으로 기울기를 바꿉니다.

글씨를 얹을 때 가장 흔한 실패는 글자가 사진 무늬에 묻히는 것입니다. 그래서 무대 아래 읽힘 점검이 글자 뒤 사진의 밝기 범위와 글자 색을 한 막대에 올려 보여 주고, 웹 접근성 기준(WCAG)의 명암비로 잘 읽히는지 판정합니다. 묻힌다고 나오면 외곽선·배경 상자·글자 색 바꾸기 단추 중 하나를 누르면 됩니다. 사진과 문구는 이 브라우저 안에서만 처리하고 서버로 보내지 않습니다.

이럴 때 씁니다

• 여행·일상 사진에 장소와 날짜를 적을 때: 제목은 위에 크게, 날짜는 오른쪽 아래에 작게 두는 두 문구 구성이 처음 화면의 예시입니다.
• 상품 사진에 가격·혜택을 표시할 때: 노란 라벨 스타일은 글자 뒤에 상자를 깔아 사진이 복잡해도 가격이 확실히 읽힙니다.
• 공지·안내 이미지를 빨리 만들 때: 자막 띠 스타일은 사진 가로 전체에 반투명 띠를 깔고 그 위에 문구를 올립니다. 영상 자막처럼 보여 한 줄 안내에 맞습니다.
• 내가 찍은 사진에 이름을 남길 때: 반복 워터마크는 옅은 문구를 비스듬히 사진 전체에 깔아, 한 귀퉁이만 잘라 내서는 지워지지 않게 합니다.
• 세로 간판·포스터 느낌을 낼 때: 세로쓰기로 바꾸면 글자가 위에서 아래로, 줄은 오른쪽에서 왼쪽으로 놓입니다. 서예체와 함께 쓰면 전통 행사 포스터 느낌이 납니다.

넣는 순서

1. 사진 고르기: 단추로 고르거나, 편집대에 사진 파일을 끌어 놓거나, 복사한 이미지를 붙여 넣습니다. 처음에는 예시 사진과 예시 문구 두 개가 올라가 있어 결과를 먼저 볼 수 있습니다.
2. 문구 적기: 문구 칩을 눌러 고친 뒤 칸에 적습니다. 줄을 바꾸면 여러 줄로 그려지고, 문구 하나는 300자까지입니다. 문구 추가를 누르면 지금 문구의 모양을 물려받은 새 문구가 조금 아래에 생깁니다.
3. 모양 고르기: 스타일 여섯 장은 지금 문구가 놓인 자리의 사진을 잘라 그 위에 각 스타일을 대 본 그림입니다. 마음에 드는 장을 누른 뒤 글꼴·크기·색을 손봅니다.
4. 자리 잡기: 무대에서 끌거나, 자리 9칸을 눌러 가장자리에서 짧은 변의 5%만큼 떨어진 자리에 붙입니다. 끄는 동안 가운데에 가까워지면 맞춤선이 나타나며 정확히 가운데에 붙습니다.
5. 점검하고 저장: 읽힘 점검과 사진 밖 경고를 확인한 뒤 PNG·JPG·WebP 중 하나로 저장합니다. 무대 바로 아래에 저장 단추와 읽힘 표시가 있고, 공유가 되는 기기에서는 공유 단추로 바로 보낼 수 있습니다.

사진 위 글씨가 읽히는지 재는 방법

웹 콘텐츠 접근성 지침 WCAG 2.2의 1.4.3은 글자와 글자 이미지의 명암비를 4.5 : 1 이상, 큰 글씨는 3 : 1 이상으로 정합니다. 명암비는 두 색의 상대 휘도를 L1(밝은 쪽)·L2(어두운 쪽)라 할 때 (L1 + 0.05) ÷ (L2 + 0.05)이고, 1(같은 색)부터 21(검정과 흰색)까지 나옵니다. 그런데 사진은 배경이 한 색이 아니라서 어느 한 점만 재면 판정이 흔들립니다.

이 도구는 글자 블록 안쪽의 사진 픽셀을 최대 5,000개 안팎으로 고르게 뽑아 픽셀마다 글자 색과의 명암비를 재고, 낮은 쪽에서 10% 지점의 값을 보여 줍니다. 가장 불리한 자리에 가까우면서도 점 몇 개의 잡티에는 흔들리지 않는 값입니다. 표시는 소수 첫째 자리에서 내리고, 판정도 그 표시값으로 합니다. 4.49는 4.4로 보이고 4.5에 못 미친다고 판정합니다.

표에서 보듯 흰 글씨는 밝은 하늘이나 노을 위에서 기준에 크게 못 미칩니다. 외곽선 두께를 글자 크기의 3% 이상으로 주면 글자 둘레가 외곽선 색으로 바뀌므로, 이때부터는 글자 색과 외곽선 색의 명암비로 판정합니다. 흰 글씨에 검은 외곽선이면 배경이 무엇이든 18.8 : 1입니다. 배경 상자를 깔면 상자 색을 진하기만큼 사진에 섞은 색을 배경으로 다시 잽니다. 문구 전체를 옅게 만드는 불투명도도 글자 색과 상자 색에 그대로 섞어 계산합니다.

점검 막대는 왼쪽이 검정, 오른쪽이 흰색이고 눈에 보이는 밝기(CIE L*) 순서로 놓았습니다. 주황 띠는 글자 뒤 사진 밝기의 10~90% 범위, 띠 안 세로선은 가운데 값, 흰 테두리 점은 글자 색, 굵은 고리는 외곽선 색입니다. 점이 띠 안에 들어가 있으면 글자 색과 같은 밝기의 배경이 글자 뒤에 있다는 뜻이고, 그 자리에서 글자가 사라져 보입니다.

외곽선·그림자·상자·띠는 언제 쓰나

세 장치를 한꺼번에 세게 주면 오히려 지저분해집니다. 외곽선을 0에서부터 조금씩 올려 점검이 잘 읽힘으로 바뀌는 지점을 찾고, 그래도 사진이 너무 복잡하면 상자나 띠로 넘어가는 순서를 권합니다.

글자 크기는 사진 너비의 비율입니다

글자 크기는 px가 아니라 사진 너비에 대한 %로 정합니다. 같은 48px 글자라도 1,000px 사진에서는 크고 4,000px 사진에서는 작게 보이기 때문입니다. 비율로 정하면 미리보기와 저장한 원본 크기의 비율이 같고, 사진을 바꿔도 화면에서 차지하는 비중이 유지됩니다. 줄 간격은 글자 크기의 1.25배, 외곽선 두께는 글자 크기에 대한 %, 상자 여백은 가로 0.3배·세로 0.18배이며 모두 반올림한 px로 그립니다.

캔버스는 외곽선을 글자 윤곽선 안팎에 반씩 긋기 때문에, 이 도구는 표의 두께를 두 배로 그어 글자 바깥으로 보이는 두께가 표와 같게 합니다. 세로로 긴 사진은 너비가 짧은 변이라 같은 %에서도 화면 비중이 작아 보입니다. 세 줄 문구라면 줄 높이 × 3이 사진 높이의 절반을 넘지 않는지 보고, 넘으면 크기를 낮추세요.

글꼴 8종과 이용 조건

기본 고딕은 방문자 기기에 이미 있는 글꼴이라 바로 그려집니다. 나머지 일곱 종은 이 사이트에 함께 올려 둔 무료 글꼴이며, 고르는 순간에만 내려받습니다. 처음 고를 때는 아래 크기만큼 내려받는 동안 칸이 깜빡이고, 끝나면 무대가 그 글꼴로 바뀝니다.

SIL OFL 글꼴은 글꼴로 만든 이미지의 쓰임을 제한하지 않습니다. 추사 사랑체는 예산군이 공공누리 제1유형으로 개방한 글꼴이라 상업적 이용도 되지만 출처 표시가 조건입니다. 이순신체는 아산시가 누구나 무료로 여러 매체에 쓸 수 있다고 안내하되, 글꼴 자체를 유료로 양도·판매하는 일은 금지합니다. 회사 홍보물이나 판매용 상품에 쓸 때는 표의 원문을 직접 확인하세요. 이 안내는 이용 조건을 옮긴 것이지 법률 자문이 아닙니다.

글꼴마다 담고 있는 글자가 다릅니다. 연성체는 자주 쓰는 한글 2,436자만 담아 드문 글자가 빠질 수 있고, 한글 글꼴 대부분은 é·ñ 같은 악센트 글자나 한자가 없습니다. 글꼴에 없는 글자는 그 글자만 기본 고딕으로 그려지고, 어떤 글자가 바뀌었는지 글꼴 칸 아래에 알려 줍니다.

세로쓰기는 이렇게 놓입니다

쓰기를 세로로 바꾸면 글자는 한 칸에 하나씩 위에서 아래로, 줄은 오른쪽에서 왼쪽으로 놓입니다. 줄을 바꾸면 왼쪽에 새 열이 생깁니다. 줄 맞춤 단추는 세로일 때 위·가운데·아래로 바뀌어 열의 시작을 맞춥니다.

• 쉼표 ‘、’와 마침표 ‘。’는 칸의 오른쪽 위로 옮겨 그립니다.
• 장음 ‘ー’, 물결 ‘〜’, 말줄임 ‘…’, 괄호와 낫표 「」 같은 글자는 90도 돌려 세로 방향에 맞춥니다.
• 영문과 숫자는 돌리지 않고 한 칸에 한 글자씩 세웁니다. 2026처럼 숫자가 길면 가로쓰기 문구를 따로 두는 편이 읽기 좋습니다.

반복 워터마크의 간격

반복을 켜면 같은 문구를 사진 전체에 바둑판처럼 깝니다. 가로 간격은 문구의 둘레 상자 폭에 글자 크기의 2배를, 세로 간격은 높이에 1.6배를 더한 값이고, 줄마다 반 칸씩 어긋나게 놓습니다. 사진 한 장에 300개를 넘으면 간격을 1.2배씩 넓혀 무대가 느려지지 않게 합니다. 반복 워터마크 스타일은 불투명도 35%, 크기 4%, 기울기 −30°로 시작합니다.

워터마크는 무단 사용을 줄이는 표시일 뿐 막아 주지는 못합니다. 문구가 옅을수록 사진은 덜 가려지지만 지우기도 쉬워지니, 원본 사진은 따로 보관하고 공개용 사진에만 넣으세요.

저장 형식과 저장 크기

• PNG(기본): 글자 경계가 가장 깨끗하고 투명한 부분도 그대로 남습니다. 용량은 큽니다.
• JPG: 용량이 작습니다. 투명을 담지 못해 바탕을 흰색으로 채우고, 품질 50~100% 가운데서 고릅니다(기본 90%).
• WebP: 용량과 선명도의 절충입니다. 브라우저가 WebP 저장을 지원하지 않으면 MDN 설명대로 PNG가 만들어지므로, 이때는 저장하지 않고 다른 형식을 고르라고 알립니다.

저장 크기는 올린 사진과 같습니다. 다만 아이폰·아이패드의 사파리는 캔버스 한 장의 넓이를 4,096 × 4,096 = 16,777,216픽셀까지만 그릴 수 있습니다(canvas-size 시험 결과). 원본으로 저장하지 못하면 이 넓이 안으로 비율을 지켜 줄여 다시 만들고, 줄였다는 사실과 크기를 알려 줍니다.

올릴 수 있는 사진은 파일 하나 20MiB, 4,000만 화소, 한 변 16,384px까지입니다. 카메라가 기록한 회전 정보는 읽을 때 반영하므로 세로로 찍은 사진이 눕지 않습니다.

자주 틀리는 경우

• 미리보기 크기로 판단: 무대는 화면에 맞춰 줄인 그림입니다. 작은 글씨의 번짐은 저장한 파일을 원래 크기로 열어 확인하세요.
• 가장자리에 바짝 붙이기: SNS가 정사각형이나 4:5로 잘라 보여 주면 가장자리 글씨가 잘립니다. 사진 밖 경고가 없더라도 자리 9칸의 5% 여백을 두는 편이 안전합니다.
• JPG로 저장한 사진에 다시 글씨 넣기: 고칠 때마다 압축이 한 번 더 겹칩니다. 원본 사진을 다시 올려 처음부터 저장하세요.
• 손글씨체를 작게 쓰기: 획이 가는 손글씨체는 크기 4% 아래에서 사진 무늬에 쉽게 묻힙니다. 외곽선을 고딕보다 조금 더 주거나 상자를 까세요.
• 출처 표시가 필요한 글꼴을 그대로 쓰기: 추사 사랑체로 만든 이미지를 문서·게시물에 쓸 때는 출처를 함께 적어야 합니다.

이 도구의 한계

• 저장한 이미지는 사진과 글씨가 한 장의 픽셀로 합쳐져 글씨만 다시 고칠 수 없습니다. 새로고침하면 작업도 남지 않습니다.
• 글자마다 다른 색, 곡선 배치, 그라데이션, 되돌리기는 없습니다.
• 세로쓰기는 글자를 칸에 세우고 일부 문장부호만 옮기거나 돌리는 간이 방식입니다. 글꼴에 든 세로 전용 글자 모양은 쓰지 않습니다.
• 읽힘 점검은 화면 미리보기의 픽셀로 재고, 그림자와 글자 획 두께는 계산에 넣지 않습니다. 기준을 넘어도 실제 화면 크기와 보는 사람의 시력에 따라 읽기 어려울 수 있습니다.
• HEIC 사진은 브라우저가 읽을 수 있을 때만 열립니다. 열리지 않으면 JPG로 바꾼 뒤 올리세요.

기준: 2026-10-20에 아래 표준·문서와 글꼴 이용허락 원문을 확인했습니다. 표의 숫자는 이 도구의 계산과 같습니다.

출처

• 01W3C — WCAG 2.2, 1.4.3 대비(최소)글자와 글자 이미지 4.5:1 이상, 큰 글씨 3:1 이상, 명암비 (L1 + 0.05) ÷ (L2 + 0.05)
• 02WHATWG — HTML Living Standard, 캔버스에 글자 그리기fillText·strokeText, 정렬과 기준선
• 03MDN — CanvasRenderingContext2D.strokeText()글자 윤곽선 긋기
• 04MDN — HTMLCanvasElement.toBlob()지원하지 않는 형식은 PNG로 만듦, 품질 값은 JPEG·WebP, 만들 수 없으면 null
• 05MDN — createImageBitmap()imageOrientation 옵션으로 사진의 회전 정보 반영
• 06canvas-size — Test ResultsMobile Safari 9+ 캔버스 최대 넓이 4,096 × 4,096(16,777,216)
• 07SIL — OFL FAQOFL 글꼴로 만든 이미지·문서의 사용
• 08예산군 — 추사사랑체 내려받기·이용 안내공공누리 제1유형, 출처 표시 조건
• 09공공누리 — 제1유형 출처표시상업적 이용·변경 가능, 출처 표시 의무
• 10아산시 — 이순신체무료 사용, 글꼴 자체의 유료 양도·판매 금지
• 11ZESSTYPE — Black Han Sans(검은고딕)원저작자 배포, SIL OFL 1.1

자주 묻는 질문

함께 쓰는 도구