AI Agent가 여러 개 돌아가면 터미널 로그만으로는 "지금 누가 무엇을 하는지" 알기 어렵습니다. 그래서 Agent들을 사무실에 앉혀 놓고 일하는 모습을 눈으로 볼 수 있게 만들어 보았습니다. 이 글은 그 AI Office의 컨셉과 구조, 그리고 Three.js로 만든 3D 사무실 두 가지를 소개합니다.
1. 컨셉: Agent들의 빌딩
- 빌딩(Tower): 시작 화면은 층 목록이 있는 빌딩입니다. 층을 고르면 해당 층의 Office로 입장합니다.
- 사무실(Office): 층마다 역할이 다른 Agent들이 자기 자리에서 일합니다. 한 명은 팀장 역할로 전체를 조율하고, 나머지는 분석, 조사, 작성, 검수처럼 맡은 일이 나뉘어 있습니다.
- 말풍선과 장면 전환: Agent가 일을 진행하면 말풍선으로 상태를 보여 주고, 단계가 바뀌면 장면이 자동으로 전환됩니다.
- 사람은 마지막에 승인: 사람이 목표를 정하고 중간에 확인하며, 마지막 인수는 반드시 사람이 직접 승인해야 끝납니다.
- 캐릭터 컨셉 교체: 설정에서 Agent 모습을 동물, 로봇, 정령, 일러스트로 바꿀 수 있습니다.
2. 두 가지 모드
- 시연 모드: index.html을 브라우저로 열면 서버 없이 고정 시나리오를 재생합니다.
- LIVE 모드: node server.js를 실행하면 이 컴퓨터에서 실제 Agent를 실행하고 진행 상황을 화면에 표시합니다.
서버는 Node 내장 모듈만 쓰고(외부 패키지 없음) 127.0.0.1에만 열립니다. 실제 Agent는 로컬에 설치한 Claude Code CLI를 호출하며, Bash와 웹 접근은 막은 채 실행합니다. 입력 자료가 API로 전송되고 사용량 비용이 든다는 점은 미리 알고 써야 합니다.
3. 3D 사무실 ① 노을 도시 위의 유리벽 사무실
- Three.js로 만든 장면으로, 노을 도시 위에 떠 있는 유리벽 사무실입니다.
- 하늘에서 환경광 만들기: 하늘 그라데이션(해, 별 포함)을 환경 맵으로 만들어 재질에 반사시킵니다. 같은 방식으로 노을, 낮, 밤을 바꿀 수 있습니다.
- 그림자: 해 위치에서 만든 부드러운 그림자가 바닥과 가구에 드리웁니다.
- 가구 모델: Kenney Furniture Kit(CC0, kenney.nl)에서 고른 GLB 모델을 GLTFLoader로 불러옵니다. 모델을 불러오지 못하면 코드로 만든 단순 가구로 대신하도록 해서, 파일이 없어도 화면은 뜨게 했습니다.
4. 3D 사무실 ② 코드만으로 만든 CI/CD 사무실
- 따뜻한 오크 톤의 사무실에 업무석 6곳과 회의 공간, 라운지, 커피바가 있습니다. 로봇 6대가 업무석에 앉아 있고, 사람 역할의 일러스트가 한쪽에 서 있습니다.
- 외부 3D 모델 없이 책상, 의자, 소파, 서가, 화분, 펜던트 조명까지 전부 기본 도형(Box, Cylinder, Sphere)을 조합해 만들었습니다. 모니터 화면은 canvas에 그려 텍스처로 입혔습니다.
- OrbitControls로 드래그 회전과 휠 확대, 버튼으로 전체, 회의 공간, 업무 공간, 라운지 시점 전환, 로봇을 클릭하면 역할 카드가 나옵니다.
- 업무 시연: 사람이 목표를 주면 로봇들이 말풍선으로 주고받으며 Build, Test, Deploy 흐름을 진행하고, 마지막에 사람이 승인하는 짧은 시나리오가 재생됩니다.
- three.js r180(MIT)을 vendor 폴더에 넣고 importmap으로 불러오기 때문에 빌드 도구가 필요 없습니다.
참고: 이 CI/CD 사무실은 다른 AI 도구가 만든 Three.js 사무실 예제를 가져와 문구와 역할, 링크를 바꾼 것입니다. 노을 도시 사무실과 LIVE 연동 부분은 직접 구현했습니다.
5. 만들면서 배운 점
- 보이게 하면 이해가 빨라진다: 로그 대신 장면과 말풍선으로 보여 주니 어느 단계에서 막혔는지 바로 보입니다.
- 마지막 승인은 사람이: 자동화가 편해질수록 "누가 최종 확인하는가"를 화면에 박아 두는 편이 안전합니다.
- 빌드 없는 구성의 장점: 외부 패키지 없이 node server.js만으로 돌아가니 다른 PC로 옮기기도 쉽습니다.
- 실패에 대비한 대체 경로: 모델 로딩 실패 시 대체 가구처럼, 외부 자원이 없어도 화면이 깨지지 않게 두면 시연이 안정적입니다.
다음에 해볼 것
- 층별 Office를 더 늘리고 Agent 역할을 층마다 다르게 구성
- 3D 사무실의 Agent 상태를 LIVE 이벤트와 직접 연결
- 모바일 화면 대응
이 글의 화면과 문구는 시연용 예시이며, 실제 업무 자료는 포함하지 않았습니다.
댓글 없음:
댓글 쓰기