쇼츠 한 편은 글을 쓰고, 목소리를 만들고, 장면 이미지를 준비하고, 영상으로 붙이는 순서로 완성됩니다. 웹서비스에서는 AI가 만든 제목, 자막, 장면 대본을 화면이 각각 꺼내 쓸 수 있도록 JSON이라는 정해진 데이터 형식으로 주고받습니다.
DAY 1 · 1교시 · 60분
AI 쇼츠 아키텍처 및 4대 파이프라인
➔
➔
📚1단계: 주요 개념 설명
이번 단원의 목표
쇼츠 영상 자동화의 4단계(대본 → 음성 → 이미지 → 비디오)와 서비스 아키텍처를 이해한다.
🗂️강의 슬라이드
슬라이드 1 / 10
왜 자동화가 필요한가
- 쇼츠 한 편을 손으로 만들면 대본 작성, 내레이션 녹음, 이미지 제작, 영상 편집을 각각 따로 처리해야 합니다.
- 작업마다 도구와 시간이 다르고, 한 부분만 수정해도 이후 단계를 다시 손봐야 하는 비효율이 생깁니다.
- 각 작업을 AI 단계로 나눠 자동화하면, 주제 입력 한 번으로 완성본까지 끊김 없이 연결됩니다.
🛠️2단계: 따라하기 실습
🛠 따라 만들기 · AI 바이브 코딩
수업 준비 & 오늘의 목표본격 시작 전에 도구와 키를 준비하고, '무엇을 만드는지'를 확인합니다. Day 1이 끝나면 아래 결과물이 완성됩니다.
🎯 완성 결과: 주제를 입력하면 AI가 대본을 쓰고 → 목소리로 읽어주고 → 인터넷에 배포되어 폰에서도 열리는 웹앱
1바이브 코딩 도구 Kiro(키로) 준비
수업 내내 사용할 AI 코딩 도구를 준비합니다.
💡 핵심 코드 설명
- 이 수업의 바이브 코딩은 Kiro(키로)로 통일합니다. 미리 설치하고 로그인해 두세요.
- 앞으로 '🤖 AI에게 이렇게 시켜보세요'의 프롬프트를 Kiro에 그대로 붙여넣어 코드를 만듭니다.
- 도구가 익숙지 않아도 괜찮습니다 — 강사 시연을 따라 하며 익힙니다.
2강사 임시 API 키 받기
클라우드 AI를 쓰기 위한 키를 받습니다.
💡 핵심 코드 설명
- 개인 결제 없이, 수업용으로 강사가 발급한 임시 키를 나눠 드립니다.
- 이 키는 3교시에 .env.local에 붙여넣어 사용하며, 수업이 끝나면 강사가 폐기합니다.
- 키는 비밀번호와 같으니 화면 공유·채팅·커밋에 절대 올리지 마세요.
3실행 환경 확인
내 컴퓨터가 준비됐는지 점검합니다.
💡 핵심 코드 설명
- Node.js가 설치돼 있어야 합니다(node -v로 확인). 없으면 강사 안내에 따라 설치합니다.
- 코드 편집기(Kiro)와 터미널만 있으면 준비 완료입니다.
✓실습 미션 체크리스트
우측 데이터 흐름 퍼즐을 조립하여 사용자의 입력이 AI 연산과 비디오 합성을 거쳐 화면에 출력되는 파이프라인을 완성해 보세요.
기본 4단계 서비스 아키텍처 정보
사용자 입력 ──> [1. 프론트엔드 UI] (Next.js/React)
└──> [2. 백엔드 중계] (FastAPI)
├── 텍스트 생성 (LLM / Ollama 7B)
├── 오디오 생성 (Qwen 0.6B TTS)
└── 이미지 생성 (FLUX.1-schnell 4bit/8bit)
└──> [3. 비디오 합성] (moviepy MP4 출력)💡 코딩 중 막히나요? 모범 솔루션 코드
🧩3단계: 개념 검증 퀴즈
검증 챌린지 미션
사용자가 기획 버튼을 누를 때 생성되는 AI 숏폼 영상의 전체 제작 순서를 설명할 수 있습니다.
📝 객관식 개념 확인 (3문항)
Q1. AI 쇼츠 파이프라인에서 데이터가 흐르는 순서로 옳은 것은?
Q2. 온프레미스(on-premises) 방식의 장점으로 가장 적절한 것은?
Q3. 1교시에서 JSON을 사용하는 이유로 가장 적절한 것은?
🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요
사용자 입력이 AI를 거쳐 화면에 출력되기까지의 올바른 순서대로 카드를 정렬해 보세요. JSON은 AI 결과를 화면 카드에 넣기 쉽게 정리하는 단계입니다.
👤 입력
⚙️ 백엔드
🖥️ 렌더링
STEP 1AI 연산
STEP 2사용자 입력
STEP 3결과 정리(JSON)
STEP 4클라이언트 요청
STEP 5화면 출력
STEP 6서버 라우팅
JSON을 쓰는 이유: AI가 "제목은 A, 자막은 B, 장면은 C"처럼 이름표를 붙여 보내면, 웹 화면은 각 값을 정확한 위치에 꽂아 넣을 수 있습니다.