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

180
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,7 +30,184 @@
<main id="main-content">
<!-- Briefing Tab -->
<div id="tab-briefing" class="tab-content active">
<!-- ... (existing content) ... -->
<!-- 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 class="section">
<div class="container">
<div class="glass-card main-intro">
<div class="card-header">
<span class="section-tag">Prologue</span>
<h2>AI 코드 생성 시대의 과제와 기회</h2>
</div>
<p class="summary-text">
SAM 프로젝트의 개발 프로세스에 AI 코드 생성 도구가 깊숙이 자리 잡으면서 생산성은 향상되었으나, <strong>AI가 생성한 코드의 약 58%가 제대로 작동하지
않는다는 사실</strong>은 새로운 도전 과제를 제시합니다.
</p>
<p class="text-muted mt-1">
수동 검증의 병목 현상은 출시 지연과 직결됩니다. 본 가이드는 'TestSprite' 도입을 통해 이 문제를 해결하는 전략을 제시합니다.
</p>
</div>
</div>
</section>
<section class="section alt-bg">
<div class="container">
<div class="section-header">
<span class="section-tag">I. Solution Analysis</span>
<h2 class="section-title">'AI 감리 전문가' TestSprite</h2>
<p>단순한 테스트 도구를 넘어 '버그 없는 배포'를 가능하게 하는 핵심 가치</p>
</div>
<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 mt-4">
<div class="metaphor-icon">👷</div>
<h3>전문가 비유</h3>
<p>"<strong>초보 건축가(코드 생성 AI)</strong>가 지은 건물을 점검하여 부실 부분을 찾아내고, 직접 망치를 들어 보수하는 <strong>꼼꼼한 감리
전문가</strong>와 같습니다."</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-header">
<span class="section-tag">II. Execution Guide</span>
<h2 class="section-titleCursor & TestSprite MCP 연동</h2>
<p>기술적 연동 과정을 누구나 쉽게 따라 할 수 있는 3단계 프로세스</p>
</div>
<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>
</div>
</div>
</section>
<section class="section alt-bg">
<div class="container">
<div class="section-header">
<span class="section-tag">III. Workflow</span>
<h2 class="section-title">QA 자동화 워크플로우</h2>
<p>반복적인 디버깅에서 전략적 검수자로의 역할 전환</p>
</div>
<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="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>
</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>

142
helper/style.css
View File

@@ -654,3 +654,145 @@ h4,
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;
}
}