사진에 글씨 넣기 — 한글 글꼴과 외곽선으로 문구 얹기

사진 위 글씨가 묻히지 않게 하는 세 가지 장치

사진은 배경이 고르지 않기 때문에 흰 글씨 하나만 올리면 밝은 하늘이나 흰 벽에서 글자가 사라집니다. 이 도구에는 글자를 배경에서 떼어 놓는 장치가 세 가지 있고, 상황에 따라 쓰는 방법이 다릅니다.

• 외곽선은 글자 테두리를 다른 색으로 둘러 줍니다. 배경이 밝은 곳과 어두운 곳을 오갈 때 가장 확실합니다. 흰 글씨에 검은 외곽선이 기본 조합입니다.
• 그림자는 글자 아래에 흐린 그늘을 깔아 줍니다. 외곽선보다 부드러워서 사진 분위기를 덜 해치지만, 배경이 아주 밝으면 효과가 약합니다.
• 배경 칠은 문구 뒤에 사각형을 채웁니다. 읽는 것이 사진보다 중요한 안내문이나 가격표에 맞습니다. 사진의 일부가 가려지는 대신 글자는 확실히 읽힙니다.

세 가지를 한꺼번에 최대치로 올리면 오히려 지저분해집니다. 먼저 외곽선을 0에서부터 조금씩 올리며 읽히는 최소값을 찾고, 그래도 부족할 때 배경 칠로 넘어가는 순서를 권합니다. 기본값은 외곽선 6퍼센트와 그림자 켜짐이며, 이 상태에서 대부분의 사진은 그대로 읽힙니다.

사진을 올려서 저장할 때까지의 네 단계

처음 화면에는 예시 사진과 예시 문구가 이미 올라가 있습니다. 어떤 결과가 나오는지 먼저 보고 내 사진으로 바꾸면 됩니다.

1. 왼쪽 점선 영역에 사진을 끌어 놓거나 사진 올리기를 눌러 파일을 고릅니다. 클립보드에 이미지가 있다면 붙여넣기로도 올라갑니다. 첫 사진이 정상적으로 열리면 예시 사진을 대신합니다.
2. 문구 칸에 넣을 글을 적습니다. 줄바꿈을 넣으면 여러 줄로 그려집니다. 글자 수는 문구 하나당 300자까지입니다.
3. 미리보기 위에서 글씨를 끌어 옮겨 자리를 잡습니다. 글씨를 한 번 누르면 그 문구가 선택되고 주황색 점선 테두리가 보입니다. 방향키로도 조금씩 옮길 수 있습니다.
4. 저장 형식을 고르고 이미지 저장을 누릅니다. 저장 크기는 미리보기 위에 실제 픽셀 수로 표시됩니다.

비우기는 사진과 문구를 모두 지우고 빈 작업면을 남깁니다. 예시는 예시 사진과 기본 설정으로 되돌립니다. 새로고침하면 작업 내용은 남지 않으므로 필요한 결과는 닫기 전에 내려받으세요.

글자 크기를 px가 아니라 사진 너비의 비율로 정하는 이유

글자 크기는 사진 너비에 대한 비율로 정하고, 슬라이더 옆에는 그 비율을 적용한 실제 픽셀 크기가 함께 나옵니다. 기본값은 8퍼센트입니다.

같은 48px 글자라도 400px 사진에서는 화면을 가득 채우고 4000px 사진에서는 먼지처럼 작습니다. 비율로 정하면 사진을 바꿔도 보이는 크기가 그대로 유지되므로, 여러 장에 같은 문구를 넣을 때 매번 숫자를 다시 맞출 필요가 없습니다.

• 사진 너비 1600px에서 8퍼센트를 고르면 글자 크기는 128px입니다. 1600 곱하기 8 나누기 100입니다.
• 같은 8퍼센트를 800px 사진에 쓰면 64px이 됩니다. 화면에서 차지하는 비중은 똑같습니다.
• 줄 간격은 글자 크기의 1.25배로 고정합니다. 128px 글자라면 한 줄 높이는 160px입니다.
• 슬라이더 범위는 1에서 40퍼센트입니다. 40퍼센트는 사진 가로의 절반 가까이를 한 글자가 차지하는 크기입니다.

