언제 대시보드가 필요한가

봇들의 통신 방식은 두 가지예요.

같은 집 봇끼리: sessions_send (안 보임)

같은 컴퓨터(같은 OpenClaw 인스턴스)에 사는 봇들은 sessions_send로 대화해요. 서버 내부에서 직접 메시지를 주고받는 방식이라, 슬랙이나 텔레그램에 안 뜹니다.

뽀야 → sessions_send → 뽀짝이
뽀짝이 → sessions_send → 뽀야

사람으로 치면 같은 집에서 귓속말하는 거예요. 빠르고 효율적이지만, 집사(양육자)는 옆에 있어도 못 들어요.

다른 집 봇끼리: Slack 멘션 (보임)

다른 컴퓨터에 사는 봇들은 sessions_send를 쓸 수 없어요. 서로 다른 OpenClaw 인스턴스니까요. 대신 Slack 같은 채팅 도구에 함께 초대해서, 멘션으로 대화해요.

뽀야(@뽀야) → Slack 채널 → 바다(@바다)

사람으로 치면 단톡방에서 대화하는 거예요. 느리지만, 같은 채널에 있는 사람도 다 볼 수 있어요.

그래서 대시보드가 필요한 시점

상황통신 방식사람이 볼 수 있나
같은 집 봇끼리sessions_send❌ 못 봄
다른 집 봇끼리Slack 멘션✅ 볼 수 있음
크론잡 실행자동 실행❌ 결과만 나중에
서브에이전트내부 생성❌ 못 봄

봇이 1마리일 때는 상관없어요. 텔레그램/슬랙 DM으로 직접 대화하니까.

봇이 2마리 이상이 되면 문제가 시작돼요. 같은 집 봇끼리 sessions_send로 대화하는데, 양육자는 그 내용을 볼 수가 없어요. “뽀짝이한테 뭐라고 했어?” 물어봐야 뽀야가 기억을 더듬어서 답해주는 수준이에요.

여기에 크론잡(자동 스케줄 작업)까지 돌아가면, 밤에 뭐가 실행됐는지 아침에 와서야 알 수 있어요. 실패해도 알림이 안 오면 모르고 넘어가요.

💡 대시보드 = 같은 집 봇들의 대화와 상태를 사람이 볼 수 있게 만드는 도구


사전 준비

대시보드를 만들기 전에 확인할 것:

  • OpenClaw 설치 완료 — 에이전트가 1개 이상 돌아가고 있어야 해요
  • 에이전트가 2개 이상 (권장) — 1개면 대시보드보다 DM이 더 편해요
  • Node.js 설치node --version으로 확인

봇이 아직 1마리라면, 대시보드 대신 간단한 보고 규칙부터 시작해도 돼요.


Step 1: 봇한테 대시보드 만들어달라고 하기

가장 쉬운 방법은 봇한테 직접 요청하는 거예요.

요청 예시

텔레그램/슬랙에서 봇에게:

“대시보드 만들어줘. 활성 세션 목록이랑 크론잡 상태를 브라우저에서 볼 수 있게.”

또는 더 구체적으로:

“Express + SSE 기반 로컬 대시보드를 만들어줘.

  • 세션 목록 (에이전트별 필터)
  • 크론잡 상태 (성공/실패)
  • 세션 클릭하면 대화 내용 보기
  • 포트 43125, launchd로 자동 실행”

봇이 바이브코딩으로 만들어줄 거예요. 코드를 직접 짤 필요 없어요.

봇이 알아야 할 핵심 정보

봇이 대시보드를 만들려면 이 정보가 필요해요. AGENTS.md나 대화에서 알려주세요:

에이전트 목록: bboya, bbojjak (본인 에이전트 ID로 수정)
세션 파일 위치: ~/.openclaw/agents/{에이전트}/sessions/sessions.json
크론잡 파일: ~/.openclaw/cron/jobs.json
대화 내용: ~/.openclaw/agents/{에이전트}/sessions/{sessionId}/messages.jsonl
포트: 43125 (원하는 포트)

데이터 소스: 파일 읽기만 하면 된다

대시보드의 데이터는 전부 OpenClaw가 이미 만들어놓은 파일에서 가져와요:

~/.openclaw/
├── agents/
│   ├── bboya/sessions/
│   │   ├── sessions.json          ← 세션 목록 (메타데이터)
│   │   └── {sessionId}/
│   │       └── messages.jsonl     ← 대화 내용 (sessions_send 포함!)
│   ├── bbojjak/sessions/
│   └── ...
└── cron/
    └── jobs.json                  ← 크론잡 설정 + 실행 상태

별도 DB가 필요 없어요. 이미 있는 JSON 파일을 읽기만 하면 돼요.


Step 2: 대시보드 구조 이해하기

봇이 만들어주든, 직접 만들든, 구조는 이래요:

[브라우저] ←── SSE ──→ [Express 서버] ←── 파일 읽기 ──→ [OpenClaw 파일들]
  • 서버 (server.mjs): OpenClaw 파일들을 읽어서 API로 제공
  • 프론트 (index.html): 브라우저에서 보는 화면
  • 실시간 갱신: SSE(Server-Sent Events)로 변경사항 자동 반영

SSE가 뭔가요?

서버가 “데이터 바뀌었어!” 하고 브라우저에 밀어주는 방식이에요. 카카오톡 알림이랑 비슷해요:

  • 폴링: “새 메시지 왔어?” 1초마다 물어보기 → 낭비
  • SSE: 새 메시지 오면 알림 → 효율적
  • WebSocket: 양방향 통신 → 대시보드에는 과한 스펙

대시보드는 서버→브라우저 단방향이면 충분하니까 SSE가 딱이에요.

두 파일이면 된다

파일역할크기
server.mjsExpress 서버 — 파일 읽기 + SSE~200줄
index.html브라우저 화면 — 바닐라 HTML + JS~200줄

React도 Next.js도 필요 없어요. 나만 보는 로컬 도구인데 프레임워크를 갖출 이유가 없어요.


Step 3: 대시보드에서 볼 수 있는 것들

1. 활성 세션 목록

“지금 어떤 대화가 진행 중인지”

에이전트별로 현재 활성 세션이 한눈에 보여요. 어떤 채널에서 대화 중인지, 마지막 활동이 언제인지, 토큰을 얼마나 썼는지.

세션 정보는 sessions.json에서 가져와요. 에이전트별 필터를 넣으면 “뽀야 세션만” “뽀짝이 세션만” 골라볼 수 있어요.

2. sessions_send 대화 내용

“봇끼리 뭐라고 했는지 원문”

세션을 클릭하면 대화 내용이 펼쳐져요. sessions_send로 오간 메시지도 전부 보여요:

[09:00] 🐱 뽀야 → 뽀짝이
"오늘 21기 수강생 현황 뽑아줘"

[09:01] 🎓 뽀짝이 → 뽀야
"21기 수강생 347명, 결제완료 312명"

“뽀짝이한테 뭐라고 물어본 거야?” 같은 질문이 사라져요. 대시보드 열면 다 보이니까요.

대화 내용은 messages.jsonl에서 가져와요. 한 줄에 한 메시지씩 JSON으로 저장돼 있어요.

3. 크론잡 모니터링

“자동화가 잘 돌고 있는지”

등록된 크론잡의 상태가 한눈에 보여요:

크론잡에이전트스케줄상태
아침 브리핑뽀야매일 09:00✅ 성공
밤 자율작업뽀야매일 23:00✅ 성공
설문 수집뽀짝이매일 06:00❌ 실패 (3회 연속)

❌ 빨간색이 뜨면 바로 보여요. 대시보드 없이는 크론이 실패해도 아무도 몰라요.

크론 정보는 jobs.json에서 가져와요. 각 크론잡의 설정, 마지막 실행 시각, 성공/실패 상태, 연속 에러 횟수까지 다 들어있어요.

4. 스킬 목록

“이 봇이 뭘 할 수 있는지”

봇의 스킬이 18개가 넘으면 양육자도 전부 기억하기 어려워요. 대시보드에서 에이전트별 보유 스킬과 설명을 한눈에 확인할 수 있어요.

스킬 정보는 ~/.claude/skills/ 폴더의 SKILL.md 파일들에서 가져와요.


Step 4: 자동 실행 설정 (macOS)

대시보드 서버가 맥 시작할 때마다 자동으로 뜨게 설정해요.

launchd 등록

