도구가 자라기 시작했다 — 슬라이드 시스템 확장기
슬라이드 템플릿 확장 관점에서 핵심 변수를 짚어봅니다. 지난 10편에서 “내 손으로 도구를 만들었다”고 기록했다. 그런데 한 달도 채 되지 않아 그 도구가 스스로 몸집을 불리며 자라기 시작했다. 이번 글은 그 경이로운 자람의 첫 단계에 대한 기록이다. 이번 글의 핵심은 한마디로 슬라이드 템플릿 확장이다.
슬라이드 템플릿 확장에 나선 이유
처음에는 title, bullet, stat, quote라는 가장 기본적인 4종의 슬라이드만으로 영상을 만들기 시작했다. 하지만 불과 며칠 만에 명확한 한계와 부족함이 눈에 들어왔다. 주식 데이터의 변화를 직관적인 그래프로 보여주고 싶었고, 두 가지 요소를 한눈에 비교하는 카드가 필요했다. 때로는 강렬한 헤드라인 한 줄을 화면 정중앙에 박아넣고 싶기도 했다. 겨우 4종의 템플릿만 돌려 쓰다 보니 완성된 영상들이 점차 단조롭고 지루해지기 시작한 것이다.
영상의 역동성을 살리기 위해 새로운 템플릿 6개를 더 추가하기로 마음먹었다. 새로 기획한 템플릿의 종류는 다음과 같다.
- chart: 막대 및 선 그래프를 보여주는 슬라이드
- compare: 좌우 구조로 대상을 비교하는 카드
- headline: 굵고 강렬한 한 줄 강조 화면
- ticker: 화면 하단에 종목별 가격 흐름을 보여주는 자막
- timeline: 시간 순서대로 사건을 펼쳐놓는 연연표
- stat-grid: 여러 개의 핵심 숫자를 격자 형태로 배치하는 화면
이걸 예전 방식대로 하나씩 혼자 만들면 족히 일주일은 걸릴 게 뻔했다. 나는 그 지루한 시간을 견디고 싶지 않았다. 그래서 이번에는 머리를 써서 서브에이전트 3개를 동시에 띄워 병렬로 작업을 밀어붙이기로 했다.
이 구조는 지난 8편에서 다루었던 ‘분산 처리’ 이야기와 맥을 같이 한다. 전체 해야 할 일을 아주 작은 단위로 쪼개어, Sonnet 서브에이전트들에게 각각 나누어 던져주는 방식이다. 한 명의 똑똑한 Opus에게 전권을 맡기는 것보다, 명확한 지시를 받은 세 명의 Sonnet을 동시에 굴리는 게 훨씬 빠르다는 것을 지난 한 달간 뼈저리게 체감했기 때문이다.
각 서브에이전트는 단순히 코드만 짜는 게 아니라, 템플릿 코드에 들어갈 더미 데이터와 화면이 깨지지 않는지 확인하는 자동 테스트 코드까지 한 번에 만들어서 결과물을 뱉어냈다. 에이전트들이 일하는 사이사이에 내가 한 일은 오직 하나, 결과물들을 하나로 합치고 눈으로 직접 확인하는 ‘통합 및 시각 검수’뿐이었다.
실제로 내가 코드를 직접 타이핑하는 시간은 거의 0에 수렴했다. 전체적인 판을 설계하고, 에이전트들의 결과물을 검수한 뒤, 수정 사항을 다시 피드백하여 보내는 것이 내 업무의 전부였다. 서브에이전트들이 각자 맡아서 진행한 템플릿 분담 현황은 아래 표와 같다.
- 에이전트 A — 담당 템플릿: chart, ticker / 산출물: 컴포넌트 코드, 주식 데이터 파서, 테스트 툴
- 에이전트 B — 담당 템플릿: compare, headline / 산출물: 레이아웃 CSS, 반응형 그리드, 예시 데이터
- 에이전트 C — 담당 템플릿: timeline, stat-grid / 산출물: 시간축 애니메이션, 격자 정렬 스크립트
6종 템플릿 빌드 결과 리포트
병렬 에이전트 시스템을 가동하여 얻은 실제 수치와 작업 데이터는 내 예상보다 훨씬 효율적이었다.
- 6종 제작에 걸린 실제 시간: 총 6시간
- 기존 방식(순차 제작) 예상 시간: 약 24시간
- 작업 시간 단축률: 75% 감소
실제 작업을 진행하면서 아주 흥미로운 점들을 발견할 수 있었다. 우선 headline과 compare 슬라이드는 에이전트 B가 구조를 워낙 깔끔하게 잡아서 단 한 번의 수정 요청 없이 한 방에 완벽한 템플릿이 뽑혀 나왔다. 텍스트 중심의 정적 레이아웃이라 에이전트가 직관적으로 해석하기 쉬웠던 덕분이다.
반면, 가장 애를 먹었던 것은 에이전트 A가 담당한 chart 슬라이드였다. 화면 크기가 변할 때마다 막대 그래프의 높낮이가 유동적으로 변해야 했는데, 처음에는 비율이 자꾸 깨져서 출력되었다. 결국 에이전트에게 캔버스 렌더링 범위를 제한하는 조건을 주어 3번의 재수정을 거친 후에야 안정적인 그래프를 얻을 수 있었다.
또한, 서로 다른 서브에이전트들이 각자 디자인을 하다 보니 처음 합쳤을 때는 폰트 크기나 여백 같은 디자인 일관성이 미묘하게 어긋났다. 다행히 공통 스타일시트(CSS)를 상위에 끼워 넣는 방식으로 내가 직접 다듬는 작업을 거치자 전체적인 톤앤매너가 빠르게 정렬되었다. 수작업 리소스를 감안하더라도 압도적인 속도였다.
이번 실험으로 얻은 인사이트
“코드를 쓰지 못해도, 설계하고 검수할 수 있다면 시스템은 자란다.”
1. 슬라이드 10종 풀 시스템 완성
이제 총 10종의 템플릿을 보유하게 되었다. 정보 전달, 수치 비교, 타임라인 나열 등 사실상 거의 모든 형태의 정보성 영상을 이 템플릿 조합만으로 찍어낼 수 있는 강력한 무기가 생겼다.
2. 병렬 작업 패턴의 내재화
10편의 캐릭터 스튜디오에 이어 두 번째로 서브에이전트 병렬 작업법을 실전에 적용했다. 이제 일을 어떻게 쪼개고 어떤 프롬프트로 분산시켜야 에이전트들이 헤매지 않는지 그 최적의 패턴이 내 몸에 완전히 익기 시작했다.
3. AI로 내 도구를 키우는 메타 구조
가장 짜릿한 지점은 바로 이것이다. 내가 만든 초기 시스템을, 내가 부리는 AI 에이전트들을 통해 스스로 확장시키는 구조를 완성했다는 것. 개발자가 아니더라도 구조적인 설계 능력과 명확한 기준만 있다면 거대한 시스템을 얼마든지 빌드업할 수 있다는 확신이 생겼다.
이번 작업의 정체는 한마디로 슬라이드 템플릿 확장이다. 다음 단계는 명확하다. 이렇게 완성된 10종의 풀 시스템을 활용해 실제로 일주일 분량의 영상을 연속으로 돌려볼 예정이다. 그 과정에서 생성되는 데이터를 기반으로, 정말 자주 쓰이는 알짜배기 슬라이드와 만들어놓고 정작 손이 안 가는 슬라이드를 냉정하게 가려낼 것이다. 쓰이지 않는 템플릿은 과감히 접거나 다른 기능으로 통합할 생각이다. 도구도 건강하게 자라기 위해서는 적절한 다이어트와 가지치기가 필수적이니까.
이번에 도입한 병렬 에이전트 시스템에 대해 더 궁금한 점이 있으시거나, 본인의 업무 플로우에 적용해보고 싶은 부분이 있으신가요?