AI 에이전트 오피스 타워: 에이전트 시각화 뷰
AI 에이전트 6명이 지금 무슨 일을 하고 있는지 한눈에 보려고 회사 건물 모양의 화면을 만들었습니다. 이 글에서는 그 화면을 층별로 소개합니다.
1) 이 화면이 무엇인가
관리 화면, 그러니까 나만 보는 화면의 Organization 페이지에 있는 화면입니다. 탭은 타워와 목록(List) 두 개입니다.
지금 에이전트는 6명입니다. 콘텐츠 부서에 기획·글쓰기·검토·이미지 담당 4명, 조사 부서에 조사·분석 담당 2명이 있습니다.
이 그림은 실제 데이터로만 움직입니다. 지어낸 에이전트나 대사는 넣지 않는다는 규칙은 처음 화면을 만들 때부터 그대로 지키고 있습니다.
처음부터 이 프로젝트를 시작하면서 제일 넣고 싶었던 화면이었습니다. 제가 굳이 시키지 않아도 알아서 자기가 맡은 일을 수행하는 에이전트들의 모습을 보고 싶었습니다. 처음엔 2D 노드형 네트워크식으로 구성하다가 회사 부서로 방향을 틀었고, 부서를 만들고 나니 회사 건물 형태로도 보고 싶어서 추가로 만들었습니다. 회사 장면은 회사 건물 하나가 부서 역할을 하면서 건물끼리 소통하는 듯한 모습을 보여줬습니다.
2) 원래는 사무실과 도시, 두 화면이었다
예전에는 같은 정보를 가상 사무실과 밤 도시(캠퍼스) 두 그림으로 따로 보여 줬습니다.
두 화면을 건물 하나로 합치자는 건 제 아이디어였습니다. 층 하나가 부서 하나가 되는 구조입니다.
처음엔 합치면 데이터 사용량(Supabase에서 나가는 전송량)도 줄 거라고 생각했습니다. 그런데 따져 보니 줄지 않습니다. 데이터는 원래도 한 번만 받고, 움직임은 브라우저 안에서 그리기 때문입니다. 대신 얻은 건 화면이 하나라 관리가 쉬워지고, 부서가 늘면 층만 하나 더 쌓으면 된다는 점이었습니다.
합친 뒤 옛 사무실·도시 화면 코드는 모두 지웠습니다. 약 4,600줄이었습니다.
처음엔 Supabase egress(서버에서 사용자 쪽으로 나가는 데이터의 양) 사용량을 줄이고자 시작된 수정 작업이었습니다. 하지만 AI가 그건 영향이 없다는 의견을 내고부터는 그저 제가 생각해서 진행한 작업이 되었습니다. 하나로 합친다면 어떨까, 그러면 그냥 건물을 하나로 줄이고 그 안에서 부서들을 볼 수 있도록 바꾸면 2개의 탭을 왔다 갔다 할 필요가 없지 않을까, 란 생각으로 진행했습니다.
3) 건물 바깥(첫 화면)
아래부터 1층 로비, 2층 콘텐츠, 3층 조사, 4층 트레이딩, 5층 재무, 맨 위 AI Core 순서입니다.
층마다 이름표가 붙습니다. 층 번호, 부서, 인원, 작업 중·대기·오류 몇 명인지가 실제 값으로 표시됩니다.
제가 확인해야 할 일이 있는 층에는 노란 배지가 뜹니다. 검색 목록 승인 대기, 예산 승인 대기, 글 쓰기 전 설계서, 실패 같은 경우입니다.
아직 에이전트가 없는 부서(트레이딩, 재무)는 흐린 "준비 중" 층이라 누를 수 없습니다.
새 부서가 생기면 AI Core 바로 아래에 층이 하나 끼워집니다.
층을 누르면 같은 화면 안에서 카메라가 그 층으로 들어갑니다. 약 0.8초 걸립니다.
위 이미지를 비교해보면 회사 건물이 여러 개였던 전보다는 하나로 보이기 때문에 많이 단순해 보이고 금방 이해하기 쉽게 바뀌었습니다. 화면 오른쪽에 층마다 정보를 알려주는 표가 있고, 그 표를 누르면 해당 부서가 사무실 형태로 화면이 바뀝니다.
4) 부서 층 안
모든 부서 층이 같은 틀입니다. 업무 공간(책상 6개), 회의실(8명 탁자), 휴식실(소파·커피), 엘리베이터 홀, 복도로 구성됩니다.
상태마다 있는 곳이 다릅니다.
- 작업 중·대기·오류 상태면 자기 책상에 앉아 있습니다.
- 할 일 없음 상태면 휴식실과 복도를 돌아다닙니다. 커피 앞에 서거나 둘이 탁자에서 대화하기도 합니다.
다른 층으로 갔다 오거나 페이지를 새로고침해도 사람들이 있던 자리에서 이어서 움직입니다.
해당 부서로 들어가면 위 설명과 같이 에이전트들이 부서 안에서 활동합니다. 작업 중엔 업무공간에서 작업을 하고, 휴식 중엔 휴식실에 있습니다. 회의실은 같은 부서끼리 일을 위임할 때 같은 책상에 앉아 일을 전달하는 공간입니다.
5) 일을 넘길 때: 회의실과 엘리베이터
같은 부서끼리 일을 넘기면, 예를 들어 글쓰기 담당이 검토 담당에게 초안 검토를 맡긴다면, 두 사람이 회의실에 가서 마주 앉습니다. 회의실 위에 "회의 중 · 실제 작업 제목"과 "누가 → 누구에게"가 뜹니다. 검토면 벽 화면에 "검토 중"이라고 표시됩니다.
회의 장면은 실제로 일을 넘기는 동안만 나옵니다. 에이전트끼리 진짜로 대화하는 기능은 없고, 대화하는 척 꾸미지도 않았습니다.
다른 부서에 일을 맡기면, 예를 들어 기획 담당이 조사 담당에게 자료 조사를 맡긴다면, 맡기는 사람이 엘리베이터를 타고 그 층으로 가서 받는 사람 책상 옆에 5초쯤 머물고 돌아옵니다. 자기 책상에는 "자리 비움"이 뜹니다. 건물 바깥에서 보면 유리 엘리베이터 안에 그 사람이 보입니다.
어느 층을 보고 있든 같은 시각에는 같은 장면입니다. 시간표를 건물 전체가 같이 쓰는 구조이기 때문입니다.
제일 중요한 건 에이전트들의 작업 위임입니다. 타 부서끼리는 작업 중 서로 일을 위임할 일이 생기면 해당 부서에 있는 해당 에이전트의 자리 옆으로 이동하여 일을 전달합니다.
6) 1층 로비와 맨 위 AI Core
로비에는 북쪽 벽 화면 두 개에 "내가 확인할 것" 알림과 "지금 일하는 에이전트" 목록(누가, 무슨 작업을, 몇 분째)이 뜹니다. 목록 줄을 누르면 그 에이전트가 있는 층으로 이동합니다.
로비 안내 데스크에 사람이 하나 있는데, 이건 장식입니다. 이름표에 "장식 · 에이전트 아님"이라고 적었고, 에이전트 수에도 들어가지 않습니다.
다른 층에서는 왼쪽 위 작은 칩("알림 N · 작업 중 N → 로비")으로 로비에 바로 갈 수 있습니다.
AI Core는 가운데 빛나는 코어가 작업을 나눠 주는 실행기입니다. 대기열 몇 건, 실행 중 몇 건이 표시됩니다. 서버 랙 하나는 에이전트 한 명이고, 일하는 중일 때만 불이 깜빡입니다. 양옆 발전기 두 대는 오늘 AI 사용 예산을 얼마나 썼는지 보여줍니다. 고리 3개로 표시되는데, 80%를 넘으면 주황, 다 쓰면 빨강, 0원이면 고리가 다 꺼집니다.
1층 로비를 넣은 이유는 단순합니다. 어느 건물이든 회사든 병원이든 로비가 있습니다. 최대한 회사인 것을 표현하고 싶기도 했고, 1층부터 부서 사무실을 넣기엔 부자연스럽다고 생각해서 1층을 로비층으로 구성했습니다. AI Core를 넣은 건 미래 느낌 나는 서버실을 표현하고 싶었기 때문입니다. 저것이 제 한계였는지 저렇게 나왔습니다. 회사마다 서버실이 있으니 그걸 표현하고 싶었습니다. 하지만 저 정도로도 충분히 잘 표현되는 것 같아 만족했습니다.
7) 앞으로
법무·보안 부서를 만들 계획이 있습니다. 생기면 층이 하나씩 늘어납니다.
부서가 늘면 부서마다 팀장 에이전트가 필요할 것 같아 이건 나중에 정하려 합니다.
"실행기 정상/멈춤" 표시는 아직 없습니다.
현재 만들 부서들이 몇 개 있습니다. 그 부서들도 기능을 구현한 후 바로 추가할 계획입니다. 앞으로도 어떤 식으로 만드는지, 어떤 결과가 나왔는지 블로그 글로 자세하게 작성하겠습니다.