cat > ~/Library/LaunchAgents/com.openclaw.dashboard.plist << 'EOF'
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" 
  "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>Label</key>
  <string>com.openclaw.dashboard</string>
  <key>ProgramArguments</key>
  <array>
    <string>/usr/local/bin/node</string>
    <string>server.mjs</string>
  </array>
  <key>WorkingDirectory</key>
  <string>/Users/내이름/.openclaw/workspace-에이전트/projects/dashboard</string>
  <key>RunAtLoad</key>
  <true/>
  <key>KeepAlive</key>
  <true/>
</dict>
</plist>
EOF

launchctl load ~/Library/LaunchAgents/com.openclaw.dashboard.plist

⚠️ 수정 필요: WorkingDirectory를 본인 대시보드 경로로, node 경로도 which node로 확인해서 맞춰주세요.

확인

# 서비스 상태 확인
launchctl list | grep dashboard

# 브라우저에서 열기
open http://localhost:43125

Step 5: 밖에서도 보기 — Tailscale

대시보드는 맥미니(또는 맥북)의 localhost:43125에서 돌아가요. 집에서는 브라우저로 바로 접속하면 되지만, 밖에서는 접속할 수 없어요.

카페에서 노트북으로, 출근길에 아이폰으로 — “지금 봇들 뭐 하고 있지?” 보고 싶을 때가 있어요.

왜 Tailscale인가

방법보안설정 난이도추천
포트 포워딩❌ 외부 노출높음 (라우터 설정)
ngrok⚠️ URL 유출 위험중간⚠️
Tailscale✅ 내 기기만낮음 (앱 설치만)

대시보드에는 봇의 대화 내용, 세션 정보, 크론잡 상태가 들어있어요. 이걸 인터넷에 노출하면 안 돼요.

Tailscale은 내 기기들끼리만 안전하게 연결해주는 VPN이에요. 앱 깔고 같은 계정으로 로그인하면 끝이에요.

설정 방법

1. Tailscale 설치 (양쪽 기기에 설치)

기기설치
맥 (서버)tailscale.com/download/mac
아이폰App Store에서 “Tailscale” 검색
윈도우/리눅스tailscale.com/download

2. 같은 계정으로 로그인

양쪽 기기에서 같은 계정(Google/GitHub/Microsoft)으로 로그인하면 자동으로 연결돼요.

3. 맥미니의 Tailscale IP 확인

tailscale ip -4
# 예: 100.64.0.1

4. 접속

다른 기기 브라우저에서:

http://100.64.0.1:43125

끝! 카페에서도, 지하철에서도 대시보드를 볼 수 있어요.

MagicDNS: IP 대신 이름으로

IP 외우기 귀찮으면 MagicDNS를 쓸 수 있어요:

http://맥미니이름.tailnet-xxxx.ts.net:43125

Tailscale 관리 화면(login.tailscale.com)에서 기기 이름과 도메인을 확인할 수 있어요.

iOS 홈 화면에 추가

아이폰에서 대시보드를 앱처럼 쓰려면:

  1. Safari에서 대시보드 접속
  2. 공유 버튼 (⬆️) 탭
  3. “홈 화면에 추가” 선택
  4. 이름 입력 후 “추가”

→ 홈 화면에 아이콘이 생겨서 탭 한 번으로 대시보드를 열 수 있어요.


대시보드 없이 시작하는 법

“대시보드 만드는 건 아직 이르고, 일단 봇끼리 뭐 했는지만 보고 싶어” — 그럴 때는 이것만으로도 충분해요.

방법 1: AGENTS.md에 보고 규칙 추가

## 보고 규칙
- 다른 에이전트에게 sessions_send로 일 시키고 결과 받으면,
  반드시 텔레그램/슬랙에 원문 포함 보고
- 에이전트 간 대화를 요약하지 말고 원문 전달

봇이 다른 봇한테 일 시킬 때마다 양육자한테 보고해요. 설정 한 줄이면 끝.

장점: 바로 적용 가능 한계: 보고가 늦거나 빠질 수 있음. 크론잡 실패는 별도 처리 필요.

방법 2: 터미널에서 직접 보기

# 크론잡 상태 확인
cat ~/.openclaw/cron/jobs.json | jq '.jobs[] | {name, status: .state.lastRunStatus}'

