feat: [claude-code] 발전과정 페이지 추가 (타임라인/핵심혁신/모델진화/생태계)
This commit is contained in:
김보곤
23
app/Http/Controllers/ClaudeCode/HistoryController.php
Normal file
23
app/Http/Controllers/ClaudeCode/HistoryController.php
Normal file
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\ClaudeCode;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Http\Response;
|
||||
use Illuminate\View\View;
|
||||
|
||||
/**
|
||||
* Claude Code > 발전과정 컨트롤러
|
||||
*/
|
||||
class HistoryController extends Controller
|
||||
{
|
||||
public function index(Request $request): View|Response
|
||||
{
|
||||
if ($request->header('HX-Request')) {
|
||||
return response('', 200)->header('HX-Redirect', route('claude-code.history.index'));
|
||||
}
|
||||
|
||||
return view('claude-code.history.index');
|
||||
}
|
||||
}
|
||||
533
resources/views/claude-code/history/index.blade.php
Normal file
533
resources/views/claude-code/history/index.blade.php
Normal file
@@ -0,0 +1,533 @@
|
||||
@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; }
|
||||
|
||||
/* 애니메이션 */
|
||||
@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; }
|
||||
</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">18개월</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>
|
||||
</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>
|
||||
</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 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>
|
||||
</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.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>
|
||||
<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</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>
|
||||
<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">확장 사고(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);">생태계</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(pre/post 실행 스크립트), 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~10 ===== --}}
|
||||
<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>
|
||||
</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>
|
||||
<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">서브에이전트</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>
|
||||
</div>
|
||||
|
||||
{{-- ===== 2025.12~2026 ===== --}}
|
||||
<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>
|
||||
<div class="v-card" style="margin-left: 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="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>
|
||||
<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">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>
|
||||
</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 자동 적용, 위험 명령 차단, 커밋 메시지 검증 등을 자동화. Co-Authored-By 서명 자동 제거 같은 팀 규칙도 Hook으로 강제.</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: 모델 진화 ===== --}}
|
||||
<div class="cc-section" id="ccTab2">
|
||||
<h2 class="text-xl font-bold mb-6 text-gray-800">Claude 모델 진화 계보</h2>
|
||||
|
||||
<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;">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">
|
||||
<p class="font-bold text-blue-600 mb-1">Sonnet 4.6 (빠른 작업)</p>
|
||||
<p>단순 수정, 반복 작업, 비용 최적화가 필요한 경우</p>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">
|
||||
<p class="font-bold text-gray-600 mb-1">Haiku 4.5 (서브에이전트)</p>
|
||||
<p>탐색, 파일 검색, 간단한 분석 등 경량 작업</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ===== 탭 3: 생태계 ===== --}}
|
||||
<div class="cc-section" id="ccTab3">
|
||||
<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 class="ai-card" style="border: 2px solid #d8b4fe; background: linear-gradient(135deg, #faf5ff, #f5f3ff);">
|
||||
<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
|
||||
@@ -20,6 +20,7 @@
|
||||
use App\Http\Controllers\Help\AttendanceGuideController;
|
||||
use App\Http\Controllers\Help\BarobillGuideController;
|
||||
use App\Http\Controllers\ClaudeCode\CoworkController as ClaudeCodeCoworkController;
|
||||
use App\Http\Controllers\ClaudeCode\HistoryController as ClaudeCodeHistoryController;
|
||||
use App\Http\Controllers\ClaudeCode\NewsController as ClaudeCodeNewsController;
|
||||
use App\Http\Controllers\ClaudeCode\PricingController as ClaudeCodePricingController;
|
||||
use App\Http\Controllers\ClaudeCode\UsagePlanController as ClaudeCodeUsagePlanController;
|
||||
@@ -788,6 +789,8 @@
|
||||
|--------------------------------------------------------------------------
|
||||
*/
|
||||
Route::prefix('claude-code')->name('claude-code.')->group(function () {
|
||||
Route::get('/history', [ClaudeCodeHistoryController::class, 'index'])->name('history.index');
|
||||
|
||||
Route::prefix('news')->name('news.')->group(function () {
|
||||
Route::get('/', [ClaudeCodeNewsController::class, 'index'])->name('index');
|
||||
Route::post('/refresh', [ClaudeCodeNewsController::class, 'refreshCache'])->name('refresh-cache');
|
||||
|
||||
Reference in New Issue
Block a user