💻 computer science

Seeing is Fixing: Cross-Modal Reasoning with Multimodal LLMs for Visual Software Issue Fixing

이 논문은 시각적 GUI 증상을 실행 가능한 컨텍스트로 변환하고 시각적 피드백을 통해 수정 사항을 검증하기 위해 Image2Code 및 Code2Image 구성 요소를 통합함으로써 멀티모달 자동 프로그램 수리를 향상시키는 교차 모달 추론 프레임워크인 GUIRepair를 소개하며, 이를 통해 SWE-bench M 벤치마크에서 최첨단 성능을 달성하였다.

원저자: Kai Huang, Jian Zhang, Xiaofei Xie, Chunyang Chen

게시일 2026-06-19

📖 3 분 읽기☕ 가벼운 읽기

CC BY 4.0

원저자: Kai Huang, Jian Zhang, Xiaofei Xie, Chunyang Chen

원본 논문은 CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/) 라이선스로 제공됩니다. ✨ 이것은 아래 논문에 대한 AI 생성 설명입니다. 저자가 작성하거나 승인한 것이 아닙니다. 기술적 정확성을 위해서는 원본 논문을 참조하세요. 전체 면책 조항 읽기

당신이 매우 구체적이고 까다로운 자동차 문제를 해결하려는 숙련된 정비사라고 상상해 보십시오. 보통 차 주인은 당신에게 전화하여 "엔진에서 이상한 소리가 나요"라고 말하고, 당신은 그 설명을 바탕으로 문제를 해결합니다. 이것이 현재 대부분의 AI '프로그램 복구(program repair)' 도구가 작동하는 방식입니다. 즉, 버그에 대한 텍 тексту 설명을 읽고 코드를 보고 수정하는 것이죠.

하지만 문제가 시각적이라면 어떨까요? 만약 차 주인이 "대시보드 불빛이 색깔이 이상하게 깜빡거려요"라고 말하며 사진을 보낸다면 어떨까요? 대부분의 현재 AI 정비사들은 혼란에 빠집니다. 그들은 텍스트는 읽을 수 있지만, 사진을 실제로 '보거나' 그 사진이 엔진 부품과 어떻게 연결되는지 이해하지 못합니다. 그들은 사진 한 장만 보고 어떤 볼트를 조여야 할지 파라내는 데 어려움을 겪습니다.

이 논문은 GUIRepair라는 새로운 AI 정비사를 소개합니다. 이 모델은 웹사이트의 깨진 버튼이나 앱의 결함 있는 지도와 같은 '시각적' 소프트웨어 버그를 처리하도록 특별히 설계되었습니다.

GUIRepair가 어떻게 작동하는지 두 가지 주요 초능력으로 나누어 설명하겠습니다.

1. "사진을 설계도로 바꾸는" 번역기 (Image2Code)

인간 개발자가 사진 속의 버그를 볼 때, 단순히 픽셀을 쳐다보는 것이 아닙니다. 그들은 "아, 저건 Dialog 박스가 설정된 방식 때문에 Calendar 컴포넌트가 오작동하고 있는 거구나"라고 생각합니다. 그들은 머릿속에서 사진을 코드 로직으로 번역합니다.

AI는 보통 이를 잘 수행하지 못합니다. GUIRepair는 문제의 미니어처 모델을 구축하는 탐정처럼 행동함으로써 이 문제를 해결합니다.

과정: AI는 버그 리포트(사진과 텍스트)를 살펴보고, 규칙을 이해하기 위해 프로젝트의 지침서(문서)를 검색합니다.
마법: 그런 다음, 사진 속의 장면을 정확하게 재현하는 아주 작고 임시적인 코드를 작성합니다. 이는 마치 AI가 깜빡이는 불빛을 직접 확인하기 위해 자동차의 '테스트 드라이브'용 버전을 만드는 것과 같습니다.
도움이 되는 이유: 이제 AI는 사진이 무엇을 의미하는지 추측하는 대신, 작동하는 모델을 갖게 됩니다. AI는 "아, 저 불빛이 왜 깜빡이는지 원인이 되는 코드 줄이 정확히 어디인지 알겠어!"라고 볼 수 있습니다. 이는 AI가 버그를 고칠 정확한 위치를 찾도록 도와줍니다.