# 특정 세션의 최근 대화 보기
tail -10 ~/.openclaw/agents/bboya/sessions/{sessionId}/messages.jsonl | jq '.message.content'

장점: 도구 없이 즉시 가능 한계: 매번 터미널 열어야 함

💡 에이전트가 3마리 이상이거나 크론잡이 5개 이상이면, 그때 대시보드를 만들어도 늦지 않아요.


삽질 교훈

1. 파일 직접 읽기가 정답

openclaw sessions list --json 같은 CLI 명령으로 데이터를 가져오려 했는데, JSON 출력이 깔끔하지 않아요. sessions.json 파일을 직접 읽는 게 가장 확실해요.

2. 캐시 전체 초기화 금지

스레드 메타데이터를 캐싱하는 파일(thread-meta.json)을 {}로 초기화한 적 있어요. 세션이 압축(컴팩션)되면 원본 첫 메시지가 사라져서, 캐시를 날리면 복구할 수 없어요. 잘못된 항목만 개별 삭제하세요.

3. 스크롤 점프 문제

SSE로 갱신할 때마다 화면이 맨 위로 튕겨요. render() 전에 스크롤 위치를 저장하고, 후에 복원해야 해요.

4. 에이전트별 색상은 처음부터

세션이 20개 넘으면 어느 에이전트 건지 구분이 안 돼요. 에이전트별 색상(뽀야=파랑, 뽀짝이=보라)을 처음부터 넣으세요.

5. Phase 1만 먼저

세션 목록만 먼저 만들면 하루면 돼요. 크론 모니터링, 대화 보기, 스킬 목록은 나중에 추가해도 충분해요.


진화 로드맵

Phase기능설명
1세션 목록 + 필터”지금 뭐가 돌아가는지” 한눈에
2대화 내용 보기sessions_send 원문 포함
3크론잡 모니터링성공/실패, 연속 에러
4스킬 목록에이전트별 보유 스킬
5Tailscale 원격 접속밖에서도 보기
6Slack/텔레그램 딥링크원본 대화로 바로 점프
7토큰/비용 추적API 비용 모니터링

Phase 1만 해도 “지금 뭐가 돌아가는 거야?” 질문의 절반은 해결돼요.


핵심 정리

  1. 같은 집 봇 대화(sessions_send)는 안 보인다 — 다른 집 봇끼리는 Slack에서 보이지만, 같은 집 봇끼리는 사람이 볼 수 없어요. 이게 대시보드가 필요한 이유예요.

  2. 봇한테 만들어달라고 하면 된다 — 코드를 직접 짤 필요 없어요. “대시보드 만들어줘”라고 요청하면 돼요.

  3. 데이터는 이미 파일에 있다 — OpenClaw가 세션, 크론, 대화를 전부 JSON 파일로 저장해요. 별도 DB 필요 없어요.

  4. 밖에서 보려면 Tailscale — 앱 깔고 같은 계정 로그인이면 끝. 10분이면 돼요.

  5. 대시보드 없이도 시작 가능 — AGENTS.md에 보고 규칙 한 줄이면 돼요. 봇이 많아지면 그때 대시보드를 만들어도 늦지 않아요.


실습 가이드: 대시보드 만들어보기

교실에서 대시보드의 필요성을 배웠으니, 실제로 만들어보자.

봇에게 대시보드 만들어달라고 하기

"OpenClaw 대시보드를 만들어줘.
활성 세션, 최근 대화, 에이전트 상태를 보여주는 웹 페이지.
Express + SSE 기반으로."

봇이 server.mjs, index.html 등 코드를 직접 작성해. 데이터는 OpenClaw가 이미 JSON 파일로 저장하고 있으니까, 별도 DB가 필요 없어.

볼 수 있는 것들

대시보드가 만들어지면:

  • 활성 세션 목록 — 어떤 채널/스레드에서 대화 진행 중인지
  • 에이전트 상태 — 각 봇이 살아있는지, 마지막 활동 시각
  • 최근 대화 하이라이트 — sessions_send 메시지

밖에서도 보기 — Tailscale

집 밖에서도 대시보드를 보고 싶으면 Tailscale을 쓰면 돼. 앱 깔고 같은 계정으로 로그인하면 끝. 10분이면 세팅 완료야.