수동 테스트 작성은 이제 그만: Gemma 4로 GitHub 저장소를 전체 테스트 스위트로 만든 방법 🎯

Source: Dev.to

이 글은 Gemma 4 Challenge: Build with Gemma 4에 제출한 작품입니다.
저는 Scriptless.ai라는 AI 기반 테스트 워크스페이스를 만들었습니다. 이 도구를 사용하면 “GitHub 레포가 있다”는 단계에서 “실행 중인 브라우저 테스트와 실패 분석 결과가 있다”는 단계까지, 테스트 코드를 한 줄도 작성하지 않고 진행할 수 있습니다.

솔직히 말씀드리자면, 제가 본 모든 팀은 피쳐 구현에 지친 뒤에야 테스트를 하려고 합니다. 그 결과 테스트 커버리지는 떨어지고, QA 병목이 쌓이며, 새벽 2시에 CI 실패를 디버깅할 때는 아무런 맥락도 없는 빨간 체크박스만 보게 됩니다. Scriptless.ai는 이런 흐름을 완전히 뒤바꾸기 위한 시도입니다.

핵심 흐름

1. GitHub 레포 연결 — OAuth 인증 후 레포를 선택하면 끝.
2. Gemma 4로 테스트 케이스 생성 — 모델이 실제 소스 파일과 파일 트리를 읽어, 라우트별(UI, 인증, 폼, API, 엣지 케이스, 통합) 구조화된 테스트 케이스를 코드베이스에 맞게 생성합니다. 일반적인 Lorem Ipsum 테스트가 아니라, 여러분의 라우트와 파일을 정확히 아는 실제 테스트입니다.
3. 실제 클라우드 브라우저에서 실행 — 각 테스트 케이스는 Playwright 스크립트로 변환되어 실시간 Browserbase 세션에서 실행됩니다. 실제 브라우저, 실제 네트워크, 실제 DOM을 사용합니다.
4. 시각적으로 실패 이해 — 테스트가 실패하면 Gemma 4의 비전 기능이 실패 시점의 페이지 스크린샷을 분석해 무엇이 보이는지, 어떤 문제가 있었는지, 어떻게 고쳐야 하는지를 알려줍니다. 이제 로그만 파헤치는 눈먼 고고학은 끝났습니다.
5. 음성으로 전체 제어 — Speechmatics 기반 음성 명령 레이어를 통해 “실패한 테스트 실행”이나 “통과한 테스트만 보여줘”와 같은 명령을 말하면 UI가 즉시 반응합니다. 손을 쓰지 않는 QA가 가능합니다.

전체 스택: Next.js 프론트엔드, Neon Postgres + Drizzle(영속성), Clerk(인증), Stripe(수익화), Vercel(배포). 사용자는 테스트 생성·실행 시 크레딧이 차감되며, 청구 인프라가 구독 플랜에 맞게 이미 구축돼 있습니다.

🚀 실제 서비스: https://scriptless-ai.vercel.app/
Clerk로 로그인 → GitHub 권한 승인 → 레포 연결 → “Generate Tests” 클릭 → Gemma 4가 자동으로 테스트를 만들어 줍니다.

먼저 해볼 것

• 본인이 가진 공개된 Next.js 또는 React 레포를 연결
• “Generate Test Cases” 버튼을 눌러 모델이 파일 트리에 맞춰 테스트를 구조화하는 모습 확인
• 테스트 실행 → Browserbase가 실제 Chrome 인스턴스를 띄움
• 실패 시, “Vision Analysis” 섹션을 스크롤해 Gemma 4가 제공하는 진단 확인

📦 GitHub: https://github.com/Arjunhg/scriptless-ai
핵심 파일 (탐색해볼 만한 파일)