AI 요약
최근 개발자들 사이에서 인기를 끌고 있는 'Star Office UI'는 검은 화면의 터미널 기반 AI 도구인 Claude Code와 OpenClaw의 작업 과정을 픽셀 그래픽으로 시각화해주는 혁신적인 도구입니다. 이 프로젝트는 AI 에이전트의 상태를 'idle(대기)', 'writing(작성)', 'researching(연구)', 'executing(실행)', 'syncing(동기화)', 'error(오류)' 등 총 6가지로 세분화하여 각 상태에 맞는 캐릭터 애니메이션과 위치 이동을 제공합니다. 특히 '어제 소기(Yesterday's Note)' 기능을 통해 백엔드에서 메모리 파일을 읽어와 어제의 작업 내역을 비식별화 처리 후 대시보드에 전시함으로써 작업 흐름을 한눈에 파악할 수 있게 돕습니다. 사용자는 직접 AI 에이전트의 소스 코드를 수정하거나, 로그를 실시간으로 모니터링하는 스크립트를 실행하는 방식으로 간단히 연동할 수 있으며, 이는 딱딱한 개발 환경에 재미와 가독성을 동시에 부여하는 효과가 있습니다.
핵심 인사이트
- 6가지 작업 상태 시각화: AI 에이전트의 현재 활동을 idle, writing, researching, executing, syncing, error의 6단계 상태로 구분하여 픽셀 캐릭터로 표현합니다.
- 간편한 설치 경로:
git clone https://github.com/ringhyacinth/Star-Office-UI.git명령어를 통해 소스를 내려받고 Python 의존성(requirements.txt)을 설치하여 즉시 구동 가능합니다. - 특정 포트 및 주소: 대시보드는 로컬 환경의
http://127.0.0.1:18791주소를 통해 웹 브라우저에서 실시간으로 확인할 수 있습니다. - 로그 기반 실시간 연동:
moltbot logs --follow명령어를 통해 출력되는 로그 중session state: new=processing등의 상태 변화를 감지하여 UI를 업데이트합니다.
주요 디테일
- OpenClaw 연동 방식:
src/agent/또는src/commands/agent.ts내 핵심 코드를 수정하여state.json파일을 직접 쓰거나,office-log-monitor.py를 사용해 로그를 파싱하는 두 가지 방식을 지원합니다. - 자동 상태 업데이트: AI가 작업을 시작하면 캐릭터가 사무실 내 업무 구역으로 이동하며, 작업이 완료되면 자동으로 휴식 구역(바다스타 캐릭터 등)으로 돌아갑니다.
- 비식별화 데이터 전시: 보안을 위해 '어제 소기' 기능은 백엔드에서 작업 데이터를 읽어올 때 기초적인 탈감작(Desensitization, 비식별화) 과정을 거칩니다.
- 수동 제어 기능:
set_state.py스크립트를 사용해 사용자가 직접python3 set_state.py idle "휴식 중"과 같은 명령어로 캐릭터의 상태를 강제 변경하며 테스트할 수 있습니다. - 파일 설정 구조: 초기 설정 시
cp state.sample.json state.json명령을 통해 설정 파일을 생성하며, 백엔드는 Flask 기반의app.py로 구동됩니다.
향후 전망
- AI 에이전트 UX 개선: 텍스트 위주의 CLI 환경에서 벗어나 시각적 요소가 가미된 AI 협업 도구의 등장이 개발자 경험(DX)을 크게 향상시킬 것입니다.
- 대중화된 AI 모니터링: 기술적 지식이 부족한 사용자도 AI가 현재 무엇을 하고 있는지 직관적으로 이해할 수 있는 대시보드 형태의 도구 개발이 가속화될 것으로 보입니다.
출처:juejin