Mindwalk: 전체 코드베이스를 3D 지도로 확인하세요

한국어العربية Deutsch English Español Français हिन्दी Bahasa Indonesia 日本語 Português Русский 中文

Computing/SoftwareInternet Technology

Transcript

00:00:00지난 2년 동안 우리는 AI 에이전트에게 코드베이스를 맡기고 원하는 대로 수정하게 한 뒤,

00:00:05그저 수많은 코드 줄을 스크롤하며 검토해 왔습니다.

00:00:09결국 누군가 이에 지쳐 반대 방식을 만들었습니다. 에이전트가 코드 속을 이동하는 모습을

00:00:143D로 직접 지켜보는 방법이죠.

00:00:17이름은 마인드워크(MindWalk)입니다.

00:00:18어쩌면 이건 코드를 시각화하고 생동감을 불어넣는 더 나은 방법일지도 모릅니다.

00:00:23우리에게는 Graphify 같은 도구도 있는데, 이것과 비교하면 어떨까요?

00:00:30자, 마인드워크가 해결하려는 진짜 문제는 바로 이겁니다.

00:00:34에이전트 로그는 무엇을 실행했고 무엇을 수정했는지 말해줍니다.

00:00:38하지만 작업을 어떻게 이해했는지는 절대 알려주지 않죠.

00:00:41어떤 파일이 관련 있다고 판단했는지,

00:00:44단 한 줄을 고치기 전에 어디를 훑어보았는지,

00:00:47제 영역 안에만 머물렀는지, 아니면 리포지토리 절반을 몰래 훑었는지 말이죠.

00:00:51그 모든 것 말입니다.

00:00:52에이전트의 실제 사고 과정은 텍스트 기록에 보이지 않습니다.

00:00:55그냥 사라져 버리죠.

00:00:56작업 효율을 높여주는 코딩 도구 영상을 좋아하신다면 구독해 주세요.

00:00:59새로운 영상이 계속 업로드됩니다.

00:01:01그 과정이 사라지지 않고 보일 때 어떤 모습인지 보여드리겠습니다.

00:01:04이건 제가 이전에 실행한 클로드 코드(Claude Code) 세션 프로젝트입니다.

00:01:08Go 언어로 작성된 이 도구를 설치하고 빌드해 보겠습니다.

00:01:14이제 이 명령어로 MindWalk를 실행할 수 있고, 제 전체 코드베이스가 이런 모습으로 렌더링됩니다.

00:01:20렌더링됩니다.

00:01:21각 파일은 건물이며, 코드가 많을수록 건물이 더 높게 서 있습니다.

00:01:26그리고 세션의 재생 버튼을 누릅니다.

00:01:29여기 조명을 잘 보세요.

00:01:31에이전트가 파일을 살짝 훑어볼 때는 이끼색 같은 녹색으로 빛납니다.

00:01:36본격적으로 읽을 때는 파란색, 수정할 때는 호박색으로 변하죠.

00:01:41타임라인을 앞뒤로 드래그하면서 에이전트가 코드 사이를 이동한 경로를

00:01:46말 그대로 추적할 수 있습니다.

00:01:48클로드 코드나 Codex가 이미 디스크에 저장 중인 세션 로그를 읽는 단일 Go 바이너리입니다.

00:01:54거기에 3D 시각화를 위한 브라우저 내 Three.js 씬이 더해진 형태죠.

00:01:58이 색상 방식이 정말 핵심적인 부분입니다.

00:02:01차가운 색상은 에이전트가 탐색 중이었음을 의미하고,

00:02:03따뜻한 색상은 수정 중이었음을 의미합니다.

00:02:06타임라인에도 표시가 되어 있습니다.

00:02:07작은 기호들을 통해 하위 에이전트가 생성된 시점, 컨텍스트 윈도우가 압축된 시점,

00:02:14그리고 사용자 새 지시를 개입시킨 시점을 정확히 보여줍니다.

00:02:17이제 어디로 가고 있는지 항상 알 수 있죠.

00:02:20하지만 정말 중요하다고 생각하는 핵심은 바로 이 부분입니다.

00:02:22“멋지네” 단계를 지나고 나면 보이는 것 말이죠.

00:02:24로컬 클로드나 Codex를 사용해 전체 세션을 심사하는 analyze 명령어가 있으며,

00:02:29방금 진행된 에이전트의 실행 과정을 평가해 줍니다.

00:02:33에이전트가 수정을 시작하기 전에 충분히 탐색했는가?

00:02:37지정된 범위 내에 머물렀는가?

00:02:38딴길로 새지는 않았는가?

00:02:40자신의 작업을 직접 검증하려 노력했는가?

