Claude Code를 활용한 다단계 콘텐츠 파이프라인 구축 패턴 공유

실용적 조언

브라우저 자동화 시 설정값 주입은 페이지 하이드레이션 이전인 evaluateOnNewDocument 단계에서 수행해야 한다.
TTS 모델이 정렬 정보를 제공하지 않을 경우 글자 위치와 오디오 길이를 곱해 근사치를 계산하는 방식으로 싱크를 맞출 수 있다.

섹션별 상세

모놀리식 구조 대신 단계별 독립 스크립트 구성을 권장했다. 각 단계를 별도의 .mjs 또는 .py 파일로 분리하고 입출력을 디스크에 저장함으로써 Claude가 각 단계를 개별적으로 디버깅하고 특정 단계만 재실행할 수 있도록 설계했다. 이러한 모듈화는 전체 흐름을 다시 시작하지 않고도 오류가 발생한 지점만 수정할 수 있는 유연성을 제공한다.

bash

ffmpeg -filter:a atempo=1.3 -map 0:v -map 1:a -c:v copy -c:a aac

비디오 재인코딩 없이 오디오 속도를 조절하여 비디오 길이에 맞추는 FFmpeg 명령어 예시

환경 변수와 JSON 파일을 활용한 상태 관리 패턴을 제시했다. 호출 시마다 변하는 설정값은 환경 변수로 관리하고, 이전 단계에서 생성된 데이터는 JSON 파일로 저장하여 단계 간 상태를 전달한다. Claude는 여러 스크립트를 동시에 참조할 수 있어 이러한 데이터 구조의 일관성을 유지하며 리팩터링하는 데 탁월한 성능을 보였다.

브라우저 자동화 시 하드코딩된 선택자 대신 런타임 DOM 탐색 기법을 사용했다. 섀도우 루트를 포함한 DOM을 순회하며 텍스트, aria-label, 역할을 기준으로 요소를 매칭하는 방식을 채택했다. 이는 웹 컴포넌트나 UI 디자인 변경으로 인해 정적 선택자가 깨지는 문제를 방지하고 자동화의 견고함을 높이는 결과를 가져왔다.

콘텐츠 생성과 실행 시점 데이터를 분리하여 관리하는 전략을 공유했다. 타이밍 및 스케줄 데이터를 콘텐츠와 별도의 아티팩트로 생성함으로써, 콘텐츠 수정 시 브라우저 녹화를 다시 할 필요가 없고 녹화 설정 변경 시 TTS를 재실행하지 않아도 되는 효율성을 확보했다.

용어 해설

음성 합성(TTS): — 텍스트를 인공적인 음성으로 변환하는 기술이다. 텍스트 분석, 음향 모델링, 보코더 과정을 거쳐 자연스러운 목소리를 생성하며, 본문에서는 영상 제작 파이프라인의 오디오 생성 단계로 활용된다.
DOM 자기성찰(DOM Introspection): — 브라우저의 문서 객체 모델(DOM) 구조를 실시간으로 탐색하고 분석하는 기법이다. 하드코딩된 선택자 대신 텍스트나 속성을 기반으로 요소를 찾아 웹 페이지 구조 변경에도 자동화 스크립트가 견고하게 작동하도록 돕는다.
에프에프엠펙(FFmpeg): — 디지털 오디오와 비디오를 기록, 변환, 스트리밍하는 오픈소스 멀티미디어 프레임워크이다. 파이프라인 내에서 오디오와 비디오를 결합(Muxing)하거나 인코딩 없이 스트림을 복사하는 등 미디어 처리의 핵심 도구로 사용된다.

언급된 도구

Claude Code추천

다단계 파이프라인 구축 및 다중 파일 리팩터링, 디버깅

ffmpeg추천

오디오/비디오 합성 및 속도 조절