기술문서
>HTML/CSS
서버 인프라 모니터링용 서버목록 front-end UI Sample
자료 기본정보
주요 프로그램 스펙
- 평점: 10.0
- 라이선스: free
피드백 및 다운로드
- 사용자 평점: 10.0
- 조회: 1
제조사 및 등록 정보
- 제작사: LUZENSOFT
- 등록일: 2026-01-25 11:23:25
- 설명
Tailwind CSS를 사용하여 레이아웃을 더 세련되게 다듬고, Chart.js를 이용해 시스템 자원 상태를 도넛 차트와 막대 차트로 추가해 보겠습니다.
900px 너비에 최적화된 최신 버전의 코드입니다.
차트가 포함된 서버 모니터링 페이지
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Monitoring - SC-SVR01-1028R</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body { font-family: 'Inter', 'Malgun Gothic', sans-serif; }
</style>
</head>
<body class="bg-slate-50 flex justify-center py-10">
<div id="wrapper" class="w-[900px] bg-white shadow-xl rounded-xl p-8">
<div class="flex justify-between items-center border-b-2 border-blue-500 pb-6 mb-8">
<div>
<h1 class="text-2xl font-bold text-slate-800" id="server_name">서버 실시간 모니터링</h1>
<p class="text-sm text-slate-500 mt-1">Host: <span id="hn" class="font-semibold text-blue-600">-</span></p>
</div>
<input type="date" id="search_date" class="border border-slate-300 rounded-lg px-4 py-2 text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="grid grid-cols-3 gap-6 mb-10">
<div class="bg-slate-50 p-4 rounded-lg border border-slate-100">
<h3 class="text-sm font-semibold text-slate-600 mb-4 text-center">CPU 사용률</h3>
<canvas id="cpuChart" width="150" height="150"></canvas>
</div>
<div class="bg-slate-50 p-4 rounded-lg border border-slate-100">
<h3 class="text-sm font-semibold text-slate-600 mb-4 text-center">RAM 사용률</h3>
<canvas id="ramChart" width="150" height="150"></canvas>
</div>
<div class="bg-slate-50 p-4 rounded-lg border border-slate-100">
<h3 class="text-sm font-semibold text-slate-600 mb-4 text-center">네트워크 트래픽 (Mbps)</h3>
<canvas id="trafficChart" width="150" height="150"></canvas>
</div>
</div>
<div class="grid grid-cols-4 gap-4 mb-10">
<div class="p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
<p class="text-xs text-slate-400 uppercase">OS</p>
<p id="os" class="text-lg font-bold text-slate-700">-</p>
</div>
<div class="p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
<p class="text-xs text-slate-400 uppercase">WAN IP</p>
<p id="wan" class="text-sm font-bold text-slate-700">-</p>
</div>
<div class="p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
<p class="text-xs text-slate-400 uppercase">Internal IP</p>
<p id="ip" class="text-sm font-bold text-slate-700">-</p>
</div>
<div class="p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
<p class="text-xs text-slate-400 uppercase">마지막 업데이트</p>
<p id="mutime" class="text-[11px] font-bold text-blue-500">-</p>
</div>
</div>
<div class="mb-4 flex items-center justify-between">
<h2 class="text-lg font-bold text-slate-800 italic">Storage Drives</h2>
</div>
<div class="overflow-hidden border border-slate-200 rounded-lg">
<table class="w-full text-left border-collapse">
<thead class="bg-slate-800 text-white">
<tr>
<th class="p-3 text-xs uppercase font-semibold">드라이브</th>
<th class="p-3 text-xs uppercase font-semibold">모델명</th>
<th class="p-3 text-xs uppercase font-semibold text-center">전체 (GB)</th>
<th class="p-3 text-xs uppercase font-semibold text-center">남음 (GB)</th>
<th class="p-3 text-xs uppercase font-semibold text-center">사용률</th>
</tr>
</thead>
<tbody id="disk_table_body" class="divide-y divide-slate-200">
</tbody>
</table>
</div>
</div>
<script>
let cpuChart, ramChart, trafficChart;
// 차트 초기화 함수
function initCharts() {
const commonOptions = { cutout: '75%', plugins: { legend: { display: false } } };
cpuChart = new Chart(document.getElementById('cpuChart'), {
type: 'doughnut',
data: { datasets: [{ data: [0, 100], backgroundColor: ['#ef4444', '#e2e8f0'], borderWidth: 0 }] },
options: commonOptions
});
ramChart = new Chart(document.getElementById('ramChart'), {
type: 'doughnut',
data: { datasets: [{ data: [0, 100], backgroundColor: ['#3b82f6', '#e2e8f0'], borderWidth: 0 }] },
options: commonOptions
});
trafficChart = new Chart(document.getElementById('trafficChart'), {
type: 'bar',
data: { labels: ['Traffic'], datasets: [{ data: [0], backgroundColor: '#10b981', borderRadius: 5 }] },
options: { scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } }
});
}
function updateData() {
const urlParams = new URLSearchParams(window.location.search);
const server_no = urlParams.get('server_no') || 1;
let rawDate = $('#search_date').val().replace(/-/g, "");
$.ajax({
url: 'fetch_server_data.php',
type: 'GET',
data: { server_no: server_no, date: rawDate },
dataType: 'json',
success: function(res) {
const s = res.server_info;
// 텍스트 업데이트
$('#hn').text(s.hn);
$('#os').text(s.os === 'W' ? 'Windows' : 'Linux');
$('#wan').text(s.wan);
$('#ip').text(s.ip);
$('#mutime').text(s.mutime);
// 차트 업데이트
cpuChart.data.datasets[0].data = [s.cpu, 100 - s.cpu];
cpuChart.update();
ramChart.data.datasets[0].data = [s.ram, 100 - s.ram];
ramChart.update();
trafficChart.data.datasets[0].data = [s.traffic];
trafficChart.update();
// 디스크 테이블 업데이트
let diskHtml = '';
res.disk_info.forEach(d => {
let usage = ((d.total - d.remain) / d.total * 100).toFixed(1);
diskHtml += `
<tr class="hover:bg-slate-50 transition-colors">
<td class="p-3 font-bold text-slate-700">${d.device}</td>
<td class="p-3 text-sm text-slate-500">${d.name}</td>
<td class="p-3 text-center text-slate-600">${d.total}</td>
<td class="p-3 text-center text-slate-600">${d.remain}</td>
<td class="p-3 w-40">
<div class="flex items-center gap-2">
<div class="w-full bg-slate-200 h-2 rounded-full overflow-hidden">
<div class="bg-green-500 h-full" style="width: ${usage}%"></div>
</div>
<span class="text-[11px] font-bold text-slate-500">${usage}%</span>
</div>
</td>
</tr>
`;
});
$('#disk_table_body').html(diskHtml);
}
});
}
$(document).ready(function() {
$('#search_date').val(new Date().toISOString().split('T')[0]);
initCharts();
updateData();
$('#search_date').on('change', updateData);
});
</script>
</body>
</html>
주요 변경 사항
Tailwind CSS 레이아웃: *
w-[900px]로 너비를 고정하고 중앙 정렬했습니다.slate와blue컬러 톤을 사용하여 깔끔한 관리자 페이지 느낌을 주었습니다.
Chart.js 통합:
CPU/RAM: 도넛(Doughnut) 차트를 사용하여 현재 사용량을 직관적으로 보여줍니다.
Traffic: 막대(Bar) 차트를 사용하여 네트워크 사용량을 표시합니다.
동적 데이터 연동:
AJAX 성공 시
chart.update()메서드를 호출하여 화면 새로고침 없이 차트 바늘이 움직입니다.
디스크 프로그레스 바:
Tailwind의
rounded-full과overflow-hidden을 활용하여 현대적인 디자인의 게이지 바를 만들었습니다.
