301 lines
16 KiB
HTML
301 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SAM Project - AI 교차 검증 전략 브리핑</title>
|
|
<meta name="description" content="AI 모델 간의 협업을 통해 코드 품질을 극대화하고 개발 비용을 최적화하는 교차 검증 전략">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Outfit:wght@400;600;800&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="stars-container"></div>
|
|
|
|
<nav class="top-nav">
|
|
<div class="container nav-container">
|
|
<div class="logo">SAM Project</div>
|
|
<div class="nav-links">
|
|
<button class="nav-btn active" data-tab="briefing">전략 브리핑</button>
|
|
<button class="nav-btn" data-tab="learning">퀴즈 & 학습</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main id="main-content">
|
|
<!-- Briefing Tab -->
|
|
<div id="tab-briefing" class="tab-content active">
|
|
<header class="hero">
|
|
<div class="container">
|
|
<div class="badge animate-fade-in">Strategic Briefing</div>
|
|
<h1 class="animate-slide-up">AI 협업 기반<br><span class="gradient-text">코드 교차 검증 전략</span></h1>
|
|
<p class="subtitle animate-fade-in-delay">Maximize Quality | Optimize Cost | 5-Step Workflow</p>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="summary" class="section">
|
|
<div class="container">
|
|
<div class="glass-card summary-card">
|
|
<div class="card-header">
|
|
<span class="section-tag">Executive Summary</span>
|
|
<h2>개요 및 핵심 가치</h2>
|
|
</div>
|
|
<p class="summary-text text-highlight">
|
|
본 문서는 AI 모델 간의 협업을 통해 코드 품질을 극대화하고 개발 비용을 최적화하는 <strong>'교차 검증 전략'</strong>을 종합적으로 분석합니다.
|
|
</p>
|
|
<div class="summary-grid">
|
|
<div class="summary-item">
|
|
<div class="icon">🚀</div>
|
|
<h3>5단계 사이클</h3>
|
|
<p>계획 → 검증 → 구현 → 검증 → 테스트로 이어지는 완벽한 품질 관리 루프</p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<div class="icon">🤝</div>
|
|
<h3>역할 최적화</h3>
|
|
<p>Antigravity(실행)와 Claude Code(감리)의 조화로운 역할 분담</p>
|
|
</div>
|
|
<div class="summary-item">
|
|
<div class="icon">💰</div>
|
|
<h3>비용 절감</h3>
|
|
<p>검증 단계에만 고성능 모델을 투입하여 전체 토큰 사용량 약 66% 절감</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="strategy-overview" class="section alt-bg">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-tag">I. Strategy Overview</span>
|
|
<h2 class="section-title">AI 교차 검증의 핵심 개념</h2>
|
|
<p>고성능 모델의 초기 테스트 통과율(약 42%) 한계를 극복하기 위한 방법론</p>
|
|
</div>
|
|
|
|
<div class="table-container glass-card">
|
|
<table class="strategy-table">
|
|
<thead>
|
|
<tr>
|
|
<th>단계</th>
|
|
<th>주요 도구</th>
|
|
<th>핵심 역할</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1. 계획 (Plan)</td>
|
|
<td>Antigravity</td>
|
|
<td>문제 해결을 위한 초기 계획 수립 및 문서화</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2. 검증 (Verify)</td>
|
|
<td>Claude Code</td>
|
|
<td>계획의 논리적 오류 및 프로젝트 원칙 검토</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3. 실행 (Execute)</td>
|
|
<td>Antigravity</td>
|
|
<td>검증된 계획에 따른 고속 코드 구현</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4. 검증 (Verify)</td>
|
|
<td>Claude Code</td>
|
|
<td>완성된 코드의 최종 검토 및 완성도 극대화</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5. 테스트 (Test)</td>
|
|
<td>TestSprite MCP</td>
|
|
<td>자동화 테스트 및 직관적인 스크린샷 피드백</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="metaphor-box glass-card animate-slide-up">
|
|
<div class="metaphor-icon">🏠</div>
|
|
<h3>전략적 비유</h3>
|
|
<p>"<strong>Antigravity</strong>라는 숙련된 시공사가 집을 짓기 전과 후에, <strong>Claude Code</strong>라는 꼼꼼한 설계사가
|
|
도면과 완공 상태를 철저히 감리하는 것과 같습니다."</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="workflow-detail" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-tag">II. Workflow Detail</span>
|
|
<h2 class="section-title">5단계 교차 검증 상세 프로세스</h2>
|
|
</div>
|
|
|
|
<div class="workflow-steps">
|
|
<div class="workflow-card glass-card">
|
|
<div class="step-badge">1단계</div>
|
|
<h3>계획 수립 및 문서화</h3>
|
|
<ul class="step-list">
|
|
<li>문제 분석 및 구조 설계 (Antigravity)</li>
|
|
<li>work-plan 폴더 내 마크다운(.md) 저장</li>
|
|
<li>검토를 위한 물리적 근거 마련</li>
|
|
</ul>
|
|
</div>
|
|
<div class="workflow-card glass-card">
|
|
<div class="step-badge">2단계</div>
|
|
<h3>1차 계획 검증</h3>
|
|
<ul class="step-list">
|
|
<li>코드 작성 원칙 기반 논리 검토 (Claude Code)</li>
|
|
<li>문서 하단에 보완 사항 추가 (덮어쓰기 금지)</li>
|
|
<li>변경 이력의 명확한 추적 가능성 확보</li>
|
|
</ul>
|
|
</div>
|
|
<div class="workflow-card glass-card">
|
|
<div class="step-badge">3단계</div>
|
|
<h3>코드 구현</h3>
|
|
<ul class="step-list">
|
|
<li>보완된 최종 지시에 따른 구현 (Antigravity)</li>
|
|
<li>잠재적 오류 제거로 인한 에러율 급감</li>
|
|
<li>정제된 워크플로우를 통한 생산성 향상</li>
|
|
</ul>
|
|
</div>
|
|
<div class="workflow-card glass-card">
|
|
<div class="step-badge">4단계</div>
|
|
<h3>2차 최종 결과 검토</h3>
|
|
<ul class="step-list">
|
|
<li>계획 반영 여부 최종 점검 (Claude Code)</li>
|
|
<li>전체 코드 완성도 및 코드 품질 확인</li>
|
|
<li>최종 릴리스 준위의 결과물 확보</li>
|
|
</ul>
|
|
</div>
|
|
<div class="workflow-card glass-card">
|
|
<div class="step-badge">5단계</div>
|
|
<h3>자동 테스트 및 피드백</h3>
|
|
<ul class="step-list">
|
|
<li>TestSprite MCP 기반 자동화 테스트</li>
|
|
<li>스크린샷 리포트를 통한 직관적 오류 파악</li>
|
|
<li>100%에 수렴하는 품질 완성 사이클</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tools-setup" class="section alt-bg">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-tag">III. Tool Roles & Setup</span>
|
|
<h2 class="section-title">핵심 도구별 역할 및 설정</h2>
|
|
</div>
|
|
|
|
<div class="tool-grid">
|
|
<div class="tool-card glass-card">
|
|
<div class="tool-header">
|
|
<div class="tool-logo">A</div>
|
|
<h3>Antigravity</h3>
|
|
</div>
|
|
<p class="tool-role">실무 실행자 (Doer)</p>
|
|
<p>토큰 소모가 많은 초기 계획과 코드 구현 전담. VS Code 내 'Claude Code for VS Code'와 병행 설치 권장.</p>
|
|
</div>
|
|
<div class="tool-card glass-card">
|
|
<div class="tool-header">
|
|
<div class="tool-logo">C</div>
|
|
<h3>Claude Code</h3>
|
|
</div>
|
|
<p class="tool-role">설계 및 감리자 (Reviewer)</p>
|
|
<p>고비용 모델의 효율적 사용을 위해 검증에 집중. 메모리/에이전트/훅 설정에 프로젝트 규칙 정의 필수.</p>
|
|
</div>
|
|
<div class="tool-card glass-card full-width">
|
|
<div class="tool-header">
|
|
<div class="tool-logo">T</div>
|
|
<h3>TestSprite MCP</h3>
|
|
</div>
|
|
<div class="tool-detail-grid">
|
|
<div class="tool-desc">
|
|
<p class="tool-role">최종 품질 검사관 (Inspector)</p>
|
|
<p>자동 테스트 및 스크린샷 리포트를 통해 인간이 놓치는 논리적 결함 발견.</p>
|
|
</div>
|
|
<div class="setup-steps">
|
|
<h4>설정 절차</h4>
|
|
<ul>
|
|
<li><strong>API 키:</strong> testsprite.com 발급 (유일 1회 노출)</li>
|
|
<li><strong>Windows:</strong> 전용 명령어를 통한 MCP 연결</li>
|
|
<li><strong>명세서:</strong> Claude Code를 통한 Product Spec 생성 및 제공</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="outcomes" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-tag">IV. Expected Effects</span>
|
|
<h2 class="section-title">기대 효과 및 실질적 이점</h2>
|
|
</div>
|
|
|
|
<div class="outcome-grid">
|
|
<div class="outcome-card glass-card">
|
|
<div class="outcome-icon">✨</div>
|
|
<h3>코드 품질 향상</h3>
|
|
<p>상호 보완적 모델 협업과 전문 테스트 도구를 통한 안정적인 결과물 생산</p>
|
|
</div>
|
|
<div class="outcome-card glass-card highlight">
|
|
<div class="outcome-icon">📉</div>
|
|
<h3>비용 및 토큰 절감</h3>
|
|
<p>고비용 모델을 검증에만 집중 배치하여 <strong>토큰 사용량 약 2/3(약 66%) 절감</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial glass-card">
|
|
<blockquote>
|
|
"Claude Max 200달러 요금제를 쓰다가 이 전략을 적용하고 나서 100달러 요금제로 낮췄습니다. 이제는 토큰 걱정 없이 편하게 작업하고 있습니다."
|
|
</blockquote>
|
|
<cite>— 실제 사례 사용자</cite>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Learning Tab (Quiz & Glossary) -->
|
|
<div id="tab-learning" class="tab-content">
|
|
<section id="quiz" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-tag">Assessment</span>
|
|
<h2 class="section-title">단답형 퀴즈</h2>
|
|
<p>전략의 핵심 개념을 점검해 보세요. 카드를 클릭하면 정답이 표시됩니다.</p>
|
|
</div>
|
|
<div class="quiz-grid" id="quiz-container">
|
|
<!-- Quiz items will be injected by JS -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="glossary" class="section alt-bg">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-tag">Dictionary</span>
|
|
<h2 class="section-title">핵심 용어 정리</h2>
|
|
</div>
|
|
<div class="glossary-grid" id="glossary-container">
|
|
<!-- Glossary items will be injected by JS -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2025 AI Engineering Helper. SAM Strategy Briefing.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |