"백엔드랑 k3s랑 다 갖춰놨는데 프론트가 그거에 비해 부실해 보인다"는 문제의식에서 시작한 점검 기록. 결론적으로 기능 커버리지 자체는 문제가 없었고, 진짜 문제는 이미 만든 것들이 "발견 가능하지 않다"는 점이었다.
c4i-dashboard-frontend/src 전체 파일 목록(15개)과 백엔드 3개 서비스의 컨트롤러/라우터를 대조했다.
src/app/page.tsx, layout.tsx
src/components/Dashboard.tsx, MapView.tsx, TargetSidebar.tsx,
AnalysisModal.tsx, ChatPanel.tsx, ApprovalPanel.tsx
src/hooks/useTargetSocket.ts, useApprovalSocket.ts
src/lib/config.ts, sse.ts
src/types/target.ts
target-tracking-service: TargetController, ThreatAnalysisController,
ThreatApprovalController, SimulatorController
threat-intel-ai-service: routers/chat.py, ingest.py, health.py
프론트가 쓰지 않는 백엔드 엔드포인트가 없다. 오히려 백엔드 쪽에서 공들인 기능들이 실제로 프론트에 다 연결돼 있었다:
| 백엔드 기능 | 프론트 반영 위치 |
|---|---|
| RAG + pgvector 유사 패턴 검색 | AnalysisModal.tsx — similarPatterns 리스트 렌더링 |
SSE 토큰 스트리밍 + route 분기(doc_rag/pattern_search) |
ChatPanel.tsx — parseSseStream로 토큰 단위 렌더링, route 배지 표시 |
Tool calling (assess_threat_level) |
ChatPanel.tsx — 🔧 도구 호출: {tool_name} → {tool_result} |
| RAG 소스 출처(score + text) | ChatPanel.tsx — sources 리스트 |
| Human-in-the-loop 승인/반려 + WebSocket 실시간 반영 | ApprovalPanel.tsx, useApprovalSocket.ts |
Graceful degradation (aiEnabled: false) |
AnalysisModal.tsx — "AI 비활성화 상태" 안내 분기 |
| ADS-B 관측 공백(우크라이나/이란 구조적 한계) | TargetSidebar.tsx — showCoverageNote |
즉, "AI를 API로 호출해봤다" 이상의 디테일(스트리밍, tool call 가시화, source citation, HITL, degradation 처리)이 이미 UI 레벨까지 다 그려져 있다. 코드 품질이나 기능 누락이 문제가 아니다.
src/app/page.tsx:
export default function Home() {
return <Dashboard />;
}
레이아웃·랜딩·소개 화면 없이 <Dashboard /> 하나가 전부다. 그 안에서도 AI 챗봇(ChatPanel)과 승인 패널(ApprovalPanel)은 헤더의 작은 버튼을 눌러야만 열리는 숨은 패널이고, 대시보드 자체는 터미널 스타일 지휘통제 화면 하나로 시작한다.
문제는 이 구조가 "이미 알고 있는 사람"에게만 기능이 보인다는 것이다. 면접관/리뷰어처럼 배경지식 없이 처음 접속한 사람은:
ax-portfolio-roadmap.md에 기록된 정량적 성과(RAGAS faithfulness 0.75결과적으로 백엔드/인프라에 들인 공수(RAG 파이프라인, GitOps, 비동기 처리, 평가 자동화)와 화면에서 실제로 읽히는 인상(지도 + 챗봇) 사이에 괴리가 생긴다. 사용자가 원래 느낀 "부족해 보인다"는 인상은 구현 부족이 아니라 서사(narrative) 부재에서 온다.