hskwon
b7cf045a81
- api.sam.kr/develop/ 접속 시 문서 목록 표시 - 5개 문서 항목 추가: * 시스템 아키텍처 다이어그램 (HTML) * 서버 사양 및 비용 분석표 (HTML) * CI/CD 파이프라인 흐름도 (HTML) * 재해복구(DR) 계획서 (Markdown) * 네트워크 토폴로지 다이어그램 (HTML) - 모달 팝업으로 문서 뷰어 구현 - HTML 파일: iframe으로 원본 표시 - Markdown 파일: 자동 HTML 변환 후 표시 - 반응형 디자인 적용 (모바일/태블릿/데스크톱) - Purple-Blue 그라디언트 UI 테마
662 lines
26 KiB
HTML
662 lines
26 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;
|
|
}
|
|
.presentation-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.slide {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
min-height: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
page-break-after: always;
|
|
}
|
|
.slide-header {
|
|
border-bottom: 3px solid #667eea;
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.slide-number {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.slide-title {
|
|
display: inline-block;
|
|
font-size: 2em;
|
|
color: #333;
|
|
vertical-align: middle;
|
|
}
|
|
.key-point {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
margin: 20px 0;
|
|
font-size: 1.2em;
|
|
animation: pulse 3s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.02); }
|
|
}
|
|
.highlight-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
.highlight-card {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
border-left: 5px solid #667eea;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.highlight-card:hover {
|
|
transform: translateX(10px);
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
}
|
|
.metric-box {
|
|
text-align: center;
|
|
padding: 15px;
|
|
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
|
border-radius: 10px;
|
|
}
|
|
.metric-value {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.metric-label {
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
.phase-timeline {
|
|
position: relative;
|
|
padding: 20px 0;
|
|
}
|
|
.phase-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20px 0;
|
|
position: relative;
|
|
}
|
|
.phase-number {
|
|
background: #667eea;
|
|
color: white;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
flex-shrink: 0;
|
|
}
|
|
.phase-content {
|
|
margin-left: 30px;
|
|
flex: 1;
|
|
}
|
|
.phase-title {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
.phase-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 25px;
|
|
top: 70px;
|
|
bottom: 50px;
|
|
width: 2px;
|
|
background: #667eea;
|
|
}
|
|
.cost-comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
margin: 30px 0;
|
|
}
|
|
.cost-column {
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
}
|
|
.cost-current {
|
|
background: #fff3e0;
|
|
border: 2px solid #ff9800;
|
|
}
|
|
.cost-future {
|
|
background: #e8f5e9;
|
|
border: 2px solid #4caf50;
|
|
}
|
|
.benefit-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.benefit-list li {
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
background: #f0f0f0;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
padding-left: 50px;
|
|
}
|
|
.benefit-list li:before {
|
|
content: '✅';
|
|
position: absolute;
|
|
left: 15px;
|
|
font-size: 1.5em;
|
|
}
|
|
.risk-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
.risk-table th {
|
|
background: #667eea;
|
|
color: white;
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
.risk-table td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.risk-high {
|
|
background: #ffebee;
|
|
}
|
|
.risk-medium {
|
|
background: #fff3e0;
|
|
}
|
|
.risk-low {
|
|
background: #e8f5e9;
|
|
}
|
|
.next-steps {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-top: 30px;
|
|
}
|
|
.step-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 15px 0;
|
|
}
|
|
.step-number {
|
|
background: white;
|
|
color: #667eea;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 15px;
|
|
}
|
|
@media print {
|
|
.slide {
|
|
page-break-after: always;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="presentation-container">
|
|
|
|
<!-- Slide 1: Title -->
|
|
<div class="slide">
|
|
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
|
<h1 style="font-size: 3em; color: #333; text-align: center; margin-bottom: 30px;">
|
|
🚀 클라우드 하이브리드<br>인프라 구축 제안
|
|
</h1>
|
|
<p style="font-size: 1.5em; color: #666; text-align: center;">
|
|
안정적이고 확장 가능한 시스템 아키텍처
|
|
</p>
|
|
<div style="margin-top: 50px; padding: 20px; background: #f8f9fa; border-radius: 15px;">
|
|
<p style="color: #666; text-align: center;">
|
|
<strong>제안일:</strong> 2025년 1월<br>
|
|
<strong>대상:</strong> 서비스 초기 운영 ~ 성장 단계<br>
|
|
<strong>목표:</strong> 비용 효율적인 고가용성 시스템 구축
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: 현재 상황 및 목표 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-number">1</span>
|
|
<h2 class="slide-title">현재 상황 및 목표</h2>
|
|
</div>
|
|
|
|
<div class="highlight-grid">
|
|
<div class="highlight-card">
|
|
<h3 style="color: #667eea; margin-bottom: 15px;">📍 현재 상황</h3>
|
|
<ul style="color: #666; margin-left: 20px;">
|
|
<li>개발 서버 1대 보유</li>
|
|
<li>사무실 내 유휴 서버 2대</li>
|
|
<li>GitLab 기반 개발 환경</li>
|
|
<li>초기 서비스 준비 단계</li>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight-card">
|
|
<h3 style="color: #667eea; margin-bottom: 15px;">🎯 구축 목표</h3>
|
|
<ul style="color: #666; margin-left: 20px;">
|
|
<li>24/7 고가용성 확보</li>
|
|
<li>자동화된 CI/CD 파이프라인</li>
|
|
<li>비용 효율적 구성</li>
|
|
<li>단계적 확장 가능</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="key-point">
|
|
💡 핵심 전략: 클라우드와 온프레미스를 결합한 하이브리드 구조로 비용 절감과 안정성 동시 확보
|
|
</div>
|
|
|
|
<div class="highlight-grid" style="margin-top: 30px;">
|
|
<div class="metric-box">
|
|
<div class="metric-value">5대</div>
|
|
<div class="metric-label">총 서버 구성</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-value">99.9%</div>
|
|
<div class="metric-label">목표 가용성</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-value">60만원</div>
|
|
<div class="metric-label">월 예상 비용</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-value">10주</div>
|
|
<div class="metric-label">구축 기간</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: 시스템 구성안 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-number">2</span>
|
|
<h2 class="slide-title">제안 시스템 구성</h2>
|
|
</div>
|
|
|
|
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
|
|
<thead>
|
|
<tr style="background: #667eea; color: white;">
|
|
<th style="padding: 15px;">구분</th>
|
|
<th style="padding: 15px;">서버</th>
|
|
<th style="padding: 15px;">사양</th>
|
|
<th style="padding: 15px;">역할</th>
|
|
<th style="padding: 15px;">위치</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="background: #e3f2fd;">
|
|
<td style="padding: 12px;" rowspan="3"><strong>클라우드</strong></td>
|
|
<td style="padding: 12px;">운영 A</td>
|
|
<td style="padding: 12px;">4vCore/8GB</td>
|
|
<td style="padding: 12px;">Service + DB Master</td>
|
|
<td style="padding: 12px;">Cloud</td>
|
|
</tr>
|
|
<tr style="background: #e3f2fd;">
|
|
<td style="padding: 12px;">운영 B</td>
|
|
<td style="padding: 12px;">4vCore/8GB</td>
|
|
<td style="padding: 12px;">Service + DB Slave</td>
|
|
<td style="padding: 12px;">Cloud</td>
|
|
</tr>
|
|
<tr style="background: #e3f2fd;">
|
|
<td style="padding: 12px;">개발 C</td>
|
|
<td style="padding: 12px;">2vCore/4GB</td>
|
|
<td style="padding: 12px;">Staging</td>
|
|
<td style="padding: 12px;">Cloud</td>
|
|
</tr>
|
|
<tr style="background: #fff3e0;">
|
|
<td style="padding: 12px;" rowspan="2"><strong>코로케이션</strong></td>
|
|
<td style="padding: 12px;">HP DL360</td>
|
|
<td style="padding: 12px;">기존 장비</td>
|
|
<td style="padding: 12px;">CI/CD, Admin</td>
|
|
<td style="padding: 12px;">IDC</td>
|
|
</tr>
|
|
<tr style="background: #fff3e0;">
|
|
<td style="padding: 12px;">HP DL210</td>
|
|
<td style="padding: 12px;">기존 장비</td>
|
|
<td style="padding: 12px;">Backup, Monitoring</td>
|
|
<td style="padding: 12px;">IDC</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="key-point">
|
|
🔄 핵심 기능: 로드밸런싱, DB Master-Slave 복제, 자동 백업, 24/7 모니터링
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: 구축 로드맵 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-number">3</span>
|
|
<h2 class="slide-title">단계별 구축 로드맵</h2>
|
|
</div>
|
|
|
|
<div class="phase-timeline">
|
|
<div class="phase-item">
|
|
<div class="phase-number">1</div>
|
|
<div class="phase-content">
|
|
<div class="phase-title">Phase 1: 기초 인프라 (1-2주)</div>
|
|
<div style="color: #666;">개발 서버 구축, Docker 환경, 기본 CI/CD 구성</div>
|
|
</div>
|
|
</div>
|
|
<div class="phase-item">
|
|
<div class="phase-number">2</div>
|
|
<div class="phase-content">
|
|
<div class="phase-title">Phase 2: 운영 환경 (3-4주)</div>
|
|
<div style="color: #666;">운영 서버 2대 구축, 로드밸런서, DB 이중화</div>
|
|
</div>
|
|
</div>
|
|
<div class="phase-item">
|
|
<div class="phase-number">3</div>
|
|
<div class="phase-content">
|
|
<div class="phase-title">Phase 3: CI/CD 고도화 (5-6주)</div>
|
|
<div style="color: #666;">Runner 서버 구축, 무중단 배포 구현</div>
|
|
</div>
|
|
</div>
|
|
<div class="phase-item">
|
|
<div class="phase-number">4</div>
|
|
<div class="phase-content">
|
|
<div class="phase-title">Phase 4: 백업/모니터링 (7-8주)</div>
|
|
<div style="color: #666;">자동 백업, DR 환경, 모니터링 시스템</div>
|
|
</div>
|
|
</div>
|
|
<div class="phase-item">
|
|
<div class="phase-number">5</div>
|
|
<div class="phase-content">
|
|
<div class="phase-title">Phase 5: 최적화 (9-10주)</div>
|
|
<div style="color: #666;">성능 튜닝, 문서화, 팀 교육</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-grid" style="margin-top: 40px;">
|
|
<div class="highlight-card">
|
|
<h4 style="color: #667eea;">🎯 2주차 목표</h4>
|
|
<p style="color: #666;">개발 환경 자동 배포</p>
|
|
</div>
|
|
<div class="highlight-card">
|
|
<h4 style="color: #667eea;">🎯 6주차 목표</h4>
|
|
<p style="color: #666;">무중단 운영 배포</p>
|
|
</div>
|
|
<div class="highlight-card">
|
|
<h4 style="color: #667eea;">🎯 10주차 목표</h4>
|
|
<p style="color: #666;">정식 서비스 오픈</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: 비용 분석 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-number">4</span>
|
|
<h2 class="slide-title">비용 분석</h2>
|
|
</div>
|
|
|
|
<div class="cost-comparison">
|
|
<div class="cost-column cost-current">
|
|
<h3 style="text-align: center; margin-bottom: 20px;">📊 초기 운영 비용</h3>
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<td style="padding: 10px;">클라우드 (3대)</td>
|
|
<td style="text-align: right; padding: 10px;"><strong>22만원</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px;">IDC 코로케이션</td>
|
|
<td style="text-align: right; padding: 10px;"><strong>30만원</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px;">네트워크/기타</td>
|
|
<td style="text-align: right; padding: 10px;"><strong>8만원</strong></td>
|
|
</tr>
|
|
<tr style="border-top: 2px solid #ff9800;">
|
|
<td style="padding: 10px;"><strong>월 총액</strong></td>
|
|
<td style="text-align: right; padding: 10px;"><strong>60만원</strong></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="cost-column cost-future">
|
|
<h3 style="text-align: center; margin-bottom: 20px;">📈 6개월 후 예상</h3>
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<td style="padding: 10px;">클라우드 확장</td>
|
|
<td style="text-align: right; padding: 10px;"><strong>+20만원</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px;">Managed DB</td>
|
|
<td style="text-align: right; padding: 10px;"><strong>+15만원</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 10px;">CDN/캐싱</td>
|
|
<td style="text-align: right; padding: 10px;"><strong>+5만원</strong></td>
|
|
</tr>
|
|
<tr style="border-top: 2px solid #4caf50;">
|
|
<td style="padding: 10px;"><strong>예상 총액</strong></td>
|
|
<td style="text-align: right; padding: 10px;"><strong>100만원</strong></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="key-point">
|
|
💰 비용 절감 전략: 기존 서버 활용으로 월 40만원 절감, Reserved Instance로 추가 20-30% 할인 가능
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 6: 기대 효과 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-number">5</span>
|
|
<h2 class="slide-title">기대 효과</h2>
|
|
</div>
|
|
|
|
<ul class="benefit-list">
|
|
<li>
|
|
<strong>고가용성 확보</strong><br>
|
|
이중화 구성으로 99.9% 가용성 달성, 단일 장애점(SPOF) 제거
|
|
</li>
|
|
<li>
|
|
<strong>개발 생산성 향상</strong><br>
|
|
자동화된 CI/CD로 배포 시간 90% 단축 (30분 → 3분)
|
|
</li>
|
|
<li>
|
|
<strong>비용 효율성</strong><br>
|
|
하이브리드 구성으로 순수 클라우드 대비 40% 비용 절감
|
|
</li>
|
|
<li>
|
|
<strong>확장 유연성</strong><br>
|
|
트래픽 증가에 따른 단계적 확장 가능, 오토스케일링 준비
|
|
</li>
|
|
<li>
|
|
<strong>안정적 운영</strong><br>
|
|
24/7 모니터링, 자동 백업, DR 환경으로 데이터 손실 방지
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="highlight-grid" style="margin-top: 30px;">
|
|
<div class="metric-box">
|
|
<div class="metric-value">5분</div>
|
|
<div class="metric-label">평균 배포 시간</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-value">30초</div>
|
|
<div class="metric-label">장애 복구 시간</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-value">95%</div>
|
|
<div class="metric-label">자동화율</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: 리스크 관리 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-number">6</span>
|
|
<h2 class="slide-title">리스크 관리</h2>
|
|
</div>
|
|
|
|
<table class="risk-table">
|
|
<thead>
|
|
<tr>
|
|
<th>리스크</th>
|
|
<th>영향도</th>
|
|
<th>대응 방안</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="risk-high">
|
|
<td><strong>클라우드 장애</strong></td>
|
|
<td>높음</td>
|
|
<td>
|
|
• 멀티 AZ 구성<br>
|
|
• IDC 백업 사이트 활성화<br>
|
|
• 1시간 내 DR 전환
|
|
</td>
|
|
</tr>
|
|
<tr class="risk-medium">
|
|
<td><strong>비용 초과</strong></td>
|
|
<td>중간</td>
|
|
<td>
|
|
• 일일 비용 모니터링<br>
|
|
• Reserved Instance 활용<br>
|
|
• 단계적 확장 전략
|
|
</td>
|
|
</tr>
|
|
<tr class="risk-low">
|
|
<td><strong>기술 부채</strong></td>
|
|
<td>낮음</td>
|
|
<td>
|
|
• 정기적 리팩토링<br>
|
|
• 코드 리뷰 프로세스<br>
|
|
• 기술 문서화
|
|
</td>
|
|
</tr>
|
|
<tr class="risk-medium">
|
|
<td><strong>보안 위협</strong></td>
|
|
<td>중간</td>
|
|
<td>
|
|
• WAF 적용<br>
|
|
• 정기 보안 점검<br>
|
|
• 침입 탐지 시스템
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="key-point" style="margin-top: 30px;">
|
|
🛡️ 핵심 전략: 각 리스크별 대응 계획 수립 및 정기적인 DR 훈련으로 대응 능력 향상
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 8: 다음 단계 -->
|
|
<div class="slide">
|
|
<div class="slide-header">
|
|
<span class="slide-number">7</span>
|
|
<h2 class="slide-title">다음 단계 액션 플랜</h2>
|
|
</div>
|
|
|
|
<div class="next-steps">
|
|
<h3 style="margin-bottom: 20px;">즉시 시작 가능한 작업</h3>
|
|
<div class="step-item">
|
|
<div class="step-number">1</div>
|
|
<div>클라우드 계정 생성 및 네트워크 대역 할당</div>
|
|
</div>
|
|
<div class="step-item">
|
|
<div class="step-number">2</div>
|
|
<div>개발 서버 (Play) 인스턴스 생성 및 Docker 환경 구축</div>
|
|
</div>
|
|
<div class="step-item">
|
|
<div class="step-number">3</div>
|
|
<div>GitLab CI/CD 파이프라인 기본 설정</div>
|
|
</div>
|
|
<div class="step-item">
|
|
<div class="step-number">4</div>
|
|
<div>IDC 코로케이션 계약 및 서버 입고 준비</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 15px;">
|
|
<h3 style="color: #667eea; margin-bottom: 15px;">📅 1주차 체크포인트</h3>
|
|
<ul style="margin-left: 20px; color: #666;">
|
|
<li>개발 서버 구동 완료</li>
|
|
<li>기본 CI/CD 파이프라인 테스트</li>
|
|
<li>팀 권한 및 접근 설정</li>
|
|
<li>초기 비용 모니터링 시작</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="key-point" style="margin-top: 30px;">
|
|
🚀 목표: 2주 내 개발 환경 완성 → 10주 내 정식 서비스 오픈
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 9: Q&A -->
|
|
<div class="slide">
|
|
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
|
<h1 style="font-size: 3em; color: #333; margin-bottom: 30px;">Q&A</h1>
|
|
<p style="font-size: 1.5em; color: #666; text-align: center; margin-bottom: 40px;">
|
|
추가 질문이나 논의사항이 있으신가요?
|
|
</p>
|
|
|
|
<div style="background: #f8f9fa; padding: 30px; border-radius: 15px; width: 100%; max-width: 600px;">
|
|
<h3 style="color: #667eea; margin-bottom: 20px;">💬 주요 검토 사항</h3>
|
|
<ul style="color: #666; line-height: 2;">
|
|
<li>구체적인 일정 조정</li>
|
|
<li>초기 투자 비용 승인</li>
|
|
<li>팀 역할 및 책임 분담</li>
|
|
<li>우선순위 조정</li>
|
|
<li>추가 요구사항</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="margin-top: 40px; text-align: center;">
|
|
<p style="color: #666;">
|
|
<strong>연락처:</strong> infrastructure@company.com<br>
|
|
<strong>문서:</strong> 상세 기술 문서 제공 가능
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |