AI 에이전트 실행

사용자 PC의 브라우저·로컬 자원을 직접 쓰는 AI 에이전트 플랫폼을 만드는 프로젝트였습니다. 초기에는 MAF DevUI로 급히 세운 임시 화면과 복잡한 라우팅·인증 구조가 있었고, 인증 토큰이 브라우저에 노출될 수 있는 구조, 서버가 클라이언트의 도구를 호출해야 하는 특수한 실시간 요구까지 겹쳐 있었습니다.

세 방향으로 풀었습니다. 인증은 “창구를 하나로 모으면 보안과 복잡도를 동시에 잡는다”는 가설로 게이트웨이가 BFF 역할을 흡수하는 구조 + HttpOnly 쿠키를 설계해 토큰이 브라우저 JS에 노출되는 지점을 없앴습니다. 실시간은 성격에 따라 채널을 분리해 서버→클라이언트 도구 호출은 WebSocket 양방향 RPC로, 알림·응답 스트리밍은 SSE로 나눴습니다. 레거시 화면은 새 컨벤션을 먼저 세운 뒤 서비스 중단 없이 화면 단위로 점진 이관했고, 권한(RBAC)은 백엔드 API의 default-deny 접근 제어부터 관리 UI까지 직접 구현했습니다.

인증 구조는 프론트 코드 변경 없이 이전됐고, DevUI 기반 화면은 새 Next.js 아키텍처로 전면 이관됐습니다. 이 데모는 그 플랫폼의 여러 화면 중 에이전트 실행 화면 하나 — 스트림 이벤트(추론→도구 호출→응답)를 순수 리듀서로 처리해 작업 과정을 펼쳐 보여주는 부분을 재현한 것입니다.

좋은 아키텍처 결정은 프론트 코드를 지켜준다는 것(구조를 갈아타도 화면 코드는 무변경), 그리고 이벤트 기반 UI는 상태 변화를 순수 함수로 다루면 복잡해도 예측 가능하다는 것을 배웠습니다.