2025-12-30 21:34:17 +09:00
|
|
|
<!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>
|
2025-12-30 22:20:31 +09:00
|
|
|
<button class="nav-btn" data-tab="guide">실전 가이드</button>
|
2025-12-30 21:34:17 +09:00
|
|
|
<button class="nav-btn" data-tab="learning">퀴즈 & 학습</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<main id="main-content">
|
|
|
|
|
<!-- Briefing Tab -->
|
2025-12-30 22:20:31 +09:00
|
|
|
<!-- ... (existing content) ... -->
|
2025-12-30 21:54:13 +09:00
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<!-- Guide Tab -->
|
|
|
|
|
<div id="tab-guide" class="tab-content">
|
|
|
|
|
<header class="hero mini-hero">
|
|
|
|
|
<div class="container hero-content">
|
|
|
|
|
<div class="badge animate-fade-in">Implementation Guide</div>
|
|
|
|
|
<h1 class="animate-slide-up">QA 효율성 극대화를 위한<br><span class="gradient-text">TestSprite 도입 가이드</span>
|
|
|
|
|
</h1>
|
|
|
|
|
<p class="subtitle animate-fade-in-delay">AI 코드 생성 시대의 새로운 품질 보증 표준</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<section class="section">
|
2025-12-30 21:34:17 +09:00
|
|
|
<div class="container">
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="glass-card main-intro">
|
2025-12-30 21:34:17 +09:00
|
|
|
<div class="card-header">
|
2025-12-30 22:20:31 +09:00
|
|
|
<span class="section-tag">Prologue</span>
|
|
|
|
|
<h2>AI 코드 생성 시대의 과제와 기회</h2>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<p class="summary-text">
|
|
|
|
|
SAM 프로젝트의 개발 프로세스에 AI 코드 생성 도구가 깊숙이 자리 잡으면서 생산성은 향상되었으나, <strong>AI가 생성한 코드의 약 58%가 제대로 작동하지
|
|
|
|
|
않는다는 사실</strong>은 새로운 도전 과제를 제시합니다.
|
|
|
|
|
</p>
|
|
|
|
|
<p class="text-muted mt-1">
|
|
|
|
|
수동 검증의 병목 현상은 출시 지연과 직결됩니다. 본 가이드는 'TestSprite' 도입을 통해 이 문제를 해결하는 전략을 제시합니다.
|
2025-12-30 21:34:17 +09:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<section class="section alt-bg">
|
2025-12-30 21:34:17 +09:00
|
|
|
<div class="container">
|
|
|
|
|
<div class="section-header">
|
2025-12-30 22:20:31 +09:00
|
|
|
<span class="section-tag">I. Solution Analysis</span>
|
|
|
|
|
<h2 class="section-title">'AI 감리 전문가' TestSprite</h2>
|
|
|
|
|
<p>단순한 테스트 도구를 넘어 '버그 없는 배포'를 가능하게 하는 핵심 가치</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="guide-feature-grid">
|
|
|
|
|
<div class="glass-card feature-item">
|
|
|
|
|
<div class="feature-icon">🛡️</div>
|
|
|
|
|
<h3>불안정성 극복</h3>
|
|
|
|
|
<p>생성 코드의 잠재적 버그를 식별하는 첫 번째 방어선 역할을 수행하여 초기 신뢰성을 확보합니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass-card feature-item">
|
|
|
|
|
<div class="feature-icon">📹</div>
|
|
|
|
|
<h3>자동 검증 및 녹화</h3>
|
|
|
|
|
<p>프론트엔드 요소를 사용자 관점에서 자동 검증하며, 모든 과정은 스크린 녹화로 기록됩니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass-card feature-item">
|
|
|
|
|
<div class="feature-icon">🛠️</div>
|
|
|
|
|
<h3>자동 결함 수정</h3>
|
|
|
|
|
<p>문제를 보고하는 데 그치지 않고, 직접적인 수정을 제안하여 디버깅 시간을 최소화합니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass-card feature-item">
|
|
|
|
|
<div class="feature-icon">📋</div>
|
|
|
|
|
<h3>사양 일치성 보장</h3>
|
|
|
|
|
<p>제품 사양 문서(PSD)를 기반으로 기능적 요구사항 충족 여부를 엄격하게 대조합니다.</p>
|
|
|
|
|
</div>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="metaphor-box glass-card mt-4">
|
|
|
|
|
<div class="metaphor-icon">👷</div>
|
|
|
|
|
<h3>전문가 비유</h3>
|
|
|
|
|
<p>"<strong>초보 건축가(코드 생성 AI)</strong>가 지은 건물을 점검하여 부실 부분을 찾아내고, 직접 망치를 들어 보수하는 <strong>꼼꼼한 감리
|
|
|
|
|
전문가</strong>와 같습니다."</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<section class="section">
|
2025-12-30 21:54:13 +09:00
|
|
|
<div class="container">
|
|
|
|
|
<div class="section-header">
|
2025-12-30 22:20:31 +09:00
|
|
|
<span class="section-tag">II. Execution Guide</span>
|
|
|
|
|
<h2 class="section-titleCursor & TestSprite MCP 연동</h2>
|
|
|
|
|
<p>기술적 연동 과정을 누구나 쉽게 따라 할 수 있는 3단계 프로세스</p>
|
2025-12-30 21:54:13 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
|
|
|
|
|
<div class=" setup-timeline">
|
|
|
|
|
<div class="timeline-item glass-card">
|
|
|
|
|
<div class="timeline-num">01</div>
|
|
|
|
|
<div class="timeline-content">
|
|
|
|
|
<h3>API 키 생성</h3>
|
|
|
|
|
<p>TestSprite 대시보드 > MCP test > Create a Key 단계를 통해 고유 인증 키를 발급받고 복사합니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeline-item glass-card">
|
|
|
|
|
<div class="timeline-num">02</div>
|
|
|
|
|
<div class="timeline-content">
|
|
|
|
|
<h3>Cursor MCP 서버 설치</h3>
|
|
|
|
|
<p>'Add to Cursor' 버튼을 클릭하여 에디터 실행 후, 복사한 API 키를 입력하여 서버를 설치합니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeline-item glass-card">
|
|
|
|
|
<div class="timeline-num">03</div>
|
|
|
|
|
<div class="timeline-content">
|
|
|
|
|
<h3>테스트 사전 준비</h3>
|
|
|
|
|
<p>정확한 검증을 위해 프로젝트 설계도 역할을 하는 제품 사양서(PSD)를 Cursor에 업로드합니다.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="metaphor-box glass-card mt-4 variant-2">
|
|
|
|
|
<div class="metaphor-icon">🔌</div>
|
|
|
|
|
<p>"전문 검측 장비(TestSprite)를 스마트 공장(Cursor)에 연결하기 위해 전용 통신 케이블(MCP)을 꽂고 고유 번호를 입력하는 것과 같습니다."</p>
|
2025-12-30 21:54:13 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<section class="section alt-bg">
|
2025-12-30 21:34:17 +09:00
|
|
|
<div class="container">
|
|
|
|
|
<div class="section-header">
|
2025-12-30 22:20:31 +09:00
|
|
|
<span class="section-tag">III. Workflow</span>
|
|
|
|
|
<h2 class="section-title">QA 자동화 워크플로우</h2>
|
|
|
|
|
<p>반복적인 디버깅에서 전략적 검수자로의 역할 전환</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="workflow-steps-vertical">
|
|
|
|
|
<div class="wf-step-item glass-card">
|
|
|
|
|
<div class="wf-header">
|
|
|
|
|
<span class="wf-num">Step 1</span>
|
|
|
|
|
<h3>테스트 시작</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<p>Cursor 채팅창에 <em>"conduct a front-end testing..."</em> 프롬프트를 입력하고 PSD 파일을 제공합니다.</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="wf-step-item glass-card">
|
|
|
|
|
<div class="wf-header">
|
|
|
|
|
<span class="wf-num">Step 2</span>
|
|
|
|
|
<h3>결과 분석</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<p>대시보드에서 통과/실패 현황을 파악하고, 스크린 녹화 영상을 통해 오류 지점을 직관적으로 확인합니다.</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="wf-step-item glass-card">
|
|
|
|
|
<div class="wf-header">
|
|
|
|
|
<span class="wf-num">Step 3</span>
|
|
|
|
|
<h3>자동 수정 지시</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<p>Cursor에서 <em>"please fix all of the issues..."</em> 명령을 내려 발견된 모든 버그의 수정을 요청합니다.</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="wf-step-item glass-card">
|
|
|
|
|
<div class="wf-header">
|
|
|
|
|
<span class="wf-num">Step 4</span>
|
|
|
|
|
<h3>수정 내역 최종 승인</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<p>AI가 정리한 이슈 목록과 자동 생성된 코드 변경 사항을 검토하고 최종 승인합니다.</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="section">
|
|
|
|
|
<div class="container text-center">
|
|
|
|
|
<div class="conclusion-card glass-card animate-slide-up">
|
|
|
|
|
<span class="section-tag">Conclusion</span>
|
|
|
|
|
<h2 class="gradient-text">버그 없는 배포를 향한 결단</h2>
|
|
|
|
|
<p class="mt-2">TestSprite의 즉각적인 도입은 SAM 프로젝트의 기술적 우위를 확보하고,<br>우리의 핵심 목표인 "Bug-free code
|
|
|
|
|
deployment"를 달성하기 위한 필수적 전략입니다.</p>
|
|
|
|
|
<div class="conclusion-stats mt-3">
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<strong>🚀 Speed</strong>
|
|
|
|
|
<span>QA 시간 획기적 단축</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<strong>💎 Quality</strong>
|
|
|
|
|
<span>코드 신뢰성 극대화</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<strong>🧘 Experience</strong>
|
|
|
|
|
<span>핵심 로직 집중 지원</span>
|
|
|
|
|
</div>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2025-12-30 22:20:31 +09:00
|
|
|
</div>
|
2025-12-30 21:34:17 +09:00
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<!-- Learning Tab (Quiz & Glossary) -->
|
|
|
|
|
<header class="hero">
|
|
|
|
|
<div class="container hero-content">
|
|
|
|
|
<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 class="hero-video-container animate-slide-up">
|
|
|
|
|
<div class="video-wrapper glass-card">
|
|
|
|
|
<iframe
|
|
|
|
|
src="https://player.vimeo.com/video/1149934634?autoplay=1&loop=1&byline=0&title=0&muted=1"
|
|
|
|
|
frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
2025-12-30 21:34:17 +09:00
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<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>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="summary-item">
|
|
|
|
|
<div class="icon">🤝</div>
|
|
|
|
|
<h3>역할 최적화</h3>
|
|
|
|
|
<p>Antigravity(실행)와 Claude Code(감리)의 조화로운 역할 분담</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<div class="summary-item">
|
|
|
|
|
<div class="icon">💰</div>
|
|
|
|
|
<h3>비용 절감</h3>
|
|
|
|
|
<p>검증 단계에만 고성능 모델을 투입하여 전체 토큰 사용량 약 66% 절감</p>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
</div>
|
|
|
|
|
</section>
|
2025-12-30 21:34:17 +09:00
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<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="visual-proof" class="section">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
<span class="section-tag">Visual Evidence</span>
|
|
|
|
|
<h2 class="section-title">검증 및 테스트의 실제</h2>
|
|
|
|
|
<p>TestSprite MCP를 통한 자동화 테스트 결과 및 분석 화면</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass-card visual-card animate-slide-up">
|
|
|
|
|
<div class="image-container">
|
|
|
|
|
<img src="img/testprite1.png" alt="TestSprite Core Analysis" class="feature-image">
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<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>
|
2025-12-30 21:34:17 +09:00
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<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>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
<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>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
</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>
|
2025-12-30 21:34:17 +09:00
|
|
|
|
2025-12-30 22:20:31 +09:00
|
|
|
<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>
|
2025-12-30 21:34:17 +09:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-30 22:20:31 +09:00
|
|
|
|
|
|
|
|
<div class="testimonial glass-card">
|
|
|
|
|
<blockquote>
|
|
|
|
|
"Claude Max 200달러 요금제를 쓰다가 이 전략을 적용하고 나서 100달러 요금제로 낮췄습니다. 이제는 토큰 걱정 없이 편하게 작업하고 있습니다."
|
|
|
|
|
</blockquote>
|
|
|
|
|
<cite>— 실제 사례 사용자</cite>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2025-12-30 21:34:17 +09:00
|
|
|
</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>
|
