FFmpeg에서 SVG를 직접 렌더링한다 — drawvg 필터의 등장

영상 처리 파이프라인에 벡터 그래픽을 끼워넣다

FFmpeg는 미디어 처리의 스위스 아미 나이프로 불리는 도구입니다. 영상 인코딩, 디코딩, 트랜스코딩, 스트리밍까지 거의 모든 멀티미디어 작업을 커맨드라인에서 처리할 수 있죠. 그런데 한 가지 아쉬운 점이 있었습니다. 영상 위에 벡터 기반의 그래픽을 그리는 것이 상당히 번거로웠다는 것입니다. 텍스트를 넣으려면 drawtext 필터를 쓸 수 있지만, 복잡한 도형이나 애니메이션을 넣으려면 별도의 도구로 프레임을 미리 렌더링해서 합성해야 했습니다.

drawvg는 이 문제를 정면으로 해결하는 FFmpeg 필터입니다. SVG(Scalable Vector Graphics)를 FFmpeg 필터 체인 안에서 직접 렌더링할 수 있게 해줍니다. 즉, 별도의 전처리 없이 FFmpeg 명령어 하나로 영상에 벡터 그래픽 오버레이를 추가하고, 시간에 따라 변하는 애니메이션까지 표현할 수 있습니다.

어떻게 동작하는가

drawvg 필터의 핵심 아이디어는 SVG 템플릿을 프레임별로 동적 렌더링하는 것입니다. SVG 파일 안에 FFmpeg의 표현식(expression)을 삽입할 수 있으며, 이 표현식은 각 프레임이 처리될 때마다 평가됩니다. 예를 들어 현재 프레임 번호(n), 타임스탬프(t), 영상의 가로·세로 크기(w, h) 등의 변수를 SVG 안에서 참조할 수 있습니다.

실질적으로 이것이 무엇을 의미하는지 예를 들어보겠습니다. 영상 위에 시간이 흐르면서 위치가 바뀌는 원을 그리고 싶다면, SVG 파일에서 원의 cx(중심 x좌표) 속성에 {expr: sin(t) * 100 + w/2}처럼 FFmpeg 표현식을 넣을 수 있습니다. 그러면 매 프레임마다 sin(t) 값이 계산되어 원이 좌우로 흔들리는 애니메이션이 만들어집니다. 이 모든 것이 FFmpeg 파이프라인 안에서 실시간으로 일어납니다.

SVG 렌더링에는 resvg 라이브러리가 사용됩니다. resvg는 Rust로 작성된 고성능 SVG 렌더링 엔진으로, 브라우저 없이도 SVG를 래스터 이미지로 변환할 수 있습니다. 이 선택 덕분에 drawvg는 외부 브라우저 엔진이나 무거운 렌더링 런타임에 의존하지 않고도 대부분의 SVG 기능을 지원합니다. 그라디언트, 클리핑, 필터 등 SVG의 주요 기능이 동작합니다.

기존에는 어떻게 했나

FFmpeg에서 영상에 그래픽을 합성하려면 기존에 몇 가지 방법이 있었습니다. 가장 기본적인 것은 drawtext 필터로 텍스트를 오버레이하는 것인데, 이것은 텍스트에 한정됩니다. 도형을 그리려면 drawbox로 사각형을 그리거나, 이미지 파일을 overlay 필터로 합성하는 방식을 썼습니다.

더 복잡한 그래픽이 필요하면 보통 Python 스크립트로 매 프레임을 PIL이나 Cairo로 렌더링하고, 이를 pipe로 FFmpeg에 전달하는 방식을 사용했습니다. 이 방법은 유연하지만 파이프라인이 복잡해지고, 프레임별 이미지 생성 오버헤드가 크며, 디버깅도 쉽지 않습니다. 또 다른 방법으로는 After Effects나 Motion Graphics 도구에서 미리 알파 채널이 포함된 영상을 만들어 합성하는 것이 있지만, 이는 자동화된 파이프라인에 적합하지 않습니다.

drawvg의 장점은 이 모든 과정을 하나의 FFmpeg 필터 체인으로 통합한다는 것입니다. SVG라는 표준 포맷을 사용하기 때문에 디자이너가 Figma나 Inkscape에서 작업한 벡터 그래픽을 거의 그대로 가져올 수 있고, FFmpeg 표현식으로 동적 파라미터만 추가하면 됩니다.

활용 시나리오

이 필터가 특히 유용한 분야는 자동화된 영상 생성 파이프라인입니다. 예를 들어 데이터 대시보드 영상을 자동 생성하는 경우, 실시간 데이터를 SVG 차트로 표현하고 이를 배경 영상 위에 합성할 수 있습니다. 유튜브 채널이나 소셜 미디어 콘텐츠를 대량 생산하는 워크플로우에서도 템플릿 기반의 자막이나 로고 애니메이션을 넣는 데 활용할 수 있습니다.

라이브 스트리밍 오버레이도 흥미로운 사용처입니다. OBS에서 브라우저 소스를 사용하는 대신, FFmpeg 스트리밍 파이프라인에서 직접 오버레이를 렌더링할 수 있습니다. 서버 사이드에서 스트림을 처리하는 경우에 특히 유용합니다.

기술 프레젠테이션이나 교육 영상에서 코드 실행 결과를 시각화하거나, 알고리즘 동작을 애니메이션으로 보여주는 것도 가능합니다. SVG 템플릿에 프레임 번호 기반의 표현식을 넣으면, 단계별로 진행되는 시각화를 FFmpeg 명령어 하나로 생성할 수 있습니다.

한국 개발자에게 주는 시사점

국내에서도 숏폼 콘텐츠 자동 생성, 커머스 영상 템플릿 기반 대량 생산, 교육 콘텐츠 제작 등의 영역에서 FFmpeg 파이프라인을 활용하는 사례가 늘고 있습니다. drawvg 필터는 이런 파이프라인에서 그래픽 합성의 진입 장벽을 크게 낮춰줄 수 있습니다. 특히 별도의 렌더링 서버나 브라우저 인스턴스 없이 SVG를 처리할 수 있다는 점은 서버 리소스 관리 측면에서도 매력적입니다.

다만 현재 drawvg는 FFmpeg의 공식 배포판에 포함된 것이 아니라 별도로 빌드해야 하는 외부 필터입니다. 프로덕션에 바로 투입하기보다는 프로토타이핑이나 내부 도구 용도로 먼저 시도해보는 것이 현실적입니다. Rust 기반의 resvg를 사용하므로 빌드 환경에 Rust 툴체인이 필요하다는 점도 참고하세요.

정리

FFmpeg 필터 체인 안에서 SVG를 직접 렌더링하는 drawvg는 영상 자동화 파이프라인의 새로운 가능성을 열어줍니다. 영상 위에 동적인 벡터 그래픽을 올려야 하는 작업을 하고 계신다면, 한번 살펴볼 가치가 있습니다. 여러분의 영상 처리 파이프라인에서 그래픽 합성은 어떤 방식으로 하고 계신가요?