시각적 보조도구와 대형 언어모델의 통합을 통한 코드 이해 지원 개발자 도구 연구 = Exploring a Developer Tool for Code Comprehension through the Integration of Visual Aids and Large Language Models

국문 초록 (Abstract)

낯선 코드베이스를 이해하는 것은 소프트웨어 개발에서 필수적이지만 어려운 작업이다. 호출 그래프(Call Graph)나 제어 흐름 그래프(Control Flow Graph)와 같은 시각적 보조 도구는 코드 이해에 도움을 줄 수 있지만, 정보 과부하와 제한된 상호작용 문제를 야기한다. 한편, 대형 언어모델(Large Language Model, LLM)기반 코드 어시스턴트는 인지적 장벽을 낮추는 자연어 설명을 제공하지만, 코드 탐색을 위한 공간적 맥락이 부족하다. 본 연구는 이 두 가지 상호보완적 접근법을 통합하여 각각의 한계를 해결할 수 있다고 가정한다. 이러한 통합을 검증하기 위해, LLM과 인터랙티브 시각적 보조 도구를 결합하여 효과적인 코드 이해를 지원하는 도구인 CodeVoyager를 개발하였다. 먼저 11명을 대상으로 탐색적 연구를 수행하여 도구의 잠재력을 평가하고 개선점을 도출하였다. 반복적 개선을 거친 후, 16명이 참여한 피험자 내 설계연구를 통해 개선된 도구를 널리 사용되는 채팅 기반 코드 어시스턴트와 비교 평가하였다. 연구 결과, CodeVoyager는 코드 이해도를 향상시키고 사용자 신뢰를 증가시켰다. 이러한 개선은 개발자들이 자연스럽게 코드를 논의하는 방식을 반영하여 텍스트 설명과 시각적 코드 탐색 간의 원활한 상호작용을 가능하게 함으로써 달성되었다. 본 연구는 시각-LLM 통합 개발자 도구에 관하여 (1) 개발자의 자연스러운 코드 논의 방식을 반영한 새로운 통합 접근법을 제안하고, (2) 향상된 코드 이해도와 신뢰에 대한 실증적 근거를 제시하며, (3) 향후 멀티모달 코드 이해 시스템 설계 및 인터랙션 방향에 대한 시사점을 제공한다.

다국어 초록 (Multilingual Abstract)

Understanding unfamiliar codebases is essential yet challenging in software development. Visual aids such as call graphs and control flow graphs can help, but often lead to information overload and limited interactivity. Meanwhile, LLM-based code assistants provide accessible natural language explanations that reduce cognitive barriers, but lack spatial context for code navigation. We posit that integrating these two complementary approaches can address their respective limitations. To validate this integration, we introduce CodeVoyager, a tool that combines LLM with interactive visual aids to support more effective code comprehension. We first conducted an exploratory study (n=11) to assess the tool's potential and identify areas for refinement. Following iterative refinement, we evaluated the enhanced tool against a widely used chat-based code assistant in a within-subjects study (n=16). Results showed that CodeVoyager improved code comprehension and increased user trust. These improvements were achieved by enabling seamless interaction between textual explanations and visual code exploration, mirroring how developers naturally discuss code. This work contributes to visual-LLM integrated developer tools through (1) a novel integration approach mirroring natural code discussion, (2) empirical evidence of improved comprehension and trust, and (3) design implications for multimodal code comprehension systems.

목차 (Table of Contents)

• 제1장 연구의 배경과 내용 1
• 제1절 연구의 배경 1
• 제2절 연구의 내용 5
• 제2장 관련 연구와 선행지식 9
• 제1절 코드 이해의 개념과 관련 이론 9
• 제2절 시각적 보조 도구를 활용한 코드 이해 13
• 제3절 대형 언어모델(LLM)을 활용한 코드 이해 16
• 제4절 시각적 보조 도구와 대형 언어 모델의 통합을 통한 코드 이해 19
• 제3장 CodeVoyager 설계 및 구현 22
• 제1절 설계 원칙 22
• 제2절 시스템 구현 25
• 제3절 CodeVoyager 개요 및 사용자 인터페이스 31
• 제4절 호출 그래프 패널 33
• 제5절 제어 흐름 그래프 패널 35
• 제6절 챗봇 패널 37
• 제4장 시각적 보조도구와 LLM을 통합한 개발자 도구의 탐색적 연구 39
• 제1절 연구 방법 39
• 제2절 연구 결과 및 논의 47
• 제5장 CodeVoyager와 텍스트 기반 코드 어시스턴트의 비교 연구 52
• 제1절 연구 방법 52
• 제2절 연구 결과 61
• 제6장 연구 논의 67
• 제1절 과제 수행 성과와 사후 이해도 사이의 불일치 67
• 제2절 멀티 모달 코드 이해 시스템을 위한 설계 함의 70
• 제3절 잠재적 적용 시나리오 72
• 제4절 연구의 한계 및 향후 연구 74
• 제7장 결론 76
• 참고 문헌 78
• 부록 92
• A 실험 과제 및 사후 이해도 평가 퀴즈 92
• B NASA-TLX 및 SUS 설문 문항 106
• Abstract 108