2. "수정하고 확인하는" 거울 (Code2Code)

AI가 해결책을 찾았다고 생각하면, 그것이 실제로 효과가 있는지 알아야 합니다. 일반적인 텍스트 기반 코딩에서는 "통과(Pass)" 또는 "실패(Fail)"를 알려주는 테스트를 실행합니다. 하지만 시각적 버그의 경우, 텍스트 테스트만으로는 충분하지 않습니다. 불빛이 이제 올바른 색상인지 직접 '봐야' 합니다.

GUIRвair는 이를 처리하기 위한 두 번째 초능력을 가지고 있습니다:

과정: AI는 방금 작성한 수정 코드를 앞서 구축한 "미니어처 모델"에 적용합니다.
마법: 코드를 실행하고 결과의 새로운 스크린샷을 찍습니다. 그런 다음 이 새로운 사진을 원래의 "고장 난" 사진과 비교합니다.
도움이 되는 이유: AI는 두 이미지를 나란히 놓고 이렇게 말합니다. "좋아, 첫 번째 사진에서는 달력이 엉뚱한 곳에 떠 있었어. 그런데 이 새 사진에서는 제자리에 있네. 수정이 성공했어!" 이는 AI가 단순히 추측하는 것이 아니라, 자신의 수리가 성공적인지 '볼 수 있는' 방법을 제공합니다.

결과: 더 나은 정비사

연구진은 이 새로운 정비사를 시각적 문제가 포함된 실제 세계의 방대한 소프트웨어 버그 목록(SWE-bench M)에 대해 테스트했습니다.

경쟁: 그들은 GUIRepair를 기존의 최고 수준의 AI 시스템(무료 및 유료 상용 시스템 모두)과 비교했습니다.
점수:
- 표준적인 강력한 AI 모델을 사용했을 때, GUIR-Repair는 157개의 문제를 해결하여 차순위 오픈 소스 도구보다 큰 차이로 앞섰습니다.
- 훨씬 더 똑똑한 "추론" AI 모델(o4-mini)을 사용했을 때, GUIRepair는 175개의 문제를 해결하여 최고의 상용 시스템보다 22개 더 많은 문제를 해결했습니다.

핵심 요약

이 논문은 AI에게 사진을 코드로 번역하는 법(문제를 이해하기 위해)과 코드를 다시 사진으로 번역하는 법(솔루션을 확인하기 위해)을 가르침으로써, 현재의 방식보다 시각적 소프트웨어 버그를 훨씬 더 잘 해결할 수 있다고 주장합니다. 이는 마치 정비사에게 자신이 고치려는 문제를 마침내 '볼 수 있도록' 안경을 씌워준 것과 같습니다.

기술 요약: Seeing is Fixing (GUIRepair)

1. 문제 정의

대규모 언어 모델(LLM) 기반의 자동 프로그램 수정(APR) 기술은 주로 단일 모드 설정(텍스트 설명 및 소스 코드)에서 실제 GitHub 이슈를 해결하는 데 유망한 성과를 보여왔습니다. 그러나 기존 시스템은 프론트엔드 라이브러리의 그래픽 사용자 인터페이스(GUI)와 관련된 멀티모달 시나리오에서 심각한 어려움을 겪고 있습니다.

본 논문은 시각적 소프트웨어 이슈(예: SWE-bench M)를 다룰 때 현재의 자율 시스템이 가진 두 가지 결정적인 한계를 식별합니다:

