안녕하세요, 생산적 회계사(PROCPA)입니다.
설치 없이 브라우저에서 바로 실행 가능한 ‘나만의 썸네일 생성기’ 사용법을 소개합니다.
디자인 툴 없이도, 몇 번의 클릭만으로 블로그에 최적화된 고퀄리티 썸네일을 만들 수 있습니다.
제작 동기
워드프레스 블로그와 네이버 블로그 운영을 시작하면서 썸네일의 중요성을 알게 되었습니다. 다만 이를 매번 만드는 것은 번거로운 일이었습니다.
미리캔버스와 피그마 같은 툴을 사용하더라도 의외로 많은 시간이 소요 되었고 “내용이 중요한데, 껍데기 만드는 데 힘을 빼고 있구나”라는 생각이 들었습니다.
나노바나나와 같은 생성형 AI에게 만들어 달라고 할 수도 있지만 매번 썸네일을 요청할 때마다 토큰이 소모된다는 점이 부담스럽고, 시리즈나 카테고리별로 일관된 톤앤 매너를 유지해야 하는데 생성형 AI의 특성상 한계가 있었습니다.
또한 썸네일을 자동으로 만들어 준다는 서비스가 존재하긴 했지만 디자인적으로 너무 획일화 되어 있고 제가 원하는 기능을 갖추고 있지 않아 직접 제작하게 되었습니다.
특징
- 설치 없는 간편함: HTML 파일 하나만 열면 인터넷 없이도 바로 실행됩니다.
- 최신 디자인 트렌드 반영: 깔끔한 Pretendard 폰트와 세련된 글래스모피즘(Glassmorphism) 스타일이 기본 적용되어 있습니다.
- 디테일한 커스텀
- 배경 비율: 유튜브(16:9), 인스타(1:1) 등 플랫폼에 맞춰 배경 크기를 조절합니다.
- Safe Zone: 배경과 별개로 텍스트가 배치될 영역의 비율을 따로 설정하여 다양한 블로그 레이아웃(16:9, 4:3, 1:1)에 모두 적용되는 이미지를 만듭니다.
- 배경 & 오버레이: 그라디언트 색상의 배경은 물론, 원하는 이미지를 삽입 후 어둡기(Overlay) 를 조절해 글씨를 잘 보이게 할 수 있습니다.
- 실시간 미리보기: 입력하는 즉시 0.1초의 지연도 없이 디자인이 화면에 반영됩니다.
- 고화질 내보내기: 다양한 포맷(webp, jpg, png)과 스케일 업(2x, 4x)을 지원합니다.
사용 방법
1. 프로그램 실행
썸네일 메이커.html 파일을 다운로드한 뒤 실행합니다. 별도의 설치 과정 없이 브라우저에서 바로 열리며, 기본 1280×720 해상도로 시작됩니다.
2. 텍스트 입력 (Content Controls)
왼쪽 패널에 썸네일에 들어갈 문구를 작성합니다.
- 태그 (Tag): 블로그의 카테고리나 연재 중인 시리즈 명을 입력합니다.
- 제목 (Title) 및 부제 (Sub title): 글의 제목과 부제를 입력합니다. 입력과 동시에 미리보기가 갱신되며, 설정된 Safe Zone을 넘어가면 자동으로 줄바꿈이 적용됩니다.
3. 스타일 설정 (Typography & Colors)
- 폰트 스타일: 태그, 제목, 부제 각각의 크기와 굵기를 조절하여 시각적 위계(Hierarchy)를 잡아보세요.
- 색상: 배경색과 대비되는 텍스트 색상을 선택하고, 강조선(Line) 색상으로 디자인에 포인트를 줄 수 있습니다.
4. 배경 꾸미기 (Background)
심플한 그라디언트 배경이나 직관적인 이미지 배경 중 선택할 수 있습니다.
- 그라디언트: ‘시작 색상’ 과 ‘끝 색상’ 을 조합하여 세련된 분위기를 연출해 보세요.
- 이미지: 관련 사진을 업로드하고 ‘배경 어둡기(Overlay)’ 를 조절하여 텍스트 가독성을 확보할 수 있습니다.
Tip: 저는 시리즈별로 태그 색상과 배경 톤을 고정해 사용하고 있습니다. 이렇게 하면 독자들이 썸네일만 보고도 어떤 주제의 글인지 직관적으로 알 수 있어 브랜딩에 큰 도움이 됩니다.
5. 레이아웃 최적화
플랫폼에 맞춰 썸네일의 비율을 결정합니다.
- 배경 비율 (Background Ratio): 16:9, 4:3, 1:1 등 다양한 비율 프리셋을 제공합니다. 가로 폭 입력 시 세로 폭이 자동 계산되며, 직접 수정 시 ‘사용자 지정’ 모드가 됩니다.
- 콘텐츠 비율 (Safe Zone): 텍스트가 배치될 안전 영역을 설정합니다.
Tip: 배경 비율은 16:9, 콘텐츠 비율은 1:1로 설정하는 것을 추천합니다. 제가 직접 테스트해보니, 이 비율이 네이버 블로그 PC/모바일 환경 어디에서도 텍스트가 잘리지 않는 가장 안전한 비율이었습니다.
6. 이미지 다운로드
하단의 [이미지 다운로드] 버튼을 클릭하여 결과물을 저장합니다.
Tip: 블로그 포스팅용이라면 WebP 포맷을 추천합니다. JPG와 거의 동일한 화질이면서 용량은 훨씬 가벼워 페이지 로딩 속도에 유리합니다.
블로그 썸네일로 고민하셨던 분들에게 작은 도음이 되기를 바랍니다.