From 6677b222b6893fdd87e1f17c531436f43cc2514b Mon Sep 17 00:00:00 2001 From: kimbokon Date: Tue, 30 Dec 2025 22:20:31 +0900 Subject: [PATCH] =?UTF-8?q?testsprite=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- helper/index.html | 600 ++++++++++++++++++++++++++++++---------------- helper/style.css | 142 +++++++++++ 2 files changed, 531 insertions(+), 211 deletions(-) diff --git a/helper/index.html b/helper/index.html index 3ab5e39..5dc8589 100644 --- a/helper/index.html +++ b/helper/index.html @@ -22,6 +22,7 @@
+
@@ -29,258 +30,435 @@
-
-
-
-
Strategic Briefing
-

AI 협업 기반
코드 교차 검증 전략

-

Maximize Quality | Optimize Cost | 5-Step Workflow

+ -
-
- -
-
+ +
+
+
+
Implementation Guide
+

QA 효율성 극대화를 위한
TestSprite 도입 가이드 +

+

AI 코드 생성 시대의 새로운 품질 보증 표준

-
+
-
+
- Executive Summary -

개요 및 핵심 가치

+ Prologue +

AI 코드 생성 시대의 과제와 기회

-

- 본 문서는 AI 모델 간의 협업을 통해 코드 품질을 극대화하고 개발 비용을 최적화하는 '교차 검증 전략'을 종합적으로 분석합니다. +

+ SAM 프로젝트의 개발 프로세스에 AI 코드 생성 도구가 깊숙이 자리 잡으면서 생산성은 향상되었으나, AI가 생성한 코드의 약 58%가 제대로 작동하지 + 않는다는 사실은 새로운 도전 과제를 제시합니다. +

+

+ 수동 검증의 병목 현상은 출시 지연과 직결됩니다. 본 가이드는 'TestSprite' 도입을 통해 이 문제를 해결하는 전략을 제시합니다.

-
-
-
🚀
-

5단계 사이클

-

계획 → 검증 → 구현 → 검증 → 테스트로 이어지는 완벽한 품질 관리 루프

-
-
-
🤝
-

역할 최적화

-

Antigravity(실행)와 Claude Code(감리)의 조화로운 역할 분담

-
-
-
💰
-

비용 절감

-

검증 단계에만 고성능 모델을 투입하여 전체 토큰 사용량 약 66% 절감

-
-
-
+
- I. Strategy Overview -

AI 교차 검증의 핵심 개념

-

고성능 모델의 초기 테스트 통과율(약 42%) 한계를 극복하기 위한 방법론

+ I. Solution Analysis +

'AI 감리 전문가' TestSprite

+

단순한 테스트 도구를 넘어 '버그 없는 배포'를 가능하게 하는 핵심 가치

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
단계주요 도구핵심 역할
1. 계획 (Plan)Antigravity문제 해결을 위한 초기 계획 수립 및 문서화
2. 검증 (Verify)Claude Code계획의 논리적 오류 및 프로젝트 원칙 검토
3. 실행 (Execute)Antigravity검증된 계획에 따른 고속 코드 구현
4. 검증 (Verify)Claude Code완성된 코드의 최종 검토 및 완성도 극대화
5. 테스트 (Test)TestSprite MCP자동화 테스트 및 직관적인 스크린샷 피드백
+
+
+
🛡️
+

불안정성 극복

+

생성 코드의 잠재적 버그를 식별하는 첫 번째 방어선 역할을 수행하여 초기 신뢰성을 확보합니다.

+
+
+
📹
+

자동 검증 및 녹화

+

프론트엔드 요소를 사용자 관점에서 자동 검증하며, 모든 과정은 스크린 녹화로 기록됩니다.

+
+
+
🛠️
+

자동 결함 수정

+

문제를 보고하는 데 그치지 않고, 직접적인 수정을 제안하여 디버깅 시간을 최소화합니다.

+
+
+
📋
+

사양 일치성 보장

+

제품 사양 문서(PSD)를 기반으로 기능적 요구사항 충족 여부를 엄격하게 대조합니다.

