[무료 나눔] 블로그 썸네일 자동 생성해주는 AI 에이전트를 만들었습니다

AI로 블로그 썸네일 생성기를 만들었습니다.

삽질까지 전부 공개하는 개발 후기

이 글은 썸네일 생성 AI 에이전트를 제작한 과정을 기록한 build in public 기록입니다.

잘된 부분만이 아니라 막혔던 지점과 그걸 어떻게 풀었는지까지 솔직하게 적었습니다. 비슷한 걸 만들어 보려는 분들에게 참고가 되면 좋겠습니다.

[영상] 블로그 썸네일 자동 생성 시연

0. 개요

블로그 글마다 썸네일 만드는 게 번거로워서, 주제만 입력하면 AI가 제목과 색상, 아이콘을 자동으로 디자인해 주는 썸네일 생성기를 만들었습니다.

개발자가 아닌 비개발자가 클로드로 만들었고, 그 과정에서 만난 세 번의 병목과 해결법, 그리고 리드 수집과 사용량 관리까지 붙인 이야기를 공유합니다.

직접 써보기: https://thumbnail-gen.lead-gen.team/

1. 왜 만들었나

먼저 저희가 누구인지 짧게 말씀드리겠습니다.

저희 리드젠랩은 마케팅 분야의 AX(AI Transformation)를 고민하고, 컨설팅하고, 실행까지 하는 팀입니다.

우리 자신의 반복 업무를 먼저 자동화해 보고, 거기서 검증된 방식을 고객사의 마케팅 업무에 적용합니다. 이 썸네일 생성기는 그 작업의 예시입니다.

콘텐츠 마케팅을 하다 보면 글보다 썸네일에서 시간을 더 쓰는 일이 자주 생깁니다.

디자인 툴을 열고, 템플릿을 찾고, 색을 고르고, 텍스트를 앉히다 보면 글 하나에 30분씩 사라집니다. 작아 보이지만 매일 반복되면 결코 작지 않은 비용입니다.

저희는 이런 일을 AI로 바꿔서, 사람이 더 중요한 판단에 집중하게 만드는 일을 합니다.

그래서 주제만 넣으면 AI가 알아서 만들어 주는 도구가 있으면 좋겠다고 생각했습니다.

블로그 제목이나 주제를 한 줄 입력하면, AI가 핵심 키워드 2줄과 어울리는 배경색, 주제에 맞는 아이콘을 자동으로 생성하고, 클릭 한 번으로 고해상도 PNG를 내려받는다.

2. 기술 스택

개발 구성은 단출합니다.

디자인과 프런트엔드 코드는 AI로 초안을 생성했습니다.

결과물은 정적 페이지 한 장(index.html)과 약간의 CSS, JS입니다. 썸네일 디자인을 JSON으로 만들어 주는 부분은 Anthropic Claude API를 씁니다. 호스팅과 서버리스 함수는 Netlify, 리드와 결과물 아카이브 백엔드는 Google Apps Script와 구글시트, 드라이브로 처리합니다.

별도의 서버 개발 없이 정적 페이지, 서버리스 함수, 구글시트만으로 끝냈다는 점이 핵심입니다. 비개발자도 누구나 충분히 따라 할 수 있습니다.

3. 첫 번째 벽: "Failed to fetch" 네트워크 오류

배포하자마자 AI 생성 버튼을 눌렀더니 이 메시지가 떴습니다.

오류: 네트워크 오류, Failed to fetch

원인은 두 가지가 겹쳐 있었습니다.

첫째, 브라우저에서 API를 직접 부르면 막힙니다. 처음엔 브라우저가 곧장 api.anthropic.com을 호출하게 돼 있었는데, 브라우저 보안 정책(CORS) 때문에 이 호출은 차단됩니다. 게다가 API 키를 브라우저에 두는 건 보안상으로도 좋지 않습니다. 그래서 서버리스 함수가 대신 호출하는 프록시 구조가 필요했습니다.

둘째, 함수 폴더 구조가 틀렸습니다. Netlify는 서버리스 함수를 netlify/functions/ 폴더에서 찾습니다. 그런데 우리는 프록시 함수 generate.mjs를 프로젝트 루트에 둔 채 폴더째 올렸습니다. 함수가 배포되지 않으니 프록시가 404가 되고, 결국 브라우저 직접 호출로 넘어가 CORS로 막혀 "Failed to fetch"만 보였습니다.

올바른 구조는 이렇습니다.

deploy/
├── index.html
├── netlify.toml          (functions = "netlify/functions")
└── netlify/
    └── functions/
        └── generate.mjs   ← 여기 있어야 함

정적 호스팅에서 서버리스 함수를 쓸 땐 폴더 위치가 곧 약속입니다. 한 칸만 어긋나도 함수 전체가 작동하지 않습니다.