외곽선 두께도 같은 방식으로 글자 크기에 대한 비율입니다. 200px 글자에 외곽선 10퍼센트를 주면 표시되는 두께는 20px이고, 글자를 키우면 외곽선도 같은 비중으로 함께 굵어집니다.

문구를 여러 개 넣고 하나씩 고치는 방법

문구는 최대 8개까지 넣을 수 있고, 각각 글꼴·크기·색·위치를 따로 가집니다. 제목은 위에 크게, 날짜나 출처는 아래에 작게 두는 식으로 나눠 쓰면 됩니다.

1. 문구 목록의 + 추가를 누르면 지금 문구의 글꼴·크기·색 설정을 물려받은 새 문구가 조금 아래에 생깁니다. 같은 모양으로 여러 줄을 만들 때 설정을 다시 맞추지 않아도 됩니다.
2. 문구 목록의 칩을 누르거나 미리보기에서 해당 글씨를 직접 눌러 편집할 문구를 고릅니다. 칩에는 첫 줄의 앞부분이 표시됩니다.
3. 삭제는 지금 고른 문구만 지웁니다. 문구가 하나뿐이면 삭제 버튼은 꺼집니다.

문구는 목록 순서대로 겹쳐 그려지므로 나중에 추가한 문구가 위에 옵니다. 두 문구가 겹친 자리를 눌렀을 때도 위에 있는 문구가 먼저 선택됩니다. 내용을 모두 지워 빈 문구로 두면 그 문구는 저장할 때 그려지지 않으니, 잠시 감추고 싶을 때 쓸 수 있습니다.

한글 글꼴 8종은 각각 어떤 자리에 어울릴까

기본 고딕은 기기에 이미 있는 글꼴이라 내려받지 않고 바로 그려집니다. 나머지 7종은 고른 순간에만 내려받으므로, 처음 고를 때 잠깐 기다릴 수 있습니다.

• 기본 고딕: 어떤 기기에서도 즉시 그려집니다. 안내·공지처럼 읽히는 것이 먼저인 문구에 맞습니다.
• 검은고딕: 획이 굵고 꽉 찬 제목용 글꼴입니다. 사진 위 큰 제목에서 가장 안정적으로 읽힙니다.
• 이순신체: 굵은 고딕 계열이면서 획 끝이 각져 있어 강한 인상을 줍니다.
• 나눔명조: 세로획이 굵고 가로획이 가는 바탕체입니다. 차분한 인용구나 날짜 표기에 씁니다.
• 나눔손글씨펜: 볼펜으로 쓴 듯한 글씨체입니다. 일상 사진의 짧은 메모에 어울립니다.
• 나눔손글씨붓: 붓으로 쓴 굵은 글씨체로, 획 굵기 변화가 큽니다.
• 연성체: 둥글고 부드러운 손글씨체입니다. 담고 있는 한글이 2,436자로 일곱 종 중 가장 적습니다.
• 추사 사랑체: 서예 느낌의 흘림체로 글자마다 기울기가 다릅니다.

손글씨체는 획이 가늘어서 복잡한 배경 위에서는 잘 안 보입니다. 손글씨체를 쓸 때는 외곽선을 고딕체보다 조금 더 올리거나 배경 칠을 켜는 편이 낫습니다.

글자 범위는 글꼴마다 다릅니다. 연성체를 뺀 여섯 종은 현대 한글 11,172자와 영문·숫자·기본 기호를 모두 담고 있습니다. 연성체는 자주 쓰는 한글 2,436자만 담고 있어 드문 글자가 빠질 수 있습니다. 그런 글자는 그 글자만 기본 고딕으로 그려지며, 어떤 글자가 대체됐는지 글꼴 칸 아래에 알려 줍니다. 한자나 드문 특수 기호는 일곱 종 모두 빠져 있을 수 있습니다.

만든 이미지를 상업적으로 쓰기 전에 볼 것

