AI 코딩 에이전트가 웹사이트가 완성되었다고 말합니다. 하지만 결제 버튼은 실제로 작동할까요? 👀 'vibe-testing'이라는 새로운 오픈

AI 코딩 에이전트가 웹사이트가 완성되었다고 말합니다. 하지만 결제 버튼은 실제로 작동할까요? 👀

'vibe-testing'이라는 새로운 오픈 소스 도구는 코딩 에이전트가 생성된 코드가 작동한다고 가정하는 대신 실제 브라우저를 사용하여 웹 애플리케이션을 테스트할 수 있게 합니다.

이 도구는 소스 코드 검사(source-code inspection), Playwright 브라우저 자동화, 그리고 MCP 통합을 결합합니다.

흥미로운 점은 사용자가 모든 브라우저 테스트 코드를 수동으로 작성하지 않아도 코딩 어시스턴트가 어떤 부분이 테스트되어야 하는지 발견할 수 있다는 것입니다.

🧪 작동 방식

Claude Code나 Cursor를 사용하여 온라인 스토어를 구축했다고 가정해 봅시다.

사용자가 다음과 같이 요청합니다:

"결제 흐름을 테스트하고 무엇이 잘못되었는지 알려줘"

그러면 vibe-testing은 다음 작업을 수행할 수 있습니다:

▪️ 코드베이스 검사: 애플리케이션 경로, 양식(forms), 탐색 경로, 관련 UI 요소를 발견합니다.
▪️ 테스트 시나리오 생성: 애플리케이션의 구조를 기반으로 확인해 볼 가치가 있는 동작을 식별합니다.
▪️ Chromium 실행: Playwright를 사용하여 실제 실행 중인 웹사이트와 상호 작용합니다.
▪️ 결과 검증: 탐색, UI 변경 사항, 오류 메시지 및 네트워크 실패 여부를 확인합니다.
▪️ 증거 캡처: 스크린샷을 저장하고 결과를 담은 HTML 보고서를 생성합니다.
▪️ 회귀 추적(Track regressions): 이전 스냅샷과 나중에 실행된 것을 비교하여 무언가를 망가뜨렸을 수 있는 변경 사항을 식별합니다.

이는 실용적인 피드백 루프를 만듭니다:
에이전트가 코드를 작성하고 → 에이전트가 앱을 테스트하며 → 에이전트가 실패를 확인하고 → 에이전트가 이를 수정합니다.

🔧 기술적 세부 정보

이 프로젝트는 테스트를 AI 지원 개발 워크플로우에 통합하기 위한 14개의 MCP 도구를 제공합니다.

Claude Code, Cursor 및 호환되는 MCP 클라이언트를 포함한 어시스턴트와 작동합니다.

설치는 다음으로 시작됩니다:

npx vibe-testing@latest init

초기화 과정은 테스트를 위해 프로젝트를 준비하고 통합 파일을 구성합니다.

테스트 결과 및 발견된 경로는 다음과 같은 파일을 포함하여 로컬에 저장할 수 있습니다:

▪️ .vibe/route-manifest.json
▪️ .vibe/run-snapshot.json

테스트 도구 자체는 브라우저 액션을 실행하는 데 추가적인 LLM 호출을 요구하지 않습니다. 연결된 AI 어시스턴트가 여전히 추론(reasoning)과 결정을 처리합니다.

⚠️ 보장하지 않는 것

• 자동으로 생성된 테스트는 비즈니스 로직 오류(business-logic errors), 특이한 사용자 여정(unusual user journeys), 보안 문제(security issues), 그리고 에이전트가 발견하는 시나리오 외부의 문제를 놓칠 수 있습니다.
• 이는 포괄적인 품질 보증(QA) 프로세스를 대체하지 않습니다.

하지만 이는 'vibe 코딩'의 가장 큰 약점 중 하나, 즉 완성된 것처럼 보이지만 제대로 테스트되지 않은 인터페이스를 배포하는 문제를 해결하는 데 도움을 줍니다.

독립 개발자들에게는 이러한 종류의 자동 검증(automated verification)이 매우 가치 있을 수 있습니다.

이 프로젝트는 무료이며 MIT 라이선스가 적용됩니다.

🔗 https://t.co/KlgaO664RF

🔗 https://t.co/eaEWHQYsJr

#VibeCoding #Playwright #AICoding #OpenSource