00:02:42그리고 모든 결과 항목은 타임라인의 해당 시점으로 바로 이동하는 클릭 가능한 링크입니다.

00:02:47이것이야말로 에이전트에 대한 코드 리뷰죠.

00:02:49그리고 세션 재생 기록이 전혀 없더라도, 아무 설정 없이 모든 리포지토리를

00:02:543D 도시로 렌더링해 주는 map 명령어가 있는데, 정말 멋진 기능입니다.

00:02:59자, 이제 솔직히 이야기해 봅시다.

00:03:00이 프로젝트가 해커뉴스에 공개되었을 때, 가장 추천을 많이 받은 댓글은 매우 솔직했습니다.

00:03:06여러분도 아마 같은 질문을 하고 계실 테니까요.

00:03:08“정말 멋지긴 한데, 내가 이걸 실제로 쓸까?

00:03:10실제로 무슨 용도로 쓰지?”

00:03:12어떤 이들은 그 반론에 굳이 반박하지도 않았습니다.

00:03:14“실용적인 목적은 없다.

00:03:16재미있으면 됐지, 모든 것에 이유가 필요한 건 아니다”라는 식이었죠.

00:03:19누군가는 소규모 변경 작업에 대해 뼈 있는 지적을 날리기도 했습니다.

00:03:23단순한 git diff를 보는 게 3D 투어로 에이전트를 지켜보는 것보다 훨씬 빠르다는 거죠.

00:03:28무슨 뜻인지 이해합니다.

00:03:29이 도구는 이제 막 나온 극초기 단계입니다.

00:03:31v0.3 버전일 뿐이죠.

00:03:32클로드 코드와 Codex 로그만 읽을 수 있습니다.

00:03:34Cursor를 주력으로 쓰신다면 아직 세션을 재생할 수 없습니다.

00:03:38그렇다면 이 도구는 진정 누구를 위한 것일까요?

00:03:41그저 단순한 재미일까요?

00:03:42모델을 비교하면서 작업 시 클로드가 탐색하는 방식과

00:03:45Codex가 탐색하는 방식을 비교해보고 싶다면,

00:03:48어디서도 쉽게 얻을 수 없는 아주 흥미로운 시각을 제공합니다.

00:03:51에이전트의 거대하고 복잡한 변경 사항을 검토해야 하는데 밋밋한 diff만으로는 무슨 일이 일어났는지

00:03:56전체 윤곽이 잡히지 않을 때, 3D 플라이스루와 평가 리포트는 정말 유용합니다.

00:04:01그 맥락을 명확히 파악해 주죠.

00:04:02하지만 두 줄짜리 수정 작업이라면 솔직히,

00:04:04그냥 diff를 읽는 게 낫습니다.

00:04:05MindWalk가 기존의 코드 리뷰 도구를 대체할 것 같지는 않습니다.

00:04:09하지만 기존 도구로는 결코 파악할 수 없었던 에이전트의 실행 흐름을

00:04:14직관적으로 체감할 수 있게 도와주죠.

00:04:15그리고 바로 그 점이 우리가 여기서 다뤄볼 만한 핵심입니다.

00:04:19우리는 AI가 작성한 코드를 이해하는 방법을 개발하기도 전에

00:04:24훨씬 더 빠르게 코드를 쓰도록 기계를 학습시켰습니다.

00:04:25MindWalk나 graphify 같은 도구들 말이죠.

00:04:29좋아요, 발음이 맞는지 모르겠네요.

00:04:31이 도구는 그 격차를 줄이기 위한 본격적인 첫 시도가 될 수 있습니다. 에이전트가 코드를 완성하며

00:04:36남긴 키보드 입력만이 아니라, 전체 코드베이스에서 실제로 어떻게 추론했는지를 보여주니까요.

00:04:40아직 다듬어지지 않은 초기 단계지만, 정확히 올바른 문제를 조명하고 있습니다.

00:04:43직접 체험해 보시고 도움이 되는지 확인해 보세요.

00:04:46이러한 코딩 팁과 정보가 마음에 드셨다면 BetterStack 채널을 꼭 구독해 주세요.

00:04:50다음 영상에서 뵙겠습니다.

Key Takeaway

마인드워크(MindWalk)는 AI 에이전트가 코드베이스 내부를 탐색하고 수정하는 이동 경로를 Three.js 기반 3D 도시 형태와 타임라인으로 시각화하여 텍스트 로그만으로는 파악하기 힘든 실제 추론 과정을 검토하게 해준다.

Highlights