도구 사용은 무료이고 결과 이미지에 워터마크를 넣지 않습니다. 다만 글꼴마다 이용 조건이 다릅니다. 기본 고딕은 방문자 기기에 이미 설치된 글꼴이라 이 도구가 배포하는 대상이 아닙니다.

• 나눔명조·나눔손글씨펜·나눔손글씨붓·연성체·검은고딕은 SIL 오픈 폰트 라이선스(OFL)를 따릅니다. OFL은 글꼴로 만든 이미지의 사용을 제한하지 않습니다.
• 추사 사랑체는 예산군이 배포하며 공공누리 제1유형이라 출처 표시가 필요합니다.
• 이순신체는 아산시가 배포하며 별도의 사용 안내를 따릅니다.

각 글꼴의 이용허락 원문과 배포 기관 안내는 아래 출처 칸에 그대로 연결해 두었습니다. 회사 홍보물이나 판매용 상품처럼 조건을 정확히 지켜야 하는 용도라면 원문을 직접 확인하세요. 이 설명은 글꼴 조건을 정리한 것이지 법률 자문이 아닙니다.

정렬·투명도·진하게는 언제 바꿀까

정렬은 문구가 두 줄 이상일 때만 눈에 띄게 달라집니다. 한 줄짜리 문구는 세 정렬 모두 같은 자리에 보입니다.

• 가운데: 줄 길이가 들쭉날쭉해도 가운데 축이 맞습니다. 제목이나 인용구에 씁니다.
• 왼쪽: 모든 줄의 시작이 한 선에 맞습니다. 주소나 목록처럼 읽어 내려가는 문구에 씁니다.
• 오른쪽: 모든 줄의 끝이 한 선에 맞습니다. 사진 오른쪽 아래 서명이나 날짜에 씁니다.

투명도는 10퍼센트에서 100퍼센트까지 조절합니다. 사진 전체에 옅게 깔아 두는 출처 표시나 워터마크를 만들 때 30에서 50퍼센트 사이가 쓸 만합니다. 글자를 흐리게 만들수록 읽기 어려워지므로 안내 문구에는 권하지 않습니다.

진하게는 글꼴의 획을 굵게 만듭니다. 검은고딕이나 이순신체처럼 원래 굵은 글꼴은 차이가 작고, 나눔명조나 손글씨체는 차이가 큽니다. 굵기를 더 주는 대신 획 사이가 좁아질 수 있으니 작은 글자에서는 끄는 편이 읽기 좋습니다.

저장 크기와 글자 크기를 미리 계산해 보기

저장 이미지의 가로·세로는 올린 사진과 똑같습니다. 글씨를 얹어도 사진 크기가 늘어나거나 줄어들지 않습니다. 미리보기는 화면 폭에 맞춰 줄여 보여 주므로, 보이는 크기를 저장 크기로 생각하면 안 됩니다.

• 1920 × 1080px 사진에 글자 크기 8퍼센트: 글자는 154px, 한 줄 높이는 193px로 그려지고 저장은 1920 × 1080px입니다.
• 같은 사진에 세 줄 문구를 넣으면 문구 전체 높이는 193 곱하기 3인 579px입니다. 사진 높이 1080px의 절반이 넘으므로 크기를 5퍼센트 정도로 낮추는 편이 낫습니다.
• 1080 × 1080px 정사각형 사진에 글자 크기 6퍼센트를 주면 글자는 65px입니다. 소셜 게시물 한 줄 문구로 적당한 크기입니다.
• 배경 칠을 켜면 문구 둘레에 글자 크기의 30퍼센트만큼 가로 여백, 18퍼센트만큼 세로 여백이 생깁니다. 100px 글자라면 좌우 30px, 위아래 18px입니다.

글씨 위치는 사진 안의 상대 좌표로 기억합니다. 그래서 같은 위치에 둔 채 다른 크기의 사진으로 바꿔도 글씨는 화면에서 같은 자리에 남습니다.

PNG·JPG·WebP 중 어떤 형식으로 내려받을까

기본은 PNG입니다. 글자가 들어간 이미지는 경계가 뚜렷해서 손실 압축의 흔적이 눈에 잘 띄기 때문입니다.

