feat: 분석 페이지 고도화 및 AI 위험 적응형(AAS) SOI 모델 도입

This commit is contained in:
2026-03-23 13:51:05 +09:00
parent 0953f49db1
commit d416fee414
9 changed files with 1119 additions and 337 deletions

View File

@@ -9,6 +9,8 @@
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
<link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/analysis.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
</head>
<body>
@@ -26,7 +28,7 @@
</ul>
</nav>
<main class="analysis-content">
<main class="analysis-content wide">
<header class="analysis-header">
<div class="title-group">
<div class="ai-badge">AI Sabermetrics</div>
@@ -38,99 +40,105 @@
</div>
</header>
<!-- 핵심 세이버메트릭스 지표 요약 -->
<section class="metrics-grid">
<div class="metric-card sra">
<div class="metric-info">
<span class="label" data-tooltip="Avg. P-WAR Score: 시스템 내 모든 프로젝트의 평균 기여도입니다. 양수(+)가 높을수록 시스템이 활발하게 운영되고 있음을 의미합니다.">평균 P-WAR (기여도) <i class="info-icon">?</i></span>
<h3 class="value">0.00</h3>
<span class="trend up">대체 수준(0.0) 대비</span>
<div class="top-info-grid">
<!-- 딥러닝 모델 상세 설명 섹션 -->
<section class="dl-model-info compact">
<div class="card-header">
<h4><i class="ai-icon">AI</i> Hybrid Prediction Engine</h4>
</div>
<div class="metric-chart-mini" id="sraChart"></div>
</div>
<div class="metric-card iwar">
<div class="metric-info">
<span class="label" data-tooltip="Total Pending Risks: 현재 해결되지 않고 방치된 문의사항의 총합입니다. P-WAR 감점 요인입니다.">미결 리스크 총합 <i class="info-icon">?</i></span>
<h3 class="value">0</h3>
<span class="trend steady">실시간 집계</span>
<div class="card-body">
<div class="model-desc-vertical">
<div class="model-item-vertical">
<span class="model-tag">알고리즘</span>
<p>최근 9회차 시계열의 <strong>Velocity</strong> 및 가속도 분석</p>
</div>
<div class="model-item-vertical">
<span class="model-tag">판단 로직</span>
<p>활동 시 <strong>'선형 추세'</strong>, 정체 시 <strong>'지수 감쇄'</strong> 가중치 적용</p>
</div>
</div>
</div>
<div class="metric-chart-mini" id="iwarChart"></div>
</div>
<div class="metric-card piso">
<div class="metric-info">
<span class="label" data-tooltip="Active Resource Scale: P-WAR가 양수(+)인 활성 프로젝트들이 관리 중인 총 파일 규모입니다.">활성 자원 규모 <i class="info-icon">?</i></span>
<h3 class="value">0</h3>
<span class="trend up">시스템 기여 자원</span>
</section>
<!-- SOI 심층 설명 섹션 (AAS 모델 반영) -->
<section class="soi-deep-dive compact">
<div class="card-header">
<h4><i class="info-icon">i</i> AI 위험 적응형 모델 (AAS) 기반 지표 정의</h4>
</div>
<div class="metric-chart-mini" id="pisoChart"></div>
</div>
<div class="metric-card stability">
<div class="metric-info">
<span class="label" data-tooltip="Zombie Project Rate: P-WAR 점수가 -1.0 이하인 '대체 수준 미달' 프로젝트의 비중입니다.">좀비 프로젝트 비율 <i class="info-icon">?</i></span>
<h3 class="value">0%</h3>
<span class="trend steady">집중 관리 대상</span>
<div class="card-body">
<div class="soi-info-columns">
<div class="soi-info-column">
<h6>1. AI 자산 가치 평가 (Scale)</h6>
<p>단순 방치가 아닌 <strong>자산의 크기</strong>를 감지합니다. 파일 수가 많은 프로젝트는 관리 공백 시 데이터 가치 하락 속도를 AI가 자동으로 <strong>가속(Acceleration)</strong>시켜 경고를 강화합니다.</p>
</div>
<div class="soi-info-column">
<h6>2. 조직 위험 전염 (Contagion)</h6>
<p>부서별 평균 활동성을 분석하여 <strong>조직적 방치</strong>를 포착합니다. 소속 부서의 전반적인 SOI가 낮을 경우, 개별 프로젝트의 위험 지수를 상향 조정하여 시스템적 붕괴를 예보합니다.</p>
</div>
<div class="soi-info-column">
<h6>3. 동적 위험 계수 (Adaptive Lambda)</h6>
<p>기존의 고정된 공식을 폐기하고, 프로젝트마다 <strong>개별화된 위험 곡선</strong>을 생성합니다. AI가 실시간으로 위험 계수를 재산출하여 가장 실무적인 가치 보존율을 제공합니다.</p>
</div>
</div>
</div>
<div class="metric-chart-mini" id="stabilityChart"></div>
</div>
</section>
</section>
</div>
<!-- 메인 분석 영역 -->
<div class="analysis-main-grid">
<!-- P-WAR 분석 테이블 -->
<div class="analysis-main-full">
<div class="analysis-card timeline-analysis">
<div class="card-header">
<div style="display: flex; flex-direction: column; gap: 4px;">
<h4>Project Performance Above Replacement (P-WAR Ranking)</h4>
<p style="font-size: 11px; color: #888; margin: 0;">대체 수준(Replacement Level) 프로젝트 대비 기여도를 측정합니다.</p>
<h4>Project Stagnation Objective Index (P-SOI Status)</h4>
<p style="font-size: 11px; color: #888; margin: 0;">이상적 관리 상태(100%) 대비 현재의 활동 가치 보존율 및 14일 뒤 미래를 예측합니다.</p>
</div>
<div class="card-tools">
<span id="avg-system-info" style="font-size: 11px; color: #888;">* 0.0 = 시스템 평균 계산 중...</span>
<span id="avg-system-info" style="font-size: 11px; color: #888;">* SOI (Project Health Score)</span>
</div>
</div>
<div class="card-body">
<!-- P-WAR 판정 가이드 범례 수정 -->
<div class="d-war-guide">
<div class="guide-item active-low"><span>양수(+)</span> 운영 중</div>
<div class="guide-item warning-mid"><span>음수(-)</span> 위험군</div>
<div class="guide-item danger-high"><span>-0.3 이하</span> 방치-삭제대상</div>
<div class="guide-item hazard-critical"><span>시스템삭제</span> 잠김예정 프로젝트</div>
<div class="guide-item active-low"><span>70%↑</span> 정상</div>
<div class="guide-item warning-mid"><span>30~70%</span> 주의</div>
<div class="guide-item danger-high"><span>10~30%</span> 위험</div>
<div class="guide-item hazard-critical"><span>10%↓</span> 사망</div>
</div>
<div class="chart-placeholder">
<p>R-Engine 시각화 대기 중...</p>
<!-- 차트 그리드 레이아웃 도입 -->
<div class="analysis-charts-grid">
<div class="chart-container-box">
<h5>건강 상태 분포 (Project Distribution)</h5>
<canvas id="statusChart"></canvas>
</div>
<div class="chart-container-box">
<h5>관리 사각지대 진단 (Vitality Scatter Plot)</h5>
<canvas id="forecastChart"></canvas>
</div>
</div>
</div>
</div>
<!-- 위험 신호 및 예측 -->
<div class="analysis-card risk-prediction">
<div class="card-header">
<h4>Deep Learning 기반 장애 예보 (Risk Signal)</h4>
</div>
<div class="card-body">
<div class="risk-signal-list">
<div class="risk-item high">
<div class="risk-project">프로젝트 A (해외/중동)</div>
<div class="risk-reason">파일 급증 대비 활동 정체 (P-ISO 급락)</div>
<div class="risk-status">위험</div>
</div>
<div class="risk-item warning">
<div class="risk-project">프로젝트 B (기술개발)</div>
<div class="risk-reason">특정 환경(IE/Edge) 문의 집중 발생</div>
<div class="risk-status">주의</div>
</div>
<div class="risk-item safe">
<div class="risk-project">프로젝트 C (국내/장헌)</div>
<div class="risk-reason">로그 활동성 및 해결률 안정적 유지</div>
<div class="risk-status">안전</div>
</div>
<div id="p-war-table-container">
<!-- 테이블은 기존처럼 동적 삽입 -->
</div>
</div>
</div>
</div>
</main>
<!-- 분석 상세 설명 모달 -->
<div id="analysisModal" class="modal-overlay" onclick="closeAnalysisModal(event)">
<div class="modal-content" onclick="event.stopPropagation()">
<div class="modal-header">
<h3 id="modalTitle">지표 상세 설명</h3>
<button class="modal-close" onclick="closeAnalysisModal()">&times;</button>
</div>
<div class="modal-body" id="modalBody">
<!-- 내용 동적 삽입 -->
</div>
</div>
</div>
<script src="js/common.js"></script>
<script src="js/analysis.js"></script>
</body>
</html>
</html>