feat: [claude-code] 발전과정 페이지 대폭 강화 - 모델 비교 탭 추가
- 새 '모델 비교' 탭: 각 모델별 특징 카드, 벤치마크 바 차트, 핵심 스펙 - Opus 4.6/4.5, Sonnet 4.6/4.5, 4 Opus/Sonnet, 3.7/3.5, Haiku 4.5 상세 - SWE-bench, GPQA Diamond, ARC-AGI 2, OSWorld 벤치마크 수치 반영 - Opus 4.6 vs Sonnet 4.6 직접 비교표 추가 - 모델 진화 탭: 세대별 비교표 10개 모델로 확장, SWE-bench 성장 바 차트 - 타임라인 탭: Opus 4.5(2025.11) 노드 추가, 정확한 출시일 반영 - 히어로 수치 업데이트 (9세대 모델, SWE-bench 80.8%)
This commit is contained in:
김보곤
@@ -43,11 +43,48 @@
|
||||
.evo-card { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,1)); border-radius: 1rem; border: 1px solid #e2e8f0; overflow: hidden; }
|
||||
.evo-card-header { padding: 1rem 1.5rem; font-weight: 700; color: white; font-size: 0.85rem; }
|
||||
|
||||
/* 모델 카드 */
|
||||
.model-card { background: white; border-radius: 1rem; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s; }
|
||||
.model-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.1); }
|
||||
.model-card-head { padding: 1.25rem 1.5rem; color: white; position: relative; overflow: hidden; }
|
||||
.model-card-head::after { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.1); }
|
||||
.model-card-body { padding: 1.25rem 1.5rem; }
|
||||
|
||||
/* 벤치마크 바 */
|
||||
.bench-bar-wrap { margin-bottom: 0.6rem; }
|
||||
.bench-label { display: flex; justify-content: space-between; font-size: 0.7rem; margin-bottom: 3px; }
|
||||
.bench-bar { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
|
||||
.bench-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease-out; }
|
||||
|
||||
/* 세대 비교 테이블 */
|
||||
.gen-table { width: 100%; border-collapse: separate; border-spacing: 0; }
|
||||
.gen-table th, .gen-table td { padding: 0.75rem 1rem; text-align: center; font-size: 0.8rem; }
|
||||
.gen-table thead th { background: #1e293b; color: white; font-weight: 700; }
|
||||
.gen-table thead th:first-child { border-radius: 0.75rem 0 0 0; text-align: left; }
|
||||
.gen-table thead th:last-child { border-radius: 0 0.75rem 0 0; }
|
||||
.gen-table tbody tr { border-bottom: 1px solid #f1f5f9; }
|
||||
.gen-table tbody tr:hover { background: #f8fafc; }
|
||||
.gen-table tbody td:first-child { text-align: left; font-weight: 600; }
|
||||
|
||||
/* 스코어 뱃지 */
|
||||
.score-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; }
|
||||
|
||||
/* 강점 태그 */
|
||||
.strength-tag { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 600; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }
|
||||
|
||||
/* 모델 티어 */
|
||||
.tier-flagship { border-left: 4px solid #7c3aed; }
|
||||
.tier-balanced { border-left: 4px solid #2563eb; }
|
||||
.tier-fast { border-left: 4px solid #059669; }
|
||||
.tier-light { border-left: 4px solid #64748b; }
|
||||
|
||||
/* 애니메이션 */
|
||||
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.anim-up { animation: slideUp 0.6s ease-out forwards; }
|
||||
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); } }
|
||||
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
|
||||
@keyframes fillBar { from { width: 0; } }
|
||||
.anim-bar { animation: fillBar 1s ease-out forwards; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@@ -74,19 +111,19 @@
|
||||
{{-- 핵심 수치 --}}
|
||||
<div class="flex flex-wrap gap-4 mb-6">
|
||||
<div class="stat-ring" style="background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 0 30px rgba(245,158,11,0.3);">
|
||||
<span class="text-lg font-black">18개월</span>
|
||||
<span class="text-lg font-black">13개월</span>
|
||||
<span style="font-size: 0.6rem; opacity: 0.8;">개발 기간</span>
|
||||
</div>
|
||||
<div class="stat-ring" style="background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 0 30px rgba(124,58,237,0.3);">
|
||||
<span class="text-lg font-black">50+</span>
|
||||
<span style="font-size: 0.6rem; opacity: 0.8;">릴리스</span>
|
||||
<span class="text-lg font-black">9세대</span>
|
||||
<span style="font-size: 0.6rem; opacity: 0.8;">모델 진화</span>
|
||||
</div>
|
||||
<div class="stat-ring" style="background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 0 30px rgba(5,150,105,0.3);">
|
||||
<span class="text-lg font-black">100만+</span>
|
||||
<span style="font-size: 0.6rem; opacity: 0.8;">개발자</span>
|
||||
<span class="text-lg font-black">80.8%</span>
|
||||
<span style="font-size: 0.6rem; opacity: 0.8;">SWE-bench</span>
|
||||
</div>
|
||||
<div class="stat-ring" style="background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 0 30px rgba(37,99,235,0.3);">
|
||||
<span class="text-lg font-black">Opus 4</span>
|
||||
<span class="text-lg font-black">Opus 4.6</span>
|
||||
<span style="font-size: 0.6rem; opacity: 0.8;">최신 모델</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,8 +132,9 @@
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button class="cc-tab active" onclick="switchCcTab(0)">타임라인</button>
|
||||
<button class="cc-tab" onclick="switchCcTab(1)">핵심 혁신</button>
|
||||
<button class="cc-tab" onclick="switchCcTab(2)">모델 진화</button>
|
||||
<button class="cc-tab" onclick="switchCcTab(3)">생태계</button>
|
||||
<button class="cc-tab" onclick="switchCcTab(2)">모델 비교</button>
|
||||
<button class="cc-tab" onclick="switchCcTab(3)">모델 진화</button>
|
||||
<button class="cc-tab" onclick="switchCcTab(4)">생태계</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,7 +178,7 @@
|
||||
<span class="text-xs text-gray-400">2025.04</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-base mb-1">정식 출시 — General Availability</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Claude 3.5 Sonnet / Claude 3.7 Sonnet 기반으로 일반 공개. Max/Pro 구독 모델 도입. GitHub, GitLab 연동으로 실질적 개발 워크플로우 지원 시작.</p>
|
||||
<p class="text-sm text-gray-600 mb-3">Claude 3.5/3.7 Sonnet 기반으로 일반 공개. Max/Pro 구독 모델 도입. GitHub, GitLab 연동으로 실질적 개발 워크플로우 지원 시작.</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="feat-badge bg-orange-50 text-orange-700 border border-orange-200">Max/Pro 구독</span>
|
||||
<span class="feat-badge bg-orange-50 text-orange-700 border border-orange-200">Git 통합</span>
|
||||
@@ -155,13 +193,13 @@
|
||||
<div class="v-card" style="margin-right: calc(50% + 2rem); border-top: 3px solid #dc2626;">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="mono text-xs px-2 py-0.5 bg-red-100 text-red-800 rounded font-bold">v1.0.x</span>
|
||||
<span class="text-xs text-gray-400">2025.05</span>
|
||||
<span class="text-xs text-gray-400">2025.05.14</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-base mb-1">Claude 4 Sonnet — 코딩 특화 모델</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Claude 4 Sonnet (claude-sonnet-4-20250514) 출시. SWE-bench에서 역대 최고 성적. 코드 이해도·정확성이 급격히 향상되며 Claude Code의 실전 능력이 도약.</p>
|
||||
<p class="text-sm text-gray-600 mb-3">Claude 4 Sonnet 출시. SWE-bench 72.7%로 당시 최고 성적. 코드 이해도와 정확성이 급격히 향상되며 Claude Code의 실전 능력이 도약.</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="feat-badge bg-red-50 text-red-700 border border-red-200">Claude 4 Sonnet</span>
|
||||
<span class="feat-badge bg-red-50 text-red-700 border border-red-200">SWE-bench SOTA</span>
|
||||
<span class="feat-badge bg-red-50 text-red-700 border border-red-200">SWE-bench 72.7%</span>
|
||||
<span class="feat-badge bg-red-50 text-red-700 border border-red-200">확장 사고(Extended Thinking)</span>
|
||||
<span class="feat-badge bg-red-50 text-red-700 border border-red-200">병렬 도구 호출</span>
|
||||
</div>
|
||||
@@ -174,7 +212,7 @@
|
||||
{{-- ===== 2025.06~08 ===== --}}
|
||||
<div class="version-node flex items-start gap-6 mb-10">
|
||||
<div class="v-dot-wrap shrink-0" style="display: flex; align-items: start; justify-content: center; width: 48px;">
|
||||
<div class="v-dot" style="background: linear-gradient(135deg, #9333ea, #c084fc);">생태계</div>
|
||||
<div class="v-dot" style="background: linear-gradient(135deg, #9333ea, #c084fc);">MCP</div>
|
||||
</div>
|
||||
<div class="v-card" style="margin-left: calc(50% + 2rem); border-top: 3px solid #9333ea;">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
@@ -182,7 +220,7 @@
|
||||
<span class="text-xs text-gray-400">2025.06~08</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-base mb-1">생태계 폭발 — MCP & Hooks & Skills</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Model Context Protocol(MCP)로 외부 도구 연동 표준화. Hooks(pre/post 실행 스크립트), Custom Skills, Custom Agents 시스템으로 확장성 극대화. 커뮤니티 생태계 급성장.</p>
|
||||
<p class="text-sm text-gray-600 mb-3">Model Context Protocol(MCP)로 외부 도구 연동 표준화. Hooks, Custom Skills, Custom Agents 시스템으로 확장성 극대화. 커뮤니티 생태계 급성장.</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="feat-badge bg-purple-50 text-purple-700 border border-purple-200">MCP 프로토콜</span>
|
||||
<span class="feat-badge bg-purple-50 text-purple-700 border border-purple-200">Hooks 시스템</span>
|
||||
@@ -193,49 +231,70 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== 2025.09~10 ===== --}}
|
||||
{{-- ===== 2025.09 ===== --}}
|
||||
<div class="version-node flex items-start gap-6 mb-10" style="flex-direction: row-reverse;">
|
||||
<div class="v-card" style="margin-right: calc(50% + 2rem); border-top: 3px solid #2563eb;">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="mono text-xs px-2 py-0.5 bg-blue-100 text-blue-800 rounded font-bold">v1.x</span>
|
||||
<span class="text-xs text-gray-400">2025.09~10</span>
|
||||
<span class="text-xs text-gray-400">2025.09</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-base mb-1">Claude 4 Opus & Haiku 4.5</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Claude 4 Opus(claude-opus-4-20250918) — Anthropic 최고 성능 모델. 복잡한 아키텍처 설계·리팩토링·대규모 코드베이스 이해에서 압도적 성능. Haiku 4.5는 초고속 경량 모델로 서브에이전트 최적화.</p>
|
||||
<h3 class="font-bold text-base mb-1">Claude 4 Opus & Sonnet 4.5</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Claude 4 Opus — 최고 지능 모델. Sonnet 4.5 — SWE-bench 77.2%로 "세계 최고의 코딩 모델" 등극. 서브에이전트, Worktree 병렬 작업 도입.</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">Claude 4 Opus</span>
|
||||
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">Haiku 4.5</span>
|
||||
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">Sonnet 4.5 (SWE 77.2%)</span>
|
||||
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">서브에이전트</span>
|
||||
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">Worktree (병렬 작업)</span>
|
||||
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">Worktree 병렬 작업</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="v-dot-wrap shrink-0" style="display: flex; align-items: start; justify-content: center; width: 48px;">
|
||||
<div class="v-dot" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">4 Opus</div>
|
||||
<div class="v-dot" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">4.5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== 2025.12~2026 ===== --}}
|
||||
{{-- ===== 2025.11 ===== --}}
|
||||
<div class="version-node flex items-start gap-6 mb-10">
|
||||
<div class="v-dot-wrap shrink-0" style="display: flex; align-items: start; justify-content: center; width: 48px;">
|
||||
<div class="v-dot pulse-glow" style="background: linear-gradient(135deg, #059669, #34d399);">NOW</div>
|
||||
<div class="v-dot" style="background: linear-gradient(135deg, #6d28d9, #a78bfa);">4.5O</div>
|
||||
</div>
|
||||
<div class="v-card" style="margin-left: calc(50% + 2rem); border-top: 3px solid #059669; border: 2px solid #bbf7d0;">
|
||||
<div class="v-card" style="margin-left: calc(50% + 2rem); border-top: 3px solid #6d28d9;">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="mono text-xs px-2 py-0.5 bg-violet-100 text-violet-800 rounded font-bold">v1.x</span>
|
||||
<span class="text-xs text-gray-400">2025.11.24</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-base mb-1">Opus 4.5 — 최초 80% 돌파</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">SWE-bench 80.9%로 최초 80% 벽 돌파. Sonnet 4.5 대비 76% 적은 토큰으로 동일 성능 달성. Infinite Chats로 컨텍스트 제한 해소.</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">SWE-bench 80.9%</span>
|
||||
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">Infinite Chats</span>
|
||||
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">GPQA 87.0%</span>
|
||||
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">토큰 효율 76%↑</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== 2026.01~현재 ===== --}}
|
||||
<div class="version-node flex items-start gap-6 mb-10" style="flex-direction: row-reverse;">
|
||||
<div class="v-card" style="margin-right: calc(50% + 2rem); border-top: 3px solid #059669; border: 2px solid #bbf7d0;">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="mono text-xs px-2 py-0.5 bg-emerald-100 text-emerald-800 rounded font-bold">v1.x</span>
|
||||
<span class="text-xs text-gray-400">2025.12~2026 현재</span>
|
||||
<span class="text-xs text-gray-400">2026.01~현재</span>
|
||||
<span class="px-2 py-0.5 bg-emerald-500 text-white text-xs rounded-full font-bold">CURRENT</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-base mb-1">Opus 4.6 & 엔터프라이즈 성숙</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Opus 4.6 (claude-opus-4-6) — 빠른 출력 + 최고 성능 결합. GitHub Actions CI/CD 통합, 엔터프라이즈 보안 정책, Task 관리, 자동 메모리 시스템 안정화. 실무 프로젝트에서 시니어 개발자급 자율 코딩 가능.</p>
|
||||
<h3 class="font-bold text-base mb-1">Opus 4.6 & Sonnet 4.6 — 현재</h3>
|
||||
<p class="text-sm text-gray-600 mb-3">Opus 4.6 (2/5) — GPQA 91.3%, Agent Teams, Adaptive Thinking. Sonnet 4.6 (2/17) — 1M 컨텍스트 베타, Opus에 근접한 코딩 성능. Cowork(비개발자 GUI), Claude Code Security 출시.</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Opus 4.6 (최신)</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Opus 4.6 (GPQA 91.3%)</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Sonnet 4.6</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">GitHub Actions 연동</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">자동 메모리</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Task 시스템</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Fast Mode</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Agent Teams</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">1M Context (beta)</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Adaptive Thinking</span>
|
||||
<span class="feat-badge bg-emerald-50 text-emerald-700 border border-emerald-200">Fast Mode 2.5x</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="v-dot-wrap shrink-0" style="display: flex; align-items: start; justify-content: center; width: 48px;">
|
||||
<div class="v-dot pulse-glow" style="background: linear-gradient(135deg, #059669, #34d399);">NOW</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -291,7 +350,7 @@
|
||||
<div class="evo-card">
|
||||
<div class="evo-card-header" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">서브에이전트 & 병렬 작업</div>
|
||||
<div class="p-5">
|
||||
<p class="text-sm text-gray-600 mb-3">복잡한 작업을 여러 서브에이전트에 위임하여 <strong>병렬 처리</strong>. Worktree를 활용한 독립 작업 공간에서 동시에 여러 기능을 개발. 시니어 개발자가 주니어들에게 업무를 분배하는 것과 유사.</p>
|
||||
<p class="text-sm text-gray-600 mb-3">복잡한 작업을 여러 서브에이전트에 위임하여 <strong>병렬 처리</strong>. Worktree를 활용한 독립 작업 공간에서 동시에 여러 기능을 개발.</p>
|
||||
<div class="bg-gray-50 rounded-lg p-3 text-xs text-gray-600">
|
||||
<p class="font-bold mb-1">실행 흐름:</p>
|
||||
<p>메인 에이전트 → 분석 에이전트 (탐색)</p>
|
||||
@@ -305,7 +364,7 @@
|
||||
<div class="evo-card">
|
||||
<div class="evo-card-header" style="background: linear-gradient(135deg, #dc2626, #f87171);">자동 메모리 — 세션 간 학습</div>
|
||||
<div class="p-5">
|
||||
<p class="text-sm text-gray-600 mb-3">대화가 끝나도 중요한 패턴·선호·교훈을 <code class="mono text-xs bg-gray-100 px-1.5 py-0.5 rounded">MEMORY.md</code>에 자동 저장. 다음 세션에서 동일한 실수를 반복하지 않음. 프로젝트와 함께 성장하는 AI.</p>
|
||||
<p class="text-sm text-gray-600 mb-3">대화가 끝나도 중요한 패턴과 교훈을 <code class="mono text-xs bg-gray-100 px-1.5 py-0.5 rounded">MEMORY.md</code>에 자동 저장. 다음 세션에서 동일한 실수를 반복하지 않음. 프로젝트와 함께 성장하는 AI.</p>
|
||||
<div class="text-xs text-gray-500">
|
||||
<p><strong>저장하는 것:</strong> 검증된 패턴, 아키텍처 결정, 사용자 선호</p>
|
||||
<p><strong>저장하지 않는 것:</strong> 임시 작업, 미검증 추측</p>
|
||||
@@ -316,7 +375,7 @@
|
||||
<div class="evo-card">
|
||||
<div class="evo-card-header" style="background: linear-gradient(135deg, #0891b2, #67e8f9);">Hooks — 안전한 자동화</div>
|
||||
<div class="p-5">
|
||||
<p class="text-sm text-gray-600 mb-3">도구 실행 전후에 자동으로 스크립트를 실행. Lint 자동 적용, 위험 명령 차단, 커밋 메시지 검증 등을 자동화. Co-Authored-By 서명 자동 제거 같은 팀 규칙도 Hook으로 강제.</p>
|
||||
<p class="text-sm text-gray-600 mb-3">도구 실행 전후에 자동으로 스크립트를 실행. Lint 자동 적용, 위험 명령 차단, 커밋 메시지 검증 등을 자동화. HTTP Hooks로 외부 서비스 연동도 가능.</p>
|
||||
<div class="bg-gray-50 rounded-lg p-3 text-xs mono text-gray-600">
|
||||
PreCommit → lint + format<br>
|
||||
PostCommit → 자동 push (MNG)<br>
|
||||
@@ -327,85 +386,631 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== 탭 2: 모델 진화 ===== --}}
|
||||
{{-- ===== 탭 2: 모델 비교 (NEW) ===== --}}
|
||||
<div class="cc-section" id="ccTab2">
|
||||
<h2 class="text-xl font-bold mb-6 text-gray-800">Claude 모델 진화 계보</h2>
|
||||
<h2 class="text-xl font-bold mb-2 text-gray-800">Claude 모델별 특징 비교</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">각 모델의 핵심 역량, 벤치마크 성능, 적합한 사용 시나리오를 한눈에 비교합니다.</p>
|
||||
|
||||
{{-- === Flagship 모델 === --}}
|
||||
<h3 class="text-sm font-bold text-purple-700 mb-3 flex items-center gap-2">
|
||||
<span style="width: 10px; height: 10px; background: #7c3aed; border-radius: 2px; display: inline-block;"></span>
|
||||
Flagship — 최고 성능
|
||||
</h3>
|
||||
<div class="grid gap-5 mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));">
|
||||
|
||||
{{-- Opus 4.6 --}}
|
||||
<div class="model-card tier-flagship">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #5b21b6, #7c3aed);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs opacity-70">Flagship</p>
|
||||
<h3 class="text-lg font-black">Claude Opus 4.6</h3>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="px-2 py-0.5 bg-white bg-opacity-20 rounded text-xs font-bold">2026.02.05</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs opacity-80 mt-1">claude-opus-4-6 — Anthropic 최고 지능 + 최고 속도</p>
|
||||
</div>
|
||||
<div class="model-card-body">
|
||||
{{-- 핵심 스펙 --}}
|
||||
<div class="grid grid-cols-3 gap-3 mb-4">
|
||||
<div class="text-center p-2 bg-purple-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Context</p>
|
||||
<p class="text-sm font-black text-purple-700">200K</p>
|
||||
<p style="font-size: 0.6rem;" class="text-gray-400">1M beta</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-purple-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Max Output</p>
|
||||
<p class="text-sm font-black text-purple-700">128K</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-purple-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Price</p>
|
||||
<p class="text-sm font-black text-purple-700">$5/$25</p>
|
||||
<p style="font-size: 0.6rem;" class="text-gray-400">in/out MTok</p>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 벤치마크 --}}
|
||||
<div class="mb-4">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench Verified</span><span class="font-bold text-purple-700">80.8%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 80.8%; background: linear-gradient(90deg, #7c3aed, #a78bfa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">GPQA Diamond</span><span class="font-bold text-purple-700">91.3%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 91.3%; background: linear-gradient(90deg, #7c3aed, #a78bfa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">ARC-AGI 2</span><span class="font-bold text-purple-700">68.8%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 68.8%; background: linear-gradient(90deg, #7c3aed, #a78bfa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">OSWorld</span><span class="font-bold text-purple-700">72.7%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 72.7%; background: linear-gradient(90deg, #7c3aed, #a78bfa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">MRCR 256K (Long Context)</span><span class="font-bold text-purple-700">93.0%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 93%; background: linear-gradient(90deg, #7c3aed, #a78bfa);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 핵심 강점 --}}
|
||||
<div class="mb-3">
|
||||
<p class="text-xs font-bold text-gray-700 mb-2">핵심 강점</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="strength-tag" style="background: #f3e8ff; border-color: #c4b5fd; color: #6d28d9;">Agent Teams</span>
|
||||
<span class="strength-tag" style="background: #f3e8ff; border-color: #c4b5fd; color: #6d28d9;">Adaptive Thinking</span>
|
||||
<span class="strength-tag" style="background: #f3e8ff; border-color: #c4b5fd; color: #6d28d9;">Fast Mode 2.5x</span>
|
||||
<span class="strength-tag" style="background: #f3e8ff; border-color: #c4b5fd; color: #6d28d9;">최고 추론력</span>
|
||||
<span class="strength-tag" style="background: #f3e8ff; border-color: #c4b5fd; color: #6d28d9;">128K 출력</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-lg p-3 text-xs text-gray-600">
|
||||
<p class="font-bold text-purple-700 mb-1">적합한 작업</p>
|
||||
<p>대규모 아키텍처 설계, 복잡한 리팩토링, 멀티파일 코드 생성, 심층 분석 및 추론이 필요한 작업. SAM 프로젝트의 메인 모델.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Opus 4.5 --}}
|
||||
<div class="model-card tier-flagship">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #6d28d9, #8b5cf6);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs opacity-70">Flagship</p>
|
||||
<h3 class="text-lg font-black">Claude Opus 4.5</h3>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="px-2 py-0.5 bg-white bg-opacity-20 rounded text-xs font-bold">2025.11.24</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs opacity-80 mt-1">최초 SWE-bench 80% 돌파, 토큰 효율성 혁신</p>
|
||||
</div>
|
||||
<div class="model-card-body">
|
||||
<div class="grid grid-cols-3 gap-3 mb-4">
|
||||
<div class="text-center p-2 bg-violet-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Context</p>
|
||||
<p class="text-sm font-black text-violet-700">200K</p>
|
||||
<p style="font-size: 0.6rem;" class="text-gray-400">1M beta</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-violet-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Max Output</p>
|
||||
<p class="text-sm font-black text-violet-700">128K</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-violet-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Price</p>
|
||||
<p class="text-sm font-black text-violet-700">$15/$75</p>
|
||||
<p style="font-size: 0.6rem;" class="text-gray-400">in/out MTok</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench Verified</span><span class="font-bold text-violet-700">80.9%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 80.9%; background: linear-gradient(90deg, #6d28d9, #a78bfa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">GPQA Diamond</span><span class="font-bold text-violet-700">87.0%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 87%; background: linear-gradient(90deg, #6d28d9, #a78bfa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">ARC-AGI 2</span><span class="font-bold text-violet-700">37.6%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 37.6%; background: linear-gradient(90deg, #6d28d9, #a78bfa);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<p class="text-xs font-bold text-gray-700 mb-2">핵심 강점</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="strength-tag" style="background: #ede9fe; border-color: #c4b5fd; color: #6d28d9;">Infinite Chats</span>
|
||||
<span class="strength-tag" style="background: #ede9fe; border-color: #c4b5fd; color: #6d28d9;">토큰 효율 76%↑</span>
|
||||
<span class="strength-tag" style="background: #ede9fe; border-color: #c4b5fd; color: #6d28d9;">최초 80% 돌파</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-violet-50 rounded-lg p-3 text-xs text-gray-600">
|
||||
<p class="font-bold text-violet-700 mb-1">역사적 의의</p>
|
||||
<p>SWE-bench에서 최초로 80%를 돌파한 모델. 같은 수준의 성능을 Sonnet 4.5 대비 76% 적은 출력 토큰으로 달성하는 효율성 혁신.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- === Balanced 모델 === --}}
|
||||
<h3 class="text-sm font-bold text-blue-700 mb-3 flex items-center gap-2">
|
||||
<span style="width: 10px; height: 10px; background: #2563eb; border-radius: 2px; display: inline-block;"></span>
|
||||
Balanced — 성능과 비용의 균형
|
||||
</h3>
|
||||
<div class="grid gap-5 mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));">
|
||||
|
||||
{{-- Sonnet 4.6 --}}
|
||||
<div class="model-card tier-balanced">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #1d4ed8, #3b82f6);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs opacity-70">Balanced</p>
|
||||
<h3 class="text-lg font-black">Claude Sonnet 4.6</h3>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="px-2 py-0.5 bg-white bg-opacity-20 rounded text-xs font-bold">2026.02.17</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs opacity-80 mt-1">claude-sonnet-4-6 — Opus급 코딩 성능을 1/3 가격에</p>
|
||||
</div>
|
||||
<div class="model-card-body">
|
||||
<div class="grid grid-cols-3 gap-3 mb-4">
|
||||
<div class="text-center p-2 bg-blue-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Context</p>
|
||||
<p class="text-sm font-black text-blue-700">200K</p>
|
||||
<p style="font-size: 0.6rem;" class="text-gray-400">1M beta</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-blue-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Max Output</p>
|
||||
<p class="text-sm font-black text-blue-700">64K</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-blue-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Price</p>
|
||||
<p class="text-sm font-black text-blue-700">$3/$15</p>
|
||||
<p style="font-size: 0.6rem;" class="text-gray-400">in/out MTok</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench Verified</span><span class="font-bold text-blue-700">79.6%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 79.6%; background: linear-gradient(90deg, #2563eb, #60a5fa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">GPQA Diamond</span><span class="font-bold text-blue-700">74.1%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 74.1%; background: linear-gradient(90deg, #2563eb, #60a5fa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">ARC-AGI 2</span><span class="font-bold text-blue-700">58.3%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 58.3%; background: linear-gradient(90deg, #2563eb, #60a5fa);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">OSWorld</span><span class="font-bold text-blue-700">72.5%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 72.5%; background: linear-gradient(90deg, #2563eb, #60a5fa);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<p class="text-xs font-bold text-gray-700 mb-2">핵심 강점</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="strength-tag" style="background: #dbeafe; border-color: #93c5fd; color: #1d4ed8;">1M Context (beta)</span>
|
||||
<span class="strength-tag" style="background: #dbeafe; border-color: #93c5fd; color: #1d4ed8;">가성비 최강</span>
|
||||
<span class="strength-tag" style="background: #dbeafe; border-color: #93c5fd; color: #1d4ed8;">Adaptive Thinking</span>
|
||||
<span class="strength-tag" style="background: #dbeafe; border-color: #93c5fd; color: #1d4ed8;">동적 웹 필터링</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-3 text-xs text-gray-600">
|
||||
<p class="font-bold text-blue-700 mb-1">적합한 작업</p>
|
||||
<p>일상적 코딩, 빠른 반복 작업, 비용 최적화. SWE-bench에서 Opus 4.6과 1.2%p 차이로 대부분의 코딩 작업에서 Opus급 성능 발휘.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Sonnet 4.5 --}}
|
||||
<div class="model-card tier-balanced">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-xs opacity-70">Balanced</p>
|
||||
<h3 class="text-lg font-black">Claude Sonnet 4.5</h3>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="px-2 py-0.5 bg-white bg-opacity-20 rounded text-xs font-bold">2025.09</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs opacity-80 mt-1">"세계 최고의 코딩 모델"로 불린 당시 최고 성능 Sonnet</p>
|
||||
</div>
|
||||
<div class="model-card-body">
|
||||
<div class="grid grid-cols-3 gap-3 mb-4">
|
||||
<div class="text-center p-2 bg-blue-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Context</p>
|
||||
<p class="text-sm font-black text-blue-700">200K</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-blue-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">SWE-bench</p>
|
||||
<p class="text-sm font-black text-blue-700">77.2%</p>
|
||||
</div>
|
||||
<div class="text-center p-2 bg-blue-50 rounded-lg">
|
||||
<p class="text-xs text-gray-500">Price</p>
|
||||
<p class="text-sm font-black text-blue-700">$3/$15</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench Verified</span><span class="font-bold text-blue-600">77.2%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 77.2%; background: linear-gradient(90deg, #3b82f6, #93c5fd);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">GPQA Diamond</span><span class="font-bold text-blue-600">83.4%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 83.4%; background: linear-gradient(90deg, #3b82f6, #93c5fd);"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">OSWorld</span><span class="font-bold text-blue-600">61.4%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 61.4%; background: linear-gradient(90deg, #3b82f6, #93c5fd);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-lg p-3 text-xs text-gray-600">
|
||||
<p class="font-bold text-blue-700 mb-1">역사적 의의</p>
|
||||
<p>출시 당시 SWE-bench 최고 점수 기록. 30시간 이상 집중 작업이 가능한 안정성으로 "세계 최고의 코딩 모델"이라는 평가를 받음.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- === 이전 세대 모델 === --}}
|
||||
<h3 class="text-sm font-bold text-emerald-700 mb-3 flex items-center gap-2">
|
||||
<span style="width: 10px; height: 10px; background: #059669; border-radius: 2px; display: inline-block;"></span>
|
||||
이전 세대 & 경량 모델
|
||||
</h3>
|
||||
<div class="grid gap-4 mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
|
||||
|
||||
{{-- Claude 4 Opus --}}
|
||||
<div class="model-card tier-fast">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #047857, #10b981); padding: 1rem 1.25rem;">
|
||||
<h3 class="text-base font-black">Claude 4 Opus</h3>
|
||||
<p class="text-xs opacity-80">2025.09.18 | $15/$75</p>
|
||||
</div>
|
||||
<div class="model-card-body" style="padding: 1rem 1.25rem;">
|
||||
<div class="mb-3">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench</span><span class="font-bold">72.5%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 72.5%; background: #10b981;"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">GPQA Diamond</span><span class="font-bold">79.6%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 79.6%; background: #10b981;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">200K context | High-compute 모드에서 SWE-bench 79.4%, AIME 90.0% 달성. 복잡한 아키텍처 설계에 강점.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Claude 4 Sonnet --}}
|
||||
<div class="model-card tier-fast">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #059669, #34d399); padding: 1rem 1.25rem;">
|
||||
<h3 class="text-base font-black">Claude 4 Sonnet</h3>
|
||||
<p class="text-xs opacity-80">2025.05.14 | $3/$15</p>
|
||||
</div>
|
||||
<div class="model-card-body" style="padding: 1rem 1.25rem;">
|
||||
<div class="mb-3">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench</span><span class="font-bold">72.7%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 72.7%; background: #34d399;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">200K context | Extended Thinking 본격 도입. 당시 Opus 4보다 SWE-bench에서 높은 점수를 기록한 가성비 모델.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Claude 3.7 Sonnet --}}
|
||||
<div class="model-card tier-fast">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #b45309, #d97706); padding: 1rem 1.25rem;">
|
||||
<h3 class="text-base font-black">Claude 3.7 Sonnet</h3>
|
||||
<p class="text-xs opacity-80">2025.02 | $3/$15</p>
|
||||
</div>
|
||||
<div class="model-card-body" style="padding: 1rem 1.25rem;">
|
||||
<div class="mb-3">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench</span><span class="font-bold">70.3%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 70.3%; background: #d97706;"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">GPQA (Extended)</span><span class="font-bold">84.8%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 84.8%; background: #d97706;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">200K context | Extended Thinking 최초 도입. 확장 모드에서 MATH 500 96.2% 달성. Claude Code의 기반이 된 모델.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Claude 3.5 Sonnet --}}
|
||||
<div class="model-card tier-light">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #64748b, #94a3b8); padding: 1rem 1.25rem;">
|
||||
<h3 class="text-base font-black">Claude 3.5 Sonnet</h3>
|
||||
<p class="text-xs opacity-80">2024.06 (Oct 업그레이드) | $3/$15</p>
|
||||
</div>
|
||||
<div class="model-card-body" style="padding: 1rem 1.25rem;">
|
||||
<div class="mb-3">
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">SWE-bench</span><span class="font-bold">62.3%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 62.3%; background: #94a3b8;"></div></div>
|
||||
</div>
|
||||
<div class="bench-bar-wrap">
|
||||
<div class="bench-label"><span class="text-gray-500">GPQA Diamond</span><span class="font-bold">59.4%</span></div>
|
||||
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 59.4%; background: #94a3b8;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">200K context | Claude Code 최초 탑재 모델. 당시 혁신적이었으나 현재 모델들과 비교하면 성능 차이가 뚜렷.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Haiku 4.5 --}}
|
||||
<div class="model-card tier-light">
|
||||
<div class="model-card-head" style="background: linear-gradient(135deg, #475569, #64748b); padding: 1rem 1.25rem;">
|
||||
<h3 class="text-base font-black">Claude Haiku 4.5</h3>
|
||||
<p class="text-xs opacity-80">2025.10 | $1/$5</p>
|
||||
</div>
|
||||
<div class="model-card-body" style="padding: 1rem 1.25rem;">
|
||||
<div class="mb-3">
|
||||
<p class="text-xs text-gray-600 mb-2">200K context | 초고속 경량 모델</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="strength-tag">서브에이전트 최적</span>
|
||||
<span class="strength-tag">파일 탐색</span>
|
||||
<span class="strength-tag">간단한 분석</span>
|
||||
<span class="strength-tag">최저 비용</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">Claude Code에서 서브에이전트(Explore, Test-runner 등)에 주로 사용. 빠른 응답 속도와 낮은 비용이 장점.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Opus 4.6 vs Sonnet 4.6 직접 비교 --}}
|
||||
<div style="background: linear-gradient(135deg, #faf5ff, #eff6ff); border: 1px solid #e0e7ff; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem;">
|
||||
<h3 class="font-bold text-sm text-indigo-800 mb-4">Opus 4.6 vs Sonnet 4.6 — 핵심 차이점</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs" style="border-collapse: separate; border-spacing: 0;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left p-2 font-bold text-gray-600">항목</th>
|
||||
<th class="text-center p-2 font-bold text-purple-700" style="background: rgba(124,58,237,0.08); border-radius: 8px 0 0 0;">Opus 4.6</th>
|
||||
<th class="text-center p-2 font-bold text-blue-700" style="background: rgba(37,99,235,0.08); border-radius: 0 8px 0 0;">Sonnet 4.6</th>
|
||||
<th class="text-center p-2 font-bold text-gray-600">차이</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="p-2 font-medium">SWE-bench</td>
|
||||
<td class="p-2 text-center font-bold text-purple-700">80.8%</td>
|
||||
<td class="p-2 text-center font-bold text-blue-700">79.6%</td>
|
||||
<td class="p-2 text-center text-gray-500">1.2%p</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="p-2 font-medium">GPQA Diamond</td>
|
||||
<td class="p-2 text-center font-bold text-purple-700">91.3%</td>
|
||||
<td class="p-2 text-center font-bold text-blue-700">74.1%</td>
|
||||
<td class="p-2 text-center font-bold text-red-500">17.2%p</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="p-2 font-medium">ARC-AGI 2</td>
|
||||
<td class="p-2 text-center font-bold text-purple-700">68.8%</td>
|
||||
<td class="p-2 text-center font-bold text-blue-700">58.3%</td>
|
||||
<td class="p-2 text-center text-orange-500">10.5%p</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="p-2 font-medium">OSWorld</td>
|
||||
<td class="p-2 text-center font-bold text-purple-700">72.7%</td>
|
||||
<td class="p-2 text-center font-bold text-blue-700">72.5%</td>
|
||||
<td class="p-2 text-center text-gray-500">0.2%p</td>
|
||||
</tr>
|
||||
<tr class="border-b border-gray-200">
|
||||
<td class="p-2 font-medium">Max Output</td>
|
||||
<td class="p-2 text-center">128K tokens</td>
|
||||
<td class="p-2 text-center">64K tokens</td>
|
||||
<td class="p-2 text-center text-gray-500">2x</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 font-medium">가격 (Input/Output)</td>
|
||||
<td class="p-2 text-center">$5 / $25</td>
|
||||
<td class="p-2 text-center">$3 / $15</td>
|
||||
<td class="p-2 text-center text-green-600">40~67% 절감</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-3 p-3 bg-white rounded-lg text-xs text-gray-600">
|
||||
<p><strong>결론:</strong> 코딩(SWE-bench)과 컴퓨터 사용(OSWorld)에서는 거의 동등한 성능. <strong class="text-red-600">추론(GPQA)</strong>에서 Opus 4.6이 압도적 우위(17%p 차이). 비용 대비 코딩 성능만 보면 Sonnet 4.6이 최적, 심층 추론이 필요하면 Opus 4.6 선택.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== 탭 3: 모델 진화 (기존 탭2 강화) ===== --}}
|
||||
<div class="cc-section" id="ccTab3">
|
||||
<h2 class="text-xl font-bold mb-2 text-gray-800">Claude 모델 세대별 진화</h2>
|
||||
<p class="text-sm text-gray-500 mb-6">Sonnet 3.5에서 Opus 4.6까지 — SWE-bench 49%에서 80.8%로, 1년 반 만에 65% 성능 향상.</p>
|
||||
|
||||
{{-- 세대별 비교 테이블 --}}
|
||||
<div class="overflow-x-auto mb-8">
|
||||
<table class="w-full text-sm bg-white rounded-xl overflow-hidden" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-collapse: separate; border-spacing: 0;">
|
||||
<table class="gen-table bg-white rounded-xl overflow-hidden" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||||
<thead>
|
||||
<tr style="background: linear-gradient(135deg, #1e293b, #334155);" class="text-white">
|
||||
<th class="text-left p-4 font-bold">모델</th>
|
||||
<th class="text-center p-4 font-bold">출시</th>
|
||||
<th class="text-center p-4 font-bold">특징</th>
|
||||
<th class="text-center p-4 font-bold">코딩 성능</th>
|
||||
<th class="text-center p-4 font-bold">가격</th>
|
||||
<tr>
|
||||
<th style="min-width: 140px;">모델</th>
|
||||
<th>출시일</th>
|
||||
<th>SWE-bench</th>
|
||||
<th>GPQA</th>
|
||||
<th>Context</th>
|
||||
<th>Output</th>
|
||||
<th style="min-width: 100px;">가격 (In/Out)</th>
|
||||
<th style="min-width: 180px;">핵심 혁신</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b">
|
||||
<td class="p-4"><span class="mono text-xs font-bold text-amber-600">Sonnet 3.5</span></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">2024.10</td>
|
||||
<td class="p-4 text-center text-xs text-gray-600">Claude Code 최초 탑재 모델</td>
|
||||
<td class="p-4 text-center"><div class="bg-amber-100 rounded-full px-3 py-1 text-xs font-bold text-amber-700 inline-block">기본</div></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">$3/$15</td>
|
||||
<tr>
|
||||
<td><span class="mono text-xs font-bold text-gray-500">Sonnet 3.5</span></td>
|
||||
<td class="text-xs text-gray-500">2024.06</td>
|
||||
<td><span class="score-badge bg-gray-100 text-gray-600">49.0%</span></td>
|
||||
<td><span class="score-badge bg-gray-100 text-gray-600">59.4%</span></td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">8K</td>
|
||||
<td class="text-xs">$3 / $15</td>
|
||||
<td class="text-xs text-gray-600">Claude Code 최초 모델</td>
|
||||
</tr>
|
||||
<tr class="border-b" style="background: #fefce8;">
|
||||
<td class="p-4"><span class="mono text-xs font-bold text-orange-600">Sonnet 3.7</span></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">2025.02</td>
|
||||
<td class="p-4 text-center text-xs text-gray-600">확장 사고(Extended Thinking) 도입</td>
|
||||
<td class="p-4 text-center"><div class="bg-orange-100 rounded-full px-3 py-1 text-xs font-bold text-orange-700 inline-block">향상</div></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">$3/$15</td>
|
||||
<tr>
|
||||
<td><span class="mono text-xs font-bold text-gray-500">Sonnet 3.5 v2</span></td>
|
||||
<td class="text-xs text-gray-500">2024.10</td>
|
||||
<td><span class="score-badge bg-amber-100 text-amber-700">62.3%</span></td>
|
||||
<td class="text-xs text-gray-400">-</td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">8K</td>
|
||||
<td class="text-xs">$3 / $15</td>
|
||||
<td class="text-xs text-gray-600">Computer Use 도입</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="p-4"><span class="mono text-xs font-bold text-red-600">Sonnet 4</span></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">2025.05</td>
|
||||
<td class="p-4 text-center text-xs text-gray-600">SWE-bench SOTA, 코딩 특화 대폭 강화</td>
|
||||
<td class="p-4 text-center"><div class="bg-red-100 rounded-full px-3 py-1 text-xs font-bold text-red-700 inline-block">최고 효율</div></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">$3/$15</td>
|
||||
<tr style="background: #fffbeb;">
|
||||
<td><span class="mono text-xs font-bold text-amber-600">Sonnet 3.7</span></td>
|
||||
<td class="text-xs text-gray-500">2025.02</td>
|
||||
<td><span class="score-badge bg-amber-100 text-amber-700">70.3%</span></td>
|
||||
<td><span class="score-badge bg-amber-100 text-amber-700">84.8%</span></td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">64K</td>
|
||||
<td class="text-xs">$3 / $15</td>
|
||||
<td class="text-xs text-amber-700 font-medium">Extended Thinking 최초 도입</td>
|
||||
</tr>
|
||||
<tr class="border-b" style="background: #f0fdf4;">
|
||||
<td class="p-4"><span class="mono text-xs font-bold text-blue-600">Opus 4</span></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">2025.09</td>
|
||||
<td class="p-4 text-center text-xs text-gray-600">최고 지능, 복잡한 아키텍처 설계</td>
|
||||
<td class="p-4 text-center"><div class="bg-blue-100 rounded-full px-3 py-1 text-xs font-bold text-blue-700 inline-block">최고 성능</div></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">$15/$75</td>
|
||||
<tr>
|
||||
<td><span class="mono text-xs font-bold text-red-600">Sonnet 4</span></td>
|
||||
<td class="text-xs text-gray-500">2025.05</td>
|
||||
<td><span class="score-badge bg-red-100 text-red-700">72.7%</span></td>
|
||||
<td class="text-xs text-gray-400">-</td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">64K</td>
|
||||
<td class="text-xs">$3 / $15</td>
|
||||
<td class="text-xs text-gray-600">코딩 특화 대폭 강화</td>
|
||||
</tr>
|
||||
<tr style="background: #ecfdf5;">
|
||||
<td class="p-4">
|
||||
<span class="mono text-xs font-bold text-emerald-600">Opus 4.6</span>
|
||||
<span class="ml-1 px-1.5 py-0.5 bg-emerald-500 text-white text-xs rounded font-bold" style="font-size: 0.6rem;">LATEST</span>
|
||||
<tr>
|
||||
<td><span class="mono text-xs font-bold text-green-700">Opus 4</span></td>
|
||||
<td class="text-xs text-gray-500">2025.09</td>
|
||||
<td><span class="score-badge bg-green-100 text-green-700">72.5%</span></td>
|
||||
<td><span class="score-badge bg-green-100 text-green-700">79.6%</span></td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">64K</td>
|
||||
<td class="text-xs">$15 / $75</td>
|
||||
<td class="text-xs text-gray-600">High-compute: SWE 79.4%</td>
|
||||
</tr>
|
||||
<tr style="background: #eff6ff;">
|
||||
<td><span class="mono text-xs font-bold text-blue-600">Sonnet 4.5</span></td>
|
||||
<td class="text-xs text-gray-500">2025.09</td>
|
||||
<td><span class="score-badge bg-blue-100 text-blue-700">77.2%</span></td>
|
||||
<td><span class="score-badge bg-blue-100 text-blue-700">83.4%</span></td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">64K</td>
|
||||
<td class="text-xs">$3 / $15</td>
|
||||
<td class="text-xs text-blue-700 font-medium">"세계 최고 코딩 모델"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="mono text-xs font-bold text-gray-500">Haiku 4.5</span></td>
|
||||
<td class="text-xs text-gray-500">2025.10</td>
|
||||
<td class="text-xs text-gray-400">-</td>
|
||||
<td class="text-xs text-gray-400">-</td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">8K</td>
|
||||
<td class="text-xs">$1 / $5</td>
|
||||
<td class="text-xs text-gray-600">초고속 경량, 서브에이전트용</td>
|
||||
</tr>
|
||||
<tr style="background: #f5f3ff;">
|
||||
<td><span class="mono text-xs font-bold text-violet-600">Opus 4.5</span></td>
|
||||
<td class="text-xs text-gray-500">2025.11</td>
|
||||
<td><span class="score-badge bg-violet-100 text-violet-700">80.9%</span></td>
|
||||
<td><span class="score-badge bg-violet-100 text-violet-700">87.0%</span></td>
|
||||
<td class="text-xs">200K</td>
|
||||
<td class="text-xs">128K</td>
|
||||
<td class="text-xs">$15 / $75</td>
|
||||
<td class="text-xs text-violet-700 font-medium">최초 SWE-bench 80% 돌파</td>
|
||||
</tr>
|
||||
<tr style="background: #faf5ff; border-left: 3px solid #7c3aed;">
|
||||
<td>
|
||||
<span class="mono text-xs font-bold text-purple-700">Opus 4.6</span>
|
||||
<span class="ml-1 px-1 py-0.5 bg-purple-600 text-white rounded" style="font-size: 0.55rem; font-weight: 800;">LATEST</span>
|
||||
</td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">2025.12</td>
|
||||
<td class="p-4 text-center text-xs text-gray-600">빠른 출력 + 최고 성능 결합, Fast Mode</td>
|
||||
<td class="p-4 text-center"><div class="bg-emerald-100 rounded-full px-3 py-1 text-xs font-bold text-emerald-700 inline-block">최고 성능 + 속도</div></td>
|
||||
<td class="p-4 text-center text-xs text-gray-500">$15/$75</td>
|
||||
<td class="text-xs text-gray-500">2026.02</td>
|
||||
<td><span class="score-badge bg-purple-100 text-purple-700">80.8%</span></td>
|
||||
<td><span class="score-badge bg-purple-100 text-purple-700">91.3%</span></td>
|
||||
<td class="text-xs">200K<br><span style="font-size: 0.6rem; color: #7c3aed;">1M beta</span></td>
|
||||
<td class="text-xs">128K</td>
|
||||
<td class="text-xs">$5 / $25</td>
|
||||
<td class="text-xs text-purple-700 font-medium">Agent Teams, GPQA 91.3%</td>
|
||||
</tr>
|
||||
<tr style="background: #eff6ff; border-left: 3px solid #2563eb;">
|
||||
<td>
|
||||
<span class="mono text-xs font-bold text-blue-700">Sonnet 4.6</span>
|
||||
<span class="ml-1 px-1 py-0.5 bg-blue-600 text-white rounded" style="font-size: 0.55rem; font-weight: 800;">LATEST</span>
|
||||
</td>
|
||||
<td class="text-xs text-gray-500">2026.02</td>
|
||||
<td><span class="score-badge bg-blue-100 text-blue-700">79.6%</span></td>
|
||||
<td><span class="score-badge bg-blue-100 text-blue-700">74.1%</span></td>
|
||||
<td class="text-xs">200K<br><span style="font-size: 0.6rem; color: #2563eb;">1M beta</span></td>
|
||||
<td class="text-xs">64K</td>
|
||||
<td class="text-xs">$3 / $15</td>
|
||||
<td class="text-xs text-blue-700 font-medium">동적 웹 필터링, 가성비</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="ai-card" style="border-left: 4px solid #6366f1; background: #f5f3ff;">
|
||||
<h3 class="font-bold text-sm text-indigo-700 mb-2">모델 선택 가이드</h3>
|
||||
{{-- SWE-bench 성장 그래프 (CSS 바 차트) --}}
|
||||
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
||||
<h3 class="font-bold text-sm text-gray-800 mb-4">SWE-bench Verified 성장 추이 (2024~2026)</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="mono text-xs text-gray-500 shrink-0" style="width: 90px;">3.5 Sonnet</span>
|
||||
<div class="flex-1 bench-bar" style="height: 24px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 49%; background: #94a3b8; height: 100%;"><span class="text-white text-xs font-bold">49.0%</span></div></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="mono text-xs text-gray-500 shrink-0" style="width: 90px;">3.5 v2</span>
|
||||
<div class="flex-1 bench-bar" style="height: 24px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 62.3%; background: #b45309; height: 100%;"><span class="text-white text-xs font-bold">62.3%</span></div></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="mono text-xs text-gray-500 shrink-0" style="width: 90px;">3.7 Sonnet</span>
|
||||
<div class="flex-1 bench-bar" style="height: 24px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 70.3%; background: #d97706; height: 100%;"><span class="text-white text-xs font-bold">70.3%</span></div></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="mono text-xs text-gray-500 shrink-0" style="width: 90px;">Sonnet 4</span>
|
||||
<div class="flex-1 bench-bar" style="height: 24px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 72.7%; background: #dc2626; height: 100%;"><span class="text-white text-xs font-bold">72.7%</span></div></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="mono text-xs text-gray-500 shrink-0" style="width: 90px;">Sonnet 4.5</span>
|
||||
<div class="flex-1 bench-bar" style="height: 24px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 77.2%; background: #2563eb; height: 100%;"><span class="text-white text-xs font-bold">77.2%</span></div></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="mono text-xs text-gray-500 shrink-0" style="width: 90px;">Sonnet 4.6</span>
|
||||
<div class="flex-1 bench-bar" style="height: 24px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 79.6%; background: #3b82f6; height: 100%;"><span class="text-white text-xs font-bold">79.6%</span></div></div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="mono text-xs font-bold text-purple-700 shrink-0" style="width: 90px;">Opus 4.6</span>
|
||||
<div class="flex-1 bench-bar" style="height: 28px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 80.8%; background: linear-gradient(90deg, #7c3aed, #a78bfa); height: 100%;"><span class="text-white text-xs font-bold">80.8%</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3">Sonnet 3.5(49%) → Opus 4.6(80.8%): 1년 8개월간 <strong class="text-gray-600">+31.8%p 성장</strong> (65% 향상)</p>
|
||||
</div>
|
||||
|
||||
{{-- 모델 선택 가이드 --}}
|
||||
<div style="border-left: 4px solid #6366f1; background: #f5f3ff; border-radius: 0.75rem; padding: 1.25rem;">
|
||||
<h3 class="font-bold text-sm text-indigo-700 mb-2">Claude Code 모델 선택 가이드</h3>
|
||||
<div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
||||
<div class="text-xs text-gray-600">
|
||||
<p class="font-bold text-indigo-600 mb-1">Opus 4.6 (기본 권장)</p>
|
||||
<p>복잡한 설계, 대규모 리팩토링, 아키텍처 결정이 필요한 작업</p>
|
||||
<p class="font-bold text-purple-600 mb-1">Opus 4.6 (메인 추천)</p>
|
||||
<p>복잡한 설계, 대규모 리팩토링, 심층 추론. GPQA 91.3%의 압도적 추론력. Fast Mode로 2.5x 빠른 출력 가능.</p>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">
|
||||
<p class="font-bold text-blue-600 mb-1">Sonnet 4.6 (빠른 작업)</p>
|
||||
<p>단순 수정, 반복 작업, 비용 최적화가 필요한 경우</p>
|
||||
<p>일상 코딩, 반복 작업, 비용 최적화. SWE-bench 79.6%로 Opus급 코딩을 1/3 가격에.</p>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">
|
||||
<p class="font-bold text-gray-600 mb-1">Haiku 4.5 (서브에이전트)</p>
|
||||
<p>탐색, 파일 검색, 간단한 분석 등 경량 작업</p>
|
||||
<p>파일 탐색, 간단한 분석. $1/$5의 초저비용으로 서브에이전트에 최적화.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== 탭 3: 생태계 ===== --}}
|
||||
<div class="cc-section" id="ccTab3">
|
||||
{{-- ===== 탭 4: 생태계 ===== --}}
|
||||
<div class="cc-section" id="ccTab4">
|
||||
<h2 class="text-xl font-bold mb-6 text-gray-800">Claude Code 생태계</h2>
|
||||
|
||||
<div class="grid gap-5 mb-8" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||||
@@ -413,7 +1018,7 @@
|
||||
<div class="evo-card-header" style="background: linear-gradient(135deg, #1e293b, #475569);">IDE 통합</div>
|
||||
<div class="p-5 space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl">⌨️</span>
|
||||
<span class="text-2xl">⌨</span>
|
||||
<div>
|
||||
<p class="text-sm font-bold">터미널 (네이티브)</p>
|
||||
<p class="text-xs text-gray-500">zsh, bash, PowerShell에서 직접 실행</p>
|
||||
@@ -447,7 +1052,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-2xl">🏗️</span>
|
||||
<span class="text-2xl">🏗</span>
|
||||
<div>
|
||||
<p class="text-sm font-bold">Headless Mode</p>
|
||||
<p class="text-xs text-gray-500">비대화형 자동화 (스크립트, 파이프라인)</p>
|
||||
@@ -492,7 +1097,7 @@
|
||||
</div>
|
||||
|
||||
{{-- SAM 팀 활용 현황 --}}
|
||||
<div class="ai-card" style="border: 2px solid #d8b4fe; background: linear-gradient(135deg, #faf5ff, #f5f3ff);">
|
||||
<div style="border: 2px solid #d8b4fe; background: linear-gradient(135deg, #faf5ff, #f5f3ff); border-radius: 1rem; padding: 1.5rem;">
|
||||
<h3 class="font-bold text-sm text-purple-700 mb-3">SAM 프로젝트 팀의 Claude Code 활용 현황</h3>
|
||||
<div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user