시각적 이슈에 대한 이해 부족: LLM은 시각적 증상(스크린샷)과 기저의 코드 구성 요소 간의 관계를 해석하는 데 필요한 도메인 특화 컨텍스트가 부족한 경우가 많습니다. 재현 코드가 없으면, 시각적 증상의 80%는 텍스트로 완전히 설명될 수 없고 멀티모달 이슈 리포트의 17%만이 재현 스크립트를 포함하고 있기 때문에, 모델은 결함을 정확하게 국지화(localize)하는 데 어려움을 겪습니다.
수정 동작에 대한 피드백 부족: 전통적인 APR은 검증을 위해 테스트 스위트에 의존합니다. 그러나 SWE-bench M과 같은 멀티모달 벤치마크는 데이터 누수를 방지하기 위해 테스트 케이스를 생략하는 경우가 많습니다. LLM이 픽셀 수준의 시각적 테스트 케이스를 생성하는 것은 어렵고, 재현 스크립트가 없으면 시스템은 패치가 문제를 해결했는지 확인하기 위해 필요한 시각적 조건을 재현할 수 없습니다.

2. 방법론: GUIRepair

저자들은 시각 정보와 코드 사이의 간극을 메우기 위해 설계된 교차 모달 추론 접근 방식인 GUIRepair를 제안합니다. 이 방식은 Image2Code와 Code2Image라는 두 가지 핵심 구성 요소를 표준 에이전트리스(agentless) APR 워크플로우(결함 이해, 국지화, 생성 및 검증)에 통합합니다.

A. Image2Code (결함 이해 강화)

이 구성 요소는 시각 정보를 실행 가능한 코드 컨텍스트로 변환하여 결함 국지화를 돕습니다.

지식 마이닝(Knowledge Mining): 시스템은 이슈 리포트를 기반으로 관련 프로젝트 문서를 검색합니다. 채팅 모델을 사용하여 관련 디렉토리를 식별하고 임베딩 모델을 사용하여 특정 콘텐츠를 검색하며, 이를 결합하여 컨텍스트가 풍부한 지식 베이스를 형성합니다.
재현 생성(Reproduction Generation): 마이닝된 도메인 지식을 활용하여, LLM은 스크린샷에 묘사된 시각적 이슈를 재현하는 재현 코드(프론트엔드 프로젝트의 경우 특히 JavaScript)를 생성합니다. 이 코드는 이슈 리포트에 다시 주입되어, 고수준의 시각적 증상을 저수준의 코드 동작으로 효과적으로 번역함으로써 모델이 어떤 컴포넌트가 결함의 원인인지 추론할 수 있게 합니다.

B. Code2Image (패치 검증 강화)

이 구성 요소는 텍스트 형태의 수정 동작을 다시 시각적 결과물로 변환하여 패치를 검증합니다.

GUI 렌더링(GUI Rendering): Image2Code에 의해 생성된 재현 코드를 사용하여 시스템은 실행 가능한 프론트엔드 프로젝트를 구축합니다. 코드베이스에 후보 패치를 적용하고 브라우저 환경에서 결과 GUI를 렌더링합니다.
패치 선택(Patch Selection): 시스템은 패치된 애플리케이션의 스크린샷을 캡처합니다. 그 다음 버그 시나리오 이미지와 패치 시나리오 이미지 간의 픽셀 수준 비교를 수행합니다. LLM은 이러한 시각적 출력물을 이슈 설명과 대조하여 시각적 증상이 해결되었는지 평가하고, 효과 없는 패치를 걸러내어 가장 유망한 패치를 선택합니다.

C. 워크플로우 통합

GUIRepair는 4단계 파이프라인을 따릅니다:

결함 이해(Fault Comprehension): 문서를 마이닝하고 재현 코드를 생성합니다 (Image2Code).
결함 국지화(Fault Localization): 강화된 이슈 리포트(텍스트 + 문서 + 재현 코드)를 사용하여 의심스러운 파일과 특정 코드 헝크(hunk)를 식별합니다.
패치 생성(Patch Generation): Search/Replace 전략을 사용하여 후보 패치를 생성합니다.
패치 검증(Patch Validation): 패치된 코드를 렌더링하여 시각적 효과를 캡처하고 올바른 패치를 선택합니다 (Code2Image).

3. 주요 기여