마인드워크(MindWalk)는 클로드 코드와 Codex의 세션 로그를 분석해 전체 코드베이스를 3D 도시 형태의 건물로 시각화하는 Go 언어 기반 단일 바이너리 도구다.
3D 공간에서 파일의 탐색 및 수정 단계는 색상으로 구분되며, 훑어보기는 이끼색 녹색, 정독은 파란색, 코드 수정은 호박색으로 표현된다.
타임라인에는 하위 에이전트 생성, 컨텍스트 윈도우 압축, 사용자 개입 시점이 기호로 기록되어 실행 과정을 한눈에 추적할 수 있다.
analyze 명령어를 실행하면 에이전트가 수정 전 충분히 탐색했는지, 지정 범위를 벗어났는지, 작업 검증을 시도했는지 평가하는 리포트와 해당 시점 링크를 제공한다.
현재 v0.3 극초기 단계로 클로드 코드와 Codex 로그만 지원하며 Cursor 세션 재생은 지원하지 않는다.

Timeline

AI 에이전트 로그의 한계와 3D 시각화의 필요성

기존 텍스트 방식의 에이전트 로그는 실행 결과만 보여줄 뿐 문제 해결 과정에서의 추론 경로를 보여주지 못한다.
수정을 진행하기 전 탐색한 범위나 리포지토리 침범 여부 등 에이전트의 실제 사고 과정은 로그 분석만으로 파악하기 어렵다.
마인드워크는 에이전트의 파일 이동 및 탐색 과정을 3D 공간 상에서 가시화하여 이 문제를 해결한다.

2년 동안 개발자들은 AI 에이전트가 변경한 수많은 코드 줄을 직접 스크롤하며 검토해 왔다. 단순 실행 결과 기록만으로는 에이전트가 코드를 제대로 이해하고 작업했는지 검증하기 어렵다. 에이전트가 어떤 파일을 관련 있다고 판단하고 조사했는지 직관적으로 파악할 수 있는 시각적 접근법이 필요한 이유다.

마인드워크 작동 방식과 색상 기반 이동 경로 추적

코드베이스의 각 파일은 건물로 렌더링되며 코드 양이 많을수록 건물의 높이가 높아진다.
에이전트의 작업 단계에 따라 건물 조명이 이끼색 녹색(훑어보기), 파란색(정독), 호박색(수정)으로 실시간 변경된다.
타임라인의 전용 기호를 통해 하위 에이전트 생성, 컨텍스트 압축, 사용자 개입 시점을 명확히 나타낸다.

Go 바이너리와 브라우저 내 Three.js 씬을 연동해 클로드 코드 및 Codex가 저장한 세션 로그를 3D로 시각화한다. 차가운 색상은 탐색 상태를, 따뜻한 색상은 수정 상태를 의미하므로 작업 흐름을 한눈에 식별할 수 있다. 타임라인 드래그를 통해 세션 전체의 이동 경로를 세밀하게 추적할 수 있다.

AI 코드 리뷰를 위한 analyze 명령어와 map 기능

analyze 명령어는 로컬 모델을 활용해 전체 세션을 심사하고 에이전트의 탐색 및 검증 동작을 평가한다.
평가 결과 항목은 클릭 시 타임라인의 해당 발생 시점으로 즉시 이동하는 링크를 제공한다.
세션 기록이 없는 리포지토리도 map 명령어를 통해 즉시 3D 도시 형태로 시각화할 수 있다.

단순한 3D 재생을 넘어 에이전트 작업의 타당성을 평가하는 분석 기능을 갖추고 있다. 수정을 시작하기 전 충분한 탐색 과정을 거쳤는지, 설정된 범위를 벗어나 딴길로 새지 않았는지, 수정 후 작업 검증을 시도했는지 세부 항목별로 검토해 단점을 보완하도록 돕는다.

실용성 논란과 마인드워크의 적합한 사용 환경

소규모 단순 수정 작업에는 3D 재생보다 전통적인 git diff를 확인하는 것이 훨씬 효율적이다.
클로드 코드와 Codex 사이에 일어나는 코드 탐색 방식의 차이를 비교하거나 대규모 변경 사항을 검토할 때 유용하다.
AI가 코드를 작성하는 속도와 인간이 이를 이해하는 속도 사이의 격차를 줄여주는 도구다.

해커뉴스 등 커뮤니티에서는 단순 수정 작업 시 3D 투어보다 git diff가 빠르다는 실용성 지적이 제기되었다. 현재 v0.3 단계로 Cursor 로그 미지원 등 한계가 있으나, 거대한 변경 사항의 전반적인 윤곽과 맥락을 파악할 때는 3D 플라이스루와 평가 리포트가 명확한 맥락을 제공한다.

Community Posts

Write about this video