4. 두 번째 벽: "invalid x-api-key", 키는 분명히 맞는데

프록시 구조로 바꾸자 이번엔 다른 에러가 떴습니다.

오류: invalid x-api-key

키를 새로 발급해 전부 정확히 넣었는데도 계속 같은 에러였습니다. 여기서 한 가지를 정했습니다. 에러를 가리지 말고 진짜 원인을 화면에 드러내자는 것이었습니다.

사실 초기 코드는 프록시에서 온 진짜 에러를 무시하고 무조건 "Failed to fetch"로 덮어버리는 버그가 있었습니다. 그래서 디버그 한 줄을 추가했습니다. 어떤 키가 어디서 와서 쓰였는지를 에러에 같이 보여주도록 했습니다.

그러자 메시지가 이렇게 바뀌었습니다.

오류: invalid x-api-key [사용된 키 출처=env(Netlify 환경변수), 앞부분=eyJhbGciOiJI…]

eyJ로 시작하는 건 Anthropic 키가 아니라 JWT 토큰입니다. Anthropic 키는 반드시 sk-ant-로 시작하는데, Netlify 환경변수 ANTHROPIC_API_KEY에 엉뚱한 값이 들어가 있었습니다. 화면에 아무리 올바른 키를 넣어도, 서버는 환경변수를 우선 사용하니 계속 실패했던 것입니다.

환경변수 값을 진짜 키로 바꾸자 바로 해결됐습니다.

여기서 배운 건 두 가지입니다.

하나, 에러는 숨기지 말고 드러내야 합니다. "Failed to fetch" 같은 두루뭉술한 메시지는 디버깅을 몇 시간씩 늦춥니다. 진짜 원인(상태 코드, 키 출처, 앞자리 같은 비민감 정보)을 노출하니 금방 잡혔습니다.

둘, 우선순위를 알아야 합니다. 서버 환경변수가 화면 입력보다 먼저입니다. 한쪽만 보고 "키 맞는데"를 반복하면 원인을 못 찾습니다.

5. 세 번째 벽: 모델이 지원 종료됨

이번엔 이런 에러였습니다.

오류: model: claude-3-5-sonnet-20241022

처음 코드가 참조하던 모델 스냅샷이 그 사이 지원 종료됐습니다. AI 모델은 계속 갱신되고 은퇴하기 때문에, 오래된 모델 ID를 박아두면 어느 날 갑자기 멈춥니다.

공식 문서에서 현재 사용 가능한 모델을 확인해 최신 ID로 교체했습니다. 이 도구는 품질을 위해 Claude Sonnet 계열로 고정했습니다.

함정이 하나 더 있었습니다. 사용자 브라우저의 localStorage에 예전 모델 ID가 캐시돼 있어서, 코드를 고쳐도 재방문자는 계속 죽은 모델을 호출했습니다. 그래서 저장된 모델 ID가 유효 목록에 없으면 기본값으로 되돌리는 방어 코드를 넣었습니다.

외부 API의 버전이나 모델 ID는 지금 맞다고 해서 영원히 맞는 게 아닙니다. 클라이언트에 캐시한 값은 항상 유효성 검사 후 폴백을 깔아두는 게 안전합니다.

6. 구조 정리: API 키는 브라우저로 내보내지 않는다

세 번의 벽을 넘은 뒤 보안 구조를 정리했습니다.

사용자에게 API 키를 받던 입력칸을 완전히 없앴습니다. 키는 오직 서버(Netlify Function)의 환경변수에만 둡니다. 브라우저는 주제만 보내고, 서버 함수가 키를 붙여 Anthropic에 호출합니다. 키 형식 검증(sk-ant-로 시작하는지)도 서버에서 합니다.

이제 브라우저 어디를 봐도 키는 보이지 않습니다. 우리 키 하나로 모두가 무료로 쓰되 키는 안전하게 숨겨진 구조가 됐습니다.

7. 결과물도 전부 아카이브

썸네일 생성기를 온라인에 배포하는 만큼, 사람들이 서로 서로 어떤 썸네일 만드는지 볼 수 있게 공유 기능을 만들어서 쌓기로 했습니다. AI 생성과 PNG 저장이 일어날 때마다 다음을 한 곳에 모읍니다.

만든 사람의 이메일과 회사, 제목 2줄, 배경색, 모델 정보를 기록하고, 최종 썸네일 이미지(PNG)를 저장합니다. 우측 아이콘 이미지도 매번 새로 그려지는 SVG를 PNG로 변환해 함께 저장합니다.

여러 사람이 각자의 공간에서 써도 결과물이 하나에 통합됩니다.

