TEXT_TO_IMG 사용법

1. 이미지 모양 선택

상단의 5개 모양 버튼에서 이미지 형태를 고릅니다. 네모, 둥근 네모, 원, 캡슐, 마름모를 선택할 수 있습니다. 선택한 모양은 미리보기와 다운로드 이미지에 모두 반영됩니다.

2. 텍스트 입력과 부분 스타일

텍스트 입력창에 이미지로 만들 문구를 입력합니다. 일부 텍스트만 드래그해 선택한 뒤 B, U, S 버튼을 누르면 선택 영역에만 볼드, 밑줄, 취소선이 적용됩니다.

3. 텍스트 정렬

좌측, 가운데, 우측 정렬 중 하나를 선택할 수 있습니다. 줄바꿈된 텍스트도 선택한 정렬 기준에 맞춰 배치됩니다.

4. 폰트와 색상 설정

폰트, 폰트 크기, 배경색, 글자색을 설정합니다. 색상은 프리셋 스와치를 클릭하거나 HEX 값을 직접 입력해 지정할 수 있습니다.

배경색 없음을 선택하면 PNG와 WebP에서는 투명 배경으로 저장됩니다. JPG는 투명 배경을 지원하지 않아 흰색 배경으로 저장됩니다.

5. 테두리 설정

테두리 포함을 켜면 이미지 안쪽에 테두리를 그릴 수 있습니다. 선 패턴, 선 굵기, 테두리 색상을 선택할 수 있으며 이미지 모양을 따라 테두리가 적용됩니다.

6. 이미지 크기와 출력 배율

Instagram Feed, Instagram Square, Naver Blog용 표준 크기를 선택하거나 직접 가로/세로 크기를 입력할 수 있습니다.

출력 배율은 저장되는 이미지의 실제 해상도를 높입니다. 예를 들어 300 x 300에 2x를 선택하면 600 x 600 이미지로 저장됩니다.

7. 파일명과 확장자

파일명을 입력하면 해당 이름으로 다운로드됩니다. 파일명을 비우면 기본 파일명 TTI가 사용됩니다. 확장자는 PNG, JPG, WebP 중에서 선택할 수 있습니다.

8. 마지막 설정 자동 저장

마지막으로 사용한 설정은 브라우저 localStorage에 저장됩니다. 같은 브라우저에서 다시 열면 이전 설정이 자동으로 복원됩니다.

블로그 썸네일을 만들 때

블로그 썸네일은 긴 문장을 모두 넣기보다 글의 핵심 단어를 크게 보여주는 편이 잘 읽힙니다. 제목 전체가 길다면 첫 줄에는 주제, 둘째 줄에는 상황이나 결과를 나눠 넣습니다. 예를 들어 “정산 체크리스트”와 “모임 돈 계산 실수 줄이기”처럼 두 줄로 나누면 작은 화면에서도 의미가 남습니다.

배경색과 글자색은 대비를 크게 잡습니다. 밝은 배경에는 어두운 글자, 어두운 배경에는 밝은 글자가 기본입니다. 색을 많이 쓰기보다 배경 하나, 글자색 하나, 필요하면 테두리 하나 정도로 줄이면 이미지가 더 안정적으로 보입니다.

공유용 공지 이미지를 만들 때

공지 이미지는 예쁜 장식보다 읽는 속도가 중요합니다. 날짜, 장소, 금액, 준비물처럼 놓치면 안 되는 정보는 줄을 분리해서 넣습니다. 한 줄에 너무 많은 정보를 넣으면 모바일 화면에서 작게 보이므로, 중요한 항목은 짧은 단어 단위로 끊는 편이 좋습니다.

이미지 크기는 올릴 곳에 맞춥니다. 인스타그램 피드나 정사각형 카드에는 1:1 비율이 편하고, 블로그 본문 중간에 넣을 설명 이미지는 가로형이 읽기 쉽습니다. 출력 배율을 2x로 올리면 같은 표시 크기에서도 글자가 더 선명하게 저장됩니다.

투명 배경과 JPG의 차이

PNG와 WebP는 투명 배경을 유지할 수 있습니다. 로고 조각이나 스티커처럼 다른 이미지 위에 얹을 파일이라면 투명 배경이 유용합니다. 반대로 JPG는 투명 배경을 지원하지 않기 때문에 흰색 배경으로 합성해서 저장됩니다. 흰 배경이 싫다면 JPG 대신 PNG나 WebP를 선택해야 합니다.

개인정보를 입력하지 않는 기준

TEXT_TO_IMG는 입력한 텍스트를 서버에 저장하지 않지만, 생성한 이미지는 사용자가 직접 다운로드하고 공유하는 파일입니다. 전화번호, 계좌번호, 주소, 내부 링크, 비공개 코드처럼 공개되면 안 되는 정보는 이미지로 만들지 않는 편이 안전합니다. 공유 전에 미리보기에서 문구를 다시 읽고, 필요 없는 정보는 줄이거나 익명화한 뒤 저장하세요.

실제 예시: 300×300 블로그 카드

‘블로그 썸네일 / 텍스트 이미지 예시’를 두 줄로 넣고 직접 입력 300×300, 출력 배율 2x, WebP를 골랐다. 검정 배경에 #fed002 글자, 40px, 가운데 정렬을 사용했다. 미리보기에는 300×300 @ 2x로 표시되고 다운로드 파일은 600×600으로 만들어진다.

첫 시도에서는 제목을 길게 넣지 않았다. 두 줄의 길이를 비슷하게 맞추고, 미리보기의 가장 긴 줄과 테두리 사이에 여백이 남는지 확인했다. 실제 게시물 제목은 이미지 밖의 본문에 있으므로 썸네일에는 주제만 남기는 편이 읽기 쉬웠다.

다운로드가 만들어지는 방식

미리보기와 다운로드는 같은 Canvas 상태를 사용한다. 다운로드 버튼을 누르면 canvas.toBlob으로 PNG, JPG, WebP를 만들고, JPG와 WebP에는 품질 0.92를 적용한다. Blob을 만들지 못한 브라우저에서는 canvas.toDataURL을 대체 경로로 사용한다.

입력 문구와 마지막 설정은 localStorage에 저장된다. 이 저장은 다음 방문에 설정을 복원하기 위한 것이며 서버 계정과 연결하지 않는다. 공용 컴퓨터에서는 사용 후 브라우저 사이트 데이터를 지우는 편이 좋다.