• PNG: 글자 경계가 가장 깨끗합니다. 품질 슬라이더를 쓰지 않으며 파일 용량은 커집니다. 글자가 많거나 작은 글씨를 넣었다면 PNG를 먼저 보세요.
• JPG: 사진 부분의 용량이 작아집니다. 투명도를 담지 못하므로 저장할 때 바탕을 흰색으로 채웁니다. 작은 글자 가장자리에 옅은 얼룩이 생길 수 있습니다.
• WebP: 용량과 선명도의 절충안입니다. 브라우저가 WebP 저장을 지원해야 하며, 올릴 곳이 WebP를 받는지도 확인해야 합니다.

JPG와 WebP를 고르면 품질 슬라이더가 나타납니다. 범위는 50에서 100퍼센트이고 기본은 90퍼센트입니다. 100퍼센트라고 해서 원본과 완전히 같아지지는 않으며, 같은 숫자라도 브라우저와 사진에 따라 용량이 달라집니다. 선택한 형식으로 만들지 못했다는 안내가 나오면 PNG로 바꿔 다시 저장하세요.

휴대폰에서 쓸 때 달라지는 점

휴대폰에서는 사진 올리는 칸이 위, 미리보기가 그 아래, 문구와 설정이 맨 아래로 내려갑니다. 사진을 올린 직후 결과를 먼저 보고 설정을 만지는 순서입니다.

• 글씨는 손가락으로 끌어 옮깁니다. 미리보기 위에서는 화면이 같이 스크롤되지 않으므로 글씨만 움직입니다.
• 카메라로 세로로 찍은 사진은 회전 정보가 파일 안에 들어 있습니다. 이 도구는 그 정보를 반영한 방향으로 읽어 들이므로 사진이 눕지 않습니다.
• 문구 칸을 누르면 키보드가 올라와 미리보기가 가려집니다. 입력을 마치고 키보드를 내린 뒤 위치를 잡는 편이 편합니다.
• 사진 크기가 클수록 저장에 시간이 걸립니다. 저장 중에는 버튼이 잠시 꺼지며, 끝나면 저장한 크기와 용량을 알려 줍니다.

기기 메모리가 부족하면 제한 이내의 사진이어도 저장이 실패할 수 있습니다. 다른 탭을 닫고 다시 시도하거나, 사진을 먼저 줄인 뒤 글씨를 넣으면 성공률이 올라갑니다.

사진이 안 올라가거나 저장이 막힐 때

파일 용량 제한과 화소 수 제한은 서로 다릅니다. 잘 압축된 사진은 용량이 작아도 가로세로 픽셀 수가 커서 걸릴 수 있습니다. MP는 백만 화소, MiB는 1,048,576바이트를 뜻합니다.

• 형식은 JPG/JPEG·PNG·WebP만 받습니다. HEIC·GIF·TIFF·SVG는 받지 않습니다.
• 파일 하나는 20MiB까지입니다.
• 사진은 4,000만 화소 이하여야 합니다. 8000 × 5000px는 정확히 4,000만 화소라 상한과 같아 아직 쓸 수 있고, 8000 × 6000px는 4,800만 화소라 받지 않습니다.
• 한 변이 16,384px를 넘는 사진은 받지 않습니다.
• 문구는 8개까지, 문구 하나는 300자까지입니다.

읽지 못한 파일은 그 이유를 화면에 알려 주고 이미 올린 사진은 그대로 둡니다. 확장자만 jpg로 바꾼 HEIC 파일은 형식 변환이 아니어서 열리지 않습니다. 글꼴을 불러오지 못했다는 안내가 나오면 연결 상태를 확인한 뒤 다시 고르거나 기본 고딕으로 작업하세요.

올린 사진과 적은 문구는 어디로 가나

사진 읽기, 글씨 합성, 이미지 만들기는 모두 이 브라우저 안에서 이뤄집니다. 글씨를 넣기 위해 사진이나 문구를 서버로 보내지 않습니다. 이 설명은 이 도구에 넣은 사진과 문구의 처리 방식에 한정되며, 사이트 전체에 아무 통신이 없다는 뜻은 아닙니다.

