motion-broll로 대사 연동 그래픽 만들기: 타이밍 설계와 모션 하네스의 역할

motion-broll은 원본 영상과 시간 정보가 담긴 SRT·VTT 파일을 넣으면, 대사에 맞춰 도형·카드·터미널·차트가 변하는 그래픽 클립을 만들어 주는 공개 스킬입니다. 말하는 인물 영상 사이에 끼워 넣는 보조 화면, 즉 B-roll을 만드는 도구예요. 대사에 나오는 대상과 행동을 눈에 보이는 장면으로 바꿔 주는 것이 이 스킬의 역할이고요.

Barty-Bart의 motion-graphics 저장소에 들어 있으며, 기본 스타일은 도형 하나가 여러 형태로 이어서 바뀌는 연속 변형입니다. 커서의 클릭과 드래그도 화면 변화를 이끄는 장치로 씁니다. 단어를 화면에 띄우는 데서 끝내지 않고, 설명이 흘러가는 순서를 그래픽으로 옮기는 쪽에 초점이 맞춰져 있어요.

대사와 그래픽을 맞출 때 먼저 볼 것은 발화 시점

대사 연동은 말 속에 등장하는 대상과 행동을 화면의 상태 변화로 바꾸는 작업이에요. 무엇을 보여 줄지만 정해서는 절반에 그치고, 그 표현이 들리는 순간 화면이 어떻게 달라져야 하는지까지 설계해야 합니다. 그래서 모션을 얼마나 화려하게 만들지보다 입력된 발화 시점부터 살펴보시길 권합니다.

시간을 계산할 때 가장 먼저 구분해야 할 것은 원본 영상의 시간축과 개별 클립의 시간축입니다.

클립 내부 시간 = 단어 시점 − 클립 시작점

예를 들어 원본 영상 12초에 나오는 단어에 맞춰 카드를 펼치려 하는데 클립이 10초부터 시작한다면, 카드가 펼쳐질 시점은 클립 안에서 2초예요. 원본 시점을 그대로 넣으면 변화가 엉뚱한 위치에 놓입니다.

흔히 헷갈리는 부분은 입력 시점의 정확도와 렌더링의 재현성을 같은 것으로 보는 경우입니다. SRT·VTT 구간에서 뽑아낸 단어별 시점은 어디까지나 추정치예요. 렌더링 엔진은 입력받은 시간에 해당하는 프레임을 만들어 낼 뿐이라서, 같은 프레임을 몇 번이고 똑같이 생성할 수 있어도 입력 시점 자체가 틀렸다면 발화와 화면은 어긋납니다. 공식 지침이 주요 변화를 구간의 첫 단어나 마지막 단어에 두도록 제안하는 것도 이 추정 오차를 다루기 위해서죠.

설치 요건부터 클립 렌더링까지의 순서

motion-broll 공식 README에 적힌 실행 환경은 Node.js 18 이상, Python 3, 그리고 ProRes 인코더가 포함된 ffmpeg입니다. 처음 설정할 때는 Playwright와 Chromium을 로컬 motion/ 폴더에 설치해요. 저장소 설치 명령은 npx skills add Barty-Bart/motion-graphics이고, 설치 도중에 필요한 스킬을 고르게 됩니다. 이 요구사항은 설치 전에 환경을 점검하는 기준으로만 삼으세요. 최신 의존성 전체와의 호환성이 검증됐다는 뜻으로 받아들이지 않는 편이 적절합니다.

공식 제작 지침이 안내하는 작업 순서는 아래와 같아요.

1. 영상 검사: 화면 구성과 그래픽을 배치할 공간을 살핍니다.
2. 단어 시점 추정: 시간 정보가 있는 SRT·VTT를 바탕으로 대사와 변화 시점을 연결합니다.
3. 클립 계획 승인: 전체 화면 전환, 빈 공간의 투명 패널, 그래픽 생략 중 적절한 방식을 정합니다.
4. HTML 제작: 승인된 계획에 따라 그래픽과 시간별 상태 변화를 구현합니다.
5. 정지 화면 검사: 주요 시점의 화면을 확인해 겹침과 잘림을 수정합니다.
6. 렌더링·미리보기: 클립을 출력하고 비교 페이지와 타이밍 문서로 결과를 검토합니다.

계획 단계에서 먼저 따져 볼 것은 이 구간에 그래픽을 왜 넣느냐입니다. 설명을 화면 전체로 보여 줘야 한다면 전체 화면을, 인물을 그대로 두면서 보강할 빈 공간이 있다면 투명 패널을 고를 수 있어요. 원본 화면만으로 충분히 전달되는 구간이라면 그래픽을 빼도 됩니다. 생략도 계획 단계의 정식 선택지라는 점을 기억해 두세요.

출력 형식은 전체 화면 클립이 MP4, 투명 패널이 알파 채널을 포함한 ProRes 4444 MOV입니다. 최종 편집에서는 이 클립들을 하나씩 편집기에 올려 배치하면 돼요.

정지 화면으로 보는 것과 재생해서 봐야 하는 것

정지 화면 검사는 글자 겹침, 화면 밖으로 잘린 요소, 읽기 불편한 배치를 잡아내는 데 알맞습니다. 상태가 바뀌는 주요 시점을 골라 봐야 전환 중에만 드러나는 문제까지 놓치지 않을 수 있어요. 한글 폰트가 의도대로 출력되는지도 이때 같이 확인하세요.

발화와 그래픽의 호흡은 소리를 켜고 재생해 봐야 판단할 수 있습니다.

정지 화면이 아무리 깔끔해도 설명보다 변화가 앞서거나 늦으면 이해를 방해할 수 있어요. 이럴 때 효과를 더 얹고 싶어지기 쉽지만, 입력 시점과 클립 시작점부터 다시 확인하는 순서를 권합니다. 앞에서 본 시간축 계산이나 추정 시점 자체가 어긋났을 수 있기 때문이에요. 실제 렌더링에 걸리는 시간도 각자 작업 환경에서 확인해 제작 일정에 반영해 두는 편이 좋습니다.

위 동작과 요구사항은 2026-10-29 기준 공개 문서를 바탕으로 정리한 내용입니다. 문서에 나오는 ±0.2초 설명을 한국어 대사에서 검증된 정확도로 해석하지 마시고, 실제 발화에 맞춰 변화 시점을 조정하세요.