+
-
-
🏠
-

전략적 비유

-

"Antigravity라는 숙련된 시공사가 집을 짓기 전과 후에, Claude Code라는 꼼꼼한 설계사가 - 도면과 완공 상태를 철저히 감리하는 것과 같습니다."

+
+
👷
+

전문가 비유

+

"초보 건축가(코드 생성 AI)가 지은 건물을 점검하여 부실 부분을 찾아내고, 직접 망치를 들어 보수하는 꼼꼼한 감리 + 전문가와 같습니다."

-
+
- Visual Evidence -

검증 및 테스트의 실제

-

TestSprite MCP를 통한 자동화 테스트 결과 및 분석 화면

-
-
-
- TestSprite Core Analysis -
-
-
-
- -
-
-
- II. Workflow Detail -

5단계 교차 검증 상세 프로세스

+ II. Execution Guide +

-
-
1단계
-

계획 수립 및 문서화

-
    -
  • 문제 분석 및 구조 설계 (Antigravity)
    • -
  • work-plan 폴더 내 마크다운(.md) 저장
    • -
  • 검토를 위한 물리적 근거 마련
    • -
-
-
-
2단계
-

1차 계획 검증

-
    -
  • 코드 작성 원칙 기반 논리 검토 (Claude Code)
    • -
  • 문서 하단에 보완 사항 추가 (덮어쓰기 금지)
    • -
  • 변경 이력의 명확한 추적 가능성 확보
    • -
-
-
-
3단계
-

코드 구현

-
    -
  • 보완된 최종 지시에 따른 구현 (Antigravity)
    • -
  • 잠재적 오류 제거로 인한 에러율 급감
    • -
  • 정제된 워크플로우를 통한 생산성 향상
    • -
-
-
-
4단계
-

2차 최종 결과 검토

-
    -
  • 계획 반영 여부 최종 점검 (Claude Code)
    • -
  • 전체 코드 완성도 및 코드 품질 확인
    • -
  • 최종 릴리스 준위의 결과물 확보
    • -
-
-
-
5단계
-

자동 테스트 및 피드백

-
    -
  • TestSprite MCP 기반 자동화 테스트
    • -
  • 스크린샷 리포트를 통한 직관적 오류 파악
    • -
  • 100%에 수렴하는 품질 완성 사이클
    • -
-
-

-
-
- -
-
-
- III. Tool Roles & Setup -

핵심 도구별 역할 및 설정

-
- -
-
-
- -

Antigravity

-
-

실무 실행자 (Doer)

-

토큰 소모가 많은 초기 계획과 코드 구현 전담. VS Code 내 'Claude Code for VS Code'와 병행 설치 권장.

-
-
-
- -

Claude Code

-
-

설계 및 감리자 (Reviewer)

-

고비용 모델의 효율적 사용을 위해 검증에 집중. 메모리/에이전트/훅 설정에 프로젝트 규칙 정의 필수.

-
-
-
- -

TestSprite MCP

-
-
-
-

최종 품질 검사관 (Inspector)

-

자동 테스트 및 스크린샷 리포트를 통해 인간이 놓치는 논리적 결함 발견.

-
-
-

설정 절차

-
    -
  • API 키: testsprite.com 발급 (유일 1회 노출)
    • -
  • Windows: 전용 명령어를 통한 MCP 연결
    • -
  • 명세서: Claude Code를 통한 Product Spec 생성 및 제공
    • -
+
+
+
01
+
+

API 키 생성

+

TestSprite 대시보드 > MCP test > Create a Key 단계를 통해 고유 인증 키를 발급받고 복사합니다.

-
+
+
02
+
+

Cursor MCP 서버 설치

+

'Add to Cursor' 버튼을 클릭하여 에디터 실행 후, 복사한 API 키를 입력하여 서버를 설치합니다.

+
+
+
+
03
+
+

테스트 사전 준비

+

정확한 검증을 위해 프로젝트 설계도 역할을 하는 제품 사양서(PSD)를 Cursor에 업로드합니다.

+
+
+
+ +
+
🔌
+

