
코드베이스가 가이드라인이었다
요약
에이전트에게 프롬프트 대신 코드베이스를 제공하여 디자인 철학이 반영된 비디오를 생성한 사례를 소개합니다. 에이전트가 코드 내 디자인 토큰과 시스템을 스스로 학습하여 창의적인 결과물을 도출하는 과정을 다룹니다.
핵심 포인트
- 프롬프트 대신 코드베이스 자체가 에이전트의 가이드라인 역할을 수행함
- 에이전트가 코드 내 디자인 시스템(Observe, Focus 등)을 스스로 발견하여 적용
- 디자인 토큰을 활용해 시각적 편차를 최소화한 결정론적 비디오 렌더링 구현
- 에이전트 관리의 핵심은 프롬프트 작성이 아닌 입력값(코드베이스) 준비에 있음
저는 agent에게 Argus의 히어로 비디오를 만들도록 요청했습니다. 저는 codebase, 랜딩 페이지, 문서를 제공했습니다. 창의적인 방향성(creative direction), 샷 리스트(shot list), 무드 보드(mood board), 또는 스크립트는 주지 않았습니다. 그저 '이걸 작동시켜라'라고 말했을 뿐입니다.
그것은 작동시켰습니다. 결과물은 기술적으로 정확했습니다. 올바른 치수, 적절한 지속 시간, 음악을 믹싱했고 ffprobe로 증명할 수 있었습니다. C-B 학점을 받았습니다. 출판되지 않고 보관되었습니다.
이것은 실패가 아닙니다. 이것은 입력값의 한계치(ceiling)입니다.
agent가 찾아낸 것
agent는 제가 언급하지 않았던 어휘인 Observe, Focus, Radiate, Bloom을 중심으로 구성된 네 개의 기둥 클립으로 돌아왔습니다. 이 단어들은 Argus 디자인 시스템에 존재하며 — 프로젝트 코드 내에서는 실제 디자인 방향성으로 공식화되어 있습니다. agent가 이것들을 지어낸 것이 아닙니다. codebase를 읽고, 그 안에 놓여 있던 철학을 발견했으며, 그것을 사용하여 비디오를 구성했습니다.
저는 그것에게 그렇게 하라고 말하지 않았습니다. 코드가 그것에게 말한 것입니다.

