TEXT_TO_IMG로 블로그 썸네일 하나 만드는 과정

개발 기록을 다 써놓고 썸네일 때문에 발행을 미룬 적이 꽤 있다. 복잡한 디자인은 필요 없는데 빈 이미지도 싫어서 편집기를 열었다가, 폰트와 정렬을 만지느라 시간이 더 걸렸다. TEXT_TO_IMG는 그 과정을 줄이려고 만든 도구다.

이번에는 실제 배포된 화면에 블로그 썸네일 / 텍스트 이미지 예시라는 두 줄을 넣었다. 크기는 300×300, 출력 배율은 2배, 확장자는 WebP로 두었다.

제목을 그대로 넣지 않았다

본문 제목을 전부 넣으면 썸네일이 작은 설명문이 된다. 브라우저에서 텍스트 이미지를 만들어 블로그 썸네일로 쓰는 방법 같은 제목이라면 이미지에는 텍스트 이미지 / 썸네일 만들기 정도만 남긴다.

한글은 두 줄이 되면 줄마다 길이가 너무 차이나지 않는 편이 안정적이다. 영문 프로젝트명은 중간에서 끊기지 않도록 직접 줄바꿈한다. TEXT_TO_IMG, Cloudflare Pages, localStorage 같은 단어는 브라우저 자동 줄바꿈에 맡기면 어색하게 잘릴 수 있다.

먼저 작은 화면에서 읽히는지 본다

큰 미리보기에서 읽힌다고 끝이 아니다. 블로그 목록과 메신저 공유 화면에서는 훨씬 작게 보인다. 글자 크기를 계속 키우기보다 문구를 줄이고 바깥 여백을 확보하는 쪽이 낫다.

내가 보는 기준은 세 가지다.

• 이미지를 절반 크기로 줄여도 첫 줄이 바로 읽히는가.
• 플랫폼이 가장자리를 조금 잘라도 핵심 문구가 남는가.
• 배경과 글자색을 흑백 화면으로 봐도 구분되는가.

zozindev.com은 검정과 노랑을 기본으로 쓰기 때문에 예시도 같은 색을 썼다. 매번 새 조합을 만드는 것보다 사이트 안에서 같은 톤을 유지하는 편이 작업도 빠르고 결과도 덜 산만하다.

PNG, JPG, WebP를 고르는 기준

TEXT_TO_IMG는 Canvas 결과를 toBlob으로 만들어 PNG, JPG, WebP 중 하나로 내려받는다. 현재 코드에서 JPG와 WebP 품질값은 0.92를 사용한다.

범용 블로그 썸네일은 PNG가 가장 무난하다. 내 사이트처럼 WebP를 그대로 쓸 수 있는 곳에서는 용량을 줄이기 좋다. 투명 배경이 필요하면 PNG나 WebP를 쓰고, JPG에서는 투명 영역이 유지되지 않는다는 점도 확인해야 한다.

출력 배율은 표시 크기와 다르다

300×300에 2배를 고르면 저장용 Canvas는 600×600으로 그려진다. 화면에서 보이는 크기는 그대로지만, 결과 파일의 픽셀 수가 늘어난다. 작은 썸네일을 고해상도 화면에서 쓸 때는 편하지만, 무조건 4배로 올리면 파일만 커질 수 있다.

나는 먼저 실제 표시 비율을 정하고 2배로 저장한 뒤, 업로드된 목록 화면에서 다시 본다. 글자가 흐리면 배율을 올리기 전에 폰트 크기와 대비부터 고친다. 원본 배치가 나쁘면 해상도를 올려도 좋아지지 않는다.

저장 전에 빼는 것

썸네일에 날짜, URL, 기술 스택, 설명, 해시태그를 전부 넣지 않는다. 본문 제목과 구분되는 짧은 문구 하나면 충분하다. 보조 문구를 넣더라도 프로젝트명이나 글 종류 정도로 끝낸다.

개인정보가 들어간 문구도 이미지로 만들지 않는다. TEXT_TO_IMG 자체는 입력값을 서버로 보내지 않고 설정만 localStorage에 보관하지만, 결과 파일을 공개하면 그 안의 텍스트는 그대로 남는다. 서버 저장이 없다는 것과 공개해도 안전하다는 것은 다른 얘기다.

실제 흐름은 짧다. 제목을 반으로 줄이고, 의미 단위로 줄을 나누고, 여백과 대비를 맞춘 다음, 2배 PNG나 WebP로 저장한다. 마지막으로 블로그 목록에서 작게 봐도 읽히는지 확인한다.

도구는 TEXT_TO_IMG 프로젝트 페이지에서 열 수 있다. 전문 디자인 툴을 대신하기보다 글 발행 직전의 5분짜리 작업을 줄이는 데 맞춘 도구다.