Hugging Face's logo

Spaces:
openfree
/
AI-Calcurator
Running

App Files Community
openfree commited on
Commit
2d96d6a
ยท
verified ยท
1 Parent(s): 56ee7d4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +724 -159
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI SaaS ๊ตฌ์ถ• ๋ฐฉ์‹ ๋น„๊ต ๋ถ„์„</title>
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
8
  <style>
9
  * {
@@ -53,6 +53,54 @@
53
  color: #a8a8b3;
54
  }
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  .methods-grid {
57
  display: grid;
58
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
@@ -300,6 +348,132 @@
300
  margin-top: 2rem;
301
  }
302
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  @keyframes fadeInDown {
304
  from {
305
  opacity: 0;
@@ -334,198 +508,499 @@
334
  .pros-cons {
335
  grid-template-columns: 1fr;
336
  }
 
 
 
 
 
 
 
 
337
  }
338
  </style>
339
  </head>
340
  <body>
341
  <div class="container">
342
  <header>
343
- <h1>AI SaaS ๊ตฌ์ถ• ๋ฐฉ์‹ ๋น„๊ต ๋ถ„์„</h1>
344
- <p class="subtitle">์ตœ์ ์˜ ๊ฐœ๋ฐœ ๋ฐฉ์‹์„ ์„ ํƒํ•˜๊ธฐ ์œ„ํ•œ ์ข…ํ•ฉ ๊ฐ€์ด๋“œ</p>
345
  </header>
346
 
347
- <div class="methods-grid">
348
- <!-- ์™ธ์ฃผ ์šฉ์—ญ ๊ฐœ๋ฐœ ๋ฐฉ์‹ -->
349
- <div class="method-card">
350
- <div class="method-header">
351
- <div class="method-icon outsource-icon">๐Ÿค</div>
352
- <h2 class="method-title">์™ธ์ฃผ ์šฉ์—ญ ๊ฐœ๋ฐœ</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
353
  </div>
354
- <p class="method-description">
355
- ์ „๋ฌธ ๊ฐœ๋ฐœ์‚ฌ์— ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํƒํ•˜์—ฌ AI SaaS๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ์‹
356
- </p>
357
- <div class="cost-breakdown">
358
- <div class="cost-item">
359
- <span>์ดˆ๊ธฐ ๋น„์šฉ</span>
360
- <span>โ‚ฉ50M - โ‚ฉ200M</span>
361
- </div>
362
- <div class="cost-item">
363
- <span>๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</span>
364
- <span>3 - 6๊ฐœ์›”</span>
365
- </div>
366
- <div class="cost-item">
367
- <span>์œ ์ง€๋ณด์ˆ˜</span>
368
- <span>์›” โ‚ฉ5M - โ‚ฉ15M</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  </div>
370
  </div>
371
- <div class="pros-cons">
372
- <div class="pros">
373
- <h4>์žฅ์ </h4>
374
- <ul>
375
- <li>๋น ๋ฅธ ๊ฐœ๋ฐœ ์ฐฉ์ˆ˜</li>
376
- <li>์ „๋ฌธ์„ฑ ํ™œ์šฉ</li>
377
- <li>์ธ๋ ฅ ๊ด€๋ฆฌ ๋ถ€๋‹ด ์—†์Œ</li>
378
- </ul>
379
- </div>
380
- <div class="cons">
381
- <h4>๋‹จ์ </h4>
382
- <ul>
383
- <li>๋†’์€ ๋น„์šฉ</li>
384
- <li>์ปค์Šคํ„ฐ๋งˆ์ด์ง• ์ œํ•œ</li>
385
- <li>์˜์กด์„ฑ ๋ฌธ์ œ</li>
386
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
387
  </div>
388
  </div>
389
  </div>
390
 
391
- <!-- ์ž์ฒด ์ธ๋ ฅ ๊ฐœ๋ฐœ ๋ฐฉ์‹ -->
392
- <div class="method-card">
393
- <div class="method-header">
394
- <div class="method-icon inhouse-icon">๐Ÿ‘ฅ</div>
395
- <h2 class="method-title">์ž์ฒด ์ธ๋ ฅ ๊ฐœ๋ฐœ</h2>
396
- </div>
397
- <p class="method-description">
398
- ๋‚ด๋ถ€ ๊ฐœ๋ฐœํŒ€์„ ๊ตฌ์„ฑํ•˜์—ฌ ์ง์ ‘ AI SaaS๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ์‹
399
- </p>
400
- <div class="cost-breakdown">
401
- <div class="cost-item">
402
- <span>์ดˆ๊ธฐ ๋น„์šฉ</span>
403
- <span>โ‚ฉ30M - โ‚ฉ100M</span>
404
- </div>
405
- <div class="cost-item">
406
- <span>๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</span>
407
- <span>6 - 12๊ฐœ์›”</span>
408
- </div>
409
- <div class="cost-item">
410
- <span>์šด์˜ ๋น„์šฉ</span>
411
- <span>์›” โ‚ฉ20M - โ‚ฉ50M</span>
 
 
 
 
 
 
412
  </div>
413
  </div>
414
- <div class="pros-cons">
415
- <div class="pros">
416
- <h4>์žฅ์ </h4>
417
- <ul>
418
- <li>์™„์ „ํ•œ ํ†ต์ œ๊ถŒ</li>
419
- <li>์žฅ๊ธฐ์  ๋น„์šฉ ํšจ์œจ</li>
420
- <li>๊ธฐ์ˆ  ๋‚ด์žฌํ™”</li>
421
- </ul>
422
- </div>
423
- <div class="cons">
424
- <h4>๋‹จ์ </h4>
425
- <ul>
426
- <li>์ฑ„์šฉ ์–ด๋ ค์›€</li>
427
- <li>๊ธด ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</li>
428
- <li>๋†’์€ ์šด์˜ ๋น„์šฉ</li>
429
- </ul>
 
 
 
 
 
 
430
  </div>
431
  </div>
432
  </div>
 
433
 
434
- <!-- V-Platform ๋ฐฉ์‹ -->
435
- <div class="method-card">
436
- <div class="method-header">
437
- <div class="method-icon platform-icon">๐Ÿš€</div>
438
- <h2 class="method-title">V-Platform</h2>
439
- </div>
440
- <p class="method-description">
441
- ๊ธฐ์กด ํ”Œ๋žซํผ์„ ํ™œ์šฉํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ AI SaaS๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ์‹
442
- </p>
443
- <div class="cost-breakdown">
444
- <div class="cost-item">
445
- <span>์ดˆ๊ธฐ ๋น„์šฉ</span>
446
- <span>โ‚ฉ10M - โ‚ฉ50M</span>
447
- </div>
448
- <div class="cost-item">
449
- <span>๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</span>
450
- <span>1 - 3๊ฐœ์›”</span>
451
- </div>
452
- <div class="cost-item">
453
- <span>๊ตฌ๋…๋ฃŒ</span>
454
- <span>์›” โ‚ฉ2M - โ‚ฉ10M</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
455
  </div>
456
  </div>
457
- <div class="pros-cons">
458
- <div class="pros">
459
- <h4>์žฅ์ </h4>
460
- <ul>
461
- <li>๋น ๋ฅธ ์‹œ์žฅ ์ง„์ž…</li>
462
- <li>๋‚ฎ์€ ์ดˆ๊ธฐ ๋น„์šฉ</li>
463
- <li>๊ฒ€์ฆ๋œ ๊ธฐ์ˆ </li>
464
- </ul>
465
- </div>
466
- <div class="cons">
467
- <h4>๋‹จ์ </h4>
468
- <ul>
469
- <li>์ œํ•œ๋œ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•</li>
470
- <li>ํ”Œ๋žซํผ ์ข…์†์„ฑ</li>
471
- <li>์ฐจ๋ณ„ํ™” ์–ด๋ ค์›€</li>
472
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
473
  </div>
474
  </div>
475
- </div>
476
- </div>
477
 
478
- <!-- ๋น„์šฉ ๊ณ„์‚ฐ๊ธฐ ์„น์…˜ -->
479
- <div class="calculator-section">
480
- <h2 class="calculator-title">๋น„์šฉ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ</h2>
481
- <div class="input-group">
482
- <div class="input-field">
483
- <label for="projectScale">ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ</label>
484
- <select id="projectScale">
485
- <option value="small">์†Œ๊ทœ๋ชจ (MVP)</option>
486
- <option value="medium">์ค‘๊ทœ๋ชจ</option>
487
- <option value="large">๋Œ€๊ทœ๋ชจ</option>
488
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
489
  </div>
490
- <div class="input-field">
491
- <label for="duration">์šด์˜ ๊ธฐ๊ฐ„ (๊ฐœ์›”)</label>
492
- <input type="number" id="duration" value="12" min="1" max="60">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
493
  </div>
494
- <div class="input-field">
495
- <label for="users">์˜ˆ์ƒ ์‚ฌ์šฉ์ž ์ˆ˜</label>
496
- <input type="number" id="users" value="1000" min="100" max="1000000">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
497
  </div>
498
- <div class="input-field">
499
- <label for="features">AI ๊ธฐ๋Šฅ ๋ณต์žก๋„</label>
500
- <select id="features">
501
- <option value="basic">๊ธฐ๋ณธ (์ฑ—๋ด‡, ๋ฒˆ์—ญ)</option>
502
- <option value="advanced">๊ณ ๊ธ‰ (์ด๋ฏธ์ง€ ์ƒ์„ฑ, ๋ถ„์„)</option>
503
- <option value="enterprise">์—”ํ„ฐํ”„๋ผ์ด์ฆˆ (๋งž์ถคํ˜• ๋ชจ๋ธ)</option>
504
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
505
  </div>
506
- </div>
507
- <button class="calculate-btn" onclick="calculateCosts()">๋น„์šฉ ๊ณ„์‚ฐํ•˜๊ธฐ</button>
508
 
509
- <div class="results-section" id="results">
510
- <div class="results-grid">
511
- <div class="result-card">
512
- <h3>์™ธ์ฃผ ์šฉ์—ญ ์ด ๋น„์šฉ</h3>
513
- <div class="result-value" id="outsourceCost">โ‚ฉ0</div>
514
- <p>์ดˆ๊ธฐ + ์šด์˜ ๋น„์šฉ</p>
515
  </div>
516
- <div class="result-card">
517
- <h3>์ž์ฒด ์ธ๋ ฅ ์ด ๋น„์šฉ</h3>
518
- <div class="result-value" id="inhouseCost">โ‚ฉ0</div>
519
- <p>์ธ๊ฑด๋น„ + ์ธํ”„๋ผ</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
520
  </div>
521
- <div class="result-card">
522
- <h3>V-Platform ์ด ๋น„์šฉ</h3>
523
- <div class="result-value" id="platformCost">โ‚ฉ0</div>
524
- <p>๋ผ์ด์„ ์Šค + API</p>
 
 
 
 
 
 
 
 
 
 
 
525
  </div>
526
  </div>
527
- <div class="chart-container">
528
- <canvas id="costChart"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
529
  </div>
530
  </div>
531
  </div>
@@ -533,6 +1008,96 @@
533
 
534
  <script>
535
  let costChart = null;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
536
 
537
  function calculateCosts() {
538
  const scale = document.getElementById('projectScale').value;
@@ -618,7 +1183,7 @@
618
  tension: 0.4
619
  },
620
  {
621
- label: 'V-Platform',
622
  data: months.map(m => costs.platform.initial + (costs.platform.monthly * m * multiplier)),
623
  borderColor: '#00f2fe',
624
  backgroundColor: 'rgba(0, 242, 254, 0.1)',
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI SAAS Build Calculator</title>
7
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
8
  <style>
9
  * {
 
53
  color: #a8a8b3;
54
  }
55
 
56
+ .tabs {
57
+ display: flex;
58
+ justify-content: center;
59
+ margin-bottom: 3rem;
60
+ background: rgba(255, 255, 255, 0.05);
61
+ backdrop-filter: blur(10px);
62
+ border-radius: 15px;
63
+ padding: 0.5rem;
64
+ gap: 0.5rem;
65
+ }
66
+
67
+ .tab {
68
+ padding: 1rem 2rem;
69
+ background: transparent;
70
+ border: none;
71
+ color: #a8a8b3;
72
+ cursor: pointer;
73
+ border-radius: 10px;
74
+ transition: all 0.3s ease;
75
+ font-size: 1.1rem;
76
+ font-weight: 500;
77
+ }
78
+
79
+ .tab.active {
80
+ background: linear-gradient(45deg, #00d2ff, #3a7bd5);
81
+ color: #ffffff;
82
+ transform: scale(1.05);
83
+ }
84
+
85
+ .tab:hover:not(.active) {
86
+ background: rgba(255, 255, 255, 0.1);
87
+ color: #ffffff;
88
+ }
89
+
90
+ .tab-content {
91
+ display: none;
92
+ }
93
+
94
+ .tab-content.active {
95
+ display: block;
96
+ animation: fadeIn 0.5s ease;
97
+ }
98
+
99
+ @keyframes fadeIn {
100
+ from { opacity: 0; }
101
+ to { opacity: 1; }
102
+ }
103
+
104
  .methods-grid {
105
  display: grid;
106
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 
348
  margin-top: 2rem;
349
  }
350
 
351
+ /* ๋งž์ถค ์„ค๊ณ„ ์Šคํƒ€์ผ */
352
+ .custom-design-container {
353
+ background: rgba(255, 255, 255, 0.05);
354
+ backdrop-filter: blur(10px);
355
+ border: 1px solid rgba(255, 255, 255, 0.1);
356
+ border-radius: 20px;
357
+ padding: 2rem;
358
+ }
359
+
360
+ .component-section {
361
+ margin-bottom: 2.5rem;
362
+ }
363
+
364
+ .component-title {
365
+ font-size: 1.3rem;
366
+ margin-bottom: 1rem;
367
+ display: flex;
368
+ align-items: center;
369
+ gap: 0.5rem;
370
+ }
371
+
372
+ .component-icon {
373
+ width: 30px;
374
+ height: 30px;
375
+ background: linear-gradient(45deg, #00d2ff, #3a7bd5);
376
+ border-radius: 8px;
377
+ display: flex;
378
+ align-items: center;
379
+ justify-content: center;
380
+ font-size: 1.2rem;
381
+ }
382
+
383
+ .component-options {
384
+ display: grid;
385
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
386
+ gap: 1rem;
387
+ }
388
+
389
+ .option-card {
390
+ background: rgba(255, 255, 255, 0.05);
391
+ border: 1px solid rgba(255, 255, 255, 0.2);
392
+ border-radius: 10px;
393
+ padding: 1rem;
394
+ cursor: pointer;
395
+ transition: all 0.3s ease;
396
+ position: relative;
397
+ overflow: hidden;
398
+ }
399
+
400
+ .option-card.selected {
401
+ background: rgba(58, 123, 213, 0.2);
402
+ border-color: #3a7bd5;
403
+ transform: scale(1.05);
404
+ }
405
+
406
+ .option-card:hover {
407
+ border-color: #00d2ff;
408
+ background: rgba(255, 255, 255, 0.1);
409
+ }
410
+
411
+ .option-name {
412
+ font-weight: 600;
413
+ margin-bottom: 0.5rem;
414
+ }
415
+
416
+ .option-details {
417
+ display: flex;
418
+ justify-content: space-between;
419
+ font-size: 0.9rem;
420
+ color: #a8a8b3;
421
+ }
422
+
423
+ .custom-result {
424
+ background: rgba(0, 0, 0, 0.3);
425
+ border-radius: 15px;
426
+ padding: 2rem;
427
+ margin-top: 2rem;
428
+ display: none;
429
+ }
430
+
431
+ .custom-summary {
432
+ display: grid;
433
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
434
+ gap: 2rem;
435
+ margin-bottom: 2rem;
436
+ }
437
+
438
+ .summary-item {
439
+ text-align: center;
440
+ }
441
+
442
+ .summary-label {
443
+ color: #a8a8b3;
444
+ margin-bottom: 0.5rem;
445
+ }
446
+
447
+ .summary-value {
448
+ font-size: 2rem;
449
+ font-weight: 700;
450
+ background: linear-gradient(45deg, #00d2ff, #3a7bd5);
451
+ -webkit-background-clip: text;
452
+ -webkit-text-fill-color: transparent;
453
+ }
454
+
455
+ .selected-components {
456
+ background: rgba(255, 255, 255, 0.05);
457
+ border-radius: 10px;
458
+ padding: 1.5rem;
459
+ }
460
+
461
+ .selected-components h4 {
462
+ margin-bottom: 1rem;
463
+ }
464
+
465
+ .component-list {
466
+ display: grid;
467
+ gap: 0.5rem;
468
+ }
469
+
470
+ .component-list-item {
471
+ display: flex;
472
+ justify-content: space-between;
473
+ padding: 0.5rem 0;
474
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
475
+ }
476
+
477
  @keyframes fadeInDown {
478
  from {
479
  opacity: 0;
 
508
  .pros-cons {
509
  grid-template-columns: 1fr;
510
  }
511
+
512
+ .tabs {
513
+ flex-direction: column;
514
+ }
515
+
516
+ .tab {
517
+ width: 100%;
518
+ }
519
  }
520
  </style>
521
  </head>
522
  <body>
523
  <div class="container">
524
  <header>
525
+ <h1>AI SAAS Build Calculator</h1>
526
+ <p class="subtitle">์ตœ์ ์˜ AI ์„œ๋น„์Šค ๊ตฌ์ถ• ๋ฐฉ์‹์„ ์ฐพ์•„๋“œ๋ฆฝ๋‹ˆ๋‹ค</p>
527
  </header>
528
 
529
+ <div class="tabs">
530
+ <button class="tab active" onclick="switchTab('comparison')">๊ตฌ์ถ• ๋ฐฉ์‹ ๋น„๊ต</button>
531
+ <button class="tab" onclick="switchTab('custom')">๋‚˜๋งŒ์˜ ๋งž์ถค ์„ค๊ณ„</button>
532
+ </div>
533
+
534
+ <!-- ๊ตฌ์ถ• ๋ฐฉ์‹ ๋น„๊ต ํƒญ -->
535
+ <div id="comparison" class="tab-content active">
536
+ <div class="methods-grid">
537
+ <!-- ์™ธ์ฃผ ์šฉ์—ญ ๊ฐœ๋ฐœ ๋ฐฉ์‹ -->
538
+ <div class="method-card">
539
+ <div class="method-header">
540
+ <div class="method-icon outsource-icon">๐Ÿค</div>
541
+ <h2 class="method-title">์™ธ์ฃผ ์šฉ์—ญ ๊ฐœ๋ฐœ</h2>
542
+ </div>
543
+ <p class="method-description">
544
+ ์ „๋ฌธ ๊ฐœ๋ฐœ์‚ฌ์— ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํƒํ•˜์—ฌ AI SaaS๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ์‹
545
+ </p>
546
+ <div class="cost-breakdown">
547
+ <div class="cost-item">
548
+ <span>์ดˆ๊ธฐ ๋น„์šฉ</span>
549
+ <span>โ‚ฉ50M - โ‚ฉ200M</span>
550
+ </div>
551
+ <div class="cost-item">
552
+ <span>๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</span>
553
+ <span>3 - 6๊ฐœ์›”</span>
554
+ </div>
555
+ <div class="cost-item">
556
+ <span>์œ ์ง€๋ณด์ˆ˜</span>
557
+ <span>์›” โ‚ฉ5M - โ‚ฉ15M</span>
558
+ </div>
559
+ </div>
560
+ <div class="pros-cons">
561
+ <div class="pros">
562
+ <h4>์žฅ์ </h4>
563
+ <ul>
564
+ <li>๋น ๋ฅธ ๊ฐœ๋ฐœ ์ฐฉ์ˆ˜</li>
565
+ <li>์ „๋ฌธ์„ฑ ํ™œ์šฉ</li>
566
+ <li>์ธ๋ ฅ ๊ด€๋ฆฌ ๋ถ€๋‹ด ์—†์Œ</li>
567
+ </ul>
568
+ </div>
569
+ <div class="cons">
570
+ <h4>๋‹จ์ </h4>
571
+ <ul>
572
+ <li>๋†’์€ ๋น„์šฉ</li>
573
+ <li>์ปค์Šคํ„ฐ๋งˆ์ด์ง• ์ œํ•œ</li>
574
+ <li>์˜์กด์„ฑ ๋ฌธ์ œ</li>
575
+ </ul>
576
+ </div>
577
+ </div>
578
  </div>
579
+
580
+ <!-- ์ž์ฒด ์ธ๋ ฅ ๊ฐœ๋ฐœ ๋ฐฉ์‹ -->
581
+ <div class="method-card">
582
+ <div class="method-header">
583
+ <div class="method-icon inhouse-icon">๐Ÿ‘ฅ</div>
584
+ <h2 class="method-title">์ž์ฒด ์ธ๋ ฅ ๊ฐœ๋ฐœ</h2>
585
+ </div>
586
+ <p class="method-description">
587
+ ๋‚ด๋ถ€ ๊ฐœ๋ฐœํŒ€์„ ๊ตฌ์„ฑํ•˜์—ฌ ์ง์ ‘ AI SaaS๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ์‹
588
+ </p>
589
+ <div class="cost-breakdown">
590
+ <div class="cost-item">
591
+ <span>์ดˆ๊ธฐ ๋น„์šฉ</span>
592
+ <span>โ‚ฉ30M - โ‚ฉ100M</span>
593
+ </div>
594
+ <div class="cost-item">
595
+ <span>๏ฟฝ๏ฟฝ๋ฐœ ๊ธฐ๊ฐ„</span>
596
+ <span>6 - 12๊ฐœ์›”</span>
597
+ </div>
598
+ <div class="cost-item">
599
+ <span>์šด์˜ ๋น„์šฉ</span>
600
+ <span>์›” โ‚ฉ20M - โ‚ฉ50M</span>
601
+ </div>
602
+ </div>
603
+ <div class="pros-cons">
604
+ <div class="pros">
605
+ <h4>์žฅ์ </h4>
606
+ <ul>
607
+ <li>์™„์ „ํ•œ ํ†ต์ œ๊ถŒ</li>
608
+ <li>์žฅ๊ธฐ์  ๋น„์šฉ ํšจ์œจ</li>
609
+ <li>๊ธฐ์ˆ  ๋‚ด์žฌํ™”</li>
610
+ </ul>
611
+ </div>
612
+ <div class="cons">
613
+ <h4>๋‹จ์ </h4>
614
+ <ul>
615
+ <li>์ฑ„์šฉ ์–ด๋ ค์›€</li>
616
+ <li>๊ธด ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</li>
617
+ <li>๋†’์€ ์šด์˜ ๋น„์šฉ</li>
618
+ </ul>
619
+ </div>
620
  </div>
621
  </div>
622
+
623
+ <!-- ํ”Œ๋žซํผ ๋Œ€์—ฌ ๋ฐฉ์‹ -->
624
+ <div class="method-card">
625
+ <div class="method-header">
626
+ <div class="method-icon platform-icon">๐Ÿš€</div>
627
+ <h2 class="method-title">ํ”Œ๋žซํผ ๋Œ€์—ฌ</h2>
628
+ </div>
629
+ <p class="method-description">
630
+ ๊ธฐ์กด ํ”Œ๋žซํผ์„ ๋Œ€์—ฌํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ AI SaaS๋ฅผ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ์‹
631
+ </p>
632
+ <div class="cost-breakdown">
633
+ <div class="cost-item">
634
+ <span>์ดˆ๊ธฐ ๋น„์šฉ</span>
635
+ <span>โ‚ฉ10M - โ‚ฉ50M</span>
636
+ </div>
637
+ <div class="cost-item">
638
+ <span>๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</span>
639
+ <span>1 - 3๊ฐœ์›”</span>
640
+ </div>
641
+ <div class="cost-item">
642
+ <span>๊ตฌ๋…๋ฃŒ</span>
643
+ <span>์›” โ‚ฉ2M - โ‚ฉ10M</span>
644
+ </div>
645
+ </div>
646
+ <div class="pros-cons">
647
+ <div class="pros">
648
+ <h4>์žฅ์ </h4>
649
+ <ul>
650
+ <li>๋น ๋ฅธ ์‹œ์žฅ ์ง„์ž…</li>
651
+ <li>๋‚ฎ์€ ์ดˆ๊ธฐ ๋น„์šฉ</li>
652
+ <li>๊ฒ€์ฆ๋œ ๊ธฐ์ˆ </li>
653
+ </ul>
654
+ </div>
655
+ <div class="cons">
656
+ <h4>๋‹จ์ </h4>
657
+ <ul>
658
+ <li>์ œํ•œ๋œ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•</li>
659
+ <li>ํ”Œ๋žซํผ ์ข…์†์„ฑ</li>
660
+ <li>์ฐจ๋ณ„ํ™” ์–ด๋ ค์›€</li>
661
+ </ul>
662
+ </div>
663
  </div>
664
  </div>
665
  </div>
666
 
667
+ <!-- ๋น„์šฉ ๊ณ„์‚ฐ๊ธฐ ์„น์…˜ -->
668
+ <div class="calculator-section">
669
+ <h2 class="calculator-title">๋น„์šฉ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ</h2>
670
+ <div class="input-group">
671
+ <div class="input-field">
672
+ <label for="projectScale">ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ</label>
673
+ <select id="projectScale">
674
+ <option value="small">์†Œ๊ทœ๋ชจ (MVP)</option>
675
+ <option value="medium">์ค‘๊ทœ๋ชจ</option>
676
+ <option value="large">๋Œ€๊ทœ๋ชจ</option>
677
+ </select>
678
+ </div>
679
+ <div class="input-field">
680
+ <label for="duration">์šด์˜ ๊ธฐ๊ฐ„ (๊ฐœ์›”)</label>
681
+ <input type="number" id="duration" value="12" min="1" max="60">
682
+ </div>
683
+ <div class="input-field">
684
+ <label for="users">์˜ˆ์ƒ ์‚ฌ์šฉ์ž ์ˆ˜</label>
685
+ <input type="number" id="users" value="1000" min="100" max="1000000">
686
+ </div>
687
+ <div class="input-field">
688
+ <label for="features">AI ๊ธฐ๋Šฅ ๋ณต์žก๋„</label>
689
+ <select id="features">
690
+ <option value="basic">๊ธฐ๋ณธ (์ฑ—๋ด‡, ๋ฒˆ์—ญ)</option>
691
+ <option value="advanced">๊ณ ๊ธ‰ (์ด๋ฏธ์ง€ ์ƒ์„ฑ, ๋ถ„์„)</option>
692
+ <option value="enterprise">์—”ํ„ฐํ”„๋ผ์ด์ฆˆ (๋งž์ถคํ˜• ๋ชจ๋ธ)</option>
693
+ </select>
694
  </div>
695
  </div>
696
+ <button class="calculate-btn" onclick="calculateCosts()">๋น„์šฉ ๊ณ„์‚ฐํ•˜๊ธฐ</button>
697
+
698
+ <div class="results-section" id="results">
699
+ <div class="results-grid">
700
+ <div class="result-card">
701
+ <h3>์™ธ์ฃผ ์šฉ์—ญ ์ด ๋น„์šฉ</h3>
702
+ <div class="result-value" id="outsourceCost">โ‚ฉ0</div>
703
+ <p>์ดˆ๊ธฐ + ์šด์˜ ๋น„์šฉ</p>
704
+ </div>
705
+ <div class="result-card">
706
+ <h3>์ž์ฒด ์ธ๋ ฅ ์ด ๋น„์šฉ</h3>
707
+ <div class="result-value" id="inhouseCost">โ‚ฉ0</div>
708
+ <p>์ธ๊ฑด๋น„ + ์ธํ”„๋ผ</p>
709
+ </div>
710
+ <div class="result-card">
711
+ <h3>ํ”Œ๋žซํผ ๋Œ€์—ฌ ์ด ๋น„์šฉ</h3>
712
+ <div class="result-value" id="platformCost">โ‚ฉ0</div>
713
+ <p>๋ผ์ด์„ ์Šค + API</p>
714
+ </div>
715
+ </div>
716
+ <div class="chart-container">
717
+ <canvas id="costChart"></canvas>
718
  </div>
719
  </div>
720
  </div>
721
+ </div>
722
 
723
+ <!-- ๋‚˜๋งŒ์˜ ๋งž์ถค ์„ค๊ณ„ ํƒญ -->
724
+ <div id="custom" class="tab-content">
725
+ <div class="custom-design-container">
726
+ <h2 class="calculator-title">๋‚˜๋งŒ์˜ AI SaaS ๋งž์ถค ์„ค๊ณ„</h2>
727
+
728
+ <!-- ํƒ€๊นƒ ์„œ๋น„์Šค ์œ ํ˜• -->
729
+ <div class="component-section">
730
+ <div class="component-title">
731
+ <div class="component-icon">๐ŸŽฏ</div>
732
+ <span>ํƒ€๊นƒ ์„œ๋น„์Šค ์œ ํ˜•</span>
733
+ </div>
734
+ <div class="component-options">
735
+ <div class="option-card" onclick="selectOption('service', 'image-gen', 30, 2)">
736
+ <div class="option-name">์ด๋ฏธ์ง€ ์ƒ์„ฑ</div>
737
+ <div class="option-details">
738
+ <span>โ‚ฉ30M</span>
739
+ <span>2๊ฐœ์›”</span>
740
+ </div>
741
+ </div>
742
+ <div class="option-card" onclick="selectOption('service', 'image-edit', 35, 2.5)">
743
+ <div class="option-name">์ด๋ฏธ์ง€ ํŽธ์ง‘/ํ•ฉ์„ฑ</div>
744
+ <div class="option-details">
745
+ <span>โ‚ฉ35M</span>
746
+ <span>2.5๊ฐœ์›”</span>
747
+ </div>
748
+ </div>
749
+ <div class="option-card" onclick="selectOption('service', 'video-gen', 50, 3)">
750
+ <div class="option-name">๋น„๋””์˜ค ์ƒ์„ฑ</div>
751
+ <div class="option-details">
752
+ <span>โ‚ฉ50M</span>
753
+ <span>3๊ฐœ์›”</span>
754
+ </div>
755
+ </div>
756
+ <div class="option-card" onclick="selectOption('service', 'music-gen', 40, 2.5)">
757
+ <div class="option-name">์Œ์•… ๋ฐ ์Œํ–ฅ ์ƒ์„ฑ</div>
758
+ <div class="option-details">
759
+ <span>โ‚ฉ40M</span>
760
+ <span>2.5๊ฐœ์›”</span>
761
+ </div>
762
+ </div>
763
+ <div class="option-card" onclick="selectOption('service', 'text-chat', 20, 1.5)">
764
+ <div class="option-name">ํ…์ŠคํŠธ ์ƒ์„ฑ(์ฑ—๋ด‡)</div>
765
+ <div class="option-details">
766
+ <span>โ‚ฉ20M</span>
767
+ <span>1.5๊ฐœ์›”</span>
768
+ </div>
769
+ </div>
770
+ <div class="option-card" onclick="selectOption('service', 'text-expert', 25, 2)">
771
+ <div class="option-name">ํ…์ŠคํŠธ ์ƒ์„ฑ(์ „๋ฌธ๊ฐ€)</div>
772
+ <div class="option-details">
773
+ <span>โ‚ฉ25M</span>
774
+ <span>2๊ฐœ์›”</span>
775
+ </div>
776
+ </div>
777
+ <div class="option-card" onclick="selectOption('service', 'voice-clone', 45, 2.5)">
778
+ <div class="option-name">์Œ์„ฑ ๋ณต์ œ/์ƒ์„ฑ</div>
779
+ <div class="option-details">
780
+ <span>โ‚ฉ45M</span>
781
+ <span>2.5๊ฐœ์›”</span>
782
+ </div>
783
+ </div>
784
+ <div class="option-card" onclick="selectOption('service', 'vision-ai', 35, 2)">
785
+ <div class="option-name">๋น„์ „ ์ธ์‹</div>
786
+ <div class="option-details">
787
+ <span>โ‚ฉ35M</span>
788
+ <span>2๊ฐœ์›”</span>
789
+ </div>
790
+ </div>
791
  </div>
792
  </div>
793
+
794
+ <!-- DB ๊ด€๋ฆฌ -->
795
+ <div class="component-section">
796
+ <div class="component-title">
797
+ <div class="component-icon">๐Ÿ’พ</div>
798
+ <span>DB ๊ด€๋ฆฌ</span>
799
+ </div>
800
+ <div class="component-options">
801
+ <div class="option-card" onclick="selectOption('db', 'basic-db', 5, 0.5)">
802
+ <div class="option-name">๊ธฐ๋ณธ DB</div>
803
+ <div class="option-details">
804
+ <span>โ‚ฉ5M</span>
805
+ <span>0.5๊ฐœ์›”</span>
806
+ </div>
807
+ </div>
808
+ <div class="option-card" onclick="selectOption('db', 'advanced-db', 15, 1)">
809
+ <div class="option-name">๊ณ ๊ธ‰ DB + ๋ฐฑ์—…</div>
810
+ <div class="option-details">
811
+ <span>โ‚ฉ15M</span>
812
+ <span>1๊ฐœ์›”</span>
813
+ </div>
814
+ </div>
815
+ <div class="option-card" onclick="selectOption('db', 'enterprise-db', 25, 1.5)">
816
+ <div class="option-name">์—”ํ„ฐํ”„๋ผ์ด์ฆˆ DB</div>
817
+ <div class="option-details">
818
+ <span>โ‚ฉ25M</span>
819
+ <span>1.5๊ฐœ์›”</span>
820
+ </div>
821
+ </div>
822
  </div>
823
  </div>
 
 
824
 
825
+ <!-- ํšŒ์›๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ -->
826
+ <div class="component-section">
827
+ <div class="component-title">
828
+ <div class="component-icon">๐Ÿ”</div>
829
+ <span>ํšŒ์›๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ</span>
830
+ </div>
831
+ <div class="component-options">
832
+ <div class="option-card" onclick="selectOption('auth', 'gmail-only', 3, 0.3)">
833
+ <div class="option-name">Gmail ์—ฐ๋™</div>
834
+ <div class="option-details">
835
+ <span>โ‚ฉ3M</span>
836
+ <span>0.3๊ฐœ์›”</span>
837
+ </div>
838
+ </div>
839
+ <div class="option-card" onclick="selectOption('auth', 'multi-auth', 8, 0.5)">
840
+ <div class="option-name">๋‹ค์ค‘ ์†Œ์…œ ๋กœ๊ทธ์ธ</div>
841
+ <div class="option-details">
842
+ <span>โ‚ฉ8M</span>
843
+ <span>0.5๊ฐœ์›”</span>
844
+ </div>
845
+ </div>
846
+ <div class="option-card" onclick="selectOption('auth', 'custom-auth', 12, 1)">
847
+ <div class="option-name">์ปค์Šคํ…€ ์ธ์ฆ ์‹œ์Šคํ…œ</div>
848
+ <div class="option-details">
849
+ <span>โ‚ฉ12M</span>
850
+ <span>1๊ฐœ์›”</span>
851
+ </div>
852
+ </div>
853
+ </div>
854
  </div>
855
+
856
+ <!-- ํฌ๋ ˆ๋”ง ๊ด€๋ฆฌ -->
857
+ <div class="component-section">
858
+ <div class="component-title">
859
+ <div class="component-icon">๐Ÿ’ฐ</div>
860
+ <span>ํฌ๋ ˆ๋”ง ๊ด€๋ฆฌ</span>
861
+ </div>
862
+ <div class="component-options">
863
+ <div class="option-card" onclick="selectOption('credit', 'basic-credit', 5, 0.5)">
864
+ <div class="option-name">๊ธฐ๋ณธ ํฌ๋ ˆ๋”ง ์‹œ์Šคํ…œ</div>
865
+ <div class="option-details">
866
+ <span>โ‚ฉ5M</span>
867
+ <span>0.5๊ฐœ์›”</span>
868
+ </div>
869
+ </div>
870
+ <div class="option-card" onclick="selectOption('credit', 'advanced-credit', 12, 1)">
871
+ <div class="option-name">๊ณ ๊ธ‰ ํฌ๋ ˆ๋”ง + ๊ตฌ๋…</div>
872
+ <div class="option-details">
873
+ <span>โ‚ฉ12M</span>
874
+ <span>1๊ฐœ์›”</span>
875
+ </div>
876
+ </div>
877
+ </div>
878
  </div>
879
+
880
+ <!-- ํŽ˜์ด๋จผํŠธ ์ง€์› -->
881
+ <div class="component-section">
882
+ <div class="component-title">
883
+ <div class="component-icon">๐Ÿ’ณ</div>
884
+ <span>ํŽ˜์ด๋จผํŠธ ์ง€์›</span>
885
+ </div>
886
+ <div class="component-options">
887
+ <div class="option-card" onclick="selectOption('payment', 'basic-payment', 8, 0.5)">
888
+ <div class="option-name">๊ธฐ๋ณธ ๊ฒฐ์ œ (์นด๋“œ)</div>
889
+ <div class="option-details">
890
+ <span>โ‚ฉ8M</span>
891
+ <span>0.5๊ฐœ์›”</span>
892
+ </div>
893
+ </div>
894
+ <div class="option-card" onclick="selectOption('payment', 'multi-payment', 15, 1)">
895
+ <div class="option-name">๋‹ค์ค‘ ๊ฒฐ์ œ ์ˆ˜๋‹จ</div>
896
+ <div class="option-details">
897
+ <span>โ‚ฉ15M</span>
898
+ <span>1๊ฐœ์›”</span>
899
+ </div>
900
+ </div>
901
+ <div class="option-card" onclick="selectOption('payment', 'global-payment', 20, 1.5)">
902
+ <div class="option-name">๊ธ€๋กœ๋ฒŒ ๊ฒฐ์ œ ์‹œ์Šคํ…œ</div>
903
+ <div class="option-details">
904
+ <span>โ‚ฉ20M</span>
905
+ <span>1.5๊ฐœ์›”</span>
906
+ </div>
907
+ </div>
908
+ </div>
909
  </div>
910
+
911
+ <!-- ๋งˆ์ผ€ํŒ… ์ง€์› -->
912
+ <div class="component-section">
913
+ <div class="component-title">
914
+ <div class="component-icon">๐Ÿ“ข</div>
915
+ <span>๋งˆ์ผ€ํŒ… ์ง€์›</span>
916
+ </div>
917
+ <div class="component-options">
918
+ <div class="option-card" onclick="selectOption('marketing', 'basic-marketing', 10, 1)">
919
+ <div class="option-name">๊ธฐ๋ณธ ๋งˆ์ผ€ํŒ… ๋„๊ตฌ</div>
920
+ <div class="option-details">
921
+ <span>โ‚ฉ10M</span>
922
+ <span>1๊ฐœ์›”</span>
923
+ </div>
924
+ </div>
925
+ <div class="option-card" onclick="selectOption('marketing', 'advanced-marketing', 20, 1.5)">
926
+ <div class="option-name">๊ณ ๊ธ‰ ๋งˆ์ผ€ํŒ… ์ž๋™ํ™”</div>
927
+ <div class="option-details">
928
+ <span>โ‚ฉ20M</span>
929
+ <span>1.5๊ฐœ์›”</span>
930
+ </div>
931
+ </div>
932
+ </div>
933
  </div>
 
 
934
 
935
+ <!-- ๊ฐœ๋ฐœ ๋ฐ ๊ธฐ์ˆ  ์ธ๋ ฅ ์ง€์› -->
936
+ <div class="component-section">
937
+ <div class="component-title">
938
+ <div class="component-icon">๐Ÿ‘จโ€๐Ÿ’ป</div>
939
+ <span>๊ฐœ๋ฐœ ๋ฐ ๊ธฐ์ˆ  ์ธ๋ ฅ ์ง€์›</span>
 
940
  </div>
941
+ <div class="component-options">
942
+ <div class="option-card" onclick="selectOption('support', 'basic-support', 5, 0)">
943
+ <div class="option-name">๊ธฐ๋ณธ ๊ธฐ์ˆ  ์ง€์›</div>
944
+ <div class="option-details">
945
+ <span>์›” โ‚ฉ5M</span>
946
+ <span>์ฆ‰์‹œ</span>
947
+ </div>
948
+ </div>
949
+ <div class="option-card" onclick="selectOption('support', 'dedicated-support', 15, 0)">
950
+ <div class="option-name">์ „๋‹ด ๊ฐœ๋ฐœ์ž ์ง€์›</div>
951
+ <div class="option-details">
952
+ <span>์›” โ‚ฉ15M</span>
953
+ <span>์ฆ‰์‹œ</span>
954
+ </div>
955
+ </div>
956
+ </div>
957
+ </div>
958
+
959
+ <!-- ์›๊ฒฉ ๋ชจ๋‹ˆํ„ฐ๋ง ์ง€์› -->
960
+ <div class="component-section">
961
+ <div class="component-title">
962
+ <div class="component-icon">๐Ÿ“Š</div>
963
+ <span>์›๊ฒฉ ๋ชจ๋‹ˆํ„ฐ๋ง ์ง€์›</span>
964
  </div>
965
+ <div class="component-options">
966
+ <div class="option-card" onclick="selectOption('monitoring', 'basic-monitor', 3, 0.3)">
967
+ <div class="option-name">๊ธฐ๋ณธ ๋ชจ๋‹ˆํ„ฐ๋ง</div>
968
+ <div class="option-details">
969
+ <span>โ‚ฉ3M</span>
970
+ <span>0.3๊ฐœ์›”</span>
971
+ </div>
972
+ </div>
973
+ <div class="option-card" onclick="selectOption('monitoring', 'advanced-monitor', 8, 0.5)">
974
+ <div class="option-name">๊ณ ๊ธ‰ ๋ถ„์„ + ์•Œ๋ฆผ</div>
975
+ <div class="option-details">
976
+ <span>โ‚ฉ8M</span>
977
+ <span>0.5๊ฐœ์›”</span>
978
+ </div>
979
+ </div>
980
  </div>
981
  </div>
982
+
983
+ <button class="calculate-btn" onclick="calculateCustomCost()">๋งž์ถค ๊ฒฌ์  ๊ณ„์‚ฐํ•˜๊ธฐ</button>
984
+
985
+ <div class="custom-result" id="customResult">
986
+ <div class="custom-summary">
987
+ <div class="summary-item">
988
+ <div class="summary-label">์ด ๊ฐœ๋ฐœ ๋น„์šฉ</div>
989
+ <div class="summary-value" id="totalCost">โ‚ฉ0</div>
990
+ </div>
991
+ <div class="summary-item">
992
+ <div class="summary-label">์˜ˆ์ƒ ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</div>
993
+ <div class="summary-value" id="totalTime">0๊ฐœ์›”</div>
994
+ </div>
995
+ <div class="summary-item">
996
+ <div class="summary-label">์›” ์šด์˜ ๋น„์šฉ</div>
997
+ <div class="summary-value" id="monthlyCost">โ‚ฉ0</div>
998
+ </div>
999
+ </div>
1000
+ <div class="selected-components">
1001
+ <h4>์„ ํƒํ•œ ๊ตฌ์„ฑ ์š”์†Œ</h4>
1002
+ <div class="component-list" id="componentList"></div>
1003
+ </div>
1004
  </div>
1005
  </div>
1006
  </div>
 
1008
 
1009
  <script>
1010
  let costChart = null;
1011
+ let selectedComponents = {};
1012
+
1013
+ function switchTab(tabName) {
1014
+ // ๋ชจ๋“  ํƒญ ๋‚ด์šฉ ์ˆจ๊ธฐ๊ธฐ
1015
+ document.querySelectorAll('.tab-content').forEach(content => {
1016
+ content.classList.remove('active');
1017
+ });
1018
+
1019
+ // ๋ชจ๋“  ํƒญ ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”
1020
+ document.querySelectorAll('.tab').forEach(tab => {
1021
+ tab.classList.remove('active');
1022
+ });
1023
+
1024
+ // ์„ ํƒํ•œ ํƒญ ํ™œ์„ฑํ™”
1025
+ document.getElementById(tabName).classList.add('active');
1026
+ event.target.classList.add('active');
1027
+ }
1028
+
1029
+ function selectOption(category, optionId, cost, time) {
1030
+ // ์ด์ „ ์„ ํƒ ์ œ๊ฑฐ
1031
+ document.querySelectorAll(`.component-section:has(.component-title:has(.component-icon:contains('${getCategoryIcon(category)}'))) .option-card`).forEach(card => {
1032
+ card.classList.remove('selected');
1033
+ });
1034
+
1035
+ // ์ƒˆ ์„ ํƒ ์ถ”๊ฐ€
1036
+ event.currentTarget.classList.add('selected');
1037
+
1038
+ // ์„ ํƒ ์ •๋ณด ์ €์žฅ
1039
+ selectedComponents[category] = {
1040
+ id: optionId,
1041
+ name: event.currentTarget.querySelector('.option-name').textContent,
1042
+ cost: cost,
1043
+ time: time
1044
+ };
1045
+ }
1046
+
1047
+ function getCategoryIcon(category) {
1048
+ const icons = {
1049
+ 'service': '๐ŸŽฏ',
1050
+ 'db': '๐Ÿ’พ',
1051
+ 'auth': '๐Ÿ”',
1052
+ 'credit': '๐Ÿ’ฐ',
1053
+ 'payment': '๐Ÿ’ณ',
1054
+ 'marketing': '๐Ÿ“ข',
1055
+ 'support': '๐Ÿ‘จโ€๐Ÿ’ป',
1056
+ 'monitoring': '๐Ÿ“Š'
1057
+ };
1058
+ return icons[category];
1059
+ }
1060
+
1061
+ function calculateCustomCost() {
1062
+ if (Object.keys(selectedComponents).length === 0) {
1063
+ alert('๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์„ ํƒํ•ด์ฃผ์„ธ์š”.');
1064
+ return;
1065
+ }
1066
+
1067
+ let totalCost = 0;
1068
+ let totalTime = 0;
1069
+ let monthlyCost = 0;
1070
+ let componentListHTML = '';
1071
+
1072
+ Object.values(selectedComponents).forEach(component => {
1073
+ totalCost += component.cost;
1074
+ totalTime = Math.max(totalTime, component.time);
1075
+
1076
+ // ์›” ์šด์˜ ๋น„์šฉ ๊ณ„์‚ฐ (support๋Š” ์›” ๋น„์šฉ)
1077
+ if (component.id.includes('support')) {
1078
+ monthlyCost += component.cost;
1079
+ }
1080
+
1081
+ componentListHTML += `
1082
+ <div class="component-list-item">
1083
+ <span>${component.name}</span>
1084
+ <span>โ‚ฉ${component.cost}M</span>
1085
+ </div>
1086
+ `;
1087
+ });
1088
+
1089
+ // ๊ธฐ๋ณธ ์›” ์šด์˜ ๋น„์šฉ ์ถ”๊ฐ€ (์„œ๋ฒ„, API ๋“ฑ)
1090
+ monthlyCost += totalCost * 0.05; // ์ดˆ๊ธฐ ๋น„์šฉ์˜ 5%๋ฅผ ์›” ์šด์˜๋น„๋กœ ๊ฐ€์ •
1091
+
1092
+ document.getElementById('totalCost').textContent = `โ‚ฉ${totalCost}M`;
1093
+ document.getElementById('totalTime').textContent = `${totalTime}๊ฐœ์›”`;
1094
+ document.getElementById('monthlyCost').textContent = `โ‚ฉ${monthlyCost.toFixed(1)}M`;
1095
+ document.getElementById('componentList').innerHTML = componentListHTML;
1096
+ document.getElementById('customResult').style.display = 'block';
1097
+
1098
+ // ์Šคํฌ๋กค ๋‹ค์šด
1099
+ document.getElementById('customResult').scrollIntoView({ behavior: 'smooth' });
1100
+ }
1101
 
1102
  function calculateCosts() {
1103
  const scale = document.getElementById('projectScale').value;
 
1183
  tension: 0.4
1184
  },
1185
  {
1186
+ label: 'ํ”Œ๋žซํผ ๋Œ€์—ฌ',
1187
  data: months.map(m => costs.platform.initial + (costs.platform.monthly * m * multiplier)),
1188
  borderColor: '#00f2fe',
1189
  backgroundColor: 'rgba(0, 242, 254, 0.1)',