Blog

Project

TEXT_TO_IMG 정적 웹 도구 제작 기록

TEXT_TO_IMG는 텍스트를 이미지 파일로 뽑는 정적 웹 도구다. 문구 넣고, 스타일 만지고, PNG/JPG/WebP로 저장하는 흐름이다. 서버에 텍스트 저장 안 하고 브라우저에서 끝내는 게 핵심이다.

이런 도구는 빨리 열리고 설치 없이 바로 써야 한다. 그래서 백엔드나 계정 기능 없이 정적 사이트로 두는 게 맞았다. 입력값은 브라우저 안에서 처리하고 결과 파일만 받으면 된다. 복잡할 이유 없음.

처음 만든 이유는 단순했다. 짧은 문구를 이미지로 만들어야 하는 일이 생각보다 자주 생긴다. 블로그 썸네일, 공지 이미지, 간단한 카드뉴스, SNS에 올릴 한 줄 이미지 같은 것들이다. 매번 디자인 툴을 열기엔 귀찮고, 캡처로 때우기엔 결과가 지저분하다.

그래서 TEXT_TO_IMG는 전문 디자인 툴이 아니라, 빠르게 텍스트 이미지를 뽑는 쪽에 맞췄다. 핵심은 텍스트 입력, 스타일 조정, 이미지 다운로드다. 이 세 가지가 잘 되면 나머지는 나중에 붙여도 된다.

정적 도구로 운영하는 이유

TEXT_TO_IMG는 tti.zozindev.com에서 실제 도구로 돌리고, zozindev.com에는 설명과 회고를 둔다. 사용자는 도구로 바로 가고, 검색 엔진은 맥락을 읽는다. 각자 할 일 하면 됨.

이 도구는 서버가 없어도 된다. 사용자가 입력한 텍스트를 어딘가에 저장할 필요가 없고, 로그인도 필요 없다. 브라우저 안에서 캔버스를 만들고 다운로드만 처리하면 된다. 괜히 서버를 붙이면 개인정보 처리나 저장소 관리 같은 일이 늘어난다.

정적 도구로 두면 배포도 단순하다. HTML, CSS, JavaScript만 있으면 되고, Cloudflare Pages 같은 정적 호스팅에 올리면 끝이다. 장애 지점이 적고 유지비도 낮다. 개인 프로젝트로 오래 굴리기에는 이런 구조가 낫다.

만들면서 신경 쓴 부분

가장 먼저 본 건 결과물 다운로드다. 사용자는 화면에서 보기 좋은 것보다 실제 파일로 저장되는 결과를 원한다. 그래서 PNG, JPG, WebP처럼 쓰임새가 다른 포맷을 선택할 수 있게 하는 게 중요했다.

두 번째는 입력한 텍스트가 의도한 줄바꿈으로 나오는지였다. 텍스트 이미지 도구에서 줄바꿈이 깨지면 바로 쓸모가 떨어진다. 긴 문장, 짧은 문장, 여러 줄 문구가 모두 예상 가능한 방식으로 보여야 한다.

세 번째는 설정을 너무 많이 늘리지 않는 것이다. 글자 크기, 배경색, 여백, 정렬 같은 기본 요소는 필요하지만, 처음부터 모든 디자인 기능을 넣으면 도구가 무거워진다. 지금은 빠르게 이미지를 만드는 경험을 먼저 잡는 게 맞다.

루트 블로그에 기록하는 이유

TEXT_TO_IMG 자체는 tti.zozindev.com에서 돌아간다. 하지만 앱만 두면 검색 엔진이 읽을 설명이 부족하고, 방문자도 이 도구가 어떤 맥락에서 만들어졌는지 알기 어렵다.

그래서 zozindev.com에는 프로젝트 상세 페이지와 제작 기록을 둔다. 실제 도구는 서브도메인에서 가볍게 돌리고, 루트 도메인은 설명과 포트폴리오 역할을 맡는다. 이런 식으로 나누면 새 도구가 늘어나도 루트 사이트에 기록을 쌓기 쉽다.

다음 개선

다음 개선은 예시 템플릿과 사용 사례를 늘리는 쪽이다. 변환 기능만 덜렁 있으면 심심하다. 썸네일, 공지 이미지, 카드 이미지 같은 실제 예시가 있어야 쓸모가 보인다.

예시가 있으면 처음 들어온 사람도 바로 감을 잡는다. “텍스트를 이미지로 만든다”는 설명보다, 실제 결과 예시를 보는 게 훨씬 빠르다. 앞으로는 자주 쓰는 비율, 배경 스타일, 블로그 썸네일용 템플릿을 조금씩 늘릴 생각이다.

TEXT_TO_IMG Project
Open TEXT_TO_IMG