슬라이드 강의 영상: 웹 슬라이드에 컴퓨터 음성 해설이 포함된 영상
2026년 9월 27일 · 수정 2026년 9월 28일 · 발견한 곳 YouTube · 조회 0회
한 편의 글을 10분짜리 교육용 동영상으로 제작하기: 화면은 웹 페이지 슬라이드이고, 음성은 컴퓨터가 대본을 읽어주며, 내레이션이 한 문장을 읽을 때마다 다음 페이지로 넘어간다.
글의 제목은 “MCP가 에이전트의 컨텍스트를 잠식하지 못하게 하라”이며, 영상에서는 식당에 비유해 설명한다. 총 18개 챕터, 116단계로 구성되어 있으며, AI가 그린 삽화 17장이 포함되어 있다.
어떻게 하는지, 누가 하는지
- AI가 먼저 뼈대를 내놓는다. 장마다 무슨 이야기를 하고 어떻게 끝낼지 내가 확인한 뒤에야 내레이션을 쓴다
- AI 6개가 슬라이드를 나눠 만들었다. 하나당 한 묶음의 장을 맡았다
- Gemini의 일러스트: 짙은 파란색 배경, 가는 선화, 그림 위에 글자 없음
- 컴퓨터가 대본을 읽어줍니다(qwen3-tts). 다 읽은 후 음성 인식 기능을 이용해 다시 한 번 들어보고, 잘못 읽은 부분이 있으면 다시 읽습니다. 최대 5회까지 반복할 수 있습니다.
- AI 하나를 따로 검사관으로 보내 직접 다시 측정하게 했다. 만든 쪽의 말만 믿지 않았다
화면이 어떻게 움직이나요?
화면에 나오는 애니메이션은 모두 CSS 애니메이션입니다. 브라우저에 “1초 안에 왼쪽에서 미끄러지듯 들어오게 하라”고 지시하면, 브라우저가 스스로 움직입니다. 이 영상 전체에 걸쳐 약 80개의 애니메이션이 구현되었습니다.
내레이션 한 구절이 끝날 때마다 0.2초간 멈춘 후 다음 페이지로 넘기고, 한 장이 끝날 때는 1.8초간 멈춘다.
CSS 애니메이션은 브라우저 시계대로 돌아가며 기다려 주지 않는다. 그래서 한 프레임씩 찍을 수 없고 실제 속도로 녹화해야 한다. 10분 23초짜리라면 10분 23초 동안 녹화한다. 녹화하면서 페이지가 넘어간 시각을 기록해 두고, 마지막에 그 시각에 맞춰 내레이션을 다시 붙였다
막혔던 점:처음에는 한 프레임씩 찍으려고 했는데, 약 125프레임 정도 찍었을 때 시간이 너무 오래 걸려 중단되고 말았다. 프레임을 몇 개 덜 찍으니 애니메이션이 따라가지 못해, 움직임이 반쯤 진행된 장면이 찍혀 버렸다.
해법:일반 속도로 녹화하도록 변경하세요.
AI는 어디까지 할 수 있을까
할 수 있다
- 6개의 AI가 동시에 18개 챕터를 작업한 뒤, 이를 합성하여 하나의 영상을 만듦
- 대본을 직접 읽고 음성 인식으로 받아쓰기 검사까지 했다. 내레이션 115개 구간이 전부 통과했다
- 한 장만 다시 녹음해 이어 붙였는데 길이는 전혀 달라지지 않았다
다른 사람의 도움이 더 필요해
- 구성: 첫 대본은 문장마다 검사를 통과했지만, 전체를 읽은 나는 “이야기 흐름이 엉망이다”라며 돌려보냈다. 그 뒤에는 먼저 뼈대부터 내게 했다
- 그림: AI가 직접 그린 요리사를 보고 내가 “너무 못생겨서 뭔지 모르겠어”라고 했더니 이미지 생성으로 바꿨다
- 대본을 읽다 보면 가끔 실수를 하거나 문장 전체를 생략하기도 하는데, 이 경우 받아쓰기를 통해 확인한 뒤 다시 읽어야 한다.
- 허위 보고도 한다. AI 하나가 애니메이션을 하나 만들었다고 했지만 검사 AI가 확인해 보니 0개였다
원문:“MCP가 에이전트의 컨텍스트를 잠식하지 못하게 하라”
이 방법은 ConardLi가 오픈소스로 공개한 것을 바탕으로 합니다. web-video-presentation(garden-skills)
2026년 9월 27일 다시 녹음