📌 요즘 쓰레드에 AI 에이전트들이 일하는 모습을 사무실 그림으로 띄워 놓는 게 유행이더라고요. 저도 뒷북이지만 따라 만들어 봤습니다. 1층짜리로 시작해서, 움직이게 만들고, 좁아서 4층 건물로 나누고, 물건마다 화면을 따로 붙인 순서대로 적었어요. 결론만 궁금하시면 맨 아래 최종 요약으로 가셔도 돼요.
시작은 쓰레드에서 본 글 하나였어요. AI 세션을 열 개 넘게 돌리다 보면 누가 뭘 하는지 모르겠다며, 세션 하나를 직원 한 명과 책상 하나로 바꿔 층별 사무실 건물 그림에 띄워 놓은 글이었어요. 왼쪽엔 층 안내, 오른쪽엔 사람 목록과 활동 기록이 있고, 책상마다 일하는 중인지 확인을 기다리는지가 캐릭터 자세로 보이더라고요. 제목부터 "대히트작 사무실 2탄"이었으니, 저는 한참 늦게 본 셈이죠.
🔗 참고한 글: 바이브형(@maroxixi) 「대히트작 사무실 2탄 - 활용도 추가」 → 쓰레드에서 보기
세션 하나 = 직원 한 명 = 책상 하나, 층별 건물 그림에 상태를 띄우는 방식을 이 글에서 보고 따라 했어요.
찾아보니 이런 게 한둘이 아니었어요. GitHub에도 AI 에이전트를 픽셀 사무실에서 걷고 타이핑하게 보여 주는 Pixel Agents(제가 찾아본 10/28 기준 별 약 9.9천 개) 같은 프로젝트가 여럿 있더라고요. 다들 이미 하고 있었던 거죠.
저도 맥미니에서 AI 에이전트 여러 개를 작은 회사처럼 굴리고 있어요. 블로그 담당, 주식분석기 담당, 웹 작업 담당이 따로 있고, 제가 정해야 할 일은 "결재"로 올라와요. 그동안은 이걸 위젯의 숫자 현황판으로 봤어요. 결재 대기 2, 작업 중 3, 막힘 1 같은 식으로요.
📎 궁금하신 분들은 지난 「토큰 0으로 AI 사용량 보는 위젯 만들기｜스테이터스 위젯 제작기 1편」 · 「폰으로 보고, 알림 받고, 맥미니 켜면 저절로｜스테이터스 위젯 제작기 2편」 포스팅을 참고하세요 → 1편 보러 가기 · 2편 보러 가기
숫자는 정확한데 누가 지금 일하고 있고 누가 제 답을 기다리는지가 한눈에 안 들어왔어요. 그래서 그 글 링크를 Claude에게 주면서 말했어요. "나도 이 링크처럼 AI 서브 에이전트 사무실을 만들고 싶은데, 대신 맥미니에서만 동작하도록. 모양이나 그래픽은 내 취향대로 함께 고쳐 가면서 만들자. 일단 계획부터."
1. 1층짜리 사무실: 팀은 방, 파트는 자리
처음 시안은 다 평면(2D) 그림으로 나왔어요. "내가 준 링크처럼 디자인하면 안 돼? 너가 준 예시는 다 2D 그래픽이네"라고 했더니 입체 시안을 처음부터 다시 만들었고요. 세 가지 안(참고한 글 같은 입체 일러스트, 실시간 3D, 층별 건물 단면) 중에 참고한 글처럼 입체 일러스트로 시작했어요.
규칙은 단순해요.
- 🏢 팀 = 방, 파트 = 직원과 자리: 블로그 파트는 마케팅팀 방의 한 자리, 위젯 파트는 개발팀 방의 한 자리, 이런 식이에요.
- 🤖 돌고 있는 서브에이전트 = 직원 옆 로봇: 한 직원 옆에 최대 3대까지 보여요.
- 🚦 상태는 기록으로만 판단: 작업 중, 결재 대기, 막힘, 대기, 쉬는 중 다섯 가지예요. 마지막 활동이 2분 안이면 작업 중, 결재가 하나라도 걸려 있으면 결재 대기, 이렇게 이미 있는 작업 기록과 현황판 숫자만 보고 정해요.
그림은 Codex의 이미지 생성 기능으로 만들었어요. 사람 없는 사무실 배경 한 장과 직원 스티커(앉아서 일함, 손 들고 기다림 같은 다섯 자세)를 따로 만들고, 화면에서는 배경 위에 스티커와 이름표를 겹쳐 그려요. 맥미니 위젯 앱의 🏢 버튼을 누르면 별도 창으로 뜨고, 5초마다 새 기록을 읽어요.
💡 맥미니에서만: 위젯 2편에서 아이폰으로도 볼 수 있게 열어 뒀는데, 사무실 화면은 일부러 맥미니 안에서만 열리게 했어요. 같은 주소로 아이폰(tailnet)에서 들어가면 404가 나는 것까지 확인했어요. (나중에 사무실을 위젯 첫 화면으로 쓰게 되면서 아이폰에서도 열리게 바꿨어요. 대신 아이폰에서는 직원이 늘 기본 사람 모습으로 나와요.)
2. 멈춘 그림 말고, 움직이게
사무실이 뜨니까 이번엔 가만히 있는 게 아쉬웠어요. "캐릭터들이 실시간으로 움직여야 돼. 멈춰 있는 게 아니고. 맡은 역할에 따라 이동도 하고 자기 할 일도 하고."
- 📄 결재가 새로 생기면: 그 직원이 서류를 들고 본부장실 앞까지 걸어가서 3초 있다가 돌아와요. 결재 개수가 아니라 결재 번호(D###)가 새로 생겼는지로 판단해요. 개수로 보면 하나 답하고 하나 새로 올라온 날엔 아무 일도 없는 것처럼 보이거든요.
- 🖥️ 예약 게시가 실제로 실행되면: 서버실로 전달하러 가고, 웹운영 직원이 30초 동안 타이핑해요. 시각만 지난 건 사건으로 치지 않아요.
- ☕ 쉬는 직원: 라운지 소파로 가요. 물 마시러 가거나 기지개 켜는 동작은 20~40분에 한 번씩 넣었는데, 이건 진짜 사건이 아니라 분위기용이라고 화면에 따로 표시해요.
그림은 AI가, 움직임은 코드가
걷는 모습은 앞모습·뒷모습 4장씩을 이미지 생성으로 만들어서 15픽셀 움직일 때마다 바꿔 끼워요. 그런데 타이핑하거나 고민하는 동작까지 그림으로 만들면, 생성한 그림끼리 얼굴이나 옷 모양이 조금씩 달라서 깜빡일 때마다 흔들려 보여요. 그래서 그런 작은 동작은 같은 그림을 코드로 살짝 움직이게 했어요.
움직임에는 조건을 하나 걸었어요. AI 모델은 한 번도 부르지 않고, 서버에 새 기능도 안 붙이고, 이미 있는 기록만 읽어서 누가 어디로 갈지 정하기. 한 장면 그리는 데 0.4ms, 초당 30장으로 돌아가는 걸 화면 없는 브라우저로 쟀어요.
3. 좁아서 4층 건물로
참고한 글은 처음부터 층별 건물이었는데, 저는 1층 하나로 시작했다가 파트가 늘어나니 금방 꽉 찼어요. "본부를 1층으로 구성하니까 자리가 좁은 것 같음. 층을 나눠서 구성하고, 최상위층은 본부장실로." 그래서 이렇게 나눴어요.
| 층 | 들어간 곳 |
|---|---|
| 4F | 본부장실, 결재 대기실 |
| 3F | 개발팀, 서버실(웹운영) |
| 2F | 마케팅팀, 회의실 |
| 1F | 비서실, 로비, 카페, 방문객 라운지 |
층마다 배경을 새로 그리면 벽이나 엘리베이터 위치가 제각각이 될 것 같아서, 원래 배경에서 방 안쪽만 Codex로 고쳐 그리게 했어요. 왼쪽 층 안내를 누르면 그 층으로 넘어가요.
결재가 생기면 엘리베이터 타고 4층으로
층이 나뉘니까 결재 올리러 가는 길도 생겼어요. 엘리베이터까지 걸어가서, 문이 열리고, 층 수 × 1.5초 동안 타고, 4층에 내려서 결재 대기석에 앉아요. 의자는 6개이고 결재 번호 순서대로 앉고, 넘치면 서서 기다려요.
여기서 하나 정해야 했어요. 며칠씩 걸리는 결재도 있는데, 그 직원이 그동안 내내 4층에 앉아 있으면 자기 자리가 비잖아요. 그래도 저는 "긴 결재도 내내 대기석"을 골랐어요. 대신 그 파트가 다른 일을 하는 중이면 대기석에서 노트북을 펴고 일하게 했고요.
답하면 도장 받고 자리로
제가 결재에 답하면 그 직원이 본부장 책상 앞으로 가서 2.5초 동안 ✅ 도장을 받고 자기 층 자리로 돌아가요. 보류로 답하면 ⏸를 20초 띄우고, 철회된 결재는 조용히 자리로 돌아가요.
계획 검토: 답한 결재가 늦게 반영되는 문제
처음 계획은 결재 상태를 숫자 현황판에서 읽는 거였어요. 그런데 계획 검토에서 현황판을 쓰면 답한 결재도 최대 10분 늦게 반영된다는 지적이 나왔어요. 그러면 답을 했는데도 직원이 한참 대기석에 앉아 있게 되죠. 그래서 결재 원본 파일의 상태를 직접 읽도록 했어요. 이 층 나누기 계획은 평소 쓰던 검토 담당(Codex)의 한도가 바닥난 날이라 Claude 쪽 예비 검토 담당이 대신 봤는데, 고칠 점을 심각 1개, 높음 5개, 보통 6개 찾아 줬어요. 층 시안 그림도 그날은 Codex 한도 때문에 코드로 그렸고요.
4. 누르면 그 층으로, 결재까지 바로
층이 넷이 되니 "블로그 담당 지금 어디 있지?"를 찾는 게 일이 됐어요. 그래서 오른쪽 사람 목록이나 활동 기록을 누르면 그 직원이 있는 층으로 넘어가서 금색 고리로 표시해 주게 했어요. 카드에는 상태와 마지막 활동이 나와요.
마지막으로 붙인 게 제일 편해요. 4층 대기석에 앉은 직원을 누르면 카드에 "📋 D### 결재 열기" 버튼이 나오고, 누르면 위젯 본 창에서 그 결재 카드가 바로 열려요. 그림 보다가 바로 답할 수 있게요.
5. 대개편: 물건을 누르면 그 물건 화면만
그림 속 화이트보드, 벽 달력, 서류함 같은 물건을 누르면 정보 화면이 열리게 해 뒀는데, 써 보니 이상했어요. 뭘 누르든 원래 위젯 화면이 통째로 뜨고 그 안에서 위치만 바뀌는 거였거든요. 그래서 이렇게 말했어요. "어떤 메뉴를 클릭하던, 동일한 전체 정보가 나온 본부 앱이 뜨고있음. 내가 원하는건 완벽한 각각의 개편임."
계획부터 다시 세웠어요. 이번엔 물건마다 그 물건에 맞는 화면을 새로 만들기로 했어요.
- 🗒️ 화이트보드: 결재 대기, 안 읽은 답장, 진행 중 파트, 막힘 숫자와 팀별 진행만 나와요.
- 📅 벽 달력: 이번 주 일정과 월간 격자만 보여요. 날짜를 누르면 그날 일정이 달력 안에서 펼쳐져요.
- 📊 사용량 표(새로 놓은 물건): 에이전트와 모델별로 오늘 토큰을 얼마나 썼는지 표로 보여요.
- 그 밖에 금고(구독 한도), 서류함(결과물), 결재함, 대화, 상황판, 서버실 단말, 게시판, 안내판도 각자 자기 내용만 띄워요.
안 눌러도 보이게: 숫자 꼬리표와 사내 방송
계획에 하나를 더 넣었어요. 물건을 누르지 않아도 핵심 숫자가 보이게 하기. 화이트보드 위에는 결재·답장·진행·막힘 숫자가, 벽 달력 밑에는 오늘 일정 수와 다음 일정 시각이, 서류함에는 새 결과물 수가 꼬리표로 붙어요. 층 제목 바로 아래에는 다음 게시 일정 같은 소식이 사내 방송처럼 한 줄씩 바뀌어 나오고요.
폰에서는 아래 바로가기 줄
아이폰에서는 화면이 좁으니 맨 아래에 바로가기 4칸(결재, 답장, 오늘 일정, 한도 %)을 깔았어요. 사무실 그림을 보다가 엄지로 바로 누를 수 있게요. 맨 위 버튼들도 한 줄로 줄이고, 자주 안 쓰는 건 ⋯ 안으로 넣었어요.
그리고 고치면서 원래 위젯에 있던 기능 47가지가 새 화면 어딘가에 빠짐없이 있는지 자동 점검을 돌렸어요. 맥 화면 폭과 폰 폭을 포함해 세 가지 크기로요. 이번에도 AI 모델은 한 번도 부르지 않고, 이미 있는 기록만 읽어요.
⚠️ 이 글의 화면에 대해
- 움직이는 장면은 시연이에요: 사무실 화면에는 "데모 사건" 모드가 있어요. 10초마다 가짜 결재(D901 같은 9백 번대 번호)와 게시를 만들고 25초 뒤에 답한 것처럼 처리해서, 실제 결재 없이 움직임만 보여 줘요. 엘리베이터로 결재 올리러 가는 장면과 도장 받는 장면은 이 모드로 찍었고, 화면 맨 위에 "데모 사건"이라고 떠 있어요. 층 넘기기와 목록 누르기 장면은 화면 조작을 보여 주는 것이에요.
- 공개용 모드로 찍었어요: 제 화면에서는 직원이 제가 좋아하는 캐릭터 모습이라 블로그에는 못 올려요. 그래서 모든 직원을 기본 사람 모습으로 바꾸는 공개용 모드를 따로 만들어 그걸로 캡처했어요. 5절의 새 화면들은 10/30에 이 모드로 찍었고, 4층 꼬리표 사진은 파트 이름과 일정 이름을 '파트 A', '쓰레드 게시' 같은 일반 이름으로 바꿔 찍었어요. 결재 내용이 그대로 보이는 결재함·대화 화면은 싣지 않았어요.
마치며
유행을 한참 뒤에 따라간 셈이지만, 따라 해 보니 제 방식대로 바꿀 곳이 보이더라고요. 숫자로 "결재 대기 2"라고만 보던 걸, 4층 대기석에 두 명이 앉아 저를 기다리는 모습으로 보이게 만들었어요. 같은 정보인데 보이는 모양만 바꾼 거죠. 이렇게 보면 결재를 정말 더 빨리 처리하게 되는지는 써 보면서 확인하려고요.
아직 한 가지 남았어요. 움직임과 층 나누기는 자동 점검은 통과했지만, 제 맥미니 화면에서 하루 이상 실제로 써 보는 건 이제부터예요. 며칠 써 보고 거슬리는 게 생기면 그것도 적어 볼게요.
최종 요약
✅ 결론만 보고 싶은 분
0. 출발점: 쓰레드에서 유행하던 AI 에이전트 사무실(참고: @maroxixi 「대히트작 사무실 2탄」)을 뒷북으로 따라 만듦.
1. 팀은 방, 파트는 자리, 돌고 있는 서브에이전트는 로봇. 상태는 이미 있는 기록과 현황판 숫자로만 판단.
2. 그림(배경·직원 스티커·걷기)은 Codex 이미지 생성, 작은 동작은 코드로. 생성 그림끼리 모양이 달라 흔들리기 때문.
3. 결재는 번호로 감지해서 엘리베이터로 4층 대기석에. 긴 결재도 답할 때까지 앉아 있고, 답하면 ✅ 받고 복귀.
4. 결재 상태는 최대 10분 늦게 반영되는 현황판 대신 원본 파일에서.
5. 목록을 누르면 그 층으로. 대기석 직원을 누르고 카드의 '📋 D### 결재 열기'를 누르면 본 창의 결재 카드로.
6. 대개편: 물건마다 자기 화면만 띄우고, 숫자 꼬리표·사내 방송·폰 아래 바로가기 4칸으로 안 눌러도 보이게.
· · ·
도움이 됐다면 공유 부탁드립니다! 여러분은 AI 에이전트들이 뭘 하는지 어떻게 보고 계신지 댓글로 알려 주세요.
#클로드코드 #ClaudeCode #AI에이전트 #AI에이전트사무실 #맥미니
'만들기' 카테고리의 다른 글
| AI한테 33억 토큰 써서 나만의 '월가 작전실'을 만들었다｜맥미니 한 대로 만든 주식 앱 1편 (0) | 2026.10.30 |
|---|---|
| 폰으로 보고, 알림 받고, 맥미니 켜면 저절로｜스테이터스 위젯 제작기 2편 (0) | 2026.10.26 |
| 토큰 0으로 AI 사용량 보는 위젯 만들기｜스테이터스 위젯 제작기 1편 (0) | 2026.10.24 |
