hskwon
b7cf045a81
- api.sam.kr/develop/ 접속 시 문서 목록 표시 - 5개 문서 항목 추가: * 시스템 아키텍처 다이어그램 (HTML) * 서버 사양 및 비용 분석표 (HTML) * CI/CD 파이프라인 흐름도 (HTML) * 재해복구(DR) 계획서 (Markdown) * 네트워크 토폴로지 다이어그램 (HTML) - 모달 팝업으로 문서 뷰어 구현 - HTML 파일: iframe으로 원본 표시 - Markdown 파일: 자동 HTML 변환 후 표시 - 반응형 디자인 적용 (모바일/태블릿/데스크톱) - Purple-Blue 그라디언트 UI 테마
314 lines
11 KiB
HTML
314 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>서버 사양 및 비용 분석</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
margin-bottom: 30px;
|
|
font-size: 2.5em;
|
|
}
|
|
.spec-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 30px 0;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.spec-table thead {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
.spec-table th {
|
|
padding: 15px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
}
|
|
.spec-table td {
|
|
padding: 15px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
.spec-table tbody tr:hover {
|
|
background: #f5f5f5;
|
|
transform: scale(1.01);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.cloud-server {
|
|
background: #e3f2fd;
|
|
}
|
|
.idc-server {
|
|
background: #fff3e0;
|
|
}
|
|
.cost-summary {
|
|
margin-top: 40px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.cost-card {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
transform: translateY(0);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.cost-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
|
|
}
|
|
.cost-card h3 {
|
|
margin-bottom: 15px;
|
|
font-size: 1.2em;
|
|
border-bottom: 2px solid rgba(255,255,255,0.3);
|
|
padding-bottom: 10px;
|
|
}
|
|
.cost-value {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
.cost-detail {
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
}
|
|
.phase-section {
|
|
margin-top: 40px;
|
|
padding: 25px;
|
|
background: #f8f9fa;
|
|
border-radius: 15px;
|
|
border-left: 5px solid #667eea;
|
|
}
|
|
.phase-title {
|
|
font-size: 1.5em;
|
|
color: #667eea;
|
|
margin-bottom: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.resource-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
.resource-item {
|
|
padding: 15px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.resource-item:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
}
|
|
.resource-label {
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
margin-bottom: 5px;
|
|
}
|
|
.resource-value {
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.note-section {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: #fffbf0;
|
|
border-radius: 10px;
|
|
border: 1px solid #ffc107;
|
|
}
|
|
.note-section h3 {
|
|
color: #f57c00;
|
|
margin-bottom: 10px;
|
|
}
|
|
.note-section ul {
|
|
margin-left: 20px;
|
|
color: #666;
|
|
}
|
|
.note-section li {
|
|
margin: 8px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>💰 서버 사양 및 비용 분석</h1>
|
|
|
|
<table class="spec-table">
|
|
<thead>
|
|
<tr>
|
|
<th>구분</th>
|
|
<th>서버명</th>
|
|
<th>타입/모델</th>
|
|
<th>사양</th>
|
|
<th>용도</th>
|
|
<th>위치</th>
|
|
<th>예상 월 비용</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="cloud-server">
|
|
<td>클라우드</td>
|
|
<td>운영 서버 A</td>
|
|
<td>Standard</td>
|
|
<td>4vCore / 8GB RAM</td>
|
|
<td>Web Service + DB Master</td>
|
|
<td>Cloud</td>
|
|
<td>₩88,000</td>
|
|
</tr>
|
|
<tr class="cloud-server">
|
|
<td>클라우드</td>
|
|
<td>운영 서버 B</td>
|
|
<td>Standard</td>
|
|
<td>4vCore / 8GB RAM</td>
|
|
<td>Web Service + DB Standby</td>
|
|
<td>Cloud</td>
|
|
<td>₩88,000</td>
|
|
</tr>
|
|
<tr class="cloud-server">
|
|
<td>클라우드</td>
|
|
<td>개발 서버 C</td>
|
|
<td>Play</td>
|
|
<td>2vCore / 4GB RAM</td>
|
|
<td>Staging Service</td>
|
|
<td>Cloud</td>
|
|
<td>₩44,000</td>
|
|
</tr>
|
|
<tr class="idc-server">
|
|
<td>코로케이션</td>
|
|
<td>HP DL360 #1</td>
|
|
<td>Physical</td>
|
|
<td>기존 보유 장비</td>
|
|
<td>CI/CD Runner, Admin(통계)</td>
|
|
<td>IDC</td>
|
|
<td>₩150,000 (상면비)</td>
|
|
</tr>
|
|
<tr class="idc-server">
|
|
<td>코로케이션</td>
|
|
<td>HP DL210 #2</td>
|
|
<td>Physical</td>
|
|
<td>기존 보유 장비</td>
|
|
<td>백업, DR, 모니터링</td>
|
|
<td>IDC</td>
|
|
<td>₩150,000 (상면비)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="cost-summary">
|
|
<div class="cost-card">
|
|
<h3>💵 클라우드 비용</h3>
|
|
<div class="cost-value">₩220,000</div>
|
|
<div class="cost-detail">월간 클라우드 서버 3대</div>
|
|
</div>
|
|
<div class="cost-card">
|
|
<h3>🏢 IDC 코로케이션</h3>
|
|
<div class="cost-value">₩300,000</div>
|
|
<div class="cost-detail">월간 상면비 (2U 기준)</div>
|
|
</div>
|
|
<div class="cost-card">
|
|
<h3>🌐 네트워크/기타</h3>
|
|
<div class="cost-value">₩80,000</div>
|
|
<div class="cost-detail">트래픽, 로드밸런서, 백업</div>
|
|
</div>
|
|
<div class="cost-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
|
<h3>📊 총 예상 비용</h3>
|
|
<div class="cost-value">₩600,000</div>
|
|
<div class="cost-detail">월간 인프라 총 비용</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="phase-section">
|
|
<div class="phase-title">🚀 초기 단계 (현재)</div>
|
|
<div class="resource-grid">
|
|
<div class="resource-item">
|
|
<div class="resource-label">총 vCore</div>
|
|
<div class="resource-value">10 vCore</div>
|
|
</div>
|
|
<div class="resource-item">
|
|
<div class="resource-label">총 메모리</div>
|
|
<div class="resource-value">20 GB</div>
|
|
</div>
|
|
<div class="resource-item">
|
|
<div class="resource-label">서버 대수</div>
|
|
<div class="resource-value">5대</div>
|
|
</div>
|
|
<div class="resource-item">
|
|
<div class="resource-label">예상 동시접속</div>
|
|
<div class="resource-value">~1,000명</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="phase-section">
|
|
<div class="phase-title">📈 확장 단계 (6개월 후)</div>
|
|
<div class="resource-grid">
|
|
<div class="resource-item">
|
|
<div class="resource-label">추가 운영 서버</div>
|
|
<div class="resource-value">+2대</div>
|
|
</div>
|
|
<div class="resource-item">
|
|
<div class="resource-label">DB 분리</div>
|
|
<div class="resource-value">Managed DB</div>
|
|
</div>
|
|
<div class="resource-item">
|
|
<div class="resource-label">캐시 서버</div>
|
|
<div class="resource-value">Redis Cluster</div>
|
|
</div>
|
|
<div class="resource-item">
|
|
<div class="resource-label">예상 비용 증가</div>
|
|
<div class="resource-value">+₩400,000</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="note-section">
|
|
<h3>📝 비용 최적화 전략</h3>
|
|
<ul>
|
|
<li>초기 3개월: 현재 구성으로 서비스 안정화에 집중</li>
|
|
<li>트래픽 증가 시: 클라우드 서버만 우선 증설 (유연한 확장)</li>
|
|
<li>DB 부하 증가 시: Managed DB 서비스 전환 검토</li>
|
|
<li>코로케이션 서버: 변경 없이 백업/모니터링 전용으로 유지</li>
|
|
<li>Reserved Instance 계약으로 클라우드 비용 20-30% 절감 가능</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="note-section">
|
|
<h3>⚠️ 추가 고려사항</h3>
|
|
<ul>
|
|
<li>SSL 인증서 비용 (연간)</li>
|
|
<li>도메인 유지비용</li>
|
|
<li>모니터링 도구 라이센스 (Datadog, New Relic 등)</li>
|
|
<li>백업 스토리지 추가 비용 (클라우드 스토리지)</li>
|
|
<li>DDoS 방어 서비스 (필요시)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |