AI 서브에이전트 관점에서 핵심 변수를 짚어봅니다. 어느 날 여느 때처럼 유튜브 영상을 기획하고 제작하던 중이었습니다. 문득 마음 한구석에서 깊은 답답함이 밀려왔습니다. 주식 차트를 보여주며 시장 흐름을 명쾌하게 설명하고 싶었는데, 제가 직접 개발한 슬라이드 영상 시스템에는 그래프를 그릴 수 있는 슬라이드가 아예 없었던 것입니다.
결국 제가 선택할 수 있었던 유일한 방법은 텍스트로 된 글머리 기호(bullet point)를 사용해 숫자를 구질구질하게 나열하는 것뿐이었습니다. 명색이 자동화된 슬라이드 영상 제작 시스템인데, 핵심적인 시각화 도구가 빠져 있으니 매번 텍스트만 가득한 지루한 영상이 나올 수밖에 없었죠. 그날 밤, 모니터를 끄며 굳게 결심했습니다. “답답해서 안 되겠다. 당장 템플릿을 추가로 개발하자.”
한마디로 이번 작업의 주역은 AI 서브에이전트. 직접 코딩하는 대신 AI 서브에이전트 3개에게 일을 나눠주고, 저는 설계와 검수만 맡은 셈입니다.
지난 10편 글에서 “드디어 나만의 영상 자동화 도구를 만들었다”고 기쁘게 자랑했던 기억이 납니다. 그런데 신기하게도 그 글을 올린 지 채 한 달도 지나지 않아서, 저는 이 도구에 새로운 살을 붙이기 시작했습니다. 역시 도구란 한 번 만들고 끝나는 정적인 존재가 아니라, 창작자의 필요에 따라 끊임없이 성장해 나가는 생명체 같은 것인가 봅니다.
급하게 보완하기로 한 슬라이드 템플릿 6종
이번에 보완이 시급하다고 느낀 필수 템플릿 레이아웃은 총 6가지였습니다.
첫째, 막대그래프나 선그래프를 깔끔하게 그려주는 ‘chart’ 레이아웃. 둘째, 좌우 카드를 배치해 대조군을 명확히 보여주는 ‘compare’ 레이아웃. 셋째, 아주 굵고 선명한 서체로 한 줄을 강렬하게 때려 박는 ‘headline’ 레이아웃. 넷째, 뉴스 채널처럼 화면 하단이나 측면에 종목별 실시간 가격 흐름을 보여주는 ‘ticker’ 레이아웃. 다섯째, 역사적 사건이나 프로세스를 시간 순서대로 가로막대 위에 펼쳐놓는 ‘timeline’ 레이아웃. 마지막 여섯째, 여러 개의 통계 수치를 4분할이나 6분할 격자 형태로 깔끔하게 채워 넣는 ‘stat-grid’ 레이아웃까지. 이 모든 걸 완벽히 갖추고 싶었습니다.
AI 서브에이전트 병렬 시스템을 가동하다
하지만 큰 문제가 있었습니다. 이 6개의 복잡한 웹 기반 CSS/JS 슬라이드 템플릿을 하나씩 정성스레 수작업으로 만들려면 아무리 빨라도 최소 일주일은 족히 걸릴 게 뻔했습니다. 개발에 진을 다 빼고 정작 본업인 영상 기획은 뒷전이 될 것 같아 몹시 싫었습니다. 그래서 꾀를 냈습니다. 예전에 구축해 둔 ‘AI 서브에이전트 병렬 시스템’을 가동하기로 한 것입니다.
터미널을 열고, Anthropic의 Sonnet 모델 기반으로 작동하는 서브에이전트 3개를 동시에 띄웠습니다. 각 에이전트에게 쪼개진 미션을 나누어 던졌습니다.
지난 8편에서 다루었던 ‘분산 결정 아키텍처’가 실제로 어떻게 힘을 발휘하는지 증명할 수 있는 완벽한 기회였습니다. 복잡하고 무거운 전체 과업을 아주 단순하고 독립적인 단위로 잘게 쪼갠 뒤, 손넷 서브에이전트 셋에게 골고루 배분했습니다.
설계는 사람이, 구현은 에이전트가
각 에이전트는 자신에게 할당된 슬라이드의 HTML/CSS 코드, 화면을 채울 더미 데이터 세트, 그리고 깨지지 않고 완벽하게 렌더링 되는지 검증하는 자동화 테스트 스크립트까지 세트로 완성해 저에게 전달하도록 설계했습니다. 저는 그저 팔짱을 끼고 전체 설계를 감시하며, 올라오는 결과물들을 꼼꼼하게 검수하고 최종 검증을 거쳐 통합하기만 하면 되었습니다.
그렇게 진행된 프로젝트의 역할 분담은 대략 다음과 같았습니다. 서브에이전트 A는 정교한 ‘chart’ 템플릿과 시간 순대로 배치되는 ‘timeline’을 맡았고, 서브에이전트 B는 카드를 양쪽으로 대조하는 ‘compare’와 다중 격자 수치 데이터 구조인 ‘stat-grid’를 할당받았습니다. 마지막 서브에이전트 C는 심플하지만 강력한 가독성을 뿜어야 하는 ‘headline’과 무한 롤링 영역이 포함된 ‘ticker’ 구현을 완벽히 소화해 냈습니다. 이들은 각자의 영역에서 충돌 없이 훌륭한 코드를 생산해 냈습니다.
순수 작업 시간 14시간, 66% 단축
결과는 정말 놀라웠습니다. 6가지 템플릿을 설계부터 자동 테스트 빌드까지 완전히 완성하는 데 걸린 실제 순수 시간은 단 14시간이었습니다. 만약 제가 서브에이전트 없이 순차적으로 하나하나 맨땅에 코딩했다면 최소 42시간 이상은 꼬박 걸렸을 작업이었습니다. 결과적으로 전체 개발 시간을 무려 66%나 단축하는 데 성공한 셈입니다.
stat-grid는 세 번을 다시 고쳤다
물론 모든 과정이 다 순탄하지만은 않았습니다. 예를 들어 ‘stat-grid’ 슬라이드는 예상보다 개발 난이도가 꽤 높았습니다. 화면 해상도나 텍스트 길이에 따라 격자가 깨지지 않고 유연하게 배치되도록 CSS flex와 grid 비율을 잡는 부분에서 미세한 에러가 계속해서 발생했기 때문입니다. 결국 담당 에이전트에게 세 차례나 다시 고쳐 오라고 피드백을 전달하며 루프를 돌아야 했습니다. 반면, 한 줄 문구를 크게 박는 ‘headline’ 슬라이드는 정말 손쉽게 단 한 번 만에 완벽한 레이아웃이 나왔습니다. 구조 자체가 단순했기에 폰트 굵기와 정렬만 맞추면 끝나는 작업이었기 때문입니다.
가장 큰 난관은 서브에이전트들끼리 서로 소통하지 않고 제각각 작업하다 보니 발생한 ‘디자인 톤의 미묘한 어긋남’이었습니다. 미세하게 둥글기 값이 다른 border-radius나 서로 미묘하게 다른 회색조 컬러, 폰트 자간 등이 통합 단계에서 눈에 밟혔습니다. 결국 최종 검수 및 통합 단계에서 제가 직접 CSS 스타일시트를 열고 전체적인 디자인 규격을 일괄 조율하는 다듬기 작업을 거쳐야 했습니다. 이 통합 작업이 예상외로 전체 제작 시간의 30% 정도를 잡아먹었지만, 그럼에도 생산성이 어마어마하게 폭발했다는 사실은 변하지 않습니다.
이번 개발을 통해 드디어 총 10종의 고품질 슬라이드 템플릿 시스템이 완성되었습니다. 이제 웬만한 복잡한 주제의 주식 분석, 시사 정보, 트렌드 영상도 마우스 몇 번 클릭하며 슬라이드를 조합하는 것만으로 뚝딱 만들어낼 수 있는 강력한 무기를 쥐게 되었습니다.
AI 서브에이전트가 알려준 진짜 역량
두 번째로 진행된 이번 서브에이전트 병렬 실전 프로젝트를 치르며, 저는 아주 소중한 진리를 하나 깨달았습니다. AI가 대신 코딩을 해주는 시대에 인간 창작자에게 필요한 진짜 역량은 구체적인 문법을 외우는 코딩 기술이 아니라는 점입니다. 바로 전체 시스템을 쪼개어 바라볼 수 있는 ‘구조적 설계 능력’과 결과물의 퀄리티를 판단할 줄 아는 ‘안목과 검수 능력’이 진짜 무기입니다. 코드를 직접 한 줄도 짜지 못하더라도 설계의 방향성만 제대로 잡을 수 있다면, 누구나 자신만의 도구를 무한히 자라나게 만들 수 있는 메타 아키텍처의 시대가 열린 것입니다.
다음 목표는 명확합니다. 이렇게 구축된 10종의 템플릿 풀세트를 활용해 다음 한 주 동안 쉬지 않고 고화질 쇼츠와 풀영상들을 가득 뽑아내어 실전에 돌려볼 예정입니다. 실제로 제작 프로세스에서 유용하게 자주 쓰이는 슬라이드와, 멋있어 보여서 만들었지만 정작 손이 안 가고 썩어가는 슬라이드가 무엇인지 정량적 데이터로 선별해 낼 것입니다. 안 쓰는 도구는 과감하게 쳐내거나 통폐합하며, 도구의 군더더기를 걷어내는 다이어트 작업에 들어갈 계획입니다. 도구가 진정으로 자란다는 것은, 비대하게 커지기만 하는 게 아니라 사용자의 손때가 묻어 가장 가볍고 날카로운 상태로 정제되는 과정이니까요.
