청소년을 위한 영상 기획 & 프롬프트 생성 자동화 웹앱

곧, 중학생들과 함께 영상제작 수업을 진행해야하는데요.
학생들이 보다 쉽고, 재미를 느낄 수 있는 형태의
영상 기획 & 프롬프트 생성 자동화 웹앱을 제작해보게 되었습니다.

1. 소개

"영상 아이디어를 입력하면, AI가 전체 영상 기획서를 만들어주는 웹앱"

초기 아이디어 : 영상 콘텐츠 기획 시 나레이션 대본 작성 → 컷별 이미지/비디오 프롬프트 생성 → 마스터 스크립트 보드 완성 과정을 AI 채팅으로 만들 수 있는 웹앱

사용도구

제미나이, 안티그래비티, Flow, 클링AI

핵심 기능
- 💬 AI 감독과의 대화형 인터페이스
- 🎯 5가지 영상 컨셉 제안 및 사용자 선택
- 📝 전체 나레이션 대본 자동 생성
- 🎨 컷별 이미지/비디오 프롬프트 추출
- 📋 마스터 스크립트 보드 (Scene/연출/나레이션/SFX)
- 📄 결과물 PDF/CSV 내보내기
타겟 사용자: AI 영상제작을 배우는 청소년, 영상 제작 초보자 등

2. 기술 스택 (Tech Stack)

도구

용도

Gemini AI (2.5-flash)

영상 기획 대본 및 프롬프트 자동 생성 (백엔드 API)

Antigravity

AI 코딩 에이전트 (전체 프로젝트 코딩 및 디버깅)

React + TypeScript

프론트엔드 개발 (Vite 빌드)

Node.js + Express

백엔드 API 서버

Tailwind CSS v4

스타일링 및 레이아웃

jsPDF / PapaParse

PDF 및 CSV 파일 내보내기

3. 개발 여정 및 주요 프롬프트

🔹 STEP 1: 프로젝트 초기 세팅 및 Gemini API 연동

// server/index.ts - Gemini API 연동 핵심 코드
import { GoogleGenerativeAI } from '@google/generative-ai';

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' });

app.post('/api/chat', async (req, res) => {
  const { messages } = req.body;
  const result = await model.generateContent({
    contents: messages.map((m: any) => ({
      role: m.role === 'assistant' ? 'model' : 'user',
      parts: [{ text: m.content }],
    })),
  });
  const text = result.response.text();
  res.json({ content: text });
});

<초기버전>

안티그래비팅에 요청해서 나온 초기 결과는 위와 같습니다.
중간중간 오류가 생긴 문제는 다 잡았지만, 화면 UI가 너무 별로더라구요.
그래서 화면 구성을 게임 UI형태로 변경하고자 했습니다.

🔹 STEP 2: UI 전면 리디자인 (게임 스타일)

여러 레퍼런스 이미지를 서치해보고, 제미나이에 디자인 프롬프트를 요청했고,
사용자가 친근감을 느낄 수 있도록 '로블록스'와 '동물의 숲' 느낌을 섞은 청키(Chunky)한
디자인 프롬프를 받아 안티그래비티에 디자인 규칙을 적용했습니다.

CSS

/* 게임 패널 - 두꺼운 테두리 + 3D 그림자 */
.game-panel {
  border: 4px solid #5D4E37;
  border-radius: 20px;
  box-shadow:
    0 6px 0 rgba(93, 78, 55, 0.3),
    0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 3D 청키 버튼 */
.chunky-btn-green {
  background: linear-gradient(180deg, #7CD464 0%, #5CB85C 100%);
  box-shadow: 0 4px 0 #3D8B37;
  transition: all 0.1s;
}

.chunky-btn-green:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3D8B37;
}

/* 하늘 배경 + 구름 애니메이션 */
.sky-background {
  background: linear-gradient(180deg, #7EC8E3 0%, #B5E4F7 40%, #D4F0FC 70%, #E8F8E0 100%);
  position: relative;
  overflow: hidden;
}

🔹 STEP 3: 레이아웃 구조화

확실한 여백과 패널 분리를 위해 React 컴포넌트 내에서 인라인 스타일을 전략적으로 사용했습니다.

// App.tsx - 핵심 레이아웃 구조
<div className="sky-background" style={{ 
  height: '100vh', 
  padding: 20, 
  display: 'flex', 
  gap: 20, 
}}>
  <div className="game-panel" style={{ 
    width: '38%', 
    background: '#FFF8E7' // 따뜻한 크림색 배경
  }}>
    <ChatPanel />
  </div>
  <div className="game-panel" style={{ 
    flex: 1, 
    background: '#F0F7FF' // 시원한 하늘색 배경
  }}>
    <WorkspacePanel />
  </div>
</div>

🔹 STEP 4: 내보내기 기능 오류 수정

브라우저 보안 정책으로 인해 다운로드 링크가 무시되는 현상을 DOM 추가 방식으로 해결했습니다.

TypeScript

// 수정된 내보내기 로직 (확실한 동작 보장)
const downloadFile = (url: string, filename: string) => {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  
  document.body.appendChild(link); // DOM에 반드시 추가해야 함
  link.click();
  
  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 500); // 다운로드 프로세스 완료 후 정리
};

<최종 화면 UI>
최종적으로 다음과 같은 화면 UI가 나오게 되었습니다.

좌측에서 채팅을 통해 화면을 기획하고,
우측에 이미지 프롬프트와 영상 프롬프트, 대사 등을 확인할 수 있는 구조입니다.

앱에서 바로 프롬프트를 복사해서 이미지나 영상제작할 때 사용 가능합니다.

<Flow> 이미지 프롬프트를 사용해 이미지 생성

<Kling> 컷 이미지 생성 후 영상 프롬프트를 클링에서 적용하여 영상 생성

01_cinema.mp4

7.78MB

4. 결과 및 인사이트

🍯 배운 점 (Tips)

구체적인 레퍼런스의 힘: 단순히 "게임 스타일"이라고 하기보다 "Animal Crossing 스타일, 40px 패딩, 두꺼운 테두리"처럼 수치와 명칭을 제시할 때 AI의 디자인 퀄리티가 높아짐
디자인을 개선하기 위해서는 처음부터 레퍼런스 이미지를 참고하여 프롬프트를 요청하는 것이 좋음

😅 시행착오

디자인이 너무 안예뻐서 게임화면처럼 보이도록 디자인 프롬프트를 계속 수정하느라 시간이 꽤 오래 걸렸어요. 화면 UI는 처음부터 스타일을 잘 지정하고 가는게 좋을 것 같습니다.

5. 앞으로의 계획

프롬프트 문서 다운이 안되는 문제 해결 하기
이미지 장면마다 카메라 샷 스타일 지정
바이브코딩 덕분에 수업에 필요한 것들을 하나씩 만들고,
적용해가는 재미가 있는 것 같습니다. ^^

🔥<24기 AI 스터디> 9/21 모집 마감 🔥