AI 에이전트 팀 17명이 실제로 일하는 모습을 눈으로 볼 수 있는 가상 오피스를 만들었습니다. 저는 코드를 한 줄도 짜지 못하는 마케터이지만, 클로드 코드(Claude Code)와의 대화만으로 벡터 아이소메트릭 오피스 시뮬레이션을 완성했고, 그 결과물을 GitHub에 오픈소스로 공개했습니다. 이 글은 그 시리즈의 첫 번째 편으로, 무엇을 만들었고 왜 만들었는지를 실제 화면과 함께 정리합니다.
먼저 용어를 정리하면, AI 에이전트 팀이란 역할과 권한을 나눠 가진 여러 개의 AI가 하나의 조직처럼 협업하는 구성을 말합니다. 사람 직원 대신 리서치 담당 AI, 기획 담당 AI, 검수 담당 AI가 각자의 업무 범위 안에서 일하고 결과를 주고받는 방식입니다. 이 글에서 소개하는 가상 오피스는 그 협업 과정을 실시간 화면으로 옮긴 것이라고 이해하면 됩니다.
잘 돌아가는 AI 에이전트 팀, 그런데 아무것도 보이지 않았습니다
저는 콘텐츠 회사를 혼자 운영합니다. 리서치, 기획, 카드뉴스 제작, 블로그 작성, 검수, 발행까지 전부 AI 에이전트 팀이 분담합니다. 처음에는 에이전트 6명으로 시작했고, 그 과정은 직원 0명 콘텐츠 회사 만드는 법 (1인 AI 회사 EP.1)에 기록해 두었습니다. 지금은 CEO 역할까지 포함해 17명 규모로 늘었습니다.
그런데 운영 기간이 길어질수록 이상한 답답함이 생겼습니다. 팀은 분명히 일하고 있는데, 제 눈에는 아무것도 보이지 않았습니다. 터미널에 흘러가는 로그 몇 줄이 전부였습니다. 리서치 담당이 지금 자료를 모으는 중인지, 검수 담당이 어떤 결과물을 반려했는지, 전체 파이프라인의 어디가 병목인지 한눈에 파악할 방법이 없었습니다.
인원이 6명일 때는 그래도 머릿속으로 전체 그림이 그려졌습니다. 그런데 17명이 되자 조율 비용이 확 올라갔습니다. 누구에게 무엇을 맡겼는지 기억에 의존하게 되고, 검수에서 반려된 작업의 발견이 늦어지는 일이 반복됐습니다. 팀이 커질수록 현황판의 부재가 실질적인 운영 비용이 된 것입니다.
사람 회사라면 사무실에 가 보면 압니다. 누가 자리에서 집중하고 있는지, 누가 회의실로 이동하는지, 누가 결재 서류를 들고 대표실로 가는지 공간이 보여 줍니다. 그래서 발상을 그대로 뒤집었습니다. AI 에이전트 팀에게도 사무실을 만들어 주면 된다고 판단했습니다. 각 에이전트를 미니어처 캐릭터로 만들고, 실제 회사처럼 책상과 회의 동선이 있는 오피스에 앉히는 방식입니다.
가상 오피스에서 일어나는 일 — 지시부터 발행까지 한 화면에
완성된 화면의 흐름은 실제 회사의 하루와 같습니다. 먼저 좌측 상단 패널에서 과제를 지시합니다. 주간 콘텐츠 사이클, 긴급 카드뉴스, 성과 분석만 실행하는 프리셋 3종 중 하나를 고르고 시작 버튼을 누르면 탑다운 지시가 내려갑니다. 재생 속도는 0.5배에서 4배까지 조절할 수 있습니다.
지시가 떨어지면 매니저가 유관 캐릭터들에게 업무를 배분하고, 캐릭터들은 각자 자리로 이동해 책상에서 타이핑을 시작합니다. 리서치 두 명은 병렬로 자료를 모으고, 완료되면 서류를 들고 매니저 자리까지 걸어가 보고하는 바텀업 동선이 그대로 재현됩니다. 지시, 보고, 판정 내역은 좌측 하단 보고 피드에 실시간으로 쌓입니다.
중요한 장치는 결재입니다. 기획이 끝나 실행으로 넘어가는 순간, 우측 상단의 CEO 승인함에 결재 카드가 도착하고 파이프라인이 멈춥니다. 제가 승인하면 진행되고, 반려하면 사유와 함께 되돌아갑니다. 매번 개입하기 번거로우면 AUTO 결재 토글을 켜서 자동 통과시킬 수 있습니다. 사람 회사의 전결 규정을 그대로 옮긴 셈입니다.
품질 관문도 있습니다. 제작이 끝난 결과물은 디자인 QC 담당 iris의 톨게이트를 통과해야 합니다. iris가 불합격 판정을 내리면 차단바가 내려가고 해당 작업은 발행 단계로 넘어가지 못합니다. 콘텐츠 검수 담당 samuel의 게이트와 두 번째 CEO 승인까지 통과해야 비로소 발행 담당이 움직입니다.
캐릭터의 상태 표현도 세분화했습니다. 각 에이전트는 대기, 이동, 업무, 보고, 게이트 대기, 차단이라는 여섯 가지 상태를 가지며 상태마다 몸짓이 다릅니다. 책상에서 일할 때는 앉아서 타이핑하고, 이동할 때는 일어서서 걷고, 보고하러 갈 때는 서류를 들고 움직입니다. 멀리서 화면만 훑어도 지금 팀이 어느 국면에 있는지 읽히도록 만든 장치이고, 실제로 이 몸짓 언어 덕분에 화면을 오래 들여다보지 않아도 됩니다.
AI 에이전트 팀 17명의 조직도와 좌석 배치
이 오피스에 앉아 있는 AI 에이전트 팀의 구성은 다음과 같습니다. 실제 제 작업 폴더의 에이전트 정의 파일을 그대로 반영한 로스터입니다.
- 경영: CEO YJ, 운영 매니저
- 리서치: caleb(트렌드), matt(기업 동향) — 항상 병렬 실행
- 인사이트·기획: daniel(주제 우선순위 도출), joseph(콘텐츠 캘린더)
- 제작 7명: esther(카드뉴스), ruth(디자인·이미지), angel(유튜브 스크립트), joas(블로그), mark(스레드), john(뉴스레터), peter(페이스북)
- 품질·발행·성과: iris(디자인 QC), samuel(콘텐츠 QC), publisher(발행), luke(성과 분석)
화면에서 캐릭터를 클릭하면 인스펙터가 열리고, 그 에이전트의 역할과 사용 모델, 권한, 도구, 업무 범위, 산출물이 표시됩니다. 시뮬레이션용으로 지어낸 설정이 아니라 실제 에이전트 정의 파일의 내용을 미러링한 것이라, 이 화면 자체가 조직도 문서 역할을 합니다. 에이전트 구성을 바꾸면 오피스의 좌석과 인스펙터 내용도 함께 바뀌므로, 문서가 낡아 버리는 일이 원천적으로 없습니다.
만들고 나서 얻은 뜻밖의 효과가 하나 있습니다. 파이프라인 설계의 허점이 눈에 보이기 시작했다는 점입니다. 특정 구간에서 캐릭터들이 몰려서 대기하는 장면을 보면 그 구간이 병목이라는 뜻입니다. 로그 파일로는 며칠을 봐도 몰랐던 구조 문제가, 공간으로 옮기자 몇 분 만에 드러났습니다.
처음 실행하는 분께 권하는 사용법도 하나 적어 둡니다. 속도를 2배로 올리고 주간 콘텐츠 사이클 프리셋을 돌려 보는 것입니다. 리서치 병렬 실행부터 두 번의 결재, 두 개의 QC 게이트까지 전체 흐름이 몇 분 안에 한 바퀴 돌기 때문에, 이 오피스가 어떤 물건인지 가장 빠르게 파악할 수 있습니다.
기술은 단순하게 — 의존성 0, Node와 브라우저만으로
기술 구성은 의도적으로 단순하게 갔습니다. 서버는 Node 내장 모듈만 사용해 외부 의존성이 0개이고, 화면은 게임 엔진 없이 DOM만으로 아이소메트릭 오피스를 그립니다. 저장소를 받아 npm start 한 줄이면 localhost 에서 바로 실행됩니다. 설치할 라이브러리가 하나도 없다는 점은 비개발자에게 생각보다 큰 장점이었습니다. 버전 충돌이나 빌드 오류를 겪을 일 자체가 없기 때문입니다.
내부 동작은 이벤트 방식입니다. 서버가 유일한 진실 역할을 하며, 태스크 생성, 에이전트 상태 변화, 이동, 보고, 결재 요청, QC 판정 같은 모든 사건을 정해진 이벤트 스키마로 브로드캐스트하고 브라우저는 SSE로 받아 그립니다. 재연결 복원도 스키마에 포함했습니다. 브라우저를 새로 열면 서버가 현재 상태 전체를 스냅샷으로 먼저 보내 주기 때문에, 중간에 접속해도 오피스는 지금 모습 그대로 이어집니다.
이 구조를 택한 이유는 확장 때문입니다. 지금은 데모 시뮬레이션이지만, 같은 스키마로 외부에서 이벤트를 주입하는 API가 이미 열려 있습니다. 다음 단계에서는 실제 에이전트 실행 로그를 이 API로 흘려 넣어, 시뮬레이션이 아니라 진짜 작업 현황을 실시간 중계하는 관제실로 바꿀 계획입니다. 화면을 그리는 쪽은 이벤트가 데모에서 왔는지 실제 실행에서 왔는지 구분할 필요가 없으므로, 연동 단계에서 화면 코드를 다시 만들 일이 없습니다.
전체 코드는 GitHub 저장소 aitrendmaster/atm-office에 공개했습니다. 캐릭터 스프라이트가 없어도 CSS 폴백 캐릭터로 완전히 동작하도록 만들어 두었으니, 받아서 바로 실행해 볼 수 있습니다.
마치며 — 보이게 만들면 관리할 수 있습니다
AI 에이전트 팀을 운영하는 분들께 이 프로젝트가 던지는 메시지는 하나입니다. 보이지 않는 팀은 관리하기 어렵고, 보이게 만드는 순간 운영의 질이 달라진다는 것입니다. 저는 이 가상 오피스를 만든 뒤로 파이프라인 점검 시간이 눈에 띄게 줄었고, 무엇보다 제 AI 에이전트 팀을 회사라는 실체로 인식하게 되었습니다.
직접 확인하는 방법은 간단합니다. 저장소를 클론하고 npm start를 입력한 뒤 브라우저에서 localhost:3777을 열면 됩니다. 별도 설치 과정이 없으므로 Node만 깔려 있다면 1분 안에 17명이 일하는 사무실을 구경할 수 있습니다.
다음 편 예고 — EP.2에서는 이 오피스를 만들 때 클로드 코드에 실제로 입력한 프롬프트를 첫 질문부터 순서 그대로 공개합니다.
작성자 소개
