567 ／ 582
자막이 그림을 그린다, srt-whiteboard-animation 작동 원리와 한계
강의 영상 하나를 만들려면 편집 타임라인, 자막 싱크, 애니메이션 타이밍을 따로 잡아야 한다. srt-whiteboard-animation은 이 과정을 뒤집는다. 자막 파일이 이미 있다면, 그 자막 순서 자체가 영상의 뼈대가 된다.
geeklee가 공개한 이 Claude Code 스킬은 SRT 자막을 받아 손그림 화이트보드 애니메이션 MP4로 출력한다. 저장소의 시연 예시에서는 원숭이 산 장면이 자막 순서에 따라 배경 → 주인공 → 구경꾼 순으로 차례차례 그려진다. 이것이 이 스킬의 핵심 아이디어다.
무엇을 하는 도구인가
SRT 자막 파일을 입력하면 스킬이 다음 과정을 진행한다.
- 자막을 파싱해 25~35초 분량의 장면으로 나눈다
- 장면별 선화(line art)를 생성한다
- 각 영역에
annotation.json을 붙여 시작 시간·등장 순서·자막 연관을 지정한다 - 브라우저 프리뷰 창에서 영역 위치와 시간을 수동 조정한다
- 장면별 MP4를 렌더링한 뒤 병합해 최종 영상을 출력한다
그림이 그려지는 방식은 두 단계다. 먼저 잉크 단계에서 선을 깔고, 이후 채색 단계에서 색을 채운다. 배경은 따뜻한 베이지(#F5EBD7), 선은 짙은 회색, 강조 포인트는 빨강·주황·파랑으로만 최소화한다. 깔끔한 손그림 느낌을 유지하기 위한 비주얼 기준이 명확하다.
작동 방식의 핵심 — annotation.json
자막과 그림을 연결하는 파일이 annotation.json이다. 각 요소에는 좌표(region), 등장 순서(sequence), 자막 문장(subtitle), 그리기 방향(direction), 시작 시간(startMs)이 들어간다. 두 요소가 겹칠 때는 먼저 그려지는 쪽의 protectedRegions에 나중 요소의 영역을 등록해 조기 노출을 막는다.
이 구조 덕분에 편집자가 별도로 “3초에 이 요소 등장”을 타임라인에 직접 박는 작업이 불필요하다. 자막의 시간 정보가 그대로 연출 타이밍이 된다.
단계마다 확인을 거친다는 점도 특징이다. 스토리보드 확인 → 선화 확인 → 표기(annotation) 확인 → 영역 조정 → 렌더 순서로 진행되고, 앞 단계가 확정되지 않으면 다음으로 넘어가지 않는다. 불필요한 렌더 비용을 줄이기 위한 설계다.
쓸모와 한계
쓸모 있는 경우
지식 설명 영상에서 개념이 자막 흐름에 따라 그려지는 구조는 자연스럽다. 스토리 내레이션에서 장면 요소의 순차 등장이 이야기 흐름과 일치한다. SRT 파일이 이미 있는 기존 강의 콘텐츠를 손그림 형식으로 재활용하는 것도 현실적인 용도다.
진입 장벽
SRT 파일이 먼저 있어야 한다. 자막을 손으로 제작하거나 음성 인식 결과물을 정리해야 한다는 뜻이다. Claude Code가 설치되어 있어야 하고, Python 가상환경 세팅(prepare_env.py)도 별도로 실행해야 한다. 터미널 명령어에 익숙하지 않으면 첫 실행이 만만치 않다.
연출 통제의 한계
annotation.json의 좌표와 순서는 자동으로 완성되지 않는다. 브라우저 프리뷰 창에서 직접 수정하거나 JSON을 편집해야 한다. 요소가 겹치는 장면에서는 protectedRegions를 수동으로 잡아야 한다. “자막 넣으면 영상 나온다”가 아니라 “자막 주도로 그림을 조립하는 구조적 도구”에 가깝다. 사람이 개입하는 단계가 여러 번이다.
교사·크리에이터에게 어떤 접점이 있나
수업 내용을 SRT 형식으로 미리 정리해두는 교사라면 활용 가능성이 있다. 기존에 녹화된 강의의 자막 파일이 있으면 핵심 장면만 발췌해 화이트보드 보충 영상으로 제작할 수 있다. 숏폼 플랫폼에 올릴 요약 클립을 만들 때도 자막 → 영상의 순서가 기존 편집 흐름보다 훨씬 구조적이다.
결정적인 조건은 Claude Code 환경이다. Claude.ai 웹 인터페이스나 API만으로는 사용할 수 없고, Python 명령어를 실행할 수 있는 환경이 갖춰진 사용자에게만 실용적이다. 자막 준비부터 annotation 조정까지 여러 단계의 손이 필요하다. 영상을 자동 생성하는 도구가 아니라, 자막 기반으로 영상 구조를 잡아주는 제작 보조 도구로 이해해야 한다.
출처
- geeklee/srt-whiteboard-animation — MIT License