블로그 조금이라도 해보신 분들은 아실 텐데, 결국 클릭률(CTR)은 썸네일이 다 해먹잖아요.
저도 예전에 블로그 2개 정도 굴릴 때는 캔바(Canva)로 템플릿 만들어서 돌려썼거든요. 근데 이게 하루 이틀이지 글 쓸 때마다 썸네일 만드는 게 진짜 보통 일이 아닙니다.
일단 디자인 감각이 없으니까 맨날 똑같은 기본 템플릿만 돌려막기 하게 되고, 그러다 보니 글 내용이랑 썸네일이 따로 놀아요. 무엇보다 본문 다 쓰고 진 빠졌는데 거기서 피그마나 캔바 다시 켜는 게 제일 고역이더라고요.
마침 예전에 글 메타데이터를 AI로 채우는 파이프라인을 만들어 본 적이 있어서, 이번엔 아예 "글 내용을 읽고 핵심 오브제를 알아서 뽑아 그려주는 AI 썸네일이 필요"해서 한번 만들어 봤습니다.
목표는 이런 거.
글을 -> AI가 분석해서 -> 원하는 이미지로 뙇!
처음부터 목표는 딱 하나였어요.
"전체적인 룩(브랜드 통일성)은 고정하고, 안에 들어가는 오브제(글의 의미)만 매번 다르게 뽑자."
근데 막상 해보니 텍스트 요약할 때랑은 차원이 다르게 손이 많이 가더라고요. 프롬프트 깎는 것부터 모델 파라미터 만지는 것까지 삽질을 꽤 많이 했는데, 어떻게 굴러가는지 편하게 풀어볼게요.
전체 흐름은 대충 이렇습니다
구조 자체는 심플하게 5단계로 돌아가요.
1. 메타데이터 수집: 쓴 글에서 제목, 한줄 요약(tldr), 태그, 본문 핵심 내용을 긁어옵니다.
2. 프롬프트 생성 (Gemini): 글 내용을 보고 어떤 그림을 그릴지 시각 요소를 골라서 영어 프롬프트로 짭니다.
3. 이미지 생성 (Replicate FLUX-dev): 짠 프롬프트를 넣어서 이미지를 뽑습니다.
4. 저장: Supabase Storage에 올리고 URL을 따옵니다.
5. 평가 및 재생성: 보고 맘에 들면 쓰고, 별로면 버튼 눌러서 다시 뽑습니다.
여기까지만 보면 "그냥 API 두 개 이어 붙인 거 아냐?" 싶으실 텐데, 그냥 이어 붙였다가 초반에 대참사가 났습니다.
삽질 1. AI한테 그냥 "어울리는 그림 그려줘" 하면 망합니다
처음엔 그냥 쉽게 생각했어요. 글 내용 던져주고 "이 글에 어울리는 예쁜 블로그 썸네일 그려줘" 하면 알아서 잘 뽑아줄 줄 알았죠. 한 100번쯤 뽑아보고 깨달았습니다.
그냥 맡겨놓으면 AI가 창의력을 발휘하는 게 아니라, 맨날 돋보기, 노트북, 책 같은 뻔한 것만 주구장창 그립니다. 심지어 화풍도 매번 달라져서 블로그 메인에 모아놓으면 완전 중구난방이 돼요.
초기에 뽑았던 느낌인데, 하나씩 보면 그럴싸해도 무슨 블로그 글인지 전혀 모를 난해함이 뙇...
그래서 도입한 게 '메타포(Metaphor) 카탈로그'입니다.
쉽게 말해서 글의 주제를 어떤 사물로 표현할지 제가 미리 500줄짜리 사전으로 싹 다 정해둔 거예요. Gemini가 아무거나 상상해서 그리지 못하게 보기 중에서 고르게 만든 거죠.
예를 들면 이런 식입니다.
- SEO 관련 글이다 → 돋보기 + 과녁(크로스헤어)
- RAG 관련 글이다 → 원통형 디스크(DB) + 문서 카드 + 연결 화살표
- 블로그/CMS 글이다 → 브라우저 창 + 아티클 카드 UI
- 에이전트(Agents) 글이다 → 에이전트 디스크 3개 + 중앙 허브 + 말풍선
이렇게 주제별로 쓸 수 있는 부품(오브제)을 정해주니까 그제야 글 내용이랑 딱 맞아떨어지는 그림이 나오기 시작하더라고요.
삽질 2. 색깔도 AI한테 맡기면 안 됩니다 (3종 팔레트 고정)
오브제는 잡았는데 그다음 문제는 색감이었습니다. AI한테 색상을 맡기니까 어떤 건 눈 아플 정도로 형광색을 칠해놓고, 어떤 건 갑자기 시꺼먼 다크모드로 뽑아놓더라고요.
그래서 색깔도 아예 3가지 팔레트(색상 조합)로 못을 박아버렸습니다.
- 팔레트 1 (기본, 70% 비율로 사용): 차분한 슬레이트 회색 배경(#94A3B8 → #64748B)에 시안(#22D3EE)이랑 인디고(#6366F1)로만 포인트 주기. 제일 무난하고 전문적인 느낌입니다.
- 팔레트 2 (생동감, 20% 비율): 시안(#22D3EE) + 에메랄드 그린(#10B981) 포인트. 좀 밝고 활기찬 주제일 때 씁니다.
- 팔레트 3 (미스테리, 10% 비율): 인디고(#6366F1) + 보라색(#A78BFA) 포인트. 딥한 주제일 때 가끔 써요.
이렇게 3개 안에서만 돌리니까 모든 썸네일이 '같은 시리즈'처럼 묶여 보이면서도, 포인트 컬러가 조금씩 달라서 지루하지 않게 딱 잡히더라고요.
삽질 3. 고정할 것과 바꿀 것 나누기 (feat. 중복 방지)
브랜드 일관성을 유지하면서 매번 다른 느낌을 내려고 '절대 바꾸면 안 되는 규칙'과 '매번 바꿔주는 요소'를 프롬프트에서 칼같이 나눴습니다.
일단 무조건 고정하는 것은 밝은 라이트 모드 스타일, 10% 이하의 얕은 그림자, 찌그러지지 않은 완벽한 원형, 끊기지 않고 이어지는 얇은 선(헤어라인), 그리고 '글자 절대 넣지 말 것'입니다. (아직 AI가 이미지 안에 글씨 넣으면 외계어처럼 깨지는 경우가 많아서 아예 텍스트는 빼버렸어요.)
반대로 매번 바꾸는 것은 위에서 말한 메타포 조합, 팔레트(1~3번), 레이아웃 구도(중앙 배치냐, 파이프라인 형태냐 등), 그리고 Seed 값입니다.
아, 그리고 소소한 팁인데 중복 방지 로직도 하나 넣었어요. 최근에 만든 썸네일 5개의 조합을 기억해 뒀다가, 새로 만들 때 Gemini한테 "야, 최근 5개에서 이 조합 썼으니까 이거 빼고 다른 조합으로 짜줘"라고 알려주는 겁니다. 이거 하나 넣었다고 연속으로 비슷한 구도가 나오는 일이 확 줄었어요.
마무리하며
처음엔 그냥 썸네일 만들기 귀찮아서 시작한 일인데, 하다 보니 AI한테 "알아서 잘해줘"라고 비는 대신 내가 원하는 기준을 수치와 카탈로그로 쪼개서 쥐여주는 게 얼마나 중요한지 뼈저리게 느꼈습니다.
혹시 개인 블로그나 뉴스레터 하시면서 썸네일 때문에 스트레스받는 분들 계시면, 무작정 프롬프트 치지 마시고 자주 쓰는 오브제 리스트랑 색상 코드 2~3개만 고정해서 돌려보세요. 퀄리티가 진짜 확 달라집니다!