어떤 주제와 색, 아이콘이 인기인지 데이터로 쌓입니다.

9. 사용 방법 시연

실제 사용은 1분이면 충분합니다.

1단계. 접속과 등록

사이트에 들어가면 회사, 이메일, 이름, 직책을 입력하는 화면이 뜹니다. 한 번만 입력하면 됩니다.

2단계. 주제 입력과 AI 자동 생성

좌측 입력칸에 블로그 제목이나 주제를 한 줄 적고 [AI로 자동 생성] 버튼을 누릅니다(또는 Cmd/Ctrl + Enter). 5초에서 20초 안에 핵심 키워드 2줄과 어울리는 배경색, 주제에 맞는 아이콘이 자동으로 완성됩니다.

3단계. 커스터마이즈

마음에 안 드는 부분은 바로 손볼 수 있습니다. 텍스트와 폰트 크기, 글자색을 바꾸거나, 배경 그라데이션을 12종 프리셋에서 고르거나 직접 색과 각도를 지정할 수 있습니다. 아이콘은 코드 SVG, 이모지, 직접 업로드 중에 선택하고, 비율은 16:9, 3:2, OG, 1:1 중에 고릅니다.

4단계. 저장

[PNG 저장]을 누르면 2배 고해상도 PNG로 바로 다운로드됩니다.

5단계. 갤러리

AI로 만든 결과는 내 갤러리에 자동 보관돼, 언제든 다시 불러와 수정할 수 있습니다. 샘플 프리셋을 클릭해 빠르게 시작할 수도 있습니다.

[영상] 블로그 썸네일 자동 생성 시연

개발 회고

이번 빌드에서 얻은 것들을 정리하면 이렇습니다.

에러 메시지를 구체적으로 바꾸는 데 들인 5분이 디버깅 몇 시간을 아꼈습니다.

정적 페이지와 서버리스 함수, 구글시트만으로도 비용 관리, 결과 아카이브까지 갖춘 도구를 만들 수 있었습니다.

우리가 이런 걸 만드는 진짜 이유

이 도구로 돈을 벌려는 게 아닙니다.

저희가 어떻게 일하는지를 직접 보여 드리는 게 가장 정직한 소개라고 생각했기 때문에 만들었습니다.

우리는 마케팅 업무에 AI를 이식하는(AX) 일을 합니다.

전략을 그려 드리는 데서 끝내지 않고, 컨설팅과 실행을 함께합니다. 우리 팀의 일을 먼저 자동화해 보고, 그 과정에서 검증된 것만 고객사에 적용합니다. 우리가 직접 써보지 않은 방식을 권하지 않으려고 합니다.

지금은 검색이 근본적으로 바뀌는 시기입니다. 사람들은 파란 링크 목록 대신 생성형 AI가 정리해 주는 답을 받습니다.

이런 환경에서는 콘텐츠가 검색에 노출되는 것을 넘어, AI가 답을 만들 때 인용하고 신뢰하는 출처가 되어야 합니다.

이 변화를 GEO(Generative Engine Optimization)와 AEO(Answer Engine Optimization)라고 부릅니다. 기업과 브랜드가 이 흐름에 대응하는 것을 넘어 앞서나갈 수 있도록, 진단부터 전략, 콘텐츠, 실행까지 함께합니다.

마케팅의 많은 부분이 AI로 다시 쓰이고 있습니다.

그 변화 한가운데에서, 기업이 길을 잃지 않고 한 발 앞서 가도록 돕는 것이 우리가 하는 일입니다.

거창한 약속보다, 이렇게 작은 것 하나라도 직접 만들어 보여 드리는 방식으로 저희를 알리고 싶었습니다.

리드젠랩 소개 더 자세히 보러가기

썸네일 생성기가 마음에 드신다면, 또 다른 사람에게 공유해주세요!

이 썸네일 생성기는 무료로 공개되어 있습니다. 블로그나 SNS 썸네일이 필요하시면 1분만 투자해 보세요.

썸네일 생성기 써보기:

https://thumbnail-gen.lead-gen.team/

GEO 자동화 솔루션, SOHA AI 출시 예정

GEO 대응을 사람이 하나하나 손으로 하기는 벅찹니다. 그래서 우리는 GEO를 자동화하는 솔루션 SOHA AI를 곧 선보입니다.

브랜드의 콘텐츠가 생성형 AI 답변에서 더 잘 인용되고 노출되도록 돕는 도구입니다. 출시 소식을 가장 먼저 받아보고 싶다면 사전 등록해 주세요.

SOHA AI 사전 등록

https://soha-ai.com/

이 글이 도움이 되셨다면 스레드나 인스타그램에 공유해 주세요. 만든 사람에게 큰 힘이 됩니다.