[Claude Code] 프롬프트 45개를 이미지로? Claude Code로 강의 교안 시각화를 하루 만에 끝냈다

소개

시도하고자 했던 것과 그 이유를 알려주세요.

(내용 입력)[Claude Code] 프롬프트 45개를 이미지로? Claude Code로 강의 교안 시각화를 하루 만에 끝냈다

📝 한줄 요약

AI 이미지 생성 프롬프트 45개가 담긴 강의 교안에, Claude Code와 Gemini API를 연결해서 각 프롬프트의 결과 이미지를 자동 생성하고 삽입까지 하루 만에 완료했습니다.

바쁘시면 이것만 읽어도 돼요:

• Claude Code로 Gemini 3.0 Pro API를 연결해서 프롬프트 45개를 이미지로 자동 생성

• 수동으로 하면 며칠 걸릴 작업을 하루 만에 끝냄

• 모델이 안 되면 다른 모델로 바꾸면 됨 — 시행착오를 두려워하지 말 것

• 45개 이미지가 들어간 교안을 HTML 파일 하나로 만들어서 카톡으로도 배포 가능

• 이미지를 넘어 영상 생성까지 확장할 수 있는 가능성 확인

🎯 이런 분들께 도움돼요

• AI 코딩 도구(Claude Code 등)를 처음 접하는 비개발자

• AI로 이미지를 대량 생성해야 하는 강사/크리에이터

• 프롬프트 교안이나 포트폴리오에 시각 자료를 넣고 싶은 분

😫 문제 상황 (Before)

AI 이미지 생성 강의를 준비하면서 "나노바나나 프롬프트 마스터"라는 교안을 만들었습니다. 스타일 변환, 타이포그래피, 상업 활용 등 12개 카테고리에 걸쳐 프롬프트가 무려 45개.

문제는, 교안에 프롬프트 텍스트만 있다는 거였습니다.

수강생 입장에서 "이 프롬프트를 넣으면 어떤 이미지가 나올까?"를 상상하기 어렵습니다. 프롬프트를 읽고 → 직접 AI에 넣어보고 → 결과를 확인하는 과정을 거쳐야 하니까요. 프롬프트 옆에 실제 결과 이미지가 바로 보이면 이해도가 완전히 달라질 텐데, 45개를 하나하나 만들자니 며칠은 걸릴 작업이었습니다.

🛠️ 사용한 도구

• Claude Code: 전체 작업 지시 및 자동화 (분석, 코드 작성, 이미지 삽입, 배포 파일 생성)

• Gemini 3.0 Pro: 이미지 생성 AI 모델 (API 연결)

🔧 작업 과정

교안 분석 — "이 HTML에서 프롬프트만 뽑아줘"

먼저 Claude Code에게 교안 파일을 분석시켰습니다. 1,500줄이 넘는 HTML 파일이었는데, 이걸 직접 읽으면서 프롬프트를 하나하나 찾는 건 엄두가 안 나는 작업이죠.

html에서 각각의 프롬프트를 gemini api로 나노바나나로 이미지 만들어서 각 프롬프트 코드블럭 위쪽에 배치해서 다시 html로 만들어줘

Claude Code가 알아서 파일 구조를 분석하고, 18개 강의 섹션 중 이미지/영상 생성에 해당하는 1~12강에서 프롬프트 45개를 정확히 추출해냈습니다. 12개 카테고리(스타일 변환, 이미지 편집, 타이포그래피, 상업 활용, 정보 디자인, 특수 연출 등)로 깔끔하게 정리까지.

이 과정에서 제가 한 건 딱 하나 — "해줘"라고 말한 것뿐입니다.

Gemini API 연결 — 모델 찾기 시행착오

프롬프트를 뽑았으니, 이제 이걸 이미지로 만들 차례입니다. Claude Code가 Gemini API를 연결하는 과정에서 재미있는 일이 있었습니다.

처음에 gemini-2.0-flash-exp 모델로 시도했는데, 45개 전부 실패. 모델이 이미지 생성을 지원하지 않았던 거죠. 그래서 Claude Code가 사용 가능한 모델 목록을 직접 조회해서 이미지 생성이 되는 모델들을 찾아냈습니다.

gemini 3.0 모델로 해줘

최신 Gemini 3.0 Pro 모델로 바꿔달라고 했고, 테스트 이미지 한 장이 성공적으로 생성되는 걸 확인한 후 본격적으로 시작했습니다. 이 모든 시행착오가 몇 분 안에 끝났습니다. 사람이 직접 API 문서를 찾아보고, 모델명을 확인하고, 코드를 수정하는 과정이었다면 한 시간은 걸렸을 거예요.

45개 이미지 일괄 생성 — 이게 하이라이트

이 프로젝트에서 가장 인상적이었던 순간입니다.

Claude Code가 45개 프롬프트를 정리하고, Gemini 3.0 Pro에 하나씩 보내서 이미지를 생성하기 시작했습니다. 서버 부하를 고려해서 3초 간격으로 요청을 보내는 것까지 알아서 세팅했고요.

43개가 성공하고 2개가 서버 연결 문제로 실패했는데, Claude Code가 실패한 2개만 자동으로 재시도해서 결국 45개 전부 성공. 총 39MB 분량의 이미지가 폴더에 쌓였습니다.

사람이 이 작업을 했다면? Midjourney나 다른 AI 도구에 프롬프트를 하나씩 넣고, 결과를 다운로드하고, 파일명을 정리하고... 45개면 최소 이틀은 걸렸을 겁니다. 그걸 Claude Code가 자동으로, 한 번에, 에러 처리까지 포함해서 끝냈습니다.

