1. 소개
"내용이 중요한데, 껍데기 만드는 데 힘을 빼고 있구나"
워드프레스와 네이버 블로그를 운영하면서 썸네일 제작의 번거로움을 절감했습니다. 미리캔버스나 피그마 같은 훌륭한 디자인 툴이 있지만, 매번 실행해서 디자인을 수정하고 내보내는 과정이 반복되다 보니 의외로 많은 시간이 소요되었습니다.
생성형 AI에게 이미지 생성을 맡기기에는 매번 토큰 비용이 발생하고, 블로그 시리즈나 카테고리별로 일관된 톤앤매너(Tone & Manner)를 유지하기 어렵다는 한계가 있었습니다.
기존의 자동 썸네일 서비스들은 디자인이 너무 획일화되어 있거나 제가 원하는 디테일한 기능(Safe Zone, 다양한 비율 대응 등)이 부족했습니다. 그래서 설치 없이, 브라우저에서 바로 실행되며, 우리 블로그에 딱 맞는 썸네일을 10초 만에 만들 수 있는 '나만의 도구' 를 직접 만들기로 결심했습니다.
2. 진행 방법
사용 도구: Google Antigravity
활용 방법: 프론트엔드 지식이 깊지 않아도, 원하는 기능과 디자인 컨셉을 구체적으로 AI에게 설명하여 단 하나의 HTML 파일로 작동하는 웹 도구를 제작했습니다.
저는 심플하면서도 세련된 글래스모피즘(Glassmorphism) 디자인을 원했고, 특히 블로그 환경에 맞춰 Safe Zone(텍스트 안전 영역) 기능이 필수적이었습니다. 아래와 같은 구조로 프롬프트를 작성하여 코드를 생성했습니다.
```markdown
# Role
숙련된 프론트엔드 웹 개발자 및 UI/UX 디자이너
# Task
단 하나의 HTML 파일로 작동하는 '블로그 썸네일 생성기'를 만들어주세요. 외부 라이브러리 의존성을 최소화하고, 모던하고 깔끔한 디자인을 적용해야 합니다.
# Requirements (Design)
1. **배경**: 부드러운 그라디언트 및 글래스모피즘(Glassmorphism) 효과 적용.
2. **폰트**: 'Pretendard' 웹 폰트 적용 (CDN 사용).
3. **레이아웃**: 좌측에는 컨트롤 패널(입력창), 우측에는 실시간 미리보기(Canvas) 배치.
# Requirements (Features)
1. **실시간 미리보기**: 텍스트(태그, 제목, 부제) 입력 즉시 캔버스에 반영 (지연 없음).
2. **배경 설정**:
* Preset 그라디언트 선택 가능.
* 사용자 이미지 업로드 기능 (Drag & Drop 지원).
* 이미지 위에 오버레이(Overlay) 투명도 조절 슬라이더 추가.
3. **비율 설정**:
* 배경 비율: 16:9, 1:1, 4:3 버튼 제공.
* Safe Zone (콘텐츠 영역) 비율 별도 설정 가능 (가이드라인 표시).
4. **텍스트 스타일링**: 글자 크기, 굵기, 색상, 강조선(Line) 색상 커스터마이징.
5. **내보내기**: 고해상도(2x, 4x) 지원, WebP/PNG/JPG 포맷 선택 저장.
# Constraint
* CSS와 JavaScript는 별도 파일 없이 HTML 내부에 `<style>`, `<script>` 태그로 모두 포함해주세요.
* 모바일 반응형보다는 데스크탑 환경에서의 사용성에 집중해주세요.
```3. 결과와 배운 점
결과:
결과적으로 HTML 파일 하나(30KB 미만) 만 있으면 인터넷 연결 없이도 어디서든 실행 가능한 나만의 썸네일 생성기를 갖게 되었습니다.
설치 없는 간편함: 더 이상 무거운 디자인 툴을 켤 필요가 없습니다.
브랜딩 강화: 시리즈별로 고정된 태그 색상과 레이아웃을 사용하여 블로그의 통일성을 확보했습니다.
시간 단축: 제목만 입력하고 '저장' 누르면 끝. 10초도 안 걸립니다.
그라디언트 배경 적용 예시
이미지 배경 및 오버레이 활용 예시
나만의 꿀팁:
1. WebP 포맷 활용: 블로그 로딩 속도를 위해 JPG 대신 WebP 포맷 저장을 구현했습니다. 화질은 유지하면서 용량은 훨씬 작습니다.
2. Safe Zone의 중요성: 네이버 블로그는 PC와 모바일, 검색 리스트에서 썸네일이 노출되는 비율이 제각각입니다. 배경은 16:9로 하되, 중요한 텍스트는 1:1 비율(Safe Zone) 안에 배치해야 어디서든 잘리지 않습니다. 이 툴은 Safe Zone 가이드라인을 켜고 끌 수 있어 이 작업이 매우 수월했습니다.
과정 중에 겪은 시행착오:
처음에는 기능을 욕심내다 보니 UI가 복잡해졌습니다. "모든 걸 할 수 있는 툴"이 아니라 "썸네일 만들기에만 최적화된 툴" 로 덜어내는 과정이 필요했습니다. 색상 선택도 너무 자유롭게 두기보다는, 미리 지정한 브랜드 컬러 팔레트 내에서 고르도록 제한하는 것이 오히려 작업 속도를 높여준다는 것을 깨달았습니다.
---
[공유] 썸네일 자동 생성기 HTML 파일 받기
혹시 사용해보고 싶으신 분들을 위해 사이트를 공유합니다. 다운로드 받으셔서 브라우저로 여시면 바로 사용 가능합니다!
