6958d18938
- Opus 4.1 (2025.08.05) 모델 추가 (SWE 74.5%, GPQA 80.9%) - Haiku 4.5 SWE-bench 73.3% 벤치마크 추가 - Opus 4.5 가격 수정 ($15/$75 → $5/$25) - Opus 4 GPQA 수정 (79.6% → 76.9%), 출시일 수정 (09 → 05) - Claude Code GA 날짜 정정 (2025.04 → 2025.05.22) - Claude Code $1B 런레이트 매출 달성 정보 추가 - SWE-bench 성장 바 차트에 Opus 4.1, Haiku 4.5 추가
1182 lines
85 KiB
PHP
1182 lines
85 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Claude Code 발전과정')
|
|
|
|
@push('styles')
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
.cc-body { font-family: 'Noto Sans KR', sans-serif; color: #0f172a; }
|
|
.mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
/* 히어로 */
|
|
.hero-gradient { background: linear-gradient(135deg, #1a0a2e 0%, #16213e 40%, #0a3d62 70%, #1b4332 100%); }
|
|
.hero-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(100px); opacity: 0.15; }
|
|
|
|
/* 버전 타임라인 */
|
|
.version-track { position: relative; }
|
|
.version-track::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: linear-gradient(to bottom, #d97706, #ea580c, #dc2626, #9333ea, #2563eb, #059669); transform: translateX(-50%); }
|
|
@media (max-width: 900px) {
|
|
.version-track::before { left: 1.5rem; }
|
|
.version-node { flex-direction: column !important; }
|
|
.version-node .v-card { margin-left: 3.5rem !important; margin-right: 0 !important; }
|
|
.version-node .v-dot-wrap { position: absolute; left: 0; }
|
|
}
|
|
|
|
.v-dot { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.7rem; color: white; position: relative; z-index: 2; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
|
|
.v-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #f1f5f9; transition: all 0.3s; flex: 1; }
|
|
.v-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
|
|
|
|
/* 기능 뱃지 */
|
|
.feat-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600; }
|
|
|
|
/* 스탯 카운터 */
|
|
.stat-ring { width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
|
|
/* 탭 */
|
|
.cc-tab { padding: 0.5rem 1.25rem; border-radius: 2rem; font-weight: 600; font-size: 0.8rem; transition: all 0.2s; border: 2px solid transparent; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); cursor: pointer; backdrop-filter: blur(4px); }
|
|
.cc-tab:hover { color: white; background: rgba(255,255,255,0.1); }
|
|
.cc-tab.active { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.3); }
|
|
.cc-section { display: none; }
|
|
.cc-section.active { display: block; }
|
|
|
|
/* 비교 카드 */
|
|
.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
|
|
|
|
@section('content')
|
|
<div class="cc-body">
|
|
|
|
{{-- ===== 히어로 섹션 ===== --}}
|
|
<div class="hero-gradient text-white px-6 py-10 rounded-b-3xl mb-8 relative overflow-hidden">
|
|
<div class="hero-glow" style="top: -50px; right: -50px; background: #6366f1;"></div>
|
|
<div class="hero-glow" style="bottom: -80px; left: 10%; background: #059669;"></div>
|
|
|
|
<div style="max-width: 1400px; margin: 0 auto; position: relative; z-index: 1;">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #d97706, #ea580c); border-radius: 12px; display: flex; align-items: center; justify-content: center;" class="pulse-glow">
|
|
<span style="font-size: 1.5rem;">⌘</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-amber-300 text-xs font-bold tracking-wider uppercase">Anthropic</p>
|
|
<h1 class="text-3xl font-black">Claude Code 발전과정</h1>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mb-6" style="max-width: 700px;">2025년 2월 터미널에서 시작된 AI 코딩 에이전트의 혁신적 여정. 프로토타입에서 엔터프라이즈 개발 플랫폼으로 성장한 Claude Code의 이야기.</p>
|
|
|
|
{{-- 핵심 수치 --}}
|
|
<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">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">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">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.6</span>
|
|
<span style="font-size: 0.6rem; opacity: 0.8;">최신 모델</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 탭 네비게이션 --}}
|
|
<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(4)">생태계</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="max-width: 1400px; margin: 0 auto;" class="px-4">
|
|
|
|
{{-- ===== 탭 0: 타임라인 ===== --}}
|
|
<div class="cc-section active" id="ccTab0">
|
|
|
|
<div class="version-track" style="padding: 2rem 0;">
|
|
|
|
{{-- ===== 2025.02 ===== --}}
|
|
<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 #d97706;">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="mono text-xs px-2 py-0.5 bg-amber-100 text-amber-800 rounded font-bold">v0.1</span>
|
|
<span class="text-xs text-gray-400">2025.02.24</span>
|
|
</div>
|
|
<h3 class="font-bold text-base mb-1">탄생 — Research Preview</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Anthropic 내부 해커톤에서 출발. 터미널에서 Claude와 대화하며 코드를 작성하는 실험적 도구로 시작. "개발자의 터미널에 AI를 심는다"는 비전.</p>
|
|
<div class="flex flex-wrap gap-1">
|
|
<span class="feat-badge bg-amber-50 text-amber-700 border border-amber-200">터미널 기반 대화</span>
|
|
<span class="feat-badge bg-amber-50 text-amber-700 border border-amber-200">파일 읽기/쓰기</span>
|
|
<span class="feat-badge bg-amber-50 text-amber-700 border border-amber-200">Bash 실행</span>
|
|
<span class="feat-badge bg-amber-50 text-amber-700 border border-amber-200">Sonnet 3.5</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, #d97706, #f59e0b);">탄생</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== 2025.04 ===== --}}
|
|
<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, #ea580c, #fb923c);">GA</div>
|
|
</div>
|
|
<div class="v-card" style="margin-left: calc(50% + 2rem); border-top: 3px solid #ea580c;">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="mono text-xs px-2 py-0.5 bg-orange-100 text-orange-800 rounded font-bold">v1.0</span>
|
|
<span class="text-xs text-gray-400">2025.05.22</span>
|
|
</div>
|
|
<h3 class="font-bold text-base mb-1">정식 출시 — General Availability</h3>
|
|
<p class="text-sm text-gray-600 mb-3">2025년 5월 22일, Claude 4 Sonnet/Opus와 동시 공개. VS Code/JetBrains IDE 통합, GitHub Actions 지원, SDK 공개. Max/Pro 구독 모델 도입.</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>
|
|
<span class="feat-badge bg-orange-50 text-orange-700 border border-orange-200">멀티파일 편집</span>
|
|
<span class="feat-badge bg-orange-50 text-orange-700 border border-orange-200">CLAUDE.md</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== 2025.05 ===== --}}
|
|
<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 #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.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 출시. 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 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>
|
|
</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, #dc2626, #f87171);">4S</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== 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);">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">
|
|
<span class="mono text-xs px-2 py-0.5 bg-purple-100 text-purple-800 rounded font-bold">v1.x</span>
|
|
<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, 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>
|
|
<span class="feat-badge bg-purple-50 text-purple-700 border border-purple-200">Custom Skills</span>
|
|
<span class="feat-badge bg-purple-50 text-purple-700 border border-purple-200">Custom Agents</span>
|
|
<span class="feat-badge bg-purple-50 text-purple-700 border border-purple-200">메모리 시스템</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== 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.08~09</span>
|
|
</div>
|
|
<h3 class="font-bold text-base mb-1">Opus 4.1 & Sonnet 4.5 — 에이전틱 도약</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Opus 4.1(8/5) — 에이전틱 태스크 특화 강화, SWE-bench 74.5%. Sonnet 4.5(9/29) — SWE-bench 77.2%로 "세계 최고의 코딩 모델" 등극. 서브에이전트, Plan Mode, Skills 시스템 도입.</p>
|
|
<div class="flex flex-wrap gap-1">
|
|
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">Opus 4.1 (SWE 74.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">서브에이전트 & Plan Mode</span>
|
|
<span class="feat-badge bg-blue-50 text-blue-700 border border-blue-200">Skills 시스템</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.5</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== 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" 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 #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로 컨텍스트 제한 해소. Claude Code $1B 런레이트 매출 달성.</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">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 & 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 4단계. Sonnet 4.6 (2/17) — 1M 컨텍스트 베타, Opus 성능의 99%를 1/5 가격에. Cowork(비개발자 GUI), Claude Code Security, Auto Memory 출시.</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 (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">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>
|
|
</div>
|
|
|
|
{{-- ===== 탭 1: 핵심 혁신 ===== --}}
|
|
<div class="cc-section" id="ccTab1">
|
|
<h2 class="text-xl font-bold mb-6 text-gray-800">Claude Code를 특별하게 만든 핵심 혁신</h2>
|
|
|
|
<div class="grid gap-5" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
|
|
<div class="evo-card">
|
|
<div class="evo-card-header" style="background: linear-gradient(135deg, #d97706, #f59e0b);">CLAUDE.md — 프로젝트 컨텍스트</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">CLAUDE.md</code> 파일로 코딩 규칙, 아키텍처, 금지사항을 정의. AI가 프로젝트 문화를 학습하고 일관된 코드를 작성.</p>
|
|
<div class="bg-gray-900 rounded-lg p-3 text-xs mono text-gray-300">
|
|
<span class="text-green-400"># CLAUDE.md</span><br>
|
|
<span class="text-yellow-300">## Git 커밋 규칙</span><br>
|
|
- feat: 새 기능 | fix: 버그 수정<br>
|
|
<span class="text-yellow-300">## DB 규칙</span><br>
|
|
- 마이그레이션은 API에서만 생성<br>
|
|
- MNG에서 migrate 실행 금지
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evo-card">
|
|
<div class="evo-card-header" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">MCP — 무한 확장 프로토콜</div>
|
|
<div class="p-5">
|
|
<p class="text-sm text-gray-600 mb-3">Model Context Protocol로 외부 도구(Slack, DB, API 등)를 표준화된 방식으로 연결. Claude Code가 단순 코딩 도구에서 <strong>통합 개발 허브</strong>로 진화한 핵심.</p>
|
|
<div class="flex flex-wrap gap-2 mt-2">
|
|
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">Slack 연동</span>
|
|
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">DB 직접 조회</span>
|
|
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">JIRA/Linear</span>
|
|
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">Figma</span>
|
|
<span class="feat-badge bg-violet-50 text-violet-700 border border-violet-200">커스텀 서버</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evo-card">
|
|
<div class="evo-card-header" style="background: linear-gradient(135deg, #059669, #34d399);">Skills & Agents — 재사용 가능한 전문성</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">SKILL.md</code>로 패키징. 슬래시 명령어(<code class="mono text-xs">/skill-name</code>)로 호출. 커뮤니티가 만든 수백 개의 스킬을 즉시 활용 가능.</p>
|
|
<div class="text-xs text-gray-500 space-y-1">
|
|
<p><strong>우리 팀 사용 예시:</strong></p>
|
|
<p class="mono">• /pptx-skill — PPT 자동 생성</p>
|
|
<p class="mono">• /sam-docs-writer — 문서 규칙 자동 적용</p>
|
|
<p class="mono">• /webapp-testing — Playwright UI 테스트</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<div class="bg-gray-50 rounded-lg p-3 text-xs text-gray-600">
|
|
<p class="font-bold mb-1">실행 흐름:</p>
|
|
<p>메인 에이전트 → 분석 에이전트 (탐색)</p>
|
|
<p style="padding-left: 5.5rem;">→ 구현 에이전트 (코딩)</p>
|
|
<p style="padding-left: 5.5rem;">→ 테스트 에이전트 (검증)</p>
|
|
<p>메인 에이전트 ← 결과 통합 ← 커밋</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<div class="text-xs text-gray-500">
|
|
<p><strong>저장하는 것:</strong> 검증된 패턴, 아키텍처 결정, 사용자 선호</p>
|
|
<p><strong>저장하지 않는 것:</strong> 임시 작업, 미검증 추측</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 자동 적용, 위험 명령 차단, 커밋 메시지 검증 등을 자동화. 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>
|
|
PreBash → 위험 명령 차단
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== 탭 2: 모델 비교 (NEW) ===== --}}
|
|
<div class="cc-section" id="ccTab2">
|
|
<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% 돌파, Claude Code $1B 매출 달성</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">$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-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 Opus 4.1 --}}
|
|
<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 Opus 4.1</h3>
|
|
<p class="text-xs opacity-80">2025.08.05 | $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">74.5%</span></div>
|
|
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 74.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">80.9%</span></div>
|
|
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 80.9%; background: #10b981;"></div></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500">200K context | Opus 4의 에이전틱 태스크 특화 업그레이드. 다중 파일 리팩토링, 심층 연구, 도구 호출 안정성 강화.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Claude 4 Opus --}}
|
|
<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 Opus</h3>
|
|
<p class="text-xs opacity-80">2025.05.22 | $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: #34d399;"></div></div>
|
|
</div>
|
|
<div class="bench-bar-wrap">
|
|
<div class="bench-label"><span class="text-gray-500">GPQA Diamond</span><span class="font-bold">76.9%</span></div>
|
|
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 76.9%; background: #34d399;"></div></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500">200K context | High-compute에서 SWE-bench 79.4%, AIME 90.0%. Extended Thinking 중 도구 사용 최초 지원.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Claude 4 Sonnet --}}
|
|
<div class="model-card tier-fast">
|
|
<div class="model-card-head" style="background: linear-gradient(135deg, #0d9488, #5eead4); padding: 1rem 1.25rem;">
|
|
<h3 class="text-base font-black">Claude 4 Sonnet</h3>
|
|
<p class="text-xs opacity-80">2025.05.22 | $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 (1M beta) | 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.15 | $1/$5</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">73.3%</span></div>
|
|
<div class="bench-bar"><div class="bench-fill anim-bar" style="width: 73.3%; background: #64748b;"></div></div>
|
|
</div>
|
|
<p class="text-xs text-gray-600 mb-2 mt-2">200K context | 64K output | Extended Thinking 지원</p>
|
|
<div class="flex flex-wrap gap-1">
|
|
<span class="strength-tag">서브에이전트 최적</span>
|
|
<span class="strength-tag">Sonnet 4.5급 성능</span>
|
|
<span class="strength-tag">4~5x 빠른 응답</span>
|
|
<span class="strength-tag">최저 비용 $1/$5</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500">SWE-bench 73.3% — Sonnet 4.5 대비 5%p 이내이면서 1/3 비용. Claude Code 서브에이전트(Explore 등)에 최적화.</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="gen-table bg-white rounded-xl overflow-hidden" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
|
|
<thead>
|
|
<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>
|
|
<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>
|
|
<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 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>
|
|
<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>
|
|
<td><span class="mono text-xs font-bold text-green-700">Opus 4</span></td>
|
|
<td class="text-xs text-gray-500">2025.05</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">76.9%</span></td>
|
|
<td class="text-xs">200K</td>
|
|
<td class="text-xs">32K</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: #f0fdf4;">
|
|
<td><span class="mono text-xs font-bold text-emerald-700">Opus 4.1</span></td>
|
|
<td class="text-xs text-gray-500">2025.08</td>
|
|
<td><span class="score-badge bg-emerald-100 text-emerald-700">74.5%</span></td>
|
|
<td><span class="score-badge bg-emerald-100 text-emerald-700">80.9%</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-emerald-700 font-medium">에이전틱 태스크 특화</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">$5 / $25</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="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>
|
|
|
|
{{-- 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;">Haiku 4.5</span>
|
|
<div class="flex-1 bench-bar" style="height: 20px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 73.3%; background: #64748b; height: 100%;"><span class="text-white text-xs font-bold">73.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;">Opus 4.1</span>
|
|
<div class="flex-1 bench-bar" style="height: 24px;"><div class="bench-fill anim-bar flex items-center px-2" style="width: 74.5%; background: #10b981; height: 100%;"><span class="text-white text-xs font-bold">74.5%</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-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>일상 코딩, 반복 작업, 비용 최적화. 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>파일 탐색, 간단한 분석. $1/$5의 초저비용으로 서브에이전트에 최적화.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== 탭 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));">
|
|
<div class="evo-card">
|
|
<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>
|
|
<div>
|
|
<p class="text-sm font-bold">터미널 (네이티브)</p>
|
|
<p class="text-xs text-gray-500">zsh, bash, PowerShell에서 직접 실행</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">💻</span>
|
|
<div>
|
|
<p class="text-sm font-bold">VS Code Extension</p>
|
|
<p class="text-xs text-gray-500">에디터 내 인라인 AI 코딩</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">🧠</span>
|
|
<div>
|
|
<p class="text-sm font-bold">JetBrains Plugin</p>
|
|
<p class="text-xs text-gray-500">IntelliJ, WebStorm 등 지원</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evo-card">
|
|
<div class="evo-card-header" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">CI/CD 연동</div>
|
|
<div class="p-5 space-y-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">🔄</span>
|
|
<div>
|
|
<p class="text-sm font-bold">GitHub Actions</p>
|
|
<p class="text-xs text-gray-500">PR 자동 리뷰, 이슈 해결, 코드 생성</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">🏗</span>
|
|
<div>
|
|
<p class="text-sm font-bold">Headless Mode</p>
|
|
<p class="text-xs text-gray-500">비대화형 자동화 (스크립트, 파이프라인)</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">📋</span>
|
|
<div>
|
|
<p class="text-sm font-bold">SDK (TypeScript/Python)</p>
|
|
<p class="text-xs text-gray-500">프로그래밍 방식으로 Claude Code 호출</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evo-card">
|
|
<div class="evo-card-header" style="background: linear-gradient(135deg, #059669, #34d399);">커뮤니티 생태계</div>
|
|
<div class="p-5 space-y-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">📦</span>
|
|
<div>
|
|
<p class="text-sm font-bold">커뮤니티 Skills</p>
|
|
<p class="text-xs text-gray-500">levnikolaevich, Trail of Bits 등 오픈소스 스킬</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">🤖</span>
|
|
<div>
|
|
<p class="text-sm font-bold">커스텀 Agents</p>
|
|
<p class="text-xs text-gray-500">code-reviewer, debugger, laravel-expert 등</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-2xl">🔌</span>
|
|
<div>
|
|
<p class="text-sm font-bold">MCP 서버 마켓</p>
|
|
<p class="text-xs text-gray-500">Slack, Notion, DB, Figma 등 수백 개 연동</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SAM 팀 활용 현황 --}}
|
|
<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>
|
|
<p class="text-xs font-bold text-purple-600 mb-1">사용 모델</p>
|
|
<p class="text-xs text-gray-600">Opus 4.6 (메인) + Haiku 4.5 (서브에이전트)</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-purple-600 mb-1">등록 Skills</p>
|
|
<p class="text-xs text-gray-600">40+ 스킬 (보안, 코드 품질, PPT, 문서 등)</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-purple-600 mb-1">등록 Agents</p>
|
|
<p class="text-xs text-gray-600">11개 (laravel-expert, debugger, git-manager 등)</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-purple-600 mb-1">자동화</p>
|
|
<p class="text-xs text-gray-600">커밋 → 자동 develop/main push (MNG)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function switchCcTab(index) {
|
|
document.querySelectorAll('.cc-tab').forEach((btn, i) => {
|
|
btn.classList.toggle('active', i === index);
|
|
});
|
|
document.querySelectorAll('.cc-section').forEach((section, i) => {
|
|
section.classList.toggle('active', i === index);
|
|
});
|
|
}
|
|
</script>
|
|
@endpush
|