Spaces:
Running
Running
Update index.html
Browse files- index.html +212 -602
index.html
CHANGED
|
@@ -558,6 +558,38 @@
|
|
| 558 |
color: #00d2ff;
|
| 559 |
}
|
| 560 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 561 |
@keyframes fadeInDown {
|
| 562 |
from {
|
| 563 |
opacity: 0;
|
|
@@ -611,201 +643,11 @@
|
|
| 611 |
</header>
|
| 612 |
|
| 613 |
<div class="tabs">
|
| 614 |
-
<button class="tab active" onclick="switchTab('
|
| 615 |
-
<button class="tab" onclick="switchTab('custom')">나만의 맞춤 설계</button>
|
| 616 |
</div>
|
| 617 |
|
| 618 |
-
<!--
|
| 619 |
-
<div id="
|
| 620 |
-
<div class="methods-grid">
|
| 621 |
-
<!-- 외주 용역 개발 방식 -->
|
| 622 |
-
<div class="method-card">
|
| 623 |
-
<div class="method-header">
|
| 624 |
-
<div class="method-icon outsource-icon">🤝</div>
|
| 625 |
-
<h2 class="method-title">외주 용역 개발</h2>
|
| 626 |
-
</div>
|
| 627 |
-
<p class="method-description">
|
| 628 |
-
전문 개발사에 프로젝트를 위탁하여 AI SaaS를 구축하는 방식
|
| 629 |
-
</p>
|
| 630 |
-
<div class="cost-breakdown">
|
| 631 |
-
<div class="cost-item">
|
| 632 |
-
<span>초기 비용</span>
|
| 633 |
-
<span>₩50M - ₩200M</span>
|
| 634 |
-
</div>
|
| 635 |
-
<div class="cost-item">
|
| 636 |
-
<span>개발 기간</span>
|
| 637 |
-
<span>3 - 6개월</span>
|
| 638 |
-
</div>
|
| 639 |
-
<div class="cost-item">
|
| 640 |
-
<span>유지보수</span>
|
| 641 |
-
<span>월 ₩5M - ₩15M</span>
|
| 642 |
-
</div>
|
| 643 |
-
</div>
|
| 644 |
-
<div class="pros-cons">
|
| 645 |
-
<div class="pros">
|
| 646 |
-
<h4>장점</h4>
|
| 647 |
-
<ul>
|
| 648 |
-
<li>빠른 개발 착수</li>
|
| 649 |
-
<li>전문성 활용</li>
|
| 650 |
-
<li>인력 관리 부담 없음</li>
|
| 651 |
-
</ul>
|
| 652 |
-
</div>
|
| 653 |
-
<div class="cons">
|
| 654 |
-
<h4>단점</h4>
|
| 655 |
-
<ul>
|
| 656 |
-
<li>높은 비용</li>
|
| 657 |
-
<li>커스터마이징 제한</li>
|
| 658 |
-
<li>의존성 문제</li>
|
| 659 |
-
</ul>
|
| 660 |
-
</div>
|
| 661 |
-
</div>
|
| 662 |
-
</div>
|
| 663 |
-
|
| 664 |
-
<!-- 자체 인력 개발 방식 -->
|
| 665 |
-
<div class="method-card">
|
| 666 |
-
<div class="method-header">
|
| 667 |
-
<div class="method-icon inhouse-icon">👥</div>
|
| 668 |
-
<h2 class="method-title">자체 인력 개발</h2>
|
| 669 |
-
</div>
|
| 670 |
-
<p class="method-description">
|
| 671 |
-
내부 개발팀을 구성하여 직접 AI SaaS를 개발하는 방식
|
| 672 |
-
</p>
|
| 673 |
-
<div class="cost-breakdown">
|
| 674 |
-
<div class="cost-item">
|
| 675 |
-
<span>초기 비용</span>
|
| 676 |
-
<span>₩30M - ₩100M</span>
|
| 677 |
-
</div>
|
| 678 |
-
<div class="cost-item">
|
| 679 |
-
<span>개발 기간</span>
|
| 680 |
-
<span>6 - 12개월</span>
|
| 681 |
-
</div>
|
| 682 |
-
<div class="cost-item">
|
| 683 |
-
<span>운영 비용</span>
|
| 684 |
-
<span>월 ₩20M - ₩50M</span>
|
| 685 |
-
</div>
|
| 686 |
-
</div>
|
| 687 |
-
<div class="pros-cons">
|
| 688 |
-
<div class="pros">
|
| 689 |
-
<h4>장점</h4>
|
| 690 |
-
<ul>
|
| 691 |
-
<li>완전한 통제권</li>
|
| 692 |
-
<li>장기적 비용 효율</li>
|
| 693 |
-
<li>기술 내재화</li>
|
| 694 |
-
</ul>
|
| 695 |
-
</div>
|
| 696 |
-
<div class="cons">
|
| 697 |
-
<h4>단점</h4>
|
| 698 |
-
<ul>
|
| 699 |
-
<li>채용 어려움</li>
|
| 700 |
-
<li>긴 개발 기간</li>
|
| 701 |
-
<li>높은 운영 비용</li>
|
| 702 |
-
</ul>
|
| 703 |
-
</div>
|
| 704 |
-
</div>
|
| 705 |
-
</div>
|
| 706 |
-
|
| 707 |
-
<!-- 플랫폼 대여 방식 -->
|
| 708 |
-
<div class="method-card">
|
| 709 |
-
<div class="method-header">
|
| 710 |
-
<div class="method-icon platform-icon">🚀</div>
|
| 711 |
-
<h2 class="method-title">플랫폼 대여</h2>
|
| 712 |
-
</div>
|
| 713 |
-
<p class="method-description">
|
| 714 |
-
기존 플랫폼을 대여하여 빠르게 AI SaaS를 구축하는 방식
|
| 715 |
-
</p>
|
| 716 |
-
<div class="cost-breakdown">
|
| 717 |
-
<div class="cost-item">
|
| 718 |
-
<span>초기 비용</span>
|
| 719 |
-
<span>₩10M - ₩50M</span>
|
| 720 |
-
</div>
|
| 721 |
-
<div class="cost-item">
|
| 722 |
-
<span>개발 기간</span>
|
| 723 |
-
<span>1 - 3개월</span>
|
| 724 |
-
</div>
|
| 725 |
-
<div class="cost-item">
|
| 726 |
-
<span>구독료</span>
|
| 727 |
-
<span>월 ₩2M - ₩10M</span>
|
| 728 |
-
</div>
|
| 729 |
-
</div>
|
| 730 |
-
<div class="pros-cons">
|
| 731 |
-
<div class="pros">
|
| 732 |
-
<h4>장점</h4>
|
| 733 |
-
<ul>
|
| 734 |
-
<li>빠른 시장 진입</li>
|
| 735 |
-
<li>낮은 초기 비용</li>
|
| 736 |
-
<li>검증된 기술</li>
|
| 737 |
-
</ul>
|
| 738 |
-
</div>
|
| 739 |
-
<div class="cons">
|
| 740 |
-
<h4>단점</h4>
|
| 741 |
-
<ul>
|
| 742 |
-
<li>제한된 커스터마이징</li>
|
| 743 |
-
<li>플랫폼 종속성</li>
|
| 744 |
-
<li>차별화 어려움</li>
|
| 745 |
-
</ul>
|
| 746 |
-
</div>
|
| 747 |
-
</div>
|
| 748 |
-
</div>
|
| 749 |
-
</div>
|
| 750 |
-
|
| 751 |
-
<!-- 비용 계산기 섹션 -->
|
| 752 |
-
<div class="calculator-section">
|
| 753 |
-
<h2 class="calculator-title">비용 시뮬레이터</h2>
|
| 754 |
-
<div class="input-group">
|
| 755 |
-
<div class="input-field">
|
| 756 |
-
<label for="projectScale">프로젝트 규모</label>
|
| 757 |
-
<select id="projectScale">
|
| 758 |
-
<option value="small">소규모 (MVP)</option>
|
| 759 |
-
<option value="medium">중규모</option>
|
| 760 |
-
<option value="large">대규모</option>
|
| 761 |
-
</select>
|
| 762 |
-
</div>
|
| 763 |
-
<div class="input-field">
|
| 764 |
-
<label for="duration">운영 기간 (개월)</label>
|
| 765 |
-
<input type="number" id="duration" value="12" min="1" max="60">
|
| 766 |
-
</div>
|
| 767 |
-
<div class="input-field">
|
| 768 |
-
<label for="users">예상 사용자 수</label>
|
| 769 |
-
<input type="number" id="users" value="1000" min="100" max="1000000">
|
| 770 |
-
</div>
|
| 771 |
-
<div class="input-field">
|
| 772 |
-
<label for="features">AI 기능 복잡도</label>
|
| 773 |
-
<select id="features">
|
| 774 |
-
<option value="basic">기본 (챗봇, 번역)</option>
|
| 775 |
-
<option value="advanced">고급 (이미지 생성, 분석)</option>
|
| 776 |
-
<option value="enterprise">엔터프라이즈 (맞춤형 모델)</option>
|
| 777 |
-
</select>
|
| 778 |
-
</div>
|
| 779 |
-
</div>
|
| 780 |
-
<button class="calculate-btn" onclick="calculateCosts()">비용 계산하기</button>
|
| 781 |
-
|
| 782 |
-
<div class="results-section" id="results">
|
| 783 |
-
<div class="results-grid">
|
| 784 |
-
<div class="result-card">
|
| 785 |
-
<h3>외주 용역 총 비용</h3>
|
| 786 |
-
<div class="result-value" id="outsourceCost">₩0</div>
|
| 787 |
-
<p>초기 + 운영 비용</p>
|
| 788 |
-
</div>
|
| 789 |
-
<div class="result-card">
|
| 790 |
-
<h3>자체 인력 총 비용</h3>
|
| 791 |
-
<div class="result-value" id="inhouseCost">₩0</div>
|
| 792 |
-
<p>인건비 + 인프라</p>
|
| 793 |
-
</div>
|
| 794 |
-
<div class="result-card">
|
| 795 |
-
<h3>플랫폼 대여 총 비용</h3>
|
| 796 |
-
<div class="result-value" id="platformCost">₩0</div>
|
| 797 |
-
<p>라이선스 + API</p>
|
| 798 |
-
</div>
|
| 799 |
-
</div>
|
| 800 |
-
<div class="chart-container">
|
| 801 |
-
<canvas id="costChart"></canvas>
|
| 802 |
-
</div>
|
| 803 |
-
</div>
|
| 804 |
-
</div>
|
| 805 |
-
</div>
|
| 806 |
-
|
| 807 |
-
<!-- 나만의 맞춤 설계 탭 -->
|
| 808 |
-
<div id="custom" class="tab-content">
|
| 809 |
<div class="custom-design-container">
|
| 810 |
<h2 class="calculator-title">나만의 AI SaaS 맞춤 설계</h2>
|
| 811 |
|
|
@@ -815,345 +657,368 @@
|
|
| 815 |
<div class="component-icon">🎯</div>
|
| 816 |
<span>타깃 서비스 유형 (필수, 복수 선택 가능)</span>
|
| 817 |
</div>
|
| 818 |
-
|
| 819 |
-
|
| 820 |
-
|
|
|
|
|
|
|
| 821 |
<div class="option-name">AI 이미지 생성</div>
|
| 822 |
<div class="option-details">
|
| 823 |
<span>$5K</span>
|
| 824 |
<span>1개월</span>
|
| 825 |
</div>
|
| 826 |
</div>
|
| 827 |
-
<div class="option-card" data-category="service" data-id="book-cover" data-cost="7" data-time="1">
|
| 828 |
<div class="option-name">책 표지 AI 생성</div>
|
| 829 |
<div class="option-details">
|
| 830 |
<span>$7K</span>
|
| 831 |
<span>1개월</span>
|
| 832 |
</div>
|
| 833 |
</div>
|
| 834 |
-
<div class="option-card" data-category="service" data-id="bg-removal" data-cost="7" data-time="1">
|
| 835 |
<div class="option-name">배경 제거 및 생성</div>
|
| 836 |
<div class="option-details">
|
| 837 |
<span>$7K</span>
|
| 838 |
<span>1개월</span>
|
| 839 |
</div>
|
| 840 |
</div>
|
| 841 |
-
<div class="option-card" data-category="service" data-id="image-enhance" data-cost="7" data-time="1">
|
| 842 |
<div class="option-name">AI 이미지 편집/향상</div>
|
| 843 |
<div class="option-details">
|
| 844 |
<span>$7K</span>
|
| 845 |
<span>1개월</span>
|
| 846 |
</div>
|
| 847 |
</div>
|
| 848 |
-
<div class="option-card" data-category="service" data-id="image-upscale" data-cost="7" data-time="1">
|
| 849 |
<div class="option-name">이미지 업스케일링</div>
|
| 850 |
<div class="option-details">
|
| 851 |
<span>$7K</span>
|
| 852 |
<span>1개월</span>
|
| 853 |
</div>
|
| 854 |
</div>
|
| 855 |
-
<div class="option-card" data-category="service" data-id="image-custom" data-cost="50" data-time="1">
|
| 856 |
<div class="option-name">이미지 엔터프라이즈 커스텀</div>
|
| 857 |
<div class="option-details">
|
| 858 |
<span>$50K</span>
|
| 859 |
<span>1개월</span>
|
| 860 |
</div>
|
| 861 |
</div>
|
| 862 |
-
|
| 863 |
-
|
| 864 |
-
|
|
|
|
|
|
|
|
|
|
| 865 |
<div class="option-name">AI 비디오 생성</div>
|
| 866 |
<div class="option-details">
|
| 867 |
<span>$20K</span>
|
| 868 |
<span>1개월</span>
|
| 869 |
</div>
|
| 870 |
</div>
|
| 871 |
-
<div class="option-card" data-category="service" data-id="video-edit" data-cost="20" data-time="1">
|
| 872 |
<div class="option-name">AI 비디오 편집</div>
|
| 873 |
<div class="option-details">
|
| 874 |
<span>$20K</span>
|
| 875 |
<span>1개월</span>
|
| 876 |
</div>
|
| 877 |
</div>
|
| 878 |
-
<div class="option-card" data-category="service" data-id="avatar-video" data-cost="20" data-time="1">
|
| 879 |
<div class="option-name">AI 아바타 비디오</div>
|
| 880 |
<div class="option-details">
|
| 881 |
<span>$20K</span>
|
| 882 |
<span>1개월</span>
|
| 883 |
</div>
|
| 884 |
</div>
|
| 885 |
-
<div class="option-card" data-category="service" data-id="auto-subtitle" data-cost="7" data-time="1">
|
| 886 |
<div class="option-name">자동 자막 생성</div>
|
| 887 |
<div class="option-details">
|
| 888 |
<span>$7K</span>
|
| 889 |
<span>1개월</span>
|
| 890 |
</div>
|
| 891 |
</div>
|
| 892 |
-
<div class="option-card" data-category="service" data-id="shortform" data-cost="20" data-time="1">
|
| 893 |
<div class="option-name">AI 숏폼 비디오</div>
|
| 894 |
<div class="option-details">
|
| 895 |
<span>$20K</span>
|
| 896 |
<span>1개월</span>
|
| 897 |
</div>
|
| 898 |
</div>
|
| 899 |
-
<div class="option-card" data-category="service" data-id="video-custom" data-cost="50" data-time="1">
|
| 900 |
<div class="option-name">비디오 엔터프라이즈 커스텀</div>
|
| 901 |
<div class="option-details">
|
| 902 |
<span>$50K</span>
|
| 903 |
<span>1개월</span>
|
| 904 |
</div>
|
| 905 |
</div>
|
| 906 |
-
|
| 907 |
-
|
| 908 |
-
|
|
|
|
|
|
|
|
|
|
| 909 |
<div class="option-name">AI 음향 생성</div>
|
| 910 |
<div class="option-details">
|
| 911 |
<span>$5K</span>
|
| 912 |
<span>1개월</span>
|
| 913 |
</div>
|
| 914 |
</div>
|
| 915 |
-
<div class="option-card" data-category="service" data-id="music-gen" data-cost="5" data-time="1">
|
| 916 |
<div class="option-name">AI 음악 생성</div>
|
| 917 |
<div class="option-details">
|
| 918 |
<span>$5K</span>
|
| 919 |
<span>1개월</span>
|
| 920 |
</div>
|
| 921 |
</div>
|
| 922 |
-
<div class="option-card" data-category="service" data-id="song-gen" data-cost="5" data-time="1">
|
| 923 |
<div class="option-name">AI 노래 생성 (음악+가사+보컬)</div>
|
| 924 |
<div class="option-details">
|
| 925 |
<span>$5K</span>
|
| 926 |
<span>1개월</span>
|
| 927 |
</div>
|
| 928 |
</div>
|
| 929 |
-
<div class="option-card" data-category="service" data-id="music-video" data-cost="5" data-time="1">
|
| 930 |
<div class="option-name">AI 뮤직비디오 생성</div>
|
| 931 |
<div class="option-details">
|
| 932 |
<span>$5K</span>
|
| 933 |
<span>1개월</span>
|
| 934 |
</div>
|
| 935 |
</div>
|
| 936 |
-
<div class="option-card" data-category="service" data-id="ai-singer" data-cost="30" data-time="1">
|
| 937 |
<div class="option-name">AI 가수 생성 (풀패키지)</div>
|
| 938 |
<div class="option-details">
|
| 939 |
<span>$30K</span>
|
| 940 |
<span>1개월</span>
|
| 941 |
</div>
|
| 942 |
</div>
|
| 943 |
-
<div class="option-card" data-category="service" data-id="voice-clone" data-cost="5" data-time="1">
|
| 944 |
<div class="option-name">음성 복제/합성</div>
|
| 945 |
<div class="option-details">
|
| 946 |
<span>$5K</span>
|
| 947 |
<span>1개월</span>
|
| 948 |
</div>
|
| 949 |
</div>
|
| 950 |
-
<div class="option-card" data-category="service" data-id="tts" data-cost="5" data-time="1">
|
| 951 |
<div class="option-name">텍스트 TO 음성 변환</div>
|
| 952 |
<div class="option-details">
|
| 953 |
<span>$5K</span>
|
| 954 |
<span>1개월</span>
|
| 955 |
</div>
|
| 956 |
</div>
|
| 957 |
-
<div class="option-card" data-category="service" data-id="stt" data-cost="5" data-time="1">
|
| 958 |
<div class="option-name">음성 TO 텍스트 변환</div>
|
| 959 |
<div class="option-details">
|
| 960 |
<span>$5K</span>
|
| 961 |
<span>1개월</span>
|
| 962 |
</div>
|
| 963 |
</div>
|
| 964 |
-
<div class="option-card" data-category="service" data-id="podcast" data-cost="5" data-time="1">
|
| 965 |
<div class="option-name">AI 팟캐스트 제작</div>
|
| 966 |
<div class="option-details">
|
| 967 |
<span>$5K</span>
|
| 968 |
<span>1개월</span>
|
| 969 |
</div>
|
| 970 |
</div>
|
| 971 |
-
<div class="option-card" data-category="service" data-id="audio-custom" data-cost="50" data-time="1">
|
| 972 |
<div class="option-name">오디오 엔터프라이즈 커스텀</div>
|
| 973 |
<div class="option-details">
|
| 974 |
<span>$50K</span>
|
| 975 |
<span>1개월</span>
|
| 976 |
</div>
|
| 977 |
</div>
|
| 978 |
-
|
| 979 |
-
|
| 980 |
-
|
|
|
|
|
|
|
|
|
|
| 981 |
<div class="option-name">AI 챗봇 (텍스트)</div>
|
| 982 |
<div class="option-details">
|
| 983 |
<span>$5K</span>
|
| 984 |
<span>1개월</span>
|
| 985 |
</div>
|
| 986 |
</div>
|
| 987 |
-
<div class="option-card" data-category="service" data-id="chatbot-rag" data-cost="5" data-time="1">
|
| 988 |
<div class="option-name">AI 챗봇 (텍스트+RAG)</div>
|
| 989 |
<div class="option-details">
|
| 990 |
<span>$5K</span>
|
| 991 |
<span>1개월</span>
|
| 992 |
</div>
|
| 993 |
</div>
|
| 994 |
-
<div class="option-card" data-category="service" data-id="chatbot-voice" data-cost="5" data-time="1">
|
| 995 |
<div class="option-name">AI 챗봇 (텍스트+음성)</div>
|
| 996 |
<div class="option-details">
|
| 997 |
<span>$5K</span>
|
| 998 |
<span>1개월</span>
|
| 999 |
</div>
|
| 1000 |
</div>
|
| 1001 |
-
<div class="option-card" data-category="service" data-id="chatbot-full" data-cost="5" data-time="1">
|
| 1002 |
<div class="option-name">AI 챗봇 (텍스트+음성+RAG)</div>
|
| 1003 |
<div class="option-details">
|
| 1004 |
<span>$5K</span>
|
| 1005 |
<span>1개월</span>
|
| 1006 |
</div>
|
| 1007 |
</div>
|
| 1008 |
-
<div class="option-card" data-category="service" data-id="translation" data-cost="5" data-time="1">
|
| 1009 |
<div class="option-name">AI 번역 서비스</div>
|
| 1010 |
<div class="option-details">
|
| 1011 |
<span>$5K</span>
|
| 1012 |
<span>1개월</span>
|
| 1013 |
</div>
|
| 1014 |
</div>
|
| 1015 |
-
<div class="option-card" data-category="service" data-id="email-writing" data-cost="5" data-time="1">
|
| 1016 |
<div class="option-name">AI 이메일/문서 작성</div>
|
| 1017 |
<div class="option-details">
|
| 1018 |
<span>$5K</span>
|
| 1019 |
<span>1개월</span>
|
| 1020 |
</div>
|
| 1021 |
</div>
|
| 1022 |
-
<div class="option-card" data-category="service" data-id="code-assistant" data-cost="5" data-time="1">
|
| 1023 |
<div class="option-name">AI 코드 어시스턴트</div>
|
| 1024 |
<div class="option-details">
|
| 1025 |
<span>$5K</span>
|
| 1026 |
<span>1개월</span>
|
| 1027 |
</div>
|
| 1028 |
</div>
|
| 1029 |
-
<div class="option-card" data-category="service" data-id="text-custom" data-cost="50" data-time="1">
|
| 1030 |
<div class="option-name">텍스트 엔터프라이즈 커스텀</div>
|
| 1031 |
<div class="option-details">
|
| 1032 |
<span>$50K</span>
|
| 1033 |
<span>1개월</span>
|
| 1034 |
</div>
|
| 1035 |
</div>
|
| 1036 |
-
|
| 1037 |
-
|
| 1038 |
-
|
|
|
|
|
|
|
|
|
|
| 1039 |
<div class="option-name">AI 데이터 분석</div>
|
| 1040 |
<div class="option-details">
|
| 1041 |
<span>$5K</span>
|
| 1042 |
<span>1개월</span>
|
| 1043 |
</div>
|
| 1044 |
</div>
|
| 1045 |
-
<div class="option-card" data-category="service" data-id="ocr" data-cost="5" data-time="1">
|
| 1046 |
<div class="option-name">AI OCR 서비스</div>
|
| 1047 |
<div class="option-details">
|
| 1048 |
<span>$5K</span>
|
| 1049 |
<span>1개월</span>
|
| 1050 |
</div>
|
| 1051 |
</div>
|
| 1052 |
-
<div class="option-card" data-category="service" data-id="computer-vision" data-cost="5" data-time="1">
|
| 1053 |
<div class="option-name">컴퓨터 비전</div>
|
| 1054 |
<div class="option-details">
|
| 1055 |
<span>$5K</span>
|
| 1056 |
<span>1개월</span>
|
| 1057 |
</div>
|
| 1058 |
</div>
|
| 1059 |
-
<div class="option-card" data-category="service" data-id="sentiment-analysis" data-cost="5" data-time="1">
|
| 1060 |
<div class="option-name">감정 분석 AI</div>
|
| 1061 |
<div class="option-details">
|
| 1062 |
<span>$5K</span>
|
| 1063 |
<span>1개월</span>
|
| 1064 |
</div>
|
| 1065 |
</div>
|
| 1066 |
-
<div class="option-card" data-category="service" data-id="analysis-custom" data-cost="50" data-time="1">
|
| 1067 |
<div class="option-name">분석 엔터프라이즈 커스텀</div>
|
| 1068 |
<div class="option-details">
|
| 1069 |
<span>$50K</span>
|
| 1070 |
<span>1개월</span>
|
| 1071 |
</div>
|
| 1072 |
</div>
|
| 1073 |
-
|
| 1074 |
-
|
| 1075 |
-
|
|
|
|
|
|
|
|
|
|
| 1076 |
<div class="option-name">AI 소설 생성</div>
|
| 1077 |
<div class="option-details">
|
| 1078 |
<span>$20K</span>
|
| 1079 |
<span>1개월</span>
|
| 1080 |
</div>
|
| 1081 |
</div>
|
| 1082 |
-
<div class="option-card" data-category="service" data-id="webnovel" data-cost="20" data-time="1">
|
| 1083 |
<div class="option-name">AI 웹소설 생성</div>
|
| 1084 |
<div class="option-details">
|
| 1085 |
<span>$20K</span>
|
| 1086 |
<span>1개월</span>
|
| 1087 |
</div>
|
| 1088 |
</div>
|
| 1089 |
-
<div class="option-card" data-category="service" data-id="webtoon" data-cost="20" data-time="1">
|
| 1090 |
<div class="option-name">AI 웹툰 생성</div>
|
| 1091 |
<div class="option-details">
|
| 1092 |
<span>$20K</span>
|
| 1093 |
<span>1개월</span>
|
| 1094 |
</div>
|
| 1095 |
</div>
|
| 1096 |
-
<div class="option-card" data-category="service" data-id="ai-book" data-cost="20" data-time="1">
|
| 1097 |
<div class="option-name">AI BOOK 제작</div>
|
| 1098 |
<div class="option-details">
|
| 1099 |
<span>$20K</span>
|
| 1100 |
<span>1개월</span>
|
| 1101 |
</div>
|
| 1102 |
</div>
|
| 1103 |
-
<div class="option-card" data-category="service" data-id="ecommerce" data-cost="20" data-time="1">
|
| 1104 |
<div class="option-name">이커머스 AI (상품설명)</div>
|
| 1105 |
<div class="option-details">
|
| 1106 |
<span>$20K</span>
|
| 1107 |
<span>1개월</span>
|
| 1108 |
</div>
|
| 1109 |
</div>
|
| 1110 |
-
|
| 1111 |
-
|
| 1112 |
-
|
|
|
|
|
|
|
|
|
|
| 1113 |
<div class="option-name">AI 의료 어시스턴트</div>
|
| 1114 |
<div class="option-details">
|
| 1115 |
<span>$20K</span>
|
| 1116 |
<span>1개월</span>
|
| 1117 |
</div>
|
| 1118 |
</div>
|
| 1119 |
-
<div class="option-card" data-category="service" data-id="legal" data-cost="20" data-time="1">
|
| 1120 |
<div class="option-name">AI 법률 어시스턴트</div>
|
| 1121 |
<div class="option-details">
|
| 1122 |
<span>$20K</span>
|
| 1123 |
<span>1개월</span>
|
| 1124 |
</div>
|
| 1125 |
</div>
|
| 1126 |
-
<div class="option-card" data-category="service" data-id="education" data-cost="20" data-time="1">
|
| 1127 |
<div class="option-name">AI 교육/튜터링</div>
|
| 1128 |
<div class="option-details">
|
| 1129 |
<span>$20K</span>
|
| 1130 |
<span>1개월</span>
|
| 1131 |
</div>
|
| 1132 |
</div>
|
| 1133 |
-
|
| 1134 |
-
|
| 1135 |
-
|
|
|
|
|
|
|
|
|
|
| 1136 |
<div class="option-name">헤어스타일 AI 시뮬레이션</div>
|
| 1137 |
<div class="option-details">
|
| 1138 |
<span>$20K</span>
|
| 1139 |
<span>1개월</span>
|
| 1140 |
</div>
|
| 1141 |
</div>
|
| 1142 |
-
<div class="option-card" data-category="service" data-id="fashion" data-cost="7" data-time="1">
|
| 1143 |
<div class="option-name">패션 가상 피팅 AI</div>
|
| 1144 |
<div class="option-details">
|
| 1145 |
<span>$7K</span>
|
| 1146 |
<span>1개월</span>
|
| 1147 |
</div>
|
| 1148 |
</div>
|
| 1149 |
-
<div class="option-card" data-category="service" data-id="3d-model" data-cost="20" data-time="1">
|
| 1150 |
<div class="option-name">AI 3D 모델 생성</div>
|
| 1151 |
<div class="option-details">
|
| 1152 |
<span>$20K</span>
|
| 1153 |
<span>1개월</span>
|
| 1154 |
</div>
|
| 1155 |
</div>
|
| 1156 |
-
<div class="option-card" data-category="service" data-id="nsfw" data-cost="20" data-time="1">
|
| 1157 |
<div class="option-name">NSFW 이미지 생성</div>
|
| 1158 |
<div class="option-details">
|
| 1159 |
<span>$20K</span>
|
|
@@ -1161,6 +1026,46 @@
|
|
| 1161 |
</div>
|
| 1162 |
</div>
|
| 1163 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1164 |
</div>
|
| 1165 |
|
| 1166 |
<!-- DB 관리 -->
|
|
@@ -1418,16 +1323,14 @@
|
|
| 1418 |
<div class="component-list" id="componentList"></div>
|
| 1419 |
</div>
|
| 1420 |
|
| 1421 |
-
|
| 1422 |
-
|
| 1423 |
<div class="monthly-breakdown">
|
| 1424 |
<div class="monthly-item">
|
| 1425 |
<div class="monthly-label">월 서버 비용</div>
|
| 1426 |
<div class="monthly-value" id="serverCost">$0K</div>
|
| 1427 |
</div>
|
| 1428 |
<div class="monthly-item">
|
| 1429 |
-
<div class="monthly-label">월 API
|
| 1430 |
-
<div class="monthly-value" id="
|
| 1431 |
</div>
|
| 1432 |
<div class="monthly-item">
|
| 1433 |
<div class="monthly-label">월 유지보수</div>
|
|
@@ -1438,346 +1341,53 @@
|
|
| 1438 |
<div class="monthly-value" id="totalMonthlyCost">$0K</div>
|
| 1439 |
</div>
|
| 1440 |
</div>
|
| 1441 |
-
</div>
|
| 1442 |
-
</div>
|
| 1443 |
-
</div>
|
| 1444 |
-
</div>
|
| 1445 |
-
|
| 1446 |
-
<script>
|
| 1447 |
-
let costChart = null;
|
| 1448 |
-
let selectedComponents = {};
|
| 1449 |
-
let currentPeriod = 3;
|
| 1450 |
-
|
| 1451 |
-
// 탭 전환 함수
|
| 1452 |
-
function switchTab(tabName) {
|
| 1453 |
-
document.querySelectorAll('.tab-content').forEach(content => {
|
| 1454 |
-
content.classList.remove('active');
|
| 1455 |
-
});
|
| 1456 |
-
|
| 1457 |
-
document.querySelectorAll('.tab').forEach(tab => {
|
| 1458 |
-
tab.classList.remove('active');
|
| 1459 |
-
});
|
| 1460 |
-
|
| 1461 |
-
document.getElementById(tabName).classList.add('active');
|
| 1462 |
-
event.target.classList.add('active');
|
| 1463 |
-
}
|
| 1464 |
-
|
| 1465 |
-
// 맞춤 설계 옵션 선택 함수
|
| 1466 |
-
document.addEventListener('DOMContentLoaded', function() {
|
| 1467 |
-
// 모든 option-card에 클릭 이벤트 추가
|
| 1468 |
-
document.querySelectorAll('.option-card').forEach(card => {
|
| 1469 |
-
card.addEventListener('click', function() {
|
| 1470 |
-
const category = this.dataset.category;
|
| 1471 |
-
const id = this.dataset.id;
|
| 1472 |
-
const cost = parseFloat(this.dataset.cost);
|
| 1473 |
-
const time = parseFloat(this.dataset.time);
|
| 1474 |
-
const name = this.querySelector('.option-name').textContent;
|
| 1475 |
-
|
| 1476 |
-
// 복수 선택 가능한 카테고리
|
| 1477 |
-
const multiSelectCategories = ['service', 'additional'];
|
| 1478 |
-
|
| 1479 |
-
if (multiSelectCategories.includes(category)) {
|
| 1480 |
-
// 복수 선택 처리
|
| 1481 |
-
if (!selectedComponents[category]) {
|
| 1482 |
-
selectedComponents[category] = {};
|
| 1483 |
-
}
|
| 1484 |
-
|
| 1485 |
-
if (this.classList.contains('selected')) {
|
| 1486 |
-
// 이미 선택된 경우 해제
|
| 1487 |
-
this.classList.remove('selected');
|
| 1488 |
-
delete selectedComponents[category][id];
|
| 1489 |
-
|
| 1490 |
-
// 카테고리에 선택된 항목이 없으면 카테고리 삭제
|
| 1491 |
-
if (Object.keys(selectedComponents[category]).length === 0) {
|
| 1492 |
-
delete selectedComponents[category];
|
| 1493 |
-
}
|
| 1494 |
-
} else {
|
| 1495 |
-
// 선택 추가
|
| 1496 |
-
this.classList.add('selected');
|
| 1497 |
-
selectedComponents[category][id] = {
|
| 1498 |
-
id: id,
|
| 1499 |
-
name: name,
|
| 1500 |
-
cost: cost,
|
| 1501 |
-
time: time,
|
| 1502 |
-
category: category
|
| 1503 |
-
};
|
| 1504 |
-
}
|
| 1505 |
-
} else {
|
| 1506 |
-
// 단일 선택 처리 (기존 로직)
|
| 1507 |
-
document.querySelectorAll(`.option-card[data-category="${category}"]`).forEach(c => {
|
| 1508 |
-
c.classList.remove('selected');
|
| 1509 |
-
});
|
| 1510 |
-
|
| 1511 |
-
this.classList.add('selected');
|
| 1512 |
-
|
| 1513 |
-
selectedComponents[category] = {
|
| 1514 |
-
id: id,
|
| 1515 |
-
name: name,
|
| 1516 |
-
cost: cost,
|
| 1517 |
-
time: time,
|
| 1518 |
-
category: category
|
| 1519 |
-
};
|
| 1520 |
-
}
|
| 1521 |
-
});
|
| 1522 |
-
});
|
| 1523 |
-
});
|
| 1524 |
-
|
| 1525 |
-
// 기간 전환 함수
|
| 1526 |
-
function switchPeriod(period) {
|
| 1527 |
-
currentPeriod = period;
|
| 1528 |
-
document.querySelectorAll('.period-tab').forEach(tab => {
|
| 1529 |
-
tab.classList.remove('active');
|
| 1530 |
-
});
|
| 1531 |
-
event.target.classList.add('active');
|
| 1532 |
-
|
| 1533 |
-
if (Object.keys(selectedComponents).length > 0) {
|
| 1534 |
-
displayCustomResults();
|
| 1535 |
-
}
|
| 1536 |
-
}
|
| 1537 |
-
|
| 1538 |
-
// 맞춤 비용 계산 함수
|
| 1539 |
-
function calculateCustomCost() {
|
| 1540 |
-
// 필수 항목 체크 (타깃 서비스 최소 1개)
|
| 1541 |
-
if (!selectedComponents.service || Object.keys(selectedComponents.service).length === 0) {
|
| 1542 |
-
alert('타깃 서비스 유형을 최소 1개 이상 선택해주세요.');
|
| 1543 |
-
return;
|
| 1544 |
-
}
|
| 1545 |
-
|
| 1546 |
-
displayCustomResults();
|
| 1547 |
-
document.getElementById('customResult').style.display = 'block';
|
| 1548 |
-
document.getElementById('customResult').scrollIntoView({ behavior: 'smooth' });
|
| 1549 |
-
}
|
| 1550 |
-
|
| 1551 |
-
// 결과 표시 함수
|
| 1552 |
-
function displayCustomResults() {
|
| 1553 |
-
let initialCost = 0;
|
| 1554 |
-
let maxTime = 0;
|
| 1555 |
-
let componentListHTML = '';
|
| 1556 |
-
let monthlySupport = 0;
|
| 1557 |
-
|
| 1558 |
-
// 카테고리별 이름
|
| 1559 |
-
const categoryNames = {
|
| 1560 |
-
'service': '타깃 서비스',
|
| 1561 |
-
'db': 'DB 관리',
|
| 1562 |
-
'auth': '인증 시스템',
|
| 1563 |
-
'credit': '크레딧 관리',
|
| 1564 |
-
'payment': '결제 시스템',
|
| 1565 |
-
'marketing': '마케팅 도구',
|
| 1566 |
-
'support': '기술 지원',
|
| 1567 |
-
'monitoring': '모니터링',
|
| 1568 |
-
'additional': '추가 기능'
|
| 1569 |
-
};
|
| 1570 |
-
|
| 1571 |
-
// 초기 비용 계산 및 구성 요소 목록 생성
|
| 1572 |
-
Object.entries(selectedComponents).forEach(([category, value]) => {
|
| 1573 |
-
if (typeof value === 'object' && value.id) {
|
| 1574 |
-
// 단일 선택 항목
|
| 1575 |
-
if (category === 'support') {
|
| 1576 |
-
monthlySupport += value.cost;
|
| 1577 |
-
} else {
|
| 1578 |
-
initialCost += value.cost;
|
| 1579 |
-
}
|
| 1580 |
-
maxTime = Math.max(maxTime, value.time);
|
| 1581 |
-
|
| 1582 |
-
componentListHTML += `
|
| 1583 |
-
<div class="component-list-item">
|
| 1584 |
-
<span><strong>${categoryNames[category]}</strong>: ${value.name}</span>
|
| 1585 |
-
<span>${category === 'support' ? '월 ' : ''}${value.cost}K</span>
|
| 1586 |
-
</div>
|
| 1587 |
-
`;
|
| 1588 |
-
} else {
|
| 1589 |
-
// 복수 선택 항목
|
| 1590 |
-
Object.values(value).forEach(item => {
|
| 1591 |
-
initialCost += item.cost;
|
| 1592 |
-
maxTime = Math.max(maxTime, item.time);
|
| 1593 |
-
|
| 1594 |
-
componentListHTML += `
|
| 1595 |
-
<div class="component-list-item">
|
| 1596 |
-
<span><strong>${categoryNames[category]}</strong>: ${item.name}</span>
|
| 1597 |
-
<span>${item.cost}K</span>
|
| 1598 |
-
</div>
|
| 1599 |
-
`;
|
| 1600 |
-
});
|
| 1601 |
-
}
|
| 1602 |
-
});
|
| 1603 |
-
|
| 1604 |
-
// 월별 운영 비용 계산
|
| 1605 |
-
const serverCost = Math.round(initialCost * 0.02); // 초기 비용의 2%
|
| 1606 |
-
const apiCost = Math.round(initialCost * 0.03); // 초기 비용의 3%
|
| 1607 |
-
const maintenanceCost = Math.round(initialCost * 0.01); // 초기 비용의 1%
|
| 1608 |
-
const totalMonthly = serverCost + apiCost + maintenanceCost + monthlySupport;
|
| 1609 |
-
|
| 1610 |
-
// 개발 기간 조정 (최소 3개월)
|
| 1611 |
-
const adjustedTime = Math.max(3, Math.ceil(maxTime));
|
| 1612 |
-
|
| 1613 |
-
// 비용 규모에 따라 자동으로 기간 선택
|
| 1614 |
-
if (initialCost < 50) {
|
| 1615 |
-
currentPeriod = 3;
|
| 1616 |
-
} else if (initialCost < 100) {
|
| 1617 |
-
currentPeriod = 6;
|
| 1618 |
-
} else {
|
| 1619 |
-
currentPeriod = 12;
|
| 1620 |
-
}
|
| 1621 |
-
|
| 1622 |
-
// 총 비용 계산 (기간별)
|
| 1623 |
-
const totalCost = initialCost + (totalMonthly * currentPeriod);
|
| 1624 |
-
|
| 1625 |
-
// 결과 표시
|
| 1626 |
-
document.getElementById('initialCost').textContent = `${initialCost}K`;
|
| 1627 |
-
document.getElementById('devTime').textContent = `${adjustedTime}개월`;
|
| 1628 |
-
document.getElementById('totalCost').textContent = `${totalCost}K`;
|
| 1629 |
-
document.getElementById('periodText').textContent = currentPeriod;
|
| 1630 |
-
document.getElementById('componentList').innerHTML = componentListHTML;
|
| 1631 |
-
|
| 1632 |
-
// 월별 비용 표시
|
| 1633 |
-
document.getElementById('serverCost').textContent = `${serverCost}K`;
|
| 1634 |
-
document.getElementById('apiCost').textContent = `${apiCost}K`;
|
| 1635 |
-
document.getElementById('maintenanceCost').textContent = `${maintenanceCost}K`;
|
| 1636 |
-
document.getElementById('totalMonthlyCost').textContent = `${totalMonthly}K`;
|
| 1637 |
-
}
|
| 1638 |
-
|
| 1639 |
-
// 기존 비용 계산 함수
|
| 1640 |
-
function calculateCosts() {
|
| 1641 |
-
const scale = document.getElementById('projectScale').value;
|
| 1642 |
-
const duration = parseInt(document.getElementById('duration').value);
|
| 1643 |
-
const users = parseInt(document.getElementById('users').value);
|
| 1644 |
-
const features = document.getElementById('features').value;
|
| 1645 |
-
|
| 1646 |
-
const baseCosts = {
|
| 1647 |
-
outsource: {
|
| 1648 |
-
small: { initial: 50, monthly: 5 },
|
| 1649 |
-
medium: { initial: 100, monthly: 10 },
|
| 1650 |
-
large: { initial: 200, monthly: 15 }
|
| 1651 |
-
},
|
| 1652 |
-
inhouse: {
|
| 1653 |
-
small: { initial: 30, monthly: 20 },
|
| 1654 |
-
medium: { initial: 60, monthly: 35 },
|
| 1655 |
-
large: { initial: 100, monthly: 50 }
|
| 1656 |
-
},
|
| 1657 |
-
platform: {
|
| 1658 |
-
small: { initial: 10, monthly: 2 },
|
| 1659 |
-
medium: { initial: 30, monthly: 5 },
|
| 1660 |
-
large: { initial: 50, monthly: 10 }
|
| 1661 |
-
}
|
| 1662 |
-
};
|
| 1663 |
-
|
| 1664 |
-
const complexityMultiplier = {
|
| 1665 |
-
basic: 1,
|
| 1666 |
-
advanced: 1.5,
|
| 1667 |
-
enterprise: 2
|
| 1668 |
-
};
|
| 1669 |
-
|
| 1670 |
-
const userCostFactor = Math.log10(users) / 3;
|
| 1671 |
-
const multiplier = complexityMultiplier[features] * userCostFactor;
|
| 1672 |
-
|
| 1673 |
-
const outsourceCost = baseCosts.outsource[scale].initial +
|
| 1674 |
-
(baseCosts.outsource[scale].monthly * duration * multiplier);
|
| 1675 |
-
const inhouseCost = baseCosts.inhouse[scale].initial +
|
| 1676 |
-
(baseCosts.inhouse[scale].monthly * duration * multiplier);
|
| 1677 |
-
const platformCost = baseCosts.platform[scale].initial +
|
| 1678 |
-
(baseCosts.platform[scale].monthly * duration * multiplier);
|
| 1679 |
|
| 1680 |
-
|
| 1681 |
-
|
| 1682 |
-
|
| 1683 |
-
|
| 1684 |
-
|
| 1685 |
-
|
| 1686 |
-
|
| 1687 |
-
|
| 1688 |
-
|
| 1689 |
-
|
| 1690 |
-
|
| 1691 |
-
|
| 1692 |
-
|
| 1693 |
-
|
| 1694 |
-
|
| 1695 |
-
|
| 1696 |
-
|
| 1697 |
-
|
| 1698 |
-
|
| 1699 |
-
|
| 1700 |
-
|
| 1701 |
-
|
| 1702 |
-
|
| 1703 |
-
|
| 1704 |
-
|
| 1705 |
-
|
| 1706 |
-
|
| 1707 |
-
|
| 1708 |
-
|
| 1709 |
-
|
| 1710 |
-
|
| 1711 |
-
|
| 1712 |
-
|
| 1713 |
-
|
| 1714 |
-
|
| 1715 |
-
|
| 1716 |
-
|
| 1717 |
-
|
| 1718 |
-
|
| 1719 |
-
|
| 1720 |
-
|
| 1721 |
-
|
| 1722 |
-
|
| 1723 |
-
|
| 1724 |
-
|
| 1725 |
-
|
| 1726 |
-
|
| 1727 |
-
|
| 1728 |
-
|
| 1729 |
-
plugins: {
|
| 1730 |
-
title: {
|
| 1731 |
-
display: true,
|
| 1732 |
-
text: '시간에 따른 누적 비용 추이',
|
| 1733 |
-
color: '#ffffff',
|
| 1734 |
-
font: {
|
| 1735 |
-
size: 16
|
| 1736 |
-
}
|
| 1737 |
-
},
|
| 1738 |
-
legend: {
|
| 1739 |
-
labels: {
|
| 1740 |
-
color: '#ffffff'
|
| 1741 |
-
}
|
| 1742 |
-
}
|
| 1743 |
-
},
|
| 1744 |
-
scales: {
|
| 1745 |
-
x: {
|
| 1746 |
-
grid: {
|
| 1747 |
-
color: 'rgba(255, 255, 255, 0.1)'
|
| 1748 |
-
},
|
| 1749 |
-
ticks: {
|
| 1750 |
-
color: '#ffffff'
|
| 1751 |
-
}
|
| 1752 |
-
},
|
| 1753 |
-
y: {
|
| 1754 |
-
grid: {
|
| 1755 |
-
color: 'rgba(255, 255, 255, 0.1)'
|
| 1756 |
-
},
|
| 1757 |
-
ticks: {
|
| 1758 |
-
color: '#ffffff',
|
| 1759 |
-
callback: function(value) {
|
| 1760 |
-
return '₩' + value + 'M';
|
| 1761 |
-
}
|
| 1762 |
-
}
|
| 1763 |
-
}
|
| 1764 |
-
}
|
| 1765 |
-
}
|
| 1766 |
-
});
|
| 1767 |
-
}
|
| 1768 |
-
|
| 1769 |
-
// 애니메이션 효과를 위한 Intersection Observer
|
| 1770 |
-
const observer = new IntersectionObserver((entries) => {
|
| 1771 |
-
entries.forEach(entry => {
|
| 1772 |
-
if (entry.isIntersecting) {
|
| 1773 |
-
entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';
|
| 1774 |
-
}
|
| 1775 |
-
});
|
| 1776 |
-
});
|
| 1777 |
-
|
| 1778 |
-
document.querySelectorAll('.method-card').forEach(card => {
|
| 1779 |
-
observer.observe(card);
|
| 1780 |
-
});
|
| 1781 |
-
</script>
|
| 1782 |
-
</body>
|
| 1783 |
-
</html>
|
|
|
|
| 558 |
color: #00d2ff;
|
| 559 |
}
|
| 560 |
|
| 561 |
+
.build-method-comparison {
|
| 562 |
+
margin-top: 2rem;
|
| 563 |
+
}
|
| 564 |
+
|
| 565 |
+
.comparison-grid {
|
| 566 |
+
display: grid;
|
| 567 |
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| 568 |
+
gap: 1.5rem;
|
| 569 |
+
}
|
| 570 |
+
|
| 571 |
+
.comparison-card {
|
| 572 |
+
background: rgba(118, 75, 162, 0.1);
|
| 573 |
+
border: 1px solid rgba(118, 75, 162, 0.3);
|
| 574 |
+
padding: 1.5rem;
|
| 575 |
+
border-radius: 10px;
|
| 576 |
+
}
|
| 577 |
+
|
| 578 |
+
.comparison-card h5 {
|
| 579 |
+
color: #764ba2;
|
| 580 |
+
margin-bottom: 1rem;
|
| 581 |
+
}
|
| 582 |
+
|
| 583 |
+
.comparison-item {
|
| 584 |
+
display: flex;
|
| 585 |
+
justify-content: space-between;
|
| 586 |
+
margin-bottom: 0.5rem;
|
| 587 |
+
}
|
| 588 |
+
|
| 589 |
+
.periodDisplay {
|
| 590 |
+
color: #00d2ff;
|
| 591 |
+
}
|
| 592 |
+
|
| 593 |
@keyframes fadeInDown {
|
| 594 |
from {
|
| 595 |
opacity: 0;
|
|
|
|
| 643 |
</header>
|
| 644 |
|
| 645 |
<div class="tabs">
|
| 646 |
+
<button class="tab active" onclick="switchTab('custom')">AI SaaS 맞춤 설계 계산기</button>
|
|
|
|
| 647 |
</div>
|
| 648 |
|
| 649 |
+
<!-- AI SaaS 맞춤 설계 탭 -->
|
| 650 |
+
<div id="custom" class="tab-content active">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 651 |
<div class="custom-design-container">
|
| 652 |
<h2 class="calculator-title">나만의 AI SaaS 맞춤 설계</h2>
|
| 653 |
|
|
|
|
| 657 |
<div class="component-icon">🎯</div>
|
| 658 |
<span>타깃 서비스 유형 (필수, 복수 선택 가능)</span>
|
| 659 |
</div>
|
| 660 |
+
|
| 661 |
+
<!-- AI 이미지 관련 -->
|
| 662 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🖼️ AI 이미지 관련</h4>
|
| 663 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 664 |
+
<div class="option-card" data-category="service" data-id="image-gen" data-cost="5" data-time="1" data-resource="0.7">
|
| 665 |
<div class="option-name">AI 이미지 생성</div>
|
| 666 |
<div class="option-details">
|
| 667 |
<span>$5K</span>
|
| 668 |
<span>1개월</span>
|
| 669 |
</div>
|
| 670 |
</div>
|
| 671 |
+
<div class="option-card" data-category="service" data-id="book-cover" data-cost="7" data-time="1" data-resource="0.7">
|
| 672 |
<div class="option-name">책 표지 AI 생성</div>
|
| 673 |
<div class="option-details">
|
| 674 |
<span>$7K</span>
|
| 675 |
<span>1개월</span>
|
| 676 |
</div>
|
| 677 |
</div>
|
| 678 |
+
<div class="option-card" data-category="service" data-id="bg-removal" data-cost="7" data-time="1" data-resource="0.7">
|
| 679 |
<div class="option-name">배경 제거 및 생성</div>
|
| 680 |
<div class="option-details">
|
| 681 |
<span>$7K</span>
|
| 682 |
<span>1개월</span>
|
| 683 |
</div>
|
| 684 |
</div>
|
| 685 |
+
<div class="option-card" data-category="service" data-id="image-enhance" data-cost="7" data-time="1" data-resource="1.4">
|
| 686 |
<div class="option-name">AI 이미지 편집/향상</div>
|
| 687 |
<div class="option-details">
|
| 688 |
<span>$7K</span>
|
| 689 |
<span>1개월</span>
|
| 690 |
</div>
|
| 691 |
</div>
|
| 692 |
+
<div class="option-card" data-category="service" data-id="image-upscale" data-cost="7" data-time="1" data-resource="1.4">
|
| 693 |
<div class="option-name">이미지 업스케일링</div>
|
| 694 |
<div class="option-details">
|
| 695 |
<span>$7K</span>
|
| 696 |
<span>1개월</span>
|
| 697 |
</div>
|
| 698 |
</div>
|
| 699 |
+
<div class="option-card" data-category="service" data-id="image-custom" data-cost="50" data-time="1" data-resource="20">
|
| 700 |
<div class="option-name">이미지 엔터프라이즈 커스텀</div>
|
| 701 |
<div class="option-details">
|
| 702 |
<span>$50K</span>
|
| 703 |
<span>1개월</span>
|
| 704 |
</div>
|
| 705 |
</div>
|
| 706 |
+
</div>
|
| 707 |
+
|
| 708 |
+
<!-- AI 비디오 관련 -->
|
| 709 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">�� AI 비디오 관련</h4>
|
| 710 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 711 |
+
<div class="option-card" data-category="service" data-id="video-gen" data-cost="20" data-time="1" data-resource="10">
|
| 712 |
<div class="option-name">AI 비디오 생성</div>
|
| 713 |
<div class="option-details">
|
| 714 |
<span>$20K</span>
|
| 715 |
<span>1개월</span>
|
| 716 |
</div>
|
| 717 |
</div>
|
| 718 |
+
<div class="option-card" data-category="service" data-id="video-edit" data-cost="20" data-time="1" data-resource="10">
|
| 719 |
<div class="option-name">AI 비디오 편집</div>
|
| 720 |
<div class="option-details">
|
| 721 |
<span>$20K</span>
|
| 722 |
<span>1개월</span>
|
| 723 |
</div>
|
| 724 |
</div>
|
| 725 |
+
<div class="option-card" data-category="service" data-id="avatar-video" data-cost="20" data-time="1" data-resource="10">
|
| 726 |
<div class="option-name">AI 아바타 비디오</div>
|
| 727 |
<div class="option-details">
|
| 728 |
<span>$20K</span>
|
| 729 |
<span>1개월</span>
|
| 730 |
</div>
|
| 731 |
</div>
|
| 732 |
+
<div class="option-card" data-category="service" data-id="auto-subtitle" data-cost="7" data-time="1" data-resource="0.7">
|
| 733 |
<div class="option-name">자동 자막 생성</div>
|
| 734 |
<div class="option-details">
|
| 735 |
<span>$7K</span>
|
| 736 |
<span>1개월</span>
|
| 737 |
</div>
|
| 738 |
</div>
|
| 739 |
+
<div class="option-card" data-category="service" data-id="shortform" data-cost="20" data-time="1" data-resource="100">
|
| 740 |
<div class="option-name">AI 숏폼 비디오</div>
|
| 741 |
<div class="option-details">
|
| 742 |
<span>$20K</span>
|
| 743 |
<span>1개월</span>
|
| 744 |
</div>
|
| 745 |
</div>
|
| 746 |
+
<div class="option-card" data-category="service" data-id="video-custom" data-cost="50" data-time="1" data-resource="20">
|
| 747 |
<div class="option-name">비디오 엔터프라이즈 커스텀</div>
|
| 748 |
<div class="option-details">
|
| 749 |
<span>$50K</span>
|
| 750 |
<span>1개월</span>
|
| 751 |
</div>
|
| 752 |
</div>
|
| 753 |
+
</div>
|
| 754 |
+
|
| 755 |
+
<!-- AI 오디오 관련 -->
|
| 756 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🎵 AI 오디오 관련</h4>
|
| 757 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 758 |
+
<div class="option-card" data-category="service" data-id="sound-gen" data-cost="5" data-time="1" data-resource="0.7">
|
| 759 |
<div class="option-name">AI 음향 생성</div>
|
| 760 |
<div class="option-details">
|
| 761 |
<span>$5K</span>
|
| 762 |
<span>1개월</span>
|
| 763 |
</div>
|
| 764 |
</div>
|
| 765 |
+
<div class="option-card" data-category="service" data-id="music-gen" data-cost="5" data-time="1" data-resource="1.4">
|
| 766 |
<div class="option-name">AI 음악 생성</div>
|
| 767 |
<div class="option-details">
|
| 768 |
<span>$5K</span>
|
| 769 |
<span>1개월</span>
|
| 770 |
</div>
|
| 771 |
</div>
|
| 772 |
+
<div class="option-card" data-category="service" data-id="song-gen" data-cost="5" data-time="1" data-resource="1.5">
|
| 773 |
<div class="option-name">AI 노래 생성 (음악+가사+보컬)</div>
|
| 774 |
<div class="option-details">
|
| 775 |
<span>$5K</span>
|
| 776 |
<span>1개월</span>
|
| 777 |
</div>
|
| 778 |
</div>
|
| 779 |
+
<div class="option-card" data-category="service" data-id="music-video" data-cost="5" data-time="1" data-resource="12">
|
| 780 |
<div class="option-name">AI 뮤직비디오 생성</div>
|
| 781 |
<div class="option-details">
|
| 782 |
<span>$5K</span>
|
| 783 |
<span>1개월</span>
|
| 784 |
</div>
|
| 785 |
</div>
|
| 786 |
+
<div class="option-card" data-category="service" data-id="ai-singer" data-cost="30" data-time="1" data-resource="20">
|
| 787 |
<div class="option-name">AI 가수 생성 (풀패키지)</div>
|
| 788 |
<div class="option-details">
|
| 789 |
<span>$30K</span>
|
| 790 |
<span>1개월</span>
|
| 791 |
</div>
|
| 792 |
</div>
|
| 793 |
+
<div class="option-card" data-category="service" data-id="voice-clone" data-cost="5" data-time="1" data-resource="2.5">
|
| 794 |
<div class="option-name">음성 복제/합성</div>
|
| 795 |
<div class="option-details">
|
| 796 |
<span>$5K</span>
|
| 797 |
<span>1개월</span>
|
| 798 |
</div>
|
| 799 |
</div>
|
| 800 |
+
<div class="option-card" data-category="service" data-id="tts" data-cost="5" data-time="1" data-resource="1.4">
|
| 801 |
<div class="option-name">텍스트 TO 음성 변환</div>
|
| 802 |
<div class="option-details">
|
| 803 |
<span>$5K</span>
|
| 804 |
<span>1개월</span>
|
| 805 |
</div>
|
| 806 |
</div>
|
| 807 |
+
<div class="option-card" data-category="service" data-id="stt" data-cost="5" data-time="1" data-resource="3">
|
| 808 |
<div class="option-name">음성 TO 텍스트 변환</div>
|
| 809 |
<div class="option-details">
|
| 810 |
<span>$5K</span>
|
| 811 |
<span>1개월</span>
|
| 812 |
</div>
|
| 813 |
</div>
|
| 814 |
+
<div class="option-card" data-category="service" data-id="podcast" data-cost="5" data-time="1" data-resource="3">
|
| 815 |
<div class="option-name">AI 팟캐스트 제작</div>
|
| 816 |
<div class="option-details">
|
| 817 |
<span>$5K</span>
|
| 818 |
<span>1개월</span>
|
| 819 |
</div>
|
| 820 |
</div>
|
| 821 |
+
<div class="option-card" data-category="service" data-id="audio-custom" data-cost="50" data-time="1" data-resource="20">
|
| 822 |
<div class="option-name">오디오 엔터프라이즈 커스텀</div>
|
| 823 |
<div class="option-details">
|
| 824 |
<span>$50K</span>
|
| 825 |
<span>1개월</span>
|
| 826 |
</div>
|
| 827 |
</div>
|
| 828 |
+
</div>
|
| 829 |
+
|
| 830 |
+
<!-- AI 텍스트 관련 -->
|
| 831 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">💬 AI 텍스트 관련</h4>
|
| 832 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 833 |
+
<div class="option-card" data-category="service" data-id="chatbot-text" data-cost="5" data-time="1" data-resource="0.7">
|
| 834 |
<div class="option-name">AI 챗봇 (텍스트)</div>
|
| 835 |
<div class="option-details">
|
| 836 |
<span>$5K</span>
|
| 837 |
<span>1개월</span>
|
| 838 |
</div>
|
| 839 |
</div>
|
| 840 |
+
<div class="option-card" data-category="service" data-id="chatbot-rag" data-cost="5" data-time="1" data-resource="1.4">
|
| 841 |
<div class="option-name">AI 챗봇 (텍스트+RAG)</div>
|
| 842 |
<div class="option-details">
|
| 843 |
<span>$5K</span>
|
| 844 |
<span>1개월</span>
|
| 845 |
</div>
|
| 846 |
</div>
|
| 847 |
+
<div class="option-card" data-category="service" data-id="chatbot-voice" data-cost="5" data-time="1" data-resource="1.5">
|
| 848 |
<div class="option-name">AI 챗봇 (텍스트+음성)</div>
|
| 849 |
<div class="option-details">
|
| 850 |
<span>$5K</span>
|
| 851 |
<span>1개월</span>
|
| 852 |
</div>
|
| 853 |
</div>
|
| 854 |
+
<div class="option-card" data-category="service" data-id="chatbot-full" data-cost="5" data-time="1" data-resource="3">
|
| 855 |
<div class="option-name">AI 챗봇 (텍스트+음성+RAG)</div>
|
| 856 |
<div class="option-details">
|
| 857 |
<span>$5K</span>
|
| 858 |
<span>1개월</span>
|
| 859 |
</div>
|
| 860 |
</div>
|
| 861 |
+
<div class="option-card" data-category="service" data-id="translation" data-cost="5" data-time="1" data-resource="0.7">
|
| 862 |
<div class="option-name">AI 번역 서비스</div>
|
| 863 |
<div class="option-details">
|
| 864 |
<span>$5K</span>
|
| 865 |
<span>1개월</span>
|
| 866 |
</div>
|
| 867 |
</div>
|
| 868 |
+
<div class="option-card" data-category="service" data-id="email-writing" data-cost="5" data-time="1" data-resource="0.7">
|
| 869 |
<div class="option-name">AI 이메일/문서 작성</div>
|
| 870 |
<div class="option-details">
|
| 871 |
<span>$5K</span>
|
| 872 |
<span>1개월</span>
|
| 873 |
</div>
|
| 874 |
</div>
|
| 875 |
+
<div class="option-card" data-category="service" data-id="code-assistant" data-cost="5" data-time="1" data-resource="0.7">
|
| 876 |
<div class="option-name">AI 코드 어시스턴트</div>
|
| 877 |
<div class="option-details">
|
| 878 |
<span>$5K</span>
|
| 879 |
<span>1개월</span>
|
| 880 |
</div>
|
| 881 |
</div>
|
| 882 |
+
<div class="option-card" data-category="service" data-id="text-custom" data-cost="50" data-time="1" data-resource="20">
|
| 883 |
<div class="option-name">텍스트 엔터프라이즈 커스텀</div>
|
| 884 |
<div class="option-details">
|
| 885 |
<span>$50K</span>
|
| 886 |
<span>1개월</span>
|
| 887 |
</div>
|
| 888 |
</div>
|
| 889 |
+
</div>
|
| 890 |
+
|
| 891 |
+
<!-- AI 분석 도구 -->
|
| 892 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">📊 AI 분석 도구</h4>
|
| 893 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 894 |
+
<div class="option-card" data-category="service" data-id="data-analysis" data-cost="5" data-time="1" data-resource="0.7">
|
| 895 |
<div class="option-name">AI 데이터 분석</div>
|
| 896 |
<div class="option-details">
|
| 897 |
<span>$5K</span>
|
| 898 |
<span>1개월</span>
|
| 899 |
</div>
|
| 900 |
</div>
|
| 901 |
+
<div class="option-card" data-category="service" data-id="ocr" data-cost="5" data-time="1" data-resource="2">
|
| 902 |
<div class="option-name">AI OCR 서비스</div>
|
| 903 |
<div class="option-details">
|
| 904 |
<span>$5K</span>
|
| 905 |
<span>1개월</span>
|
| 906 |
</div>
|
| 907 |
</div>
|
| 908 |
+
<div class="option-card" data-category="service" data-id="computer-vision" data-cost="5" data-time="1" data-resource="1.4">
|
| 909 |
<div class="option-name">컴퓨터 비전</div>
|
| 910 |
<div class="option-details">
|
| 911 |
<span>$5K</span>
|
| 912 |
<span>1개월</span>
|
| 913 |
</div>
|
| 914 |
</div>
|
| 915 |
+
<div class="option-card" data-category="service" data-id="sentiment-analysis" data-cost="5" data-time="1" data-resource="0.7">
|
| 916 |
<div class="option-name">감정 분석 AI</div>
|
| 917 |
<div class="option-details">
|
| 918 |
<span>$5K</span>
|
| 919 |
<span>1개월</span>
|
| 920 |
</div>
|
| 921 |
</div>
|
| 922 |
+
<div class="option-card" data-category="service" data-id="analysis-custom" data-cost="50" data-time="1" data-resource="20">
|
| 923 |
<div class="option-name">분석 엔터프라이즈 커스텀</div>
|
| 924 |
<div class="option-details">
|
| 925 |
<span>$50K</span>
|
| 926 |
<span>1개월</span>
|
| 927 |
</div>
|
| 928 |
</div>
|
| 929 |
+
</div>
|
| 930 |
+
|
| 931 |
+
<!-- AI 콘텐츠 생성 -->
|
| 932 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">📝 AI 콘텐츠 생성</h4>
|
| 933 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 934 |
+
<div class="option-card" data-category="service" data-id="novel" data-cost="20" data-time="1" data-resource="20">
|
| 935 |
<div class="option-name">AI 소설 생성</div>
|
| 936 |
<div class="option-details">
|
| 937 |
<span>$20K</span>
|
| 938 |
<span>1개월</span>
|
| 939 |
</div>
|
| 940 |
</div>
|
| 941 |
+
<div class="option-card" data-category="service" data-id="webnovel" data-cost="20" data-time="1" data-resource="20">
|
| 942 |
<div class="option-name">AI 웹소설 생성</div>
|
| 943 |
<div class="option-details">
|
| 944 |
<span>$20K</span>
|
| 945 |
<span>1개월</span>
|
| 946 |
</div>
|
| 947 |
</div>
|
| 948 |
+
<div class="option-card" data-category="service" data-id="webtoon" data-cost="20" data-time="1" data-resource="20">
|
| 949 |
<div class="option-name">AI 웹툰 생성</div>
|
| 950 |
<div class="option-details">
|
| 951 |
<span>$20K</span>
|
| 952 |
<span>1개월</span>
|
| 953 |
</div>
|
| 954 |
</div>
|
| 955 |
+
<div class="option-card" data-category="service" data-id="ai-book" data-cost="20" data-time="1" data-resource="2">
|
| 956 |
<div class="option-name">AI BOOK 제작</div>
|
| 957 |
<div class="option-details">
|
| 958 |
<span>$20K</span>
|
| 959 |
<span>1개월</span>
|
| 960 |
</div>
|
| 961 |
</div>
|
| 962 |
+
<div class="option-card" data-category="service" data-id="ecommerce" data-cost="20" data-time="1" data-resource="20">
|
| 963 |
<div class="option-name">이커머스 AI (상품설명)</div>
|
| 964 |
<div class="option-details">
|
| 965 |
<span>$20K</span>
|
| 966 |
<span>1개월</span>
|
| 967 |
</div>
|
| 968 |
</div>
|
| 969 |
+
</div>
|
| 970 |
+
|
| 971 |
+
<!-- AI 전문 서비스 -->
|
| 972 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">⚕️ AI 전문 서비스</h4>
|
| 973 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 974 |
+
<div class="option-card" data-category="service" data-id="medical" data-cost="20" data-time="1" data-resource="5">
|
| 975 |
<div class="option-name">AI 의료 어시스턴트</div>
|
| 976 |
<div class="option-details">
|
| 977 |
<span>$20K</span>
|
| 978 |
<span>1개월</span>
|
| 979 |
</div>
|
| 980 |
</div>
|
| 981 |
+
<div class="option-card" data-category="service" data-id="legal" data-cost="20" data-time="1" data-resource="5">
|
| 982 |
<div class="option-name">AI 법률 어시스턴트</div>
|
| 983 |
<div class="option-details">
|
| 984 |
<span>$20K</span>
|
| 985 |
<span>1개월</span>
|
| 986 |
</div>
|
| 987 |
</div>
|
| 988 |
+
<div class="option-card" data-category="service" data-id="education" data-cost="20" data-time="1" data-resource="5">
|
| 989 |
<div class="option-name">AI 교육/튜터링</div>
|
| 990 |
<div class="option-details">
|
| 991 |
<span>$20K</span>
|
| 992 |
<span>1개월</span>
|
| 993 |
</div>
|
| 994 |
</div>
|
| 995 |
+
</div>
|
| 996 |
+
|
| 997 |
+
<!-- AI 시뮬레이션 -->
|
| 998 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🎭 AI 시뮬레이션</h4>
|
| 999 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 1000 |
+
<div class="option-card" data-category="service" data-id="hairstyle" data-cost="20" data-time="1" data-resource="1.2">
|
| 1001 |
<div class="option-name">헤어스타일 AI 시뮬레이션</div>
|
| 1002 |
<div class="option-details">
|
| 1003 |
<span>$20K</span>
|
| 1004 |
<span>1개월</span>
|
| 1005 |
</div>
|
| 1006 |
</div>
|
| 1007 |
+
<div class="option-card" data-category="service" data-id="fashion" data-cost="7" data-time="1" data-resource="0.7">
|
| 1008 |
<div class="option-name">패션 가상 피팅 AI</div>
|
| 1009 |
<div class="option-details">
|
| 1010 |
<span>$7K</span>
|
| 1011 |
<span>1개월</span>
|
| 1012 |
</div>
|
| 1013 |
</div>
|
| 1014 |
+
<div class="option-card" data-category="service" data-id="3d-model" data-cost="20" data-time="1" data-resource="2">
|
| 1015 |
<div class="option-name">AI 3D 모델 생성</div>
|
| 1016 |
<div class="option-details">
|
| 1017 |
<span>$20K</span>
|
| 1018 |
<span>1개월</span>
|
| 1019 |
</div>
|
| 1020 |
</div>
|
| 1021 |
+
<div class="option-card" data-category="service" data-id="nsfw" data-cost="20" data-time="1" data-resource="0.7">
|
| 1022 |
<div class="option-name">NSFW 이미지 생성</div>
|
| 1023 |
<div class="option-details">
|
| 1024 |
<span>$20K</span>
|
|
|
|
| 1026 |
</div>
|
| 1027 |
</div>
|
| 1028 |
</div>
|
| 1029 |
+
|
| 1030 |
+
<!-- 커스텀 모델 -->
|
| 1031 |
+
<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🔧 커스텀 모델</h4>
|
| 1032 |
+
<div class="component-options" style="margin-bottom: 2rem;">
|
| 1033 |
+
<div class="option-card" data-category="service" data-id="llm-finetune" data-cost="200" data-time="1" data-resource="20">
|
| 1034 |
+
<div class="option-name">모델: LLM(파인튜닝)</div>
|
| 1035 |
+
<div class="option-details">
|
| 1036 |
+
<span>$200K</span>
|
| 1037 |
+
<span>1개월</span>
|
| 1038 |
+
</div>
|
| 1039 |
+
</div>
|
| 1040 |
+
<div class="option-card" data-category="service" data-id="image-lora" data-cost="50" data-time="1" data-resource="20">
|
| 1041 |
+
<div class="option-name">모델: 이미지 생성(LoRA)</div>
|
| 1042 |
+
<div class="option-details">
|
| 1043 |
+
<span>$50K</span>
|
| 1044 |
+
<span>1개월</span>
|
| 1045 |
+
</div>
|
| 1046 |
+
</div>
|
| 1047 |
+
<div class="option-card" data-category="service" data-id="gen-lora" data-cost="50" data-time="1" data-resource="20">
|
| 1048 |
+
<div class="option-name">모델: 생성(LoRA)</div>
|
| 1049 |
+
<div class="option-details">
|
| 1050 |
+
<span>$50K</span>
|
| 1051 |
+
<span>1개월</span>
|
| 1052 |
+
</div>
|
| 1053 |
+
</div>
|
| 1054 |
+
<div class="option-card" data-category="service" data-id="vision-model" data-cost="50" data-time="1" data-resource="20">
|
| 1055 |
+
<div class="option-name">모델: 비전인식</div>
|
| 1056 |
+
<div class="option-details">
|
| 1057 |
+
<span>$50K</span>
|
| 1058 |
+
<span>1개월</span>
|
| 1059 |
+
</div>
|
| 1060 |
+
</div>
|
| 1061 |
+
<div class="option-card" data-category="service" data-id="custom-model" data-cost="50" data-time="1" data-resource="20">
|
| 1062 |
+
<div class="option-name">맞춤 주문형 모델</div>
|
| 1063 |
+
<div class="option-details">
|
| 1064 |
+
<span>$50K</span>
|
| 1065 |
+
<span>1개월</span>
|
| 1066 |
+
</div>
|
| 1067 |
+
</div>
|
| 1068 |
+
</div>
|
| 1069 |
</div>
|
| 1070 |
|
| 1071 |
<!-- DB 관리 -->
|
|
|
|
| 1323 |
<div class="component-list" id="componentList"></div>
|
| 1324 |
</div>
|
| 1325 |
|
|
|
|
|
|
|
| 1326 |
<div class="monthly-breakdown">
|
| 1327 |
<div class="monthly-item">
|
| 1328 |
<div class="monthly-label">월 서버 비용</div>
|
| 1329 |
<div class="monthly-value" id="serverCost">$0K</div>
|
| 1330 |
</div>
|
| 1331 |
<div class="monthly-item">
|
| 1332 |
+
<div class="monthly-label">월 리소스 비용 (GPU/API)</div>
|
| 1333 |
+
<div class="monthly-value" id="resourceCost">$0K</div>
|
| 1334 |
</div>
|
| 1335 |
<div class="monthly-item">
|
| 1336 |
<div class="monthly-label">월 유지보수</div>
|
|
|
|
| 1341 |
<div class="monthly-value" id="totalMonthlyCost">$0K</div>
|
| 1342 |
</div>
|
| 1343 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1344 |
|
| 1345 |
+
<!-- 구축 방식별 비교 -->
|
| 1346 |
+
<div class="build-method-comparison" style="margin-top: 2rem;">
|
| 1347 |
+
<h4 style="margin-bottom: 1.5rem; color: #00d2ff;">구축 방식별 비교</h4>
|
| 1348 |
+
<div class="comparison-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
|
| 1349 |
+
<div class="comparison-card" style="background: rgba(118, 75, 162, 0.1); border: 1px solid rgba(118, 75, 162, 0.3); padding: 1.5rem; border-radius: 10px;">
|
| 1350 |
+
<h5 style="color: #764ba2; margin-bottom: 1rem;">외주 용역 개발</h5>
|
| 1351 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1352 |
+
<span>초기 비용</span>
|
| 1353 |
+
<span id="outsourceInitial">$0K</span>
|
| 1354 |
+
</div>
|
| 1355 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1356 |
+
<span>월 운영 비용</span>
|
| 1357 |
+
<span id="outsourceMonthly">$0K</span>
|
| 1358 |
+
</div>
|
| 1359 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1360 |
+
<span><span class="periodDisplay">3</span>개월 총 비용</span>
|
| 1361 |
+
<span id="outsourceTotal">$0K</span>
|
| 1362 |
+
</div>
|
| 1363 |
+
</div>
|
| 1364 |
+
<div class="comparison-card" style="background: rgba(245, 87, 108, 0.1); border: 1px solid rgba(245, 87, 108, 0.3); padding: 1.5rem; border-radius: 10px;">
|
| 1365 |
+
<h5 style="color: #f5576c; margin-bottom: 1rem;">자체 인력 개발</h5>
|
| 1366 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1367 |
+
<span>초기 비용</span>
|
| 1368 |
+
<span id="inhouseInitial">$0K</span>
|
| 1369 |
+
</div>
|
| 1370 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1371 |
+
<span>월 운영 비용</span>
|
| 1372 |
+
<span id="inhouseMonthly">$0K</span>
|
| 1373 |
+
</div>
|
| 1374 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1375 |
+
<span><span class="periodDisplay">3</span>개월 총 비용</span>
|
| 1376 |
+
<span id="inhouseTotal">$0K</span>
|
| 1377 |
+
</div>
|
| 1378 |
+
</div>
|
| 1379 |
+
<div class="comparison-card" style="background: rgba(79, 172, 254, 0.1); border: 1px solid rgba(79, 172, 254, 0.3); padding: 1.5rem; border-radius: 10px;">
|
| 1380 |
+
<h5 style="color: #4facfe; margin-bottom: 1rem;">플랫폼 대여</h5>
|
| 1381 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1382 |
+
<span>초기 비용</span>
|
| 1383 |
+
<span id="platformInitial">$0K</span>
|
| 1384 |
+
</div>
|
| 1385 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1386 |
+
<span>월 운영 비용</span>
|
| 1387 |
+
<span id="platformMonthly">$0K</span>
|
| 1388 |
+
</div>
|
| 1389 |
+
<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
| 1390 |
+
<span><span class="periodDisplay">3</span>개월 총 비용</span>
|
| 1391 |
+
<span id="platformTotal">$0K</span>
|
| 1392 |
+
</div>
|
| 1393 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|