Spaces:

openfree
/

AI-Calcurator

Running

App Files Files Community

openfree commited on 23 days ago

Commit

56ee7d4

verified ·

1 Parent(s): db25cd8

Update index.html

Browse files

Files changed (1) hide show

index.html +686 -19

index.html CHANGED Viewed

@@ -1,19 +1,686 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI SaaS 구축 방식 비교 분석</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            color: #ffffff;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 3rem;
+            animation: fadeInDown 0.8s ease-out;
+        }
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #00d2ff, #3a7bd5, #00d2ff);
+            background-size: 200% auto;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: gradient 3s ease infinite;
+        }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: #a8a8b3;
+        }
+        .methods-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+        .method-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 2rem;
+            transition: all 0.3s ease;
+            animation: fadeInUp 0.8s ease-out;
+            position: relative;
+            overflow: hidden;
+        }
+        .method-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(58, 123, 213, 0.1) 0%, transparent 70%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .method-card:hover::before {
+            opacity: 1;
+        }
+        .method-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+            border-color: rgba(58, 123, 213, 0.5);
+        }
+        .method-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+        .method-icon {
+            width: 60px;
+            height: 60px;
+            margin-right: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 15px;
+            font-size: 2rem;
+        }
+        .outsource-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+        .inhouse-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
+        .platform-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
+        .method-title {
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+        .method-description {
+            color: #a8a8b3;
+            margin-bottom: 1.5rem;
+            line-height: 1.6;
+        }
+        .cost-breakdown {
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        .cost-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+            padding: 0.5rem 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .cost-item:last-child {
+            border-bottom: none;
+        }
+        .pros-cons {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+            margin-top: 1.5rem;
+        }
+        .pros, .cons {
+            padding: 1rem;
+            border-radius: 10px;
+            font-size: 0.9rem;
+        }
+        .pros {
+            background: rgba(46, 213, 115, 0.1);
+            border: 1px solid rgba(46, 213, 115, 0.3);
+        }
+        .cons {
+            background: rgba(255, 71, 87, 0.1);
+            border: 1px solid rgba(255, 71, 87, 0.3);
+        }
+        .pros h4, .cons h4 {
+            margin-bottom: 0.5rem;
+            font-size: 1rem;
+        }
+        .pros ul, .cons ul {
+            list-style: none;
+            padding-left: 0;
+        }
+        .pros li::before {
+            content: "✓ ";
+            color: #2ed573;
+            font-weight: bold;
+        }
+        .cons li::before {
+            content: "✗ ";
+            color: #ff4757;
+            font-weight: bold;
+        }
+        .calculator-section {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 2rem;
+            margin-bottom: 3rem;
+            animation: fadeInUp 1s ease-out;
+        }
+        .calculator-title {
+            font-size: 2rem;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+        .input-group {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        .input-field {
+            display: flex;
+            flex-direction: column;
+        }
+        .input-field label {
+            margin-bottom: 0.5rem;
+            color: #a8a8b3;
+            font-size: 0.9rem;
+        }
+        .input-field input, .input-field select {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            padding: 0.75rem 1rem;
+            color: #ffffff;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        .input-field input:focus, .input-field select:focus {
+            outline: none;
+            border-color: #3a7bd5;
+            background: rgba(255, 255, 255, 0.15);
+        }
+        .input-field select option {
+            background: #24243e;
+        }
+        .calculate-btn {
+            background: linear-gradient(45deg, #00d2ff, #3a7bd5);
+            border: none;
+            border-radius: 10px;
+            padding: 1rem 2rem;
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #ffffff;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: block;
+            margin: 0 auto;
+        }
+        .calculate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(58, 123, 213, 0.3);
+        }
+        .results-section {
+            margin-top: 3rem;
+            display: none;
+        }
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+        .result-card {
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 15px;
+            padding: 1.5rem;
+            text-align: center;
+        }
+        .result-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin: 1rem 0;
+            background: linear-gradient(45deg, #00d2ff, #3a7bd5);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .chart-container {
+            position: relative;
+            height: 400px;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin-top: 2rem;
+        }
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+            }
+            .methods-grid {
+                grid-template-columns: 1fr;
+            }
+            .pros-cons {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>AI SaaS 구축 방식 비교 분석</h1>
+            <p class="subtitle">최적의 개발 방식을 선택하기 위한 종합 가이드</p>
+        </header>
+        <div class="methods-grid">
+            <!-- 외주 용역 ��발 방식 -->
+            <div class="method-card">
+                <div class="method-header">
+                    <div class="method-icon outsource-icon">🤝</div>
+                    <h2 class="method-title">외주 용역 개발</h2>
+                </div>
+                <p class="method-description">
+                    전문 개발사에 프로젝트를 위탁하여 AI SaaS를 구축하는 방식
+                </p>
+                <div class="cost-breakdown">
+                    <div class="cost-item">
+                        <span>초기 비용</span>
+                        <span>₩50M - ₩200M</span>
+                    </div>
+                    <div class="cost-item">
+                        <span>개발 기간</span>
+                        <span>3 - 6개월</span>
+                    </div>
+                    <div class="cost-item">
+                        <span>유지보수</span>
+                        <span>월 ₩5M - ₩15M</span>
+                    </div>
+                </div>
+                <div class="pros-cons">
+                    <div class="pros">
+                        <h4>장점</h4>
+                        <ul>
+                            <li>빠른 개발 착수</li>
+                            <li>전문성 활용</li>
+                            <li>인력 관리 부담 없음</li>
+                        </ul>
+                    </div>
+                    <div class="cons">
+                        <h4>단점</h4>
+                        <ul>
+                            <li>높은 비용</li>
+                            <li>커스터마이징 제한</li>
+                            <li>의존성 문제</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- 자체 인력 개발 방식 -->
+            <div class="method-card">
+                <div class="method-header">
+                    <div class="method-icon inhouse-icon">👥</div>
+                    <h2 class="method-title">자체 인력 개발</h2>
+                </div>
+                <p class="method-description">
+                    내부 개발팀을 구성하여 직접 AI SaaS를 개발하는 방식
+                </p>
+                <div class="cost-breakdown">
+                    <div class="cost-item">
+                        <span>초기 비용</span>
+                        <span>₩30M - ₩100M</span>
+                    </div>
+                    <div class="cost-item">
+                        <span>개발 기간</span>
+                        <span>6 - 12개월</span>
+                    </div>
+                    <div class="cost-item">
+                        <span>운영 비용</span>
+                        <span>월 ₩20M - ₩50M</span>
+                    </div>
+                </div>
+                <div class="pros-cons">
+                    <div class="pros">
+                        <h4>장점</h4>
+                        <ul>
+                            <li>완전한 통제권</li>
+                            <li>장기적 비용 효율</li>
+                            <li>기술 내재화</li>
+                        </ul>
+                    </div>
+                    <div class="cons">
+                        <h4>단점</h4>
+                        <ul>
+                            <li>채용 어려움</li>
+                            <li>긴 개발 기간</li>
+                            <li>높은 운영 비용</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- V-Platform 방식 -->
+            <div class="method-card">
+                <div class="method-header">
+                    <div class="method-icon platform-icon">🚀</div>
+                    <h2 class="method-title">V-Platform</h2>
+                </div>
+                <p class="method-description">
+                    기존 플랫폼을 활용하여 빠르게 AI SaaS를 구축하는 방식
+                </p>
+                <div class="cost-breakdown">
+                    <div class="cost-item">
+                        <span>초기 비용</span>
+                        <span>₩10M - ₩50M</span>
+                    </div>
+                    <div class="cost-item">
+                        <span>개발 기간</span>
+                        <span>1 - 3개월</span>
+                    </div>
+                    <div class="cost-item">
+                        <span>구독료</span>
+                        <span>월 ₩2M - ₩10M</span>
+                    </div>
+                </div>
+                <div class="pros-cons">
+                    <div class="pros">
+                        <h4>장점</h4>
+                        <ul>
+                            <li>빠른 시장 진입</li>
+                            <li>낮은 초기 비용</li>
+                            <li>검증된 기술</li>
+                        </ul>
+                    </div>
+                    <div class="cons">
+                        <h4>단점</h4>
+                        <ul>
+                            <li>제한된 커스터마이징</li>
+                            <li>플랫폼 종속성</li>
+                            <li>차별화 어려움</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 비용 계산기 섹션 -->
+        <div class="calculator-section">
+            <h2 class="calculator-title">비용 시뮬레이터</h2>
+            <div class="input-group">
+                <div class="input-field">
+                    <label for="projectScale">프로젝트 규모</label>
+                    <select id="projectScale">
+                        <option value="small">소규모 (MVP)</option>
+                        <option value="medium">중규모</option>
+                        <option value="large">대규모</option>
+                    </select>
+                </div>
+                <div class="input-field">
+                    <label for="duration">운영 기간 (개월)</label>
+                    <input type="number" id="duration" value="12" min="1" max="60">
+                </div>
+                <div class="input-field">
+                    <label for="users">예상 사용자 수</label>
+                    <input type="number" id="users" value="1000" min="100" max="1000000">
+                </div>
+                <div class="input-field">
+                    <label for="features">AI 기능 복잡도</label>
+                    <select id="features">
+                        <option value="basic">기본 (챗봇, 번역)</option>
+                        <option value="advanced">고급 (이미지 생성, 분석)</option>
+                        <option value="enterprise">엔터프라이즈 (맞춤형 모델)</option>
+                    </select>
+                </div>
+            </div>
+            <button class="calculate-btn" onclick="calculateCosts()">비용 계산하기</button>
+            <div class="results-section" id="results">
+                <div class="results-grid">
+                    <div class="result-card">
+                        <h3>외주 용역 총 비용</h3>
+                        <div class="result-value" id="outsourceCost">₩0</div>
+                        <p>초기 + 운영 비용</p>
+                    </div>
+                    <div class="result-card">
+                        <h3>자체 인력 총 비용</h3>
+                        <div class="result-value" id="inhouseCost">₩0</div>
+                        <p>인건비 + 인프라</p>
+                    </div>
+                    <div class="result-card">
+                        <h3>V-Platform 총 비용</h3>
+                        <div class="result-value" id="platformCost">₩0</div>
+                        <p>라이선스 + API</p>
+                    </div>
+                </div>
+                <div class="chart-container">
+                    <canvas id="costChart"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let costChart = null;
+        function calculateCosts() {
+            const scale = document.getElementById('projectScale').value;
+            const duration = parseInt(document.getElementById('duration').value);
+            const users = parseInt(document.getElementById('users').value);
+            const features = document.getElementById('features').value;
+            // 기본 비용 설정
+            const baseCosts = {
+                outsource: {
+                    small: { initial: 50, monthly: 5 },
+                    medium: { initial: 100, monthly: 10 },
+                    large: { initial: 200, monthly: 15 }
+                },
+                inhouse: {
+                    small: { initial: 30, monthly: 20 },
+                    medium: { initial: 60, monthly: 35 },
+                    large: { initial: 100, monthly: 50 }
+                },
+                platform: {
+                    small: { initial: 10, monthly: 2 },
+                    medium: { initial: 30, monthly: 5 },
+                    large: { initial: 50, monthly: 10 }
+                }
+            };
+            // 복잡도에 따른 가중치
+            const complexityMultiplier = {
+                basic: 1,
+                advanced: 1.5,
+                enterprise: 2
+            };
+            // 사용자 수에 따른 추가 비용
+            const userCostFactor = Math.log10(users) / 3;
+            // 비용 계산
+            const multiplier = complexityMultiplier[features] * userCostFactor;
+            const outsourceCost = baseCosts.outsource[scale].initial +
+                                 (baseCosts.outsource[scale].monthly * duration * multiplier);
+            const inhouseCost = baseCosts.inhouse[scale].initial +
+                               (baseCosts.inhouse[scale].monthly * duration * multiplier);
+            const platformCost = baseCosts.platform[scale].initial +
+                                (baseCosts.platform[scale].monthly * duration * multiplier);
+            // 결과 표시
+            document.getElementById('outsourceCost').textContent = `₩${Math.round(outsourceCost)}M`;
+            document.getElementById('inhouseCost').textContent = `₩${Math.round(inhouseCost)}M`;
+            document.getElementById('platformCost').textContent = `₩${Math.round(platformCost)}M`;
+            document.getElementById('results').style.display = 'block';
+            // 차트 그리기
+            drawChart(duration, baseCosts[scale], multiplier);
+        }
+        function drawChart(duration, costs, multiplier) {
+            const ctx = document.getElementById('costChart').getContext('2d');
+            if (costChart) {
+                costChart.destroy();
+            }
+            const months = Array.from({length: duration}, (_, i) => i + 1);
+            costChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: months.map(m => `${m}개월`),
+                    datasets: [
+                        {
+                            label: '외주 용역',
+                            data: months.map(m => costs.outsource.initial + (costs.outsource.monthly * m * multiplier)),
+                            borderColor: '#764ba2',
+                            backgroundColor: 'rgba(118, 75, 162, 0.1)',
+                            tension: 0.4
+                        },
+                        {
+                            label: '자체 인력',
+                            data: months.map(m => costs.inhouse.initial + (costs.inhouse.monthly * m * multiplier)),
+                            borderColor: '#f5576c',
+                            backgroundColor: 'rgba(245, 87, 108, 0.1)',
+                            tension: 0.4
+                        },
+                        {
+                            label: 'V-Platform',
+                            data: months.map(m => costs.platform.initial + (costs.platform.monthly * m * multiplier)),
+                            borderColor: '#00f2fe',
+                            backgroundColor: 'rgba(0, 242, 254, 0.1)',
+                            tension: 0.4
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '시간에 따른 누적 비용 추이',
+                            color: '#ffffff',
+                            font: {
+                                size: 16
+                            }
+                        },
+                        legend: {
+                            labels: {
+                                color: '#ffffff'
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#ffffff'
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#ffffff',
+                                callback: function(value) {
+                                    return '₩' + value + 'M';
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        // 애니메이션 효과를 위한 Intersection Observer
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';
+                }
+            });
+        });
+        document.querySelectorAll('.method-card').forEach(card => {
+            observer.observe(card);
+        });
+    </script>
+</body>
+</html>