AI가 웹앱을 직접 클릭하며 시각적으로 테스트하게 만드는 무료 오픈소스 가이드

개발자가 자기 웹서비스를 출시하기 전, 여러 화면 흐름과 예외 상황(엣지 케이스)을 일일이 손으로 테스트하는 데 시간을 너무 많이 쓰는 문제를 해결하려고 만든 방법이다. 처음에는 Claude Code로 이 작업을 시켜봤지만 속도가 너무 느렸고, 이전에 어떤 화면을 거쳤는지, 어떤 흐름을 따라갔는지 제대로 기억하지 못해 봇처럼 기계적으로만 움직였다. 그래서 '하나의 두뇌, 턴마다 한 번의 호출'이라는 핵심 원리로 새 구조를 짰다.

AI 모델 자체(두뇌 역할)는 지금까지 어디를 다녔는지 계속 분석하고 다음 행동을 정한 뒤, 그 판단 근거와 행동, 위치를 파일에 기록해 다음 턴에 참고하게 한다. 화면을 보는 역할은 Claude 대신 훨씬 빠른 Gemini Flash를 써서 속도를 높이면서도 충분한 판단력을 유지했다. 매 턴마다 화면 상태, 행동, 판단 근거를 엄격한 JSON 형식으로 출력하게 만들어 로그인(인증) 과정, 예외 상황, 전체 사용자 흐름까지 시각적으로 확인하고, 화면이 이상하게 보이는 부분에는 사각형 테두리(바운딩 박스)까지 그려준다.

이 기법 전체를 100% 오픈소스로 공개했고, 자기 에이전트에 무료로 연결해 쓸 수 있다. 속도가 느려도 상관없다면 Claude Code에 그대로 연결해서 자기 웹앱 전용 테스트 스킬로 만들 수도 있다.