OpenManager Vibe V4
OpenManager Vibe V4는 자연어 기반 서버 분석 및 모니터링 시스템입니다. 관리자가 쉬운 언어로 서버 상태를 질문하면 시스템이 자동으로 분석하여 결과를 제공합니다.
배포 링크
프로젝트 구조
.
├── frontend/ # 프론트엔드 코드
│ ├── css/ # 스타일시트 파일들
│ ├── public/ # 정적 자원 파일들
│ ├── index.html # 메인 랜딩 페이지
│ ├── server_dashboard.html # 서버 모니터링 대시보드
│ ├── server_detail.html # 서버 상세 정보 페이지
│ ├── agent.js # 에이전트 스크립트
│ ├── ai_processor.js # 자연어 처리 엔진
│ ├── data_processor.js # 데이터 처리 로직
│ ├── dummy_data_generator.js # 더미 데이터 생성기
│ ├── fixed_dummy_data.js # 고정 더미 데이터
│ ├── summary.js # 데이터 요약 및 보고서 생성
│ └── config.js # 설정 파일
│
└── mcp-lite-server/ # 백엔드 서버
├── context/ # 컨텍스트 문서 보관
├── server.js # 백엔드 서버 코드
└── package.json # 백엔드 의존성 정의
MCP 연동 흐름
프론트엔드와 MCP Lite 서버는 다음과 같이 연동됩니다:
- 프론트엔드: 사용자가 자연어로 서버 상태에 관해 질문 입력
- API 호출: 프론트엔드가 질문과 컨텍스트 정보를 MCP 서버의
/query 엔드포인트로 전송 - 백엔드 처리: MCP 서버가 질문을 컨텍스트 파일과 매칭하여 적절한 응답 생성
- 결과 표시: 응답이 프론트엔드로 전달되어 사용자에게 시각적으로 표시
시연 환경에서는:
- 프론트엔드에서 대부분의 로직이 실행되며 가상 데이터 사용
- MCP 서버는 보조적인 역할로 단순한 자연어 처리 기능만 제공
- 실제 환경에서는 MCP 서버가 실제 모니터링 데이터와 고급 LLM을 연동하는 구조로 확장 가능
주요 기능
- 자연어 기반 질의: 관리자가 일상 언어로 서버 상태 및 문제점을 질문
- 자동 분석: 시스템이 질문을 분석하여 관련 서버 목록 및 문제 원인 제공
- 직관적 대시보드: 서버 상태 및 성능 지표를 시각적으로 표시
- 상세 보고서: 문제 원인과 해결책이 포함된 분석 보고서 생성
- 데이터 필터링: 시간, 서버 유형, 위치별 필터링 기능
기술 스택
프론트엔드
- HTML5/CSS3/JavaScript (바닐라)
- 부트스트랩 UI 프레임워크
- Chart.js (데이터 시각화)
- Font Awesome/Bootstrap Icons (아이콘)
백엔드
- Node.js
- Express.js
- 파일 기반 컨텍스트 관리 시스템
🏗 시스템 구조: 대규모 AI 에이전트 vs 본 프로젝트 (MCP 기반)
🧠 실제 LLM 기반 AI 에이전트 구조
- 데이터 흐름: 실시간 모니터링 로그 → 수집기(Kafka/Fluentd 등) → 분석 엔진
- 자연어 처리:
- LLM API (OpenAI, Claude 등) 연동
- Python/Java 기반 백엔드
- 고도화된 쿼리 해석 및 문맥 이해 기능 포함
- 분석 엔진:
- InfluxDB, Elasticsearch 등 시계열/검색엔진과 연동
- 이벤트 기반 패턴 분석, 알람 트리거링
- UI 통합:
- 대시보드 완전 통합
- 대화형 인터페이스 + 사용 기록 학습
⚙️ 본 프로젝트 (경량화 MCP 기반 데모 시스템)
- 프론트엔드: 순수 HTML/JS로 구축, Netlify에 배포
- MCP 서버: Node.js 기반 문서 검색 서버, Render에 배포
- 문서 기반 질의응답: context 폴더 내
.txt 문서로 응답 패턴 관리 - 데이터 분석: 브라우저에서 직접 필터링 및 보고서 생성
- 장점:
- LLM 없이도 AI처럼 작동 (저비용/고효율)
- 문서만 추가하면 응답 확장 가능
- 도입과 유지비용 낮음
- 한계:
- 질문 해석 능력이 제한적 (문맥 이해 X)
- 대용량 실시간 분석에는 부적합
🤖 개발 방식 (Vibe Coding 기반)
본 프로젝트는 GPT 기반 도구에 프롬프트를 입력하고, Cursor를 통해 AI 코딩 지시 방식으로 개발되었습니다.
개발 단계별 흐름
1단계: 초기 기획 및 기능 정의 (GPT 사용)
- 프로젝트 구조 제안
- MCP 서버의 역할, context 기반 응답 방식 정의
- 기술 스택 및 UI 기본 방향 설정
2단계: 기능 구현 및 프론트 연동 (Cursor 사용)
- 프론트 JS 코드 구성
- MCP 요청 fetch 처리
- 마크다운 응답 렌더링
3단계: 고도화 및 문서 패턴 대응 (Cursor + GPT 협업)
- context 다중 문서 대응 구조 확장
- 자동 보고서 템플릿 설계
- 장애 유형별 대응 문서 설계 및 분기 처리
📐 개발 가이드라인
✅ UI 및 디자인
index.html과 UI 스타일은 현재 상태를 유지 (90% 이상 보존 권장)- 사용자 경험 흐름을 해치지 않는 범위 내에서만 변경 허용
✅ MCP 백엔드
- 서버 기능 확장 및 context 구조 추가는 자유롭게 개선 가능
- context 문서 구조는 텍스트 기반
.txt 또는 .md를 따름 - API 확장 시 RESTful 구조 권장
개발 가이드라인
프로젝트 작업 시 다음 가이드라인을 준수하십시오:
UI 및 디자인 관련 (Commit ad03d5f 기준)
- 인덱스 파일 및 사용자 인터페이스: 현재 UI/UX 디자인은 철저히 보존해야 합니다.
index.html 및 외부로 표현되는 사용자 인터페이스 구성요소는 현재 스타일을 90% 이상 유지해야 합니다.- 부득이한 경우가 아니면 프론트엔드 디자인을 수정하지 마십시오.
백엔드 개발
- 백엔드 기능 개선: 서버 측 기능 개선 및 확장은 자유롭게 진행 가능합니다.
- 데이터 처리 로직 개선
- API 엔드포인트 추가 및 최적화
- 성능 개선 및 확장성 강화 작업
설치 및 실행
프론트엔드
cd frontend
# 정적 서버로 실행 (예: VS Code의 Live Server 또는 기타 정적 파일 서버)
백엔드 서버
cd mcp-lite-server
npm install
node server.js
배포 환경
- 프론트엔드: Netlify (https://openvibe3.netlify.app)
- 백엔드: Render.com (https://openmanager-vibe-v4.onrender.com)
향후 개발 계획
- AI 통합: 실제 자연어 처리 LLM 연동
- 실시간 데이터: 실제 서버 모니터링 시스템(Prometheus, Zabbix 등)과 연동
- 시각화 확장: 데이터 분석 그래프 및 차트 다양화
- 알림 시스템: 장애 발생 시 자동 알림 및 보고서 전송
개발자 정보
본 프로젝트는 Claude, GPT, Gemini 등 다양한 AI 모델 기반의 Vibe Coding 방식을 통해 개발되었습니다.
라이센스
이 프로젝트는 내부 개발용으로 작성되었으며, 관련 라이센스는 별도로 명시하지 않았습니다.