대본의 각 장면 설명(image prompt)을 OpenAI 이미지 API에 보내 어울리는 이미지를 생성합니다. low 품질 옵션으로 빠르고 저렴하게 만듭니다.
DAY 1 · 7교시 · 60분
gpt-image로 장면 이미지 생성하기
➔
➔
📚1단계: 주요 개념 설명
이번 단원의 목표
OpenAI 이미지 모델(gpt-image-2, low 품질)로 각 장면의 이미지를 생성해 쇼츠에 비주얼을 붙인다.
🗂️강의 슬라이드
슬라이드 1 / 10
왜 이미지가 필요한가
- 대본과 음성만으로는 화면이 비어 있습니다.
- 각 장면에 어울리는 이미지가 있어야 비로소 '영상'이 됩니다.
- 대본 속 image_prompt가 이 단계의 입력이 됩니다.
🛠️2단계: 따라하기 실습
🛠 따라 만들기 · AI 바이브 코딩
장면 이미지를 gpt-image로 생성하기대본의 각 장면에 어울리는 이미지를 OpenAI 이미지 모델로 만들어 화면 카드에 붙입니다. 막히면 아래 '완성 코드 펼치기'를 붙여넣으세요.
🎯 완성 결과: 각 장면 카드에 AI가 생성한 이미지가 함께 표시되는 생성기
1서버에 이미지 라우트 만들기
서버가 OpenAI 이미지 API를 대신 호출하게 합니다.
🤖 AI에게 이렇게 시켜보세요
app/api/image/route.ts를 만들어줘. POST로 prompt를 받아 OpenAI /v1/images/generations에 gpt-image-2로 요청(size 1024x1536, quality low)해서 이미지를 만들고 base64 data URL로 돌려줘. 키는 process.env.OPENAI_API_KEY를 써.
💡 핵심 코드 설명
- TTS와 똑같은 패턴입니다 — 서버가 키를 쥐고 이미지 모델을 호출합니다.
- quality를 low로 두면 빠르고 저렴하게 만듭니다.
2장면마다 이미지 만들기
각 장면 카드에 이미지를 붙입니다.
🤖 AI에게 이렇게 시켜보세요
app/page.tsx에서 대본이 생성된 뒤, 각 장면(scene)의 image_prompt(없으면 caption)를 /api/image에 보내 이미지를 받아 그 장면 카드 안에 <img>로 보여줘.
💡 핵심 코드 설명
- 장면 배열을 돌며 각 장면의 이미지를 요청합니다.
- 이제 카드에 글·이미지가 함께 보여 영상에 가까워집니다.
3프롬프트 다듬어 다시 만들기
원하는 이미지를 찾을 때까지 반복합니다.
🤖 AI에게 이렇게 시켜보세요
이미지가 마음에 안 들면 다시 생성하는 '이미지 새로고침' 버튼을 각 장면 카드에 추가해줘.
💡 핵심 코드 설명
- 프롬프트를 조금씩 바꿔가며 원하는 이미지를 찾습니다.
- 작게 요청하고 결과를 보고 반복하는 것이 바이브 코딩의 핵심입니다.
✓실습 미션 체크리스트
우측 이미지 생성 실습기에서 장면 프롬프트를 입력하고 '이미지 생성'을 눌러, 실제 gpt-image 결과 이미지가 나오는지 확인해 보세요.
gpt-image 호출 핵심
// 서버에서 OpenAI 이미지 API 호출 (핵심)
await fetch("https://api.openai.com/v1/images/generations", {
method: "POST",
headers: { Authorization: "Bearer " + process.env.OPENAI_API_KEY },
body: JSON.stringify({
model: "gpt-image-2",
prompt: "a cute cat astronaut, vertical, vivid",
size: "1024x1536",
quality: "low",
}),
});💡 코딩 중 막히나요? 모범 솔루션 코드
🧩3단계: 개념 검증 퀴즈
검증 챌린지 미션
입력한 프롬프트에 맞는 세로형 이미지가 생성되어 화면에 표시되는지 확인합니다.
📝 객관식 개념 확인 (2문항)
Q1. gpt-image에서 quality를 'low'로 두는 주된 이유는?
Q2. 이미지 결과 품질을 가장 크게 좌우하는 것은?
🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요
같은 화면에서 연결 대상만 바꿔 세로형 이미지를 생성합니다 — 클라우드(gpt-image)와 온프렘(로컬 FLUX). 코드는 그대로, 주소만 달라집니다.