"전문 검측 장비(TestSprite)를 스마트 공장(Cursor)에 연결하기 위해 전용 통신 케이블(MCP)을 꽂고 고유 번호를 입력하는 것과 같습니다."

-
+
- IV. Expected Effects -

기대 효과 및 실질적 이점

+ III. Workflow +

QA 자동화 워크플로우

+

반복적인 디버깅에서 전략적 검수자로의 역할 전환

-
-
-
✨
-

코드 품질 향상

-

상호 보완적 모델 협업과 전문 테스트 도구를 통한 안정적인 결과물 생산

+
+
+
+ Step 1 +

테스트 시작

+
+

Cursor 채팅창에 "conduct a front-end testing..." 프롬프트를 입력하고 PSD 파일을 제공합니다.

-
-
📉
-

비용 및 토큰 절감

-

고비용 모델을 검증에만 집중 배치하여 토큰 사용량 약 2/3(약 66%) 절감

+
+
+ Step 2 +

결과 분석

+
+

대시보드에서 통과/실패 현황을 파악하고, 스크린 녹화 영상을 통해 오류 지점을 직관적으로 확인합니다.

+
+
+
+ Step 3 +

자동 수정 지시

+
+

Cursor에서 "please fix all of the issues..." 명령을 내려 발견된 모든 버그의 수정을 요청합니다.

+
+
+
+ Step 4 +

수정 내역 최종 승인

+
+

AI가 정리한 이슈 목록과 자동 생성된 코드 변경 사항을 검토하고 최종 승인합니다.

-
- -
-
- "Claude Max 200달러 요금제를 쓰다가 이 전략을 적용하고 나서 100달러 요금제로 낮췄습니다. 이제는 토큰 걱정 없이 편하게 작업하고 있습니다." -
- — 실제 사례 사용자
+ +
+
+
+ Conclusion +

버그 없는 배포를 향한 결단

+

TestSprite의 즉각적인 도입은 SAM 프로젝트의 기술적 우위를 확보하고,
우리의 핵심 목표인 "Bug-free code + deployment"를 달성하기 위한 필수적 전략입니다.

+
+
+ 🚀 Speed + QA 시간 획기적 단축 +
+
+ 💎 Quality + 코드 신뢰성 극대화 +
+
+ 🧘 Experience + 핵심 로직 집중 지원 +
+
+
+
+
+
+ + +
+
+
Strategic Briefing
+

AI 협업 기반
코드 교차 검증 전략

+

Maximize Quality | Optimize Cost | 5-Step Workflow

+ +
+
+ +
+
+
+
+ +
+
+
+
+ Executive Summary +

개요 및 핵심 가치

+
+

+ 본 문서는 AI 모델 간의 협업을 통해 코드 품질을 극대화하고 개발 비용을 최적화하는 '교차 검증 전략'을 종합적으로 분석합니다. +

+
+
+
🚀
+

5단계 사이클

+

계획 → 검증 → 구현 → 검증 → 테스트로 이어지는 완벽한 품질 관리 루프

+
+
+
🤝
+

역할 최적화

+

Antigravity(실행)와 Claude Code(감리)의 조화로운 역할 분담

+
+
+
💰
+

비용 절감

+

검증 단계에만 고성능 모델을 투입하여 전체 토큰 사용량 약 66% 절감

+
+
+
+
+
+ +
+
+
+ I. Strategy Overview +

AI 교차 검증의 핵심 개념

+

고성능 모델의 초기 테스트 통과율(약 42%) 한계를 극복하기 위한 방법론

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
단계주요 도구핵심 역할
1. 계획 (Plan)Antigravity문제 해결을 위한 초기 계획 수립 및 문서화
2. 검증 (Verify)Claude Code계획의 논리적 오류 및 프로젝트 원칙 검토
3. 실행 (Execute)Antigravity검증된 계획에 따른 고속 코드 구현
4. 검증 (Verify)Claude Code완성된 코드의 최종 검토 및 완성도 극대화
5. 테스트 (Test)TestSprite MCP자동화 테스트 및 직관적인 스크린샷 피드백
+
+ +
+
🏠
+

전략적 비유

