버그는 설명하지 말고 스크린샷만 찍어라
Source: Dev.to
이 프로젝트는 Gemma 4 Challenge: Build with Gemma 4에 제출된 작품입니다.
제가 만든 것
Code
/
buglensBugLens 🔬
Gemma 4를 활용해 만든 AI 기반 스크린샷 디버거입니다. 버그, 오류 메시지, 깨진 UI 화면을 스크린샷으로 업로드하면 BugLens가 이를 분석해 몇 초 안에 구조화된 진단 결과를 반환합니다.
Gemma 4 Challenge를 위해 제작되었습니다.
기능
오류 스크린샷을 하나 넣기만 하면 BugLens가 다음 정보를 제공합니다:
- Error Type — 어떤 종류의 버그인지
- Severity — 고 / 중 / 저
- Root Cause — 발생 원인
- Affected Area — 관련된 코드 영역
- How to Fix — 코드 예시와 함께 단계별 해결 방법
- Prevention — 향후 동일 오류를 방지하는 방법
작동 원리
BugLens는 스크린샷을 Gemma 4 31B Dense (gemma-4-31b-it) 모델에 Google AI Studio API를 통해 직접 전송합니다. 모델은 이미지를 읽고 오류를 추론한 뒤, 구조화된 분석 결과를 깔끔한 UI 카드 형태로 반환합니다.
시작하기
- 레포지토리를 클론합니다.
index.html파일을 열어 실행합니다.
Gemma 4를 사용한 방법
BugLens는 Google AI Studio API를 통해 Gemma 4 31B Dense (gemma-4-31b-it) 모델을 사용합니다. 시각적 디버깅은 강력한 추론 능력이 필수이므로 31B Dense 모델을 선택했습니다—스크린샷에 포함된 오류 텍스트를 읽고, 코드 컨텍스트를 이해하며, 한 번의 호출로 실행 가능한 결과를 생성해야 하기 때문입니다.
Gemma 4의 멀티모달 기능이 앱 전체의 핵심 구조를 이룹니다. 모든 분석 요청은 스크린샷을 인라인 이미지 형태로 모델에 전달하고, 구조화된 프롬프트와 함께 전송됩니다. 모델의 응답은 UI에서 카테고리별 카드로 파싱됩니다. Gemma 4의 시각 및 추론 능력이 없으면 앱은 동작하지 않습니다—단순한 래퍼가 아니라 엔진 자체가 바로 Gemma 4입니다.