💡 한 줄 요약
구글 슬라이드 PDF와 영어 대본만 넣으면 브라우저 자체 기능으로 고화질 슬라이드와 AI 원어민 음성을 실시간 합성해 워터마크 없는 깨끗한 MP4 동영상으로 추출하는 전용 웹앱 제작 바이브 코딩 프롬프트와 노하우를 소개합니다!
🎬 왜 전용 동영상 제작 웹앱을 직접 만들었을까요?
그동안 구글 슬라이드로 만든 동화책 자료를 동영상으로 변환하려면 외부 영상 편집 도구나 AI 비디오 서비스에 대본을 일일이 붙여넣어야 했습니다.
하지만 무료 플랜에서 첫 화면에 원치 않는 로고 워터마크가 노출되거나, 슬라이드 화면과 음성 싱크를 맞추기 위해 번거로운 수작업을 거쳐야 하는 불편함이 있었답니다.
이 문제를 해결하기 위해 바이브 코딩(Vibe Coding)으로 'PDF 렌더링 + 브라우저 TTS 음성 + 캔버스 녹화 기능'이 결합된 단 하나의 HTML 파일 웹앱을 직접 제작했습니다!
📊 외부 편집 프로그램 vs 바이브 코딩 자체 제작 웹앱 비교
| 비교 항목 | 기존 외부 동영상 편집 툴 | 바이브 코딩 전용 웹앱 (추천 ⭐️) |
|---|---|---|
| 워터마크 및 로고 | 무료 버전 사용 시 인트로/아웃트로에 회사 로고 강제 노출 | 외부 로고나 불필요한 UI 없이 순수 슬라이드 화면만 100% 깔끔하게 녹화 |
| 음성-슬라이드 동기화 | 자막 길이와 슬라이드 전환 타이밍을 일일이 수동 조정 | 원어민 TTS 낭독이 끝나는 순간(onend 이벤트) 다음 슬라이드로 자동 전환 |
| 작업 속도 및 편의성 | 프로그램 설치, 계정 로그인, 클라우드 렌더링 대기 시간 소요 | 설치 0개! 단일 HTML 파일 더블클릭 후 PDF와 대본만 넣으면 1분 만에 완성 |
🧩 웹앱을 작동시키는 핵심 3대 기술 원리
- PDF.js 고해상도 렌더링: PDF 파일을 3.0 고해상도 스케일로 브라우저 Canvas에 선명하게 출력합니다.
- Web Speech API (TTS): 별도 오디오 파일 없이 웹 브라우저 내장 원어민 영어 음성으로 대본을 실시간 낭독합니다.
- Canvas CaptureStream & MediaRecorder: 슬라이드 캔버스 화면과 브라우저 오디오를 실시간 스트림으로 결합하여 고화질 MP4 파일로 즉시 캡처·저장합니다.
💡 초보자를 위한 바이브 코딩 실전 사용 예시
✨ [복사용] 고화질 PDF-음성 MP4 변환 웹앱 제작 프롬프트
"너는 웹 프론트엔드 및 미디어 스트리밍 전문 개발자야. 별도의 백엔드 서버 없이 브라우저에서 단 하나의 HTML 파일로 실행되는 [고화질 슬라이드 동영상 제작기 웹앱]을 만들어 줘.
[주요 요구사항]
1. PDF.js CDN을 사용해 업로드된 구글 슬라이드 PDF 파일을 캔버스(Canvas)에 3.0 고해상도로 렌더링할 것.
2. 텍스트 영역에 입력된 줄바꿈 대본을 Web Speech API(en-US, 속도 0.85)로 슬라이드 번호에 맞춰 순차 낭독할 것.
3. 낭독 종료 이벤트(onend) 발생 시 1.5초 대기 후 다음 슬라이드로 자동 전환할 것.
4. Canvas.captureStream(30fps)과 getDisplayMedia 오디오 트랙을 결합하여 MediaRecorder로 녹화하고, 완료 시 깨끗한 MP4 파일로 다운로드할 수 있는 버튼을 제공할 것.
5. 전체 코드는 외부 설치 없이 즉시 실행 가능한 단일 HTML 파일로 작성해 줘."
📋 웹앱 제작 및 활용 3단계 순서
- 위 프롬프트를 제미나이(Gemini)나 클로드(Claude)에 입력하여 단일 HTML 코드를 생성받습니다.
- 메모장에 코드를 붙여넣고
video_maker.html로 저장한 뒤 브라우저로 엽니다. - 구글 슬라이드에서 다운받은 PDF와 영어 대본을 넣고 [녹화 시작]을 누르면 워터마크 없는 나만의 영어 동화 MP4 영상이 완성됩니다!
🎯 에디터 한줄평
기성 툴의 워터마크나 번거로운 편집 제약에 갇히지 않고, 바이브 코딩으로 내 목적에 100% 딱 맞는 미디어 제작 도구를 만들어 쓰는 것이 진정한 창작의 즐거움입니다!
💡 바이브 코딩 제작 팁
복잡한 백엔드 서버나 설치형 프로그램 없이도 브라우저 내장 API(Canvas, MediaRecorder, Web Speech)를 조합하면 전문가 수준의 비디오 렌더러를 손쉽게 구축할 수 있습니다.
