Claude 에이전트 4개로 구축한 브라우저 기반 오디오-비디오 편집기.

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

Claude 에이전트 4개를 독립적으로 활용해 오디오-비디오 편집기를 구축했다. 12개 측정 지표를 기준으로 블라인드 토너먼트 평가를 수행하여 최적의 빌드를 선정하고, 서버 없이 브라우저 내에서 오디오 분석부터 렌더링까지 처리하는 구조를 구현했다. 특히 `drawImage` 오프셋 최적화 등을 통해 CLS와 프레임 타임 등 성능 지표를 크게 개선했으며, 측정 불가능한 데이터는 추측하지 않고 불확실성을 노출하는 엄격한 설계 원칙을 적용했다.

실용적 조언

복잡한 기능 구현 시 에이전트를 독립적으로 여러 개 실행하고 블라인드 평가를 거치면 품질을 개선할 수 있다.
브라우저 기반 렌더링 시 `drawImage` 오프셋 등 사소한 렌더링 최적화가 성능에 큰 영향을 미칠 수 있다.

섹션별 상세

Claude 에이전트 4개를 독립적으로 운영하여 오디오-비디오 편집기를 구축했다.

블라인드 스크린샷 토너먼트 방식을 통해 에이전트 결과물을 평가하고 최적의 빌드를 선정했다.

서버나 빌드 단계 없이 브라우저 내에서 오디오 분석과 렌더링을 처리하는 구조를 구현했다.

성능 최적화 결과 CLS 0.422에서 0.0099로, 데스크톱 프레임 타임 33.4ms에서 16.7ms로 개선했다.

용어 해설

Cumulative Layout Shift(CLS): — 웹 페이지의 시각적 안정성을 측정하는 지표로, 페이지 로딩 중 요소가 예기치 않게 이동하는 정도를 나타낸다. 값이 낮을수록 시각적 안정성이 높다.
스펙트럼 플럭스 온셋 검출(Spectral-flux onset detection): — 오디오 신호의 주파수 스펙트럼 변화율을 측정하여 음의 시작점(onset)을 감지하는 기술이다. 비트 트래킹의 기초가 된다.
자기상관(Autocorrelation): — 신호의 시간 지연에 따른 유사성을 측정하는 통계적 기법이다. 오디오 데이터에서 템포를 추정하는 데 사용된다.

코드 예제

text

locked brief + 12 measurable dimensions → 4 parallel builds in isolated directories → blind screenshot tournament + one critic per dimension → every dimension must score ≥8; averages don’t count → repeat for 4 rounds

Claude 에이전트 4개를 활용한 빌드 및 평가 루프 구조

text

audio → in-browser analysis → beat grid + sections → shot list → cut.json → Remotion render

오디오-비디오 편집기 데이터 처리 파이프라인

언급된 도구

Claude추천

에이전트 기반 빌드 및 코드 작성

Remotion추천

비디오 렌더링