글꼴 파일은 고른 순간 이 사이트에서 내려받습니다. 이때 전송되는 것은 글꼴 파일 요청이며 입력한 문구가 함께 가지는 않습니다.

원본 파일은 덮어쓰거나 지우지 않습니다. 비우기와 삭제는 지금 작업에서 사진과 문구를 빼는 동작입니다. 내려받은 파일과 다른 앱으로 보낸 사본은 그 자리에 남으니, 문서나 대화 캡처가 섞여 있다면 이름·연락처·주소가 노출되지 않는지 공유 전에 확인하세요.

저장한 다음 확인할 다섯 가지

미리보기는 화면 폭에 맞춰 줄어 있어 작은 글자의 흐림이나 잘림을 놓치기 쉽습니다. 내려받은 파일을 한 번 열어 원래 크기로 확인하세요.

1. 글자가 사진 가장자리에서 잘리지 않았는지 봅니다. 끌어 옮길 때 문구 중심이 가장자리에 붙으면 글자 일부가 화면 밖으로 나갈 수 있습니다.
2. 맞춤법과 띄어쓰기를 다시 읽습니다. 저장한 뒤에는 글씨만 따로 고칠 수 없습니다.
3. 밝은 부분과 어두운 부분 양쪽에서 글자가 읽히는지 봅니다. 하늘처럼 밝은 영역에 흰 글씨가 걸쳐 있으면 외곽선을 올립니다.
4. 저장 크기가 올릴 곳의 규격에 맞는지 확인합니다. 이 도구의 제한을 통과했다는 것이 모든 서비스의 업로드 조건을 만족한다는 뜻은 아닙니다.
5. 글꼴 조건이 있는 용도라면 출처 표시가 필요한 글꼴을 썼는지 확인합니다.

결과가 마음에 들지 않으면 이 화면에서 설정을 고쳐 다시 저장하면 됩니다. 저장 중에 문구나 설정을 바꿨다면 바뀐 설정으로 한 번 더 저장해야 합니다.

글자 그리기와 이미지 저장의 기술 근거

이 도구가 글자를 그리고 이미지를 만드는 방식은 아래 표준·문서를 따릅니다. 사진 수와 출력 한도는 이 도구가 정한 처리 기준입니다.

• WHATWG HTML 표준 — 캔버스 글자 그리기 캔버스에 글자를 채우고 테두리를 그리는 방식, 정렬과 기준선의 정의를 담은 1차 규격입니다.
• MDN — 글자 외곽선 그리기 외곽선이 글자 윤곽을 기준으로 안팎에 절반씩 그려진다는 점을 설명합니다. 이 도구가 표시 두께를 두 배로 잡는 근거입니다.
• MDN — 캔버스를 이미지 파일로 저장 형식 지원 범위, 품질 옵션이 적용되는 형식, 저장이 실패하는 조건을 설명합니다.
• MDN — 사진 회전 정보 반영해 읽기 카메라가 기록한 회전 정보를 반영해 이미지를 읽는 방법입니다. 세로 사진이 눕지 않는 이유입니다.

한글 글꼴 이용허락 원문과 배포 기관

기본 고딕을 뺀 7종은 아래 조건으로 배포되는 글꼴입니다. 각 글꼴의 이용허락 전문과 배포 기관 안내를 직접 확인할 수 있습니다.

사진을 다듬거나 이어붙일 때

글씨를 넣기 전후에 사진 자체를 손봐야 한다면 다음 도구를 이어서 쓸 수 있습니다.

• 사진 합치기 글씨를 넣은 사진 여러 장을 세로·가로·격자로 이어붙일 때 씁니다.
• 이미지 자르기 문구를 넣을 자리를 먼저 확보하거나 필요 없는 가장자리를 잘라낼 때 씁니다.
• 이미지 리사이저 사진의 화소 수가 입력 제한을 넘거나 저장 크기를 규격에 맞춰야 할 때 씁니다.
• 이미지 압축기 글씨를 넣은 뒤 파일 용량만 줄이고 싶을 때 씁니다.