SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testsprite 추가

Browse Source
This commit is contained in:
김보곤
2025-12-30 22:20:31 +09:00
parent 2b32e24f6c
commit 6677b222b6
2 changed files with 531 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

600
helper/index.html
View File

@@ -22,6 +22,7 @@
<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="guide">실전 가이드</button>
<button class="nav-btn" data-tab="learning">퀴즈 & 학습</button>
</div>
</div>
@@ -29,258 +30,435 @@
<main id="main-content">
<!-- Briefing Tab -->
<div id="tab-briefing" class="tab-content active">
<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>
<!-- ... (existing content) ... -->
<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>
</div>
</div>
<!-- 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>
</div>
</header>
<section id="summary" class="section">
<section class="section">
<div class="container">
<div class="glass-card summary-card">
<div class="glass-card main-intro">
<div class="card-header">
<span class="section-tag">Executive Summary</span>
<h2>개요 및 핵심 가치</h2>
<span class="section-tag">Prologue</span>
<h2>AI 코드 생성 시대의 과제와 기회</h2>
</div>
<p class="summary-text text-highlight">
본 문서는 AI 모델 간의 협업을 통해 코드 품질을 극대화하고 개발 비용을 최적화하는 <strong>'교차 검증 전략'</strong>을 종합적으로 분석합니다.
<p class="summary-text">
SAM 프로젝트의 개발 프로세스에 AI 코드 생성 도구가 깊숙이 자리 잡으면서 생산성은 향상되었으나, <strong>AI가 생성한 코드의 약 58%가 제대로 작동하지
않는다는 사실</strong>은 새로운 도전 과제를 제시합니다.
</p>
<p class="text-muted mt-1">
수동 검증의 병목 현상은 출시 지연과 직결됩니다. 본 가이드는 'TestSprite' 도입을 통해 이 문제를 해결하는 전략을 제시합니다.
</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">
<section 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>
<span class="section-tag">I. Solution Analysis</span>
<h2 class="section-title">'AI 감리 전문가' TestSprite</h2>
<p>단순한 테스트 도구를 넘어 '버그 없는 배포'를 가능하게 하는 핵심 가치</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 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>
</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 class="metaphor-box glass-card mt-4">
<div class="metaphor-icon">👷</div>
<h3>전문가 비유</h3>
<p>"<strong>초보 건축가(코드 생성 AI)</strong>가 지은 건물을 점검하여 부실 부분을 찾아내고, 직접 망치를 들어 보수하는 <strong>꼼꼼한 감리
전문가</strong>와 같습니다."</p>
</div>
</div>
</section>
<section id="visual-proof" class="section">
<section 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>
<span class="section-tag">II. Execution Guide</span>
<h2 class="section-titleCursor & TestSprite MCP 연동</h2>
<p>기술적 연동 과정을 누구나 쉽게 따라 할 수 있는 3단계 프로세스</p>
</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 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>
<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>
</div>
</div>
</section>
<section id="outcomes" class="section">
<section class="section alt-bg">
<div class="container">
<div class="section-header">
<span class="section-tag">IV. Expected Effects</span>
<h2 class="section-title">기대 효과 및 실질적 이점</h2>
<span class="section-tag">III. Workflow</span>
<h2 class="section-title">QA 자동화 워크플로우</h2>
<p>반복적인 디버깅에서 전략적 검수자로의 역할 전환</p>
</div>
<div class="outcome-grid">
<div class="outcome-card glass-card">
<div class="outcome-icon">✨</div>
<h3>코드 품질 향상</h3>
<p>상호 보완적 모델 협업과 전문 테스트 도구를 통한 안정적인 결과물 생산</p>
<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>
</div>
<div class="outcome-card glass-card highlight">
<div class="outcome-icon">📉</div>
<h3>비용 및 토큰 절감</h3>
<p>고비용 모델을 검증에만 집중 배치하여 <strong>토큰 사용량 약 2/3(약 66%) 절감</strong></p>
<div class="wf-step-item glass-card">
<div class="wf-header">
<span class="wf-num">Step 2</span>
<h3>결과 분석</h3>
</div>
<p>대시보드에서 통과/실패 현황을 파악하고, 스크린 녹화 영상을 통해 오류 지점을 직관적으로 확인합니다.</p>
</div>
<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>
</div>
<div class="wf-step-item glass-card">
<div class="wf-header">
<span class="wf-num">Step 4</span>
<h3>수정 내역 최종 승인</h3>
</div>
<p>AI가 정리한 이슈 목록과 자동 생성된 코드 변경 사항을 검토하고 최종 승인합니다.</p>
</div>
</div>
<div class="testimonial glass-card">
<blockquote>
"Claude Max 200달러 요금제를 쓰다가 이 전략을 적용하고 나서 100달러 요금제로 낮췄습니다. 이제는 토큰 걱정 없이 편하게 작업하고 있습니다."
</blockquote>
<cite>— 실제 사례 사용자</cite>
</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>
</div>
</div>
</div>
</section>
</div>
<!-- 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>
</div>
</div>
</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="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>
</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) -->

142
helper/style.css
View File

@@ -653,4 +653,146 @@ h4,
flex-direction: column;
gap: 1rem;
}
}
/* Guide Tab Specific Styles */
.mini-hero {
height: auto !important;
padding: 10rem 0 6rem !important;
}
.guide-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.feature-item {
text-align: center;
padding: 3rem 2rem !important;
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.setup-timeline {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.timeline-item {
display: flex;
align-items: center;
gap: 2rem;
padding: 2rem 3rem !important;
}
.timeline-num {
font-size: 3rem;
font-weight: 800;
color: var(--secondary);
opacity: 0.3;
}
.timeline-content h3 {
color: var(--white);
margin-bottom: 0.5rem;
}
.workflow-steps-vertical {
display: flex;
flex-direction: column;
gap: 1rem;
}
.wf-step-item {
padding: 1.5rem 2rem !important;
}
.wf-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 0.5rem;
}
.wf-num {
color: var(--primary);
font-weight: 800;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.conclusion-card {
padding: 4rem !important;
max-width: 900px;
margin: 4rem auto 0;
border: 1px solid var(--primary);
box-shadow: 0 0 40px var(--primary-glow);
}
.conclusion-stats {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-item strong {
font-size: 1.2rem;
color: var(--secondary);
margin-bottom: 0.5rem;
}
.stat-item span {
font-size: 0.9rem;
color: var(--text-muted);
}
.metaphor-box.variant-2 {
border-left: none;
border-right: 4px solid var(--secondary);
text-align: right;
}
.mt-1 {
margin-top: 1rem;
}
.mt-2 {
margin-top: 2rem;
}
.mt-3 {
margin-top: 3rem;
}
.mt-4 {
margin-top: 4rem;
}
.text-center {
text-align: center;
}
@media (max-width: 768px) {
.timeline-item {
flex-direction: column;
text-align: center;
}
.conclusion-stats {
gap: 1.5rem;
}
}