차원(Dimension): 본 연구는 시각적 단서를 명시적으로 다루는 최초의 연구로, 텍스트와 시각적 모달리티를 모두 통합함으로써 자동 이슈 해결에 새로운 차원을 도입했습니다.
기술(Technique): 양방향 교차 모달 변환 접근 방식인 GUIRepair를 제안합니다. 이는 GUI 스크린샷을 코드 표현으로 매핑하여 이슈를 진단하는 Image-to-Code 변환과, 업데이트된 GUI를 렌더링하고 시각적 정확성을 평가하여 패치를 검증하는 Code-to-Image 변환을 수행합니다.
평가(Evaluation): SWE-bench M 벤치마크에 대한 광범한 실험을 통해 GUIRepair가 기존 오픈 소스 및 상용 시스템보다 우수한 성능을 보임을 입증했습니다.

4. 실험 결과

저자들은 GPT-4o를 기본 모델로 사용하여 SWE-bench M 테스트 분할(517개 인스턴스)에서 GUIRepair를 평가하였으며, 13개의 최첨단 시스템(Agentless, SWE-agent 및 Globant, Zencoder와 같은 상용 에이전트 포함)과 비교하였습니다.

전반적인 성능: GUIRepair는 157개 인스턴스(30.37%)를 해결하여, 가장 우수한 오픈 소스 베이스라인(GPT-4o를 사용한 Agentless Lite, 127개 인스턴스)보다 26개 더 많은 인스턴스를 해결했고, 가장 우수한 상용 시스템(Globant Code Fixer Agent, 153개 인스턴스)보다 4개 더 많은 인스턴스를 해결했습니다.
비용 효율성: 해결된 인스턴스당 평균 비용은 ** $0.29**로, 이는 많은 에이전트 기반 시스템(예:$ 2.94인 SWE-agent Multimodal)보다 현저히 낮습니다.
절제 연구(Ablation Study):
- 교차 모달 구성 요소가 없는 기본 에이전트리스 워크플로우는 136개 인스턴스를 해결했습니다.
- Image2Code를 추가하면 146개(+10)로 증가했습니다.
- Code2Image를 추가하면 148개(+12)로 증가했습니다.
- 전체 파이프라인(GUIRepair)은 157개(+기본 대비 +21)를 달성하여, 15.44%의 향상을 보였으며, 이는 두 구성 요소가 최대의 효과를 내기 위해 모두 필요함을 입증합니다.
일반화 가능성(Generalizability):
- SWE-bench M 개발 분할(dev split)에서 테스트했을 때도 GUIRepair는 우수한 성능을 유지했습니다.
- 고급 추론 모델인 o4-mini를 사용할 경우, GUIRepair는 175개 인스턴스를 해결하여 상위 상용 시스템보다 22개 더 많은 인스턴스를 해결했습니다.

5. 의의 및 주장

본 논문은 GUIRepair가 교차 모달 추론을 가능하게 함으로써 멀티모달 소프트웨어 수정의 독특한 과제를 성공적으로 해결한다고 주장합니다. 시각적 정보를 실행 가능한 컨텍스트로 변환(Image2Code)하고 시각적 렌더링을 통해 수정을 검증(Code2Image)함으로써, 이 시스템은 시각적 자산이 중심이 되는 프론트엔드 라이브러리 분야에서 텍스트 전용 APR의 한계를 극복합니다.

저자들은 다음과 같은 점을 강조합니다:

시각적 증상과 코드 로직 사이의 간극을 메우며, 이는 시각적 자산이 핵심인 프론트엔드 라이브러리에서 매우 중요합니다.
테스트 스위트가 부족한 시나리오를 위해 시각적 피드백을 신뢰할 수 있는 오라클(oracle)로 사용하는 강력한 검증 메커니즘을 제공합니다.
교차 모달 추론으로 강화된 단순한 에이전트리스 워크플로우가 효과와 비용 측면 모두에서 복잡한 상용 에이전트 시스템과 대등하거나 이를 능가할 수 있음을 보여줍니다.

결론적으로, 본 논문은 교차 모달 추론을 통합하는 것이 멀티모달 이슈 해결을 위한 성공적인 관점이며, 시각적 소프트웨어 도메인에서의 자동 프로그램 수정에 대한 새로운 벤치마크를 설정한다고 밝히고 있습니다.