이것은 제가 평소에 글을 쓰는 것과는 다릅니다. A Hundred Commits and a Nap에서는 AI pair-programming에 대해, 그리고 I Stopped Prompting AI and Started Managing It에서는 agentic work가 실행되기 전에 입력값을 준비하는 것이 얼마나 많은 작업을 포함하는지에 대해 이야기했습니다. 이 비디오 프로젝트는 그 아이디어를 더 발전시켰습니다. 핸드오프(handoff)는 프롬프트가 아니었습니다. 그것은 codebase 자체였습니다.
실제로 출시된 것
스택은 작동했습니다. HyperFrames는 결정론적이고(deterministic) 탐색이 안전한(seek-safe) 타임라인 위에서 HTML로부터 비디오를 렌더링합니다. 즉, 에이전트가 에디터에 있는 인간 없이도 코드로 구성을 작성(author), 린트(lint), 그리고 재렌더링(re-render)할 수 있다는 뜻입니다. 브랜드에 고정된 디자인 토큰(design tokens) 덕분에 5개의 클립 전반에 걸쳐 시각적 편차(visual drift)가 거의 제로에 가까웠습니다. 전체 렌더링을 확정하기 전에 승인된 15초짜리 바이브 릴(vibe reel) 덕분에 최소 한 번의 긴 렌더링 낭비를 줄일 수 있었으며, 이는 향후 모든 비디오 작업에서 영구적인 게이트(gate)가 되어야 합니다. 로컬 스택은 오디오가 진정으로 멀티플렉싱(muxed)된 실제 MP4를 생성했습니다. ffprobe로 증명 가능합니다. 단순한 느낌(vibes)이 아닙니다.
80초 분량의 히어로 비디오(hero video)는 솔직히 C-B 등급을 받았습니다. 기술적으로 정확한 것과 플래그십(flagship) 등급 사이의 간극은 취향, 페이싱(pacing), 서사적 타격감(narrative punch)에 달려 있습니다. 이는 정확히 프롬프트로 명시하기 가장 어렵고, 스크립트만으로는 검증이 불가능한 특성들입니다. 입력값이 창의적으로 의미 있는 무언가를 만들어내기에 충분히 풍부하지 않았습니다. "이게 작동하게 만들어라" 이상의 디렉션이 없었습니다. 이것은 파이프라인에 대한 비난이 아닙니다. 인간이든 에이전트든 누구에게도 작업할 수 있는 충분한 재료를 주지 않았을 때 발생하는 현상입니다.
브리프(brief)의 문제
저는 이 프로젝트들에서 스스로를 크리에이티브 디렉터(creative director)라고 생각합니다. 어떤 창의적인 요소들이 아직 시도되지 않았는지, 파이프라인이 돌아가기 전에 나 혹은 다른 소스로부터 어떤 입력이 필요한지를 묻는 사람 말입니다. 에이전트는 그 질문들에 답이 나온 후에 실행합니다. 에이전트는 창의적인 의미를 제공할 수 없습니다. 제가 할 수 있습니다.
다음 단계가 이미 대기 중입니다. 초 단위의 비트(beats). 보이스오버(voiceover) 스크립트. 스토리 아크(story arc). 촬영 감독에게 샷 리스트(shot list)를 넘기기 전 인간 감독이 준비할 법한 풍부하고 구체적인 브리프(brief) 말입니다.
하지만 이 첫 번째 패스(pass)를 통해 발견한 것은 단순히 "더 나은 브리프를 작성하라"는 것보다 더 기묘하고 흥미롭습니다. 만약 에이전트가 코드베이스(codebase)를 읽고 그곳에 이미 존재하는 디자인 어휘(design vocabulary)를 찾아내어 — 요청받지 않아도 그것을 사용하여 비디오를 구조화한다면 — 코드베이스에 무엇이 들어있는지가 제가 생각했던 것보다 더 중요해집니다. 구조화된 데이터와 디자인 토큰, 그리고 문서화된 어휘로 유지되는 프로젝트의 바이브(vibe)는 소스 코드 자체만큼이나 중요해지고 있습니다.
Argus의 위치
이것이 바로 Argus가 구축된 목적입니다. 스케치, 무드 보드 (mood boards), 참조 사진, 스크린샷 등 여러분의 미디어 자산 (media assets)을 입력하면, 작업 중인 대상의 전반적인 특성인 지배적인 색상, 분위기 (moods), 사용 사례 (use cases), 질감 (textures), 태그 (tags)에 대한 표현력이 풍부한 구조화된 데이터 (structured data)를 돌려받을 수 있습니다. 이 메타데이터 (metadata)는 에이전트 (agent)가 읽을 수 있는 디자인 언어가 됩니다. 에이전트가 여러분의 프로젝트 미학적 방향을 추측하는 대신, 여러분이 이미 구축해 놓은 신뢰할 수 있는 원천 (source of truth)으로부터 이를 읽어올 수 있게 됩니다.
코드베이스 (codebase)에서 나타난 Observe/Focus/Radiate/Bloom 구조는 그 아이디어에 대한 개념 증명 (proof of concept)이었습니다. 태그가 달리고, 설명이 붙으며, 정리된 더 풍부한 Argus 미디어 카탈로그 (media catalog)가 있었다면, 에이전트가 단 한 프레임이라도 그리기 전에 활용할 수 있는 정보가 훨씬 더 많았을 것입니다. 이것이 바로 플라이휠 (flywheel) 효과입니다. 자산 (assets)에 초기에 더 많은 의미를 부여할수록, 에이전트가 이를 활용하여 결과물을 만들어낼 때 더욱 일관성 있는 출력이 나옵니다.
첫 번째 시도 전 해야 할 일
에이전트가 작성하는 비디오 (agent-authored video)를 시도해보고 싶다면, 정지 이미지부터 시작하세요. 스케치, 무드 보드 (mood boards), 참조 사진, 스크린샷 등을 준비하십시오. 이를 Argus에 입력하고, 여러분이 실제로 무엇을 작업하고 있는지 Argus가 알려주게 하세요. 움직이는 결과물을 만들기 전에, 해당 자료로부터 디자인 브리프 (design brief)를 생성하십시오. 그것이 여러분이 만드는 모든 것에서 일관된 룩 (look)을 발전시키는 방법이며, 에이전트에게 도달할 수 있는 실질적인 목표를 제공하는 방법입니다.
브리프 (brief)가 없는 에이전트는 최선을 다해 기술적으로는 정확한 무언가를 만들어낼 것입니다. 하지만 미디어 자체로부터 구축된 브리프를 제공한다면, 실제로 여러분의 것과 같다고 느껴지는 무언가를 보기 시작할 것입니다.
다음 시도 후에 더 많은 소식을 전하겠습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기