+

"Antigravity라는 숙련된 시공사가 집을 짓기 전과 후에, Claude Code라는 꼼꼼한 설계사가 + 도면과 완공 상태를 철저히 감리하는 것과 같습니다."

+
+
+
+ +
+
+
+ Visual Evidence +

검증 및 테스트의 실제

+

TestSprite MCP를 통한 자동화 테스트 결과 및 분석 화면

+
+
+
+ TestSprite Core Analysis +
+
+
+
+ +
+
+
+ II. Workflow Detail +

5단계 교차 검증 상세 프로세스

+
+ +
+
+
1단계
+

계획 수립 및 문서화

+
    +
  • 문제 분석 및 구조 설계 (Antigravity)
    • +
  • work-plan 폴더 내 마크다운(.md) 저장
    • +
  • 검토를 위한 물리적 근거 마련
    • +
+
+
+
2단계
+

1차 계획 검증

+
    +
  • 코드 작성 원칙 기반 논리 검토 (Claude Code)
    • +
  • 문서 하단에 보완 사항 추가 (덮어쓰기 금지)
    • +
  • 변경 이력의 명확한 추적 가능성 확보
    • +
+
+
+
3단계
+

코드 구현

+
    +
  • 보완된 최종 지시에 따른 구현 (Antigravity)
    • +
  • 잠재적 오류 제거로 인한 에러율 급감
    • +
  • 정제된 워크플로우를 통한 생산성 향상
    • +
+
+
+
4단계
+

2차 최종 결과 검토

+
    +
  • 계획 반영 여부 최종 점검 (Claude Code)
    • +
  • 전체 코드 완성도 및 코드 품질 확인
    • +
  • 최종 릴리스 준위의 결과물 확보
    • +
+
+
+
5단계
+

자동 테스트 및 피드백

+
    +
  • TestSprite MCP 기반 자동화 테스트
    • +
  • 스크린샷 리포트를 통한 직관적 오류 파악
    • +
  • 100%에 수렴하는 품질 완성 사이클
    • +
+
+
+
+
+ +
+
+
+ III. Tool Roles & Setup +

핵심 도구별 역할 및 설정

+
+ +
+
+
+ +

Antigravity

+
+

실무 실행자 (Doer)

+

토큰 소모가 많은 초기 계획과 코드 구현 전담. VS Code 내 'Claude Code for VS Code'와 병행 설치 권장.

+
+
+
+ +

Claude Code

+
+

설계 및 감리자 (Reviewer)

+

고비용 모델의 효율적 사용을 위해 검증에 집중. 메모리/에이전트/훅 설정에 프로젝트 규칙 정의 필수.

+
+
+
+ +

TestSprite MCP

+
+
+
+

최종 품질 검사관 (Inspector)

+

자동 테스트 및 스크린샷 리포트를 통해 인간이 놓치는 논리적 결함 발견.

+
+
+

설정 절차

+
    +
  • API 키: testsprite.com 발급 (유일 1회 노출)
    • +
  • Windows: 전용 명령어를 통한 MCP 연결
    • +
  • 명세서: Claude Code를 통한 Product Spec 생성 및 제공
    • +
+
+
+
+
+
+
+ +
+
+
+ IV. Expected Effects +

기대 효과 및 실질적 이점

+
+ +
+
+
✨
+

코드 품질 향상

+

상호 보완적 모델 협업과 전문 테스트 도구를 통한 안정적인 결과물 생산

+
+
+
📉
+

비용 및 토큰 절감

+

고비용 모델을 검증에만 집중 배치하여 토큰 사용량 약 2/3(약 66%) 절감

+
+
+ +
+
+ "Claude Max 200달러 요금제를 쓰다가 이 전략을 적용하고 나서 100달러 요금제로 낮췄습니다. 이제는 토큰 걱정 없이 편하게 작업하고 있습니다." +
+ — 실제 사례 사용자 +
+
+
diff --git a/helper/style.css b/helper/style.css index 1d59c43..12381d7 100644 --- a/helper/style.css +++ b/helper/style.css @@ -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; + } } \ No newline at end of file