이 속도가 충격적이었습니다.

HTML에 이미지 삽입 — 자동으로 딱딱 배치

이미지가 만들어졌으니, 이걸 교안 HTML에 넣어야 합니다. 45개 이미지를 각각 맞는 프롬프트 위에 배치하는 것도 수동으로 하면 상당한 노가다죠.

Claude Code가 각 프롬프트 코드블록의 위치를 자동으로 찾아서, 해당 이미지를 바로 위에 삽입했습니다. 둥근 모서리, 그림자 효과까지 깔끔하게 스타일링해서요. 결과물을 브라우저에서 열어보니, 프롬프트를 읽기 전에 결과 이미지를 먼저 볼 수 있는 직관적인 구성이 완성되어 있었습니다.

배포용 파일 생성 — "이걸 어떻게 보내지?"

마지막으로 배포 문제가 남았습니다.

이걸 남에게 배포하려면 노션 옵시디언으로?

Claude Code가 노션이나 옵시디언은 커스텀 HTML 지원이 안 돼서 적합하지 않다고 안내해주고, 대신 이미지 45개를 HTML 안에 직접 내장하는 방식을 제안했습니다. base64 인코딩이라는 기술을 써서 이미지를 텍스트로 변환한 뒤 HTML에 넣는 건데, 결과적으로 48MB짜리 단일 HTML 파일이 만들어졌습니다.

이 파일 하나만 카톡이나 메일로 보내면, 받는 사람은 브라우저에서 바로 열어볼 수 있습니다. 별도 설치나 로그인 없이요.

✅ 결과 (After)

Before vs After

결과물

• 45개 프롬프트별 AI 생성 이미지가 포함된 강의 교안

• 48MB 단일 HTML 파일로 누구에게나 간편 배포 가능

• 12개 카테고리(스타일 변환~고급 워크플로) 전체 시각화 완료

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. API로 대량 작업 자동화: AI 이미지 생성 도구를 하나씩 쓰는 것과, API로 연결해서 자동 돌리는 것은 차원이 다릅니다. 반복 작업이 많다면 API 자동화를 고려해보세요.

2. Claude Code에게 통째로 맡기기: "이 파일 분석해서, 프롬프트 뽑아서, 이미지 만들어서, HTML에 넣어줘"처럼 전체 흐름을 한 번에 지시하는 게 효과적이었습니다. 단계별로 잘게 쪼개서 지시하는 것보다 큰 그림을 던져주는 게 오히려 낫더라고요.

3. 시행착오를 두려워하지 말 것: 처음 시도한 모델이 안 됐을 때 당황할 수도 있지만, Claude Code가 알아서 대안을 찾아주니까 그냥 지켜보면 됩니다. AI와의 협업에서 실패는 비용이 거의 안 드는 학습입니다.

이렇게 하면 안 돼요

1. 한 번에 완벽을 기대하지 마세요: 첫 모델이 실패하는 건 자연스러운 겁니다. AI도 시행착오가 필요합니다.

2. 중간 결과를 확인하세요: 45개를 한꺼번에 돌리기 전에, 테스트 이미지 1장을 먼저 만들어본 게 좋은 판단이었습니다. 대량 작업 전에는 항상 샘플 테스트를 하세요.

🌍 다른 업무에 적용한다면?

이 방식은 "대량의 텍스트를 시각 자료로 변환"해야 하는 모든 상황에 응용할 수 있습니다:

• 프레젠테이션 자료: 발표 대본에서 핵심 포인트를 추출해 슬라이드 이미지를 자동 생성

• 제품 카탈로그: 상품 설명 텍스트를 기반으로 목업 이미지를 대량 생성

• SNS 콘텐츠: 블로그 포스트에서 핵심 문장을 뽑아 카드뉴스 이미지 자동 제작

• 교육 자료: 어떤 교안이든 프롬프트나 핵심 개념에 맞는 시각 자료를 자동 생성 가능

🚀 앞으로의 계획

이번에 이미지 자동 생성이 잘 된 만큼, 다음 단계로 영상 생성까지 확장해보려고 합니다. 교안의 영상 생성 프롬프트(13강~)도 같은 방식으로 자동화하면, 프롬프트 → 이미지뿐 아니라 프롬프트 → 영상 시연까지 교안에 담을 수 있을 겁니다.

📋 재사용 가능한 프롬프트

프롬프트 1: 교안/문서에서 프롬프트 추출 + 이미지 자동 생성

[교안 파일 경로]에서 각각의 프롬프트를 [AI 모델명] API로 이미지 만들어서 각 프롬프트 코드블록 위쪽에 배치해서 다시 HTML로 만들어줘

• [교안 파일 경로]는 본인의 교안 파일로 변경하세요

• [AI 모델명]은 Gemini, DALL-E 등 원하는 모델로 변경하세요

프롬프트 2: 배포용 단일 파일 생성

이 HTML의 모든 이미지를 파일 안에 내장해서 단일 HTML 파일로 만들어줘. 외부 파일 없이 이 파일 하나만으로 모든 이미지가 보여야 해.

• 이미지가 많을 경우 파일 크기가 커질 수 있으니 참고하세요 (이미지 45개 기준 약 48MB)

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.

Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.

Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)

(내용 입력)

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

과정 중에 어떤 시행착오를 겪었나요?

도움이 필요한 부분이 있나요?

앞으로의 계획이 있다면 들려주세요.

(내용 입력)

도움 받은 글 (옵션)

참고한 지피터스 글이나 외부 사례를 알려주세요.

(내용 입력)