손으로 그린 화이트보드 영상: 내레이션이 진행되는 대로 펜이 따라 그린다

67초 분량의 화이트보드 영상: 마치 누군가가 펜을 들고 말하면서 그림을 그리는 듯한 화면으로, 내레이션이 진행되는 대로 펜이 따라 그립니다. 시작은 Simon聊AI의 글 한 편이었다. 나는 그저 "이거 어떻게 된 건지 연구해 봐"라고 한 마디 던졌고, 이어 "우리 자체 IndexTTS로, 내 목소리로도 돼?"라고 물었더니 AI가 그 글을 바탕으로 이 영상을 만들었다. 어떻게 하는지, 누가 하는지 Claude Code는 원작 글을 읽고, 내레이션을 작성하며, 각 단락마다 무엇을 그릴지도 기록합니다. 이 두 가지 내용은 같은 파일에 기록됩니다. 내레이션은 12개의 작은 구간으로 나뉘며, 각 구간마다 그려야 할 그림 한 세트가 배정되어, 전체 영상에 총 72개가 등장한다. Codex가 작은 캐릭터 그림을 그렸다. 한 번에 4칸짜리 그림을 그린 뒤 스티커 4장으로 잘랐다 내 목소리로 내레이션을 읽습니다: IndexTTS 2가 집에 있는 그래픽 카드가 장착된 다른 컴퓨터에서 실행되며, 제 목소리를 학습합니다. 프로그램이 각 프레임을 그려내어 동영상으로 연결한 뒤, 자막을 삽입합니다. 펜이 내레이션 속도를 어떻게 따라가나 먼저 읽고, 그다음 그린다.내레이션을 구간마다 먼저 녹음하고 실제 길이가 몇 초인지 잰다 그 구간 안에 배치한다.이 부분에 그려야 할 내용은 이 내레이션이 나오는 시간 동안 진행됩니다. 선이 길수록 그리는 데 시간이 더 걸리고, 글자는 한 글자 한 글자 써 내려갑니다. 다 그리지 못하면 시간을 빌리면 된다.다음 단락의 시작 부분에서 시간을 조금 확보할 수 있습니다. 그래도 부족하다면, 단락 전체를 더 빨리 그리세요. 최대 3배 속도까지 가능합니다. 초 단위로 각 칸을 그려 넣으세요.촬영할 때 프로그램이 “지금 몇 초째지?”를 확인하고 그 시점까지 그려져 있어야 할 만큼 화면을 그린다. 펜도 선 끝에 멈춘다 자막은 동일한 시간을 사용합니다.자막 텍스트는 원고를 사용하며, 시간은 내레이션에 맞춰 진행됩니다. 그래서 영상과 음성이 정확히 맞아떨어지는데, 이는 나중에 편집한 것이 아니라 처음부터 내레이션의 타이밍에 맞춰 구성된 것입니다. 화면이 어떻게 움직이나요? 선은 웹페이지상의 벡터 선(SVG)입니다. 프레임마다 프로그램이 각 선이 얼마나 노출되어야 할지 계산합니다. 프레임마다 '현재 몇 초인지'만 확인하기 때문에, 브라우저 4개를 동시에 띄워 나누어 그릴 수 있으며, 67초짜리 영상을 21초 만에 다 그릴 수 있습니다. 원작 제목은 Codex + Excalidraw로 되어 있습니다. 실제로 선을 긋는 것은 rough.js이고, 화면을 촬영하는 것은 Playwright, 영상을 이어붙이는 것은 ffmpeg이며, 캐릭터 아이콘을 담당하는 것은 Codex입니다. 막힌 부분 문제:AI가 직접 화면을 캡처해 확인하다가, 내레이션은 벌써 세 번째 문단에 들어갔는데 세 번째 칸은 아직 그리기 시작하지 않았다는 걸 발견했다 이유:한 구간에 그려야 할 것이 너무 많아서, 가장 많은 구간에는 25개나 되어서 다 그릴 수가 없다. 해법:획을 좀 더 빠르게 그리고, 너무 빽빽한 구절을 나누고, 대각선으로 색을 칠하던 부분을 한 번에 채우도록 수정했습니다. 가장 느린 부분의 지연 시간이 2.7초에서 2.4초로 줄었습니다. 영상 마지막에 약 2.5초 정도 지연되는 부분이 하나 더 있었지만, 추가로 수정하지는 않았습니다. AI는 어디까지 할 수 있을까 할 수 있다 화면이 뒤처지는 것을 직접 발견하고는, 각 구간마다 몇 초씩 뒤처지는지 측정하는 작은 도구를 하나 만들었습니다. 원고 읽기 도구를 바꾸더라도, 그림 그리기나 자막 프로그램에서는 한 줄도 수정할 필요가 없다 음성 인식 기능을 이용해 내레이션을 다시 듣고 대조해 보니, 20문장 모두 맞았다. 다른 사람의 도움이 더 필요해 자동 검사는 모두 통과했지만 문장마다 앞뒤에서 들리는 ‘딸깍’ 소리는 내가 직접 듣고 찾아냈다 처음에는 원인을 잘못 추측하다가, 제가 두 번째로 잡음이 난다고 말하자 비로소 찾아냈습니다. “講對比”가 “將對比”로 발음된 것이 발음 오류에 해당하는지 아닌지 알 수 없다 방법은 Simon聊AI의 글에서 가져왔다“Codex + Excalidraw로 한마디로 영상 만들기”, 그리고 그가 오픈소스로 공개한 whiteboard-video 2026년 9월 27일