글자 배치와 가독성 기준
이미지 위 글자가 묻히는 이유
한 이미지 위에 여러 개의 문구를 올리고 위치, 글자색, 배경, 테두리, 크기, 불투명도를 개별 조절해 PNG로 합성하는 도구입니다.
이미지에 글자를 넣는 순서
- 배경이 될 이미지를 선택합니다.
- 문구를 추가하고 각 항목의 스타일과 위치를 조정합니다.
- 미리보기에서 겹침과 가독성을 확인한 뒤 PNG로 저장합니다.
사진에 제목을 올린 결과
- 입력
- 사진 한 장과 ‘여름 세일’ 문구
- 결과
- 문구가 픽셀로 합성된 PNG
문구 레이어를 선택한 위치와 스타일로 캔버스에 그린 뒤 하나의 이미지로 저장합니다.
글자를 넣어야 하는 작업
- SNS 카드에 제목을 넣을 때
- 제품 사진에 가격이나 안내 문구를 표시할 때
- 간단한 썸네일 시안을 만들 때
지정할 수 있는 글꼴과 배치
- 입력: 브라우저 이미지
- 복수 텍스트 레이어
- 글자·배경·테두리·불투명도
- PNG 출력
미리보기와 저장 결과가 다른 경우
- 저장 후에는 문구가 이미지 픽셀에 합쳐져 다시 텍스트로 편집할 수 없습니다.
- 글꼴은 굵은 sans-serif 하나로 고정되어 고를 수 없습니다.
- 매우 긴 문장은 이미지 영역을 벗어날 수 있습니다.
글자를 얹는 여러 방법
이미지에 글자를 넣는 방법은 여럿이지만, 글자를 나중에 고칠 수 있는지가 가장 큰 차이입니다.
| 견주는 대상 | 닮은 점 | 이 도구를 고를 때 | 상대를 고를 때 |
|---|---|---|---|
| 사이즈 조절+워터마크 | 이미지 위에 다른 요소를 겹칩니다. | 장마다 다른 문구를 자리를 보며 배치할 때 | 여러 장에 같은 로고를 반복해 넣을 때 |
| 발행하는 곳의 캡션 기능 | 이미지와 글이 함께 보입니다. | 이미지를 어디로 옮겨도 글자가 따라가야 할 때 | 나중에 문구를 고칠 수 있어야 할 때 |
| 색상 코드 변환기 | 글자 색을 정하는 일과 이어집니다. | 정한 색으로 실제 글자를 얹을 때 | 쓸 색의 정확한 코드를 먼저 구할 때 |
글자가 안 보이거나 잘릴 때
| 증상 | 원인 | 조치 |
|---|---|---|
| 배경과 겹쳐 글자가 읽히지 않습니다. | 글자색과 배경의 밝기 차이가 부족합니다. | 글자색과 배경의 밝기 차이를 키우거나, 문구의 배경색을 켜 글자 뒤에 판을 깔아 대비를 확보합니다. 불투명도는 판과 글자에 함께 적용됩니다. |
| 휴대폰에서 보니 글자가 너무 작습니다. | 큰 원본 기준으로 크기를 잡았습니다. | 실제로 보게 될 크기로 줄여 놓고 읽히는지 확인한 뒤 크기를 정합니다. |
| 가장자리에 놓은 글자가 잘립니다. | 표시하는 쪽이 이미지 가장자리를 잘라냅니다. | 가장자리에서 충분히 안쪽으로 들여 배치합니다. |
| 문구를 여러 개 넣었더니 서로 겹칩니다. | 문구마다 글자 크기가 달라 차지하는 상자 높이가 달라집니다. | 미리보기에서 겹치는 문구의 위치를 옮기고, 크기를 먼저 정한 뒤 배치합니다. |
입력한 문구와 이미지의 처리
이미지와 문구 합성은 브라우저 캔버스에서 수행되며 원본 이미지를 서버에 업로드하지 않습니다.
배치와 저장을 확인한 방법
한글·영문, 여러 레이어, 배경·테두리, 모서리 배치와 투명도 조합에서 저장 결과를 확인합니다.
이미지 글자 넣기 질문
텍스트를 여러 개 넣을 수 있나요?
가능합니다. 각 문구를 별도 항목으로 추가해 위치와 스타일을 조절합니다.
한 문구를 여러 줄로 쓸 수 있나요?
한 문구는 한 줄로 그려집니다. 여러 줄이 필요하면 줄마다 문구를 따로 추가해 위아래로 배치하세요.
원본 화질이 유지되나요?
원본 크기의 캔버스에 합성하지만 브라우저 디코딩·인코딩 과정에서 메타데이터는 유지되지 않을 수 있습니다.
저장한 뒤에 글자만 고칠 수 있나요?
없습니다. 저장하는 순간 글자는 이미지의 픽셀이 됩니다. 문구를 바꿔야 할 가능성이 있다면 원본 이미지를 따로 보관하고, 수정할 때마다 원본에서 다시 얹으세요.
글자를 넣으면 검색에 걸리나요?
이미지 안의 글자는 본문 텍스트와 다르게 취급됩니다. 검색에 잡혀야 하는 내용이라면 이미지에만 넣지 말고 페이지 본문이나 대체 텍스트에도 같은 내용을 적어 두세요.