## Claude Control 웹 UI 대시보드 개발 터미널로만 세션을 관리하다 보니 한계가 명확했다. 여러 세션의 상태를 한눈에 보고, 프롬프트를 보내고, 로그를 확인하려면 웹 대시보드가 필요했다. 2월 5일, 본격적으로 UI 개발을 시작했다. ### 대시보드 구조 설계 대시보드의 핵심은 세 가지였다. 세션 목록, 세션 상세, 실시간 로그. ```python from fastapi import FastAPI, WebSocket, WebSocketDisconnect from fastapi.staticfiles import StaticFiles from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates(directory="templates") @app.get("/dashboard") async def dashboard(request: Request): sessions = await session_store.get_all_sessions() return templates.TemplateResponse("dashboard.html", { "request": request, "sessions": sessions, }) ``` ### WebSocket 실시간 로그 스트리밍 세션의 출력을 실시간으로 대시보드에 표시하기 위해 WebSocket을 도입했다. ```python class ConnectionManager: def __init__(self): self.active_connections: Dict[str, List[WebSocket]] = {} async def connect(self, session_id: str, websocket: WebSocket): await websocket.accept() if session_id not in self.active_connections: self.active_connections[session_id] = [] self.active_connections[session_id].append(websocket) async def broadcast(self, session_id: str, message: dict): connections = self.active_connections.get(session_id, []) for connection in connections: try: await connection.send_json(message) except WebSocketDisconnect: connections.remove(connection) ws_manager = ConnectionManager() @app.websocket("/ws/session/{session_id}") async def websocket_endpoint(websocket: WebSocket, session_id: str): await ws_manager.connect(session_id, websocket) try: while True: data = await websocket.receive_text() await handle_ws_message(session_id, data) except WebSocketDisconnect: ws_manager.disconnect(session_id, websocket) ``` ### 사이드바 레이아웃과 모바일 최적화 사이드바에 세션 목록을 배치하고, 메인 영역에 선택된 세션의 상세 정보를 표시하는 구조로 만들었다. Collapsible 레이아웃을 적용해서 모바일에서도 사용할 수 있게 했다. ```html

``` ### 개발하면서 느낀 점 웹 대시보드를 만들면서 가장 힘들었던 점은 실시간 데이터의 동기화였다. Redis Pub/Sub에서 받은 이벤트를 WebSocket으로 전달하는 파이프라인이 중간에 누락되는 경우가 있었고, 이를 재연결 로직과 버퍼링으로 해결했다. 대시보드가 생기니까 Claude Control의 활용도가 몇 배는 올라갔다.