스프레드시트는 사기에 가깝기에, AI 에이전트를 위한 파이널 판타지 스타일의 대시보드를 AI로 구축했습니다
요약
부동산 중개인이 AI를 활용해 JRPG 스타일의 AI 에이전트 모니터링 대시보드를 구축한 사례를 소개합니다. 복잡한 스프레드시트 대신 'HP(Headroom Points)' 개념을 도입하여 에이전트의 잔여 작업 용량을 시각적으로 직관적이게 표현했습니다.
핵심 포인트
- JRPG 파티 메뉴 인터페이스를 차용해 에이전트 상태를 직관적으로 시각화
- HP를 'Headroom Points'로 정의하여 대화의 잔여 용량을 추정
- 프레임워크 없이 순수 HTML/CSS/JS를 사용하여 접근성 극대화
- 비전문가가 AI를 구축 파트너로 활용해 맞춤형 내부 도구 제작 가능
저는 캐나다의 부동산 중개인이며, 전문 소프트웨어 엔지니어는 아닙니다. 아마 그 점 때문에 대시보드가 일반적으로 보여야 하는 방식에 대해 정서적인 애착이 없었던 것 같습니다.
저에게는 실질적인 문제가 있었습니다. 저는 서로 다른 작업에 다양한 AI 작업자(AI workers)와 도구들을 사용하고 있었지만, 이들을 모니터링하는 화면은 모두 똑같이 느껴졌습니다. 회색 테이블, 상태 라벨, 그리고 기술적으로는 존재하지만 팀을 한눈에 파악하는 데는 전혀 도움이 되지 않는 정보의 더미뿐이었습니다.
팀을 이해하기 위해 제가 기억하는 가장 좋은 인터페이스는 비즈니스 소프트웨어가 아니었습니다. 그것은 고전적인 JRPG(Japanese Role-Playing Game)의 파티 메뉴였습니다.
파티 메뉴의 장점
좋은 파티 화면은 유용한 질문들에 즉각적으로 답해줍니다:
- 파티에 누가 있는가?
- 각자의 역할은 무엇인가?
- 지금 누가 활동 중인가?
- 누가 자원이 부족한가?
- 다음 퀘스트는 무엇인가?
이것은 제가 AI 에이전트(AI-agent) 대시보드에서 필요로 했던 것과 거의 정확히 일치합니다.
그래서 저는 AI를 구축 파트너로 사용하여 RPG 파티 대시보드(RPG Party Dashboard)를 만들었습니다. 이는 광범위한 고전 JRPG 스타일의 파이널 판타지(Final Fantasy)에서 영감을 받았지만, Square Enix나 그 어떤 게임 퍼블리셔와도 관련이 없습니다.
HP는 Headroom Points를 의미합니다
이 대시보드에서 가장 유용한 아이디어는 HP 바입니다.
이 프로젝트에서 HP는 체력(Health)을 의미하지 않습니다. 그것은 Headroom Points를 의미합니다. 즉, 스레드(thread)가 새로운 채팅으로 다시 생성(reborn)되어야 하기 전까지 작업자나 대화에 얼마나 많은 유용한 여유 공간이 남아 있는지를 보여주는 간단한 시각적 추정치입니다.
이것은 추상적인 기술적 문제를 제가 즉각적으로 이해할 수 있는 신호로 바꿔줍니다. 건강한 작업자라면? 초록색 바. 자원이 부족하다면? 경고. 거의 다 되었다면? 대화가 무너지기 전에 채팅을 재생성(Rebirth)하세요.
격식 있게 말하고 싶다면 잔여 용량(remaining capacity)이라고 불러도 좋습니다. 저는 HP 바를 유지하겠습니다.
의도적으로 지루한 기술 사용
공개 버전은 순수한 HTML, CSS, JavaScript를 사용합니다. 계정, 백엔드(backend), 빌드 단계(build step), 또는 프레임워크 의존성(framework dependency)이 없습니다.
이것은 의도적인 결정이었습니다. 누군가가 프로젝트를 클론(clone)하고, dashboard.config.js를 수정하며, 패키지 매니저(package manager)를 기반으로 한 종교에 먼저 가입하지 않고도 자신들이 무엇을 보고 있는지 이해하기를 원했습니다.
공개 저장소(public repo)에는 가상의 샘플 데이터가 포함되어 있습니다. 내장된 CSS 캐릭터를 사용하거나, 설정을 통해 본인이 라이선스를 보유한 캐릭터 아트(character art)를 지정할 수 있습니다.
AI는 구축 파트너였습니다
저는 전문 개발자인 척하며 자리에 앉아 있지 않았습니다. 저는 운영 아이디어, 비즈니스 문제, 시각적 표준, 그리고 제대로 된 느낌이 들 때까지 계속해서 수정하려는 의지를 가져왔습니다. AI는 구현(implementation), 반복(iteration), 검사(checks), 그리고 패키징(packaging)을 도와주었습니다.
그것이 바로 핵심 중 하나입니다.
이제 소규모 운영자들도 자신들이 실제로 생각하는 방식에 맞는 내부 도구(internal tools)를 구축할 수 있습니다. 우리는 소프트웨어 위원회가 파란색을 승인하거나, 3분기 후에나 기능을 추가해주기를 기다릴 필요가 없습니다.
이것이 무엇이 될 수 있는가
현재의 공개 프로젝트는 의도적으로 작게 만들어졌지만, '파티(party)' 메타포는 다음과 같은 것들을 지원할 수 있습니다:
- 로컬 AI 에이전트(AI-agent) 상태 피드
- 홈랩(home-lab) 및 셀프 호스팅(self-hosted) 서비스
- 팀 링크 및 현재 할당된 작업
- 도구 상태 점검(health checks)
- 스트림 덱(stream-deck) 또는 크리에이터 커맨드 센터(command centres)
- 컨텍스트/헤드룸 영수증(context/headroom receipts)
- 개인적인 사이드 퀘스트(side quests) 및 프로젝트 보드
이 저장소는 MIT 라이선스입니다. 클론(Clone)하고, 변경하고, 무엇이 멍청한지 알려주거나, 여러분의 파티가 어떤 모습인지 보여주세요.
라이브 데모: https://corbin-debug.github.io/rpg-party-dashboard/
소스 코드: https://github.com/corbin-debug/rpg-party-dashboard
의도적인 생산성. 의도적인 즐거움. 의도적인 향수.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기