프로그래밍은 1도 모르다보니 가끔 갑갑한 적이 많았습니다.
그래서 LLM에게 스펙 시트를 주고 지시를 내려도 이게 내 의도대로 되는건지 모를때가 많죠. 그래서 구조를 한 눈에 알아보고 이걸 이해할 수 있는 도구를 구상하고 Antigravity 확장을 만들었습니다. VScode에서도 사용이 가능합니다
지시를 내리면 시각적으로 노드(소스파일)와 노드(소스파일)을 표시하고 이 노드들이 어떤 노드(소스파일)을 참조하는지 선(엣지)로 표시합니다.
선은 의존성, 콜, 데이터플로, 그리고 양방향 참조로 구분됩니다.
노드를 클릭하면 바로 해당 소스를 들여다볼 수 있습니다.
선이나 노드가 논리적으로 이상하면 바로 시각적으로 표시됩니다.
노드들 역시 사용자의 승인이나 거부를 통해 지울 수 있습니다.
시각화 보드 ( 캔버스 ) 안에서 직접 노드를 만들어 줄 수 있습니다.
그리고 캔버스 위에서 각 노드들의 클러스터를 정의해서 보다 보기 편하게 작업할 수 있습니다
Synchronous Node-based Agent Persistence & Sharing Engine
제가 테스트해 본 언어는 3가지입니다. Rust, C, Python 그외에 쉘스크립트, YAML, Json, TOML까지 지원합니다.
VSCODE와 안티 그래비티 모두를 지원합니다.
혹시 써보시고 문제점이 있으면 이야기 해주시면 감사하겠습니다.
자동 클러스터링과 의존성을 제외한 노드 표시 다이어트 등도 되어 있습니다.
스냅샷 기능이 있어 언제든 롤백이 가능합니다. 스냅샷은 자동저장, 수동 저장 모두를 지원합니다.
2개의 좋아요
이제 멀티 프롬프트 ( 다양한 md 파일 ) 과 더불어 언제든 대화 프롬프트를 md 파일로 저장할 수 있게 되었습니다. 내가 맥락 유지할 수 있는 방법이 늘어났네요,
1개의 좋아요
md 파일에도 lsp 연결했습니다
md파일에 경로명 등이 있다면 에디터 상에서 불러들인 md파일에서 해당 파일명만 클릭하면 바로 편집 가능합니다
VSCode와 Antigravity 모두에서 작동시켜봤습니다.
적어도 내가 가려운 곳은 긁어줄 수 있을 듯 합니다.
이게 정말 도움이 될지는 모르겠습니다만 그래도 내가 생성한 소스 파일들이 어떻게 돌아가고 고립되어서 쓰이지 않는 녀석들이 어떤 녀석들인지는 확인이 가능합니다.
노드가 연결되면 자동으로 순서도를 만들어줍니다.
1개의 좋아요
파이선, C와 Rust까지 지원합니다
GEMINI.md 파일을 부트스트랩시키면 자동으로 노드를 생성하고 폴더 내 파일 구조를 만든다음 순서도까지 작업을 진행합니다.
멀티MD 파일을 지원합니다.
추가 계획
GEMINI.md 파일만 부트스트랩시킵니다만, 이걸 좀더 확장해서 Clade다 chatGPT까지 모두 지원하게 하려고 합니다.
기본이 된 MD 파일은 헌법처럼 남겨두고 이제 아키텍쳐 자체를 에디트할때 필요한 MD를 자동 생성시키려고 합니다. 이 파일은 스냅샷과 연결시킬 겁니다.
현재 대화 맥락을 언제건 단축키 하나로 세이브할 수 있습니다.
이 기능을 좀더 확장시켜보려고 합니다
마지막으로 SSH 접속기능을 써서 팀 작업 기능을 추가하려고 합니다
팀장이 서버를 열면 다른 작업자들이 접속할 수 있게 만듭니다
접속하면 이 캔버스에 자동으로 다른 팀원들의 Graph뷰가 뜹니다
팀장은 다른 팀원들의 그래프뷰를 통해 파일을 읽고 쓸 수 있습니다
팀원은 다른 팀원과 팀장의 프로젝트 그래프뷰를 통해 파일을 읽을 수 있습니다
잘 되면 좋겠습니다
일단 보이는 건 깔끔해졌습니다.
1개의 좋아요
순서도와 노드 관련해서 내부 로직은 모두 뜯어고쳤습니다.
이제 다음번에는 노드에서 제어한 엣지의 내용과 새로 캔버스에서 추가한 노드들의 종류가 순서도에 반영되어야 합니다. 아마 다음주에나 작업이 가능할 거 같네요
순서도 로직도 바뀌었습니다. 이제 좀더 보기 좋게 만들어졌습니다.
이제 마우스 호버와 마우스 셀렉션 시 연관된 엣지들이 글로우 효과를 보이며 강조됩니다.
평시에는 로직의 흐름에 따라 엣지 에니메이션이 보이게 했습니다.
지금까지 뷰어의 기능이 강했다면 이제는 능동적으로 노드를 만들면 소스 파일을 생성시킵니다
노드와 노드를 직접 연결하게 했습니다.
그 결과 논리를 직접 에디팅 할 수 있는 길을 만들 수 있습니다.
노드가 엣지로 연결되면 즉시 상위노드에 하위 노드를 임포트 시킵니다. 물론 삭제하면 해당 임포트 구문은 자동 주석처리됩니다.
사용자가 만든 노드들을 직접 순서도에 집어 넣을 수 있는 로직도 만들었습니다.
노드의 형상은 소스 파일의 조건문등을 파악하여 자동으로 형태를 바꿔줍니다.
가장 중요한 사고 깊이 조절을 통해 로직의 병목 현상으로 판명되는 노드의 코딩시 연산력 조절을 가능하게 처리했습니다.
1개의 좋아요
레이어 기능을 추가했습니다
포토샵 레이어처럼 동작합니다.
추후 ssh연동하게되면 다른 사용자의 레이어가 더 붙게 됩니다
사용자가 수동으로 만든 논리 흐름과 ai가 만든 논리의 흐름을 시각적으로 단절시킬 수 있습니다
로직에 결정론적 사고를 일부 부여했습니다. 로직 검증 실패가 프로그램의 실행 불가능을 의미하지않습니다.
그외 자잘한 ui도 편하게 바꿔두었습니다
와 ㄷㄷ…
한눈에 로직 파악하는게 엄청 쉬워지겠네요!
1개의 좋아요
코드는 건드리지않습니다
로직보는 도구 맞아요
지금 3d가속과 ui변경 그리고 내부 로직을 결정론적으로 다루는 작업중입니다
UI를 좀 바꾸었습니다.
문서 파일들을 보여주던 클러스터를 완전히 웹뷰에서 독립시켰습니다. 노드가 줄어든 만큼 속도가 좀 빨라졌습니다
노드 선택 UI를 기본적으로 사용하는 선택 인터페이스로 변경하였습니다.
3D 가속 기능을 추가했습니다
노드와 엣지 모두 3D 가속 기능을 부여했습니다만 아직 엣지가 완전히 구현되지 않았습니다. 핫픽스로 수정해야 겠네요
결정론적 사고로 로직을 확인합니다. 이제 추상화와 추상화 뒤에 가려진 문제들을 파악하고 노드에 묘비를 표시합니다. 이게 실제 디버깅 실패를 의미하지 않습니다. 오히려 예방적 의미가 더 강합니다. 나중에 문제 생길 부분을 표시하는 지뢰밭 표시 기능 정도로 생각하면 됩니다.
결정론적 사고를 바탕으로 가상 디버깅 기능을 부여했습니다. 물론 이게 실제 디버깅 실패를 의미하지 않습니다.
길었습니다. 여기까지 오는데..
결국 릴리즈 하고 나서 모두 4번의 픽스를 해야 했습니다. ㅠㅠ 너무 힘드네요
1개의 좋아요
주말 내내 이 것만 잡고 있었네요
2D 모드의 퍼포먼스를 올리고 3D 가속에서도 속도가 잘 나옵니다.
참고로 제 시스템 사양은 하스웰 i5 / Ram 16기가 / 1050Ti / 우분투 25.10 입니다.
여기서 안티그래비티와 테스트 검증용 VScode를 모두 돌립니다.
Synchronous Node-based Agent Persistence & Sharing Engine
전보다 조금은 나아졌습니다.
이제 애니메이션 부분 손 보고 Debug 각 항목의 메뉴들이 제대로 출력되는지 확인해야 합니다.
이거 하느라 크레딧을 모두 소진시켰습니다.
VSCode와 안티그래비티 같은 포크 버전의 큰 차이점이 있습니다.
vscode의 경우 사용자의 프롬프트의 입력과 LLM의 답변이 표준API를 통해 투명하게 json 형태로 표시됩니다. 하지만 안티그래비티는 어딘가에서 블랙박스화되어 있습니다. 이거 뚫고 컨텍스트를 모두 저장하게 하려니 계속 리버스엔지니어링하게 되네요.
후킹은 소용없고 데이터 계속 추적해서 대화가 오가는 경로를 찾아내서 이걸 가로챈 다음 저장하는 방법을 모색중입니다.
간단하게 생각했는데 이 녀석이 시간을 너무 많이 잡아 먹고 있습니다.
일단 노이즈 형태이긴 해도 어떻게든 사용자의 프롬프트의 입력값을 잡아내고 출력까지는 성공했습니다.
그런데 이게 계속 누적되서 저장이 되지 않습니다. 현재 사용 중인 안티그래비티(Gemini 버전)는 대화 로그를 전혀 다른 곳에 Protobuf(.pb) 형식으로 저장하고 있습니다.
실제 로그 위치 : /home/dogsinatas/.gemini/antigravity/conversations/
그리고 이 파일들은 압축 되어 있습니다. bc6d80a7-8ad6-4853-8161-1df436e7d9cb.pb (방금 전 14:03 업데이트 확인)
해결 방안
ChatExtractor.ts가 감시하는 경로를 ~/.config/Antigravity로 수정하더라도, 안티그래비티가 대화 내용을 .jsonl이 아닌 ~/.gemini/antigravity/conversations/*.pb에 저장하기 때문에 파일 감시 대상과 파싱 로직을 Antigravity(Gemini) 전용으로 업데이트 해야 합니다.
현재 Antigravity IDE는 일반적인 VS Code의 .jsonl 방식이 아닌 이 .pb 파일을 통해 대화를 관리하고 있습니다. 방금 확인한 결과, 우리 익스텐션이 기존의 VS Code 경로만 감시하고 있어서 이 새로운 파일 구조를 포착하지 못하고 있었습니다.
따라서 .pb 파일에서 텍스트 조각을 휴리스틱하게 추출하는 로직 을 추가하고, 감시 대상에 안티그래비티 전용 폴더(~/.gemini/antigravity/conversations/)를 포함시켜서 즉시 동기화되도록 수정하겠습니다.
작업 계획은 다음과 같습니다:
ChatExtractor 강화 : .pb 파일 내의 바이너리 데이터 스트림에서 유의미한 UTF-8 문자열을 추출하는 로직을 추가합니다.
감시 경로 업데이트 : 안티그래비티 전용 대화 로그 폴더를 실시간 감시 대상에 추가합니다.
** audit log 연결**: 추출된 대화를 .synapse_contexts/에 즉시 기록하도록 보정합니다.
먼저 .pb 파일을 파싱할 수 있도록 ChatExtractor를 수정하겠습니다.
아마 제대로 되지는 않을 거 같습니다. 어떻게든 해봐야죠. 소스가 없으니 여기까지 알아내느라 좀 많이 돌아왔습니다.
pb 파일 컴파일러로도 확인이 되지 않습니다.
❯ cat f84a3739-e0d8-4408-aa2e-877a67946d37.pb | protoc --decode_raw
Failed to parse input.
❯ protoc --decode_raw < f84a3739-e0d8-4408-aa2e-877a67946d37.pb
Failed to parse input.
도대체 어떤 녀석인가 확인해보려고 해봤습니다
file f84a3739-e0d8-4408-aa2e-877a67946d37.pb
f84a3739-e0d8-4408-aa2e-877a67946d37.pb: data
이 말은 표준 압축 파일도 아닙니다. 커스텀 프레임 구조를 가지고 있네요. 그러니 아무리 삽질을 해도 내용을 알 수 없습니다.
왜 이렇게 까지 숨겨놓았는지 모르겠습니다.
1개의 좋아요
안티그래비티에서 DOM으로 확인도 해보았지만 어떻게 꼭꼭 숨기고 있네요. 컨텍스트 볼트 기능의 업데이트를 잠깐 중단하고 내부 그래픽 표현 로직을 좀 바꿨습니다.
1개의 좋아요
컨텍스트 볼트 기능은 공식적으로 삭제하려고 합니다.
vscode나 안티그래비티에서 기본적으로 제공하기 시작했습니다.
시작하면 이전 대화를 덮어씌울 수 있게 되어 있네요.
대신 내부 로직들을 몇가지 더 다듬었습니다.
3D 가속 기능을 꺼도 어느 정도의 퍼포먼스가 나오도록 정리해두었습니다.
시각정보들의 규격을 늘였습니다.
노드 규격 (Node Conventions)
SYNAPSE는 컴포넌트의 유형과 추론 상태를 나타내기 위해 특정 아이콘과 색상을 사용합니다.
1. 엔티티 유형 (Identity Icons)
노드의 물리적 성격이나 아키텍처적 역할을 정의합니다.
아이콘
타입
의미
시각적 특징
Active Source
워크스페이스 내에 존재하는 실제 소스 파일(Logic, Config 등)입니다.
실선 테두리, 기본 색상
Atomic Logic
핵심 로직이나 진입점임을 의미합니다 (Atomic 시그니처).
DTR 발광 효과(보라색)
Folder
물리적인 디렉터리 구조를 나타내는 클러스터입니다.
폴더 클러스터 컨테이너
External API
외부 라이브러리(os, fs) 또는 외부 API 호출 의존성입니다.
구름 형태 시각화
Doc Shelf
마일스톤, 릴리즈 노트, 아키텍처 설계 문서입니다.
캔버스에서 기본 숨김 처리
Test Case
단위 테스트 및 시스템 검증 파일 (.test.ts 등).
주황색 테두리
Component
독립적으로 작동하는 모듈형 컴포넌트입니다.
청록색 테두리
Processor
데이터 변환 및 연산을 담당하는 프로세서 엔진입니다.
보라색-회색 테두리
Service
여러 모듈에 통합 기능을 제공하는 공용 서비스입니다.
파란색 테두리
Gate
입출력을 통제하거나 인증을 담당하는 보안 게이트입니다.
두꺼운 황색 테두리
Data Record
DB 스키마, JSON 모델 등 순수 데이터 정의체입니다.
두꺼운 테두리, 어두운 배경
Ghost Source
참조는 되었으나 물리 파일이 없는 누락된 내부 소스입니다.
점선 테두리
2. 노드 상태 및 글로우 (Node Status & Glow)
노드의 현재 추론 상태와 시각적 중요도를 정의합니다.
상태
시각적 힌트
색상
의미
Active
실선 테두리
검증되어 코드베이스에서 실제 작동 중인 상태.
High DTR
보라색 글로우
높은 추론 밀도; 핵심적인 논리 지점.
Ghost
점선 테두리
제안된 아키텍처 노드 (아직 구현되지 않음).
Deleted
회색 처리
안전하게 주석 처리되거나 비활성화된 노드.
Warning
붉은색 펄스
논리 오류, 순환 참조 또는 데드엔드 감지.
Necrosis
치명적 논리 실패; 빌드 파손 또는 심각한 물리적 결함.
Tombstone
복구 불가능한 결정론적 실패; 삭제 권장.
3. 로직 및 흐름 마커 (Logic Flow Markers)
LOD(상세 정보) 줌 레벨에 따라 노드 내부 혹은 엣지 위에 표시되는 로직 제어 마커입니다.
아이콘
타입
의미
↻
Loop
반복문 로직 (for, while, map 등).
◈
Decision
분기 로직 (if, switch, validation 등).
Output
터미널 로그 출력, 프린트 또는 사이드 이펙트 출력.
Signal
네트워크 요청 또는 원격 호출 (RPC).
Payload
고대역폭 데이터 이동 또는 스트림.
Async
비동기 처리 또는 대기 상태입니다.
4. 특수 경고 및 정화 마커 (Hazard & Purification)
시스템 정화 및 아키텍처 건전성을 실시간으로 알려주는 시각적 지표입니다.
아이콘
타입
의미
시각적 특징
Necrosis
아키텍처 위반(순환 의존성 등)으로 인한 괴사 상태입니다.
어두운 배경 + 노이즈 효과
Tombstone
결정론적 위반 등이 기록된 영구적인 설계 결함입니다.
묘비 마커 표시
Mine
수정 시 위험도가 매우 높은 잠재적 결함(지뢰) 지점입니다.
레드아웃 경고
Logic Fault
코드 단위의 에러 또는 싱크 실패 지점입니다.
붉은색 펄스 / 경고 아이콘
Dirty Dot
저장되지 않았거나 동기화/푸시가 필요한 로컬 변경 사항입니다.
우측 상단 레드 도트
5. 인터랙션 및 승인 배지 (Interaction Badges)
동기화 및 사용자 커맨드 상태를 나타내는 지능형 배지입니다.
배지
상태
의미
Confirmed
인간 코맨더에 의해 수동으로 승인된 설계입니다.
AI Validated
소스 코드 분석을 통해 자동으로 검증된 논리입니다.
Pending
AI가 제안했으나 검증을 기다리는 가설(Draft) 상태입니다.
Purge
물리적 제거 또는 삭제 대상으로 마킹된 항목입니다.
Locked
불변 상태로 설정되어 수정으로부터 보호되는 항목입니다.
엣지 및 라인 규격 (Edge & Line Conventions)
SYNAPSE는 노드 간의 다양한 논리적 연결과 데이터 흐름을 나타내기 위해 고유한 색상과 스타일을 사용합니다.
엣지 유형
색상
스타일 및 두께
의미
Dependency
실선 2px
표준 모듈 의존성 또는 임포트(Import).
Data Flow
실선 3px
대용량 데이터 전송 또는 페이로드 이동.
Event
실선 2px
이벤트 트리거 또는 비동기 콜백.
Conditional
실선 1px
if/else 또는 match와 같은 조건부 분기.
Origin
실선 1.5px
AI 로직 추적을 위한 프롬프트 기원 링크.
API Call
점선 2px
외부 API 또는 서비스 간 네트워크 호출.
DB Query
실선 3px
데이터베이스 쿼리, 뮤테이션 또는 트랜잭션.
Loop / Back
점선 2px
루프백(while/for) 또는 역방향 로직 흐름.
Highlighted
펄스 5px
활성 실행 경로 (호버링/선택됨).
통합 지능형 배지 (Integrated Intelligence Badges, v0.3.11)
SYNAPSE v0.3.11은 논리적 유형과 확정 상태를 하나의 캡슐 안에 통합한 고밀도 정보 배지 를 도입했습니다.
배지 구성 요소
아이콘
의미
유형 아이콘
🔗, 📡, 📊
연결의 논리적 본질 (통합 표시).
대기 (Pending)
❓
AI/인간에 의해 제안되었으나 승인을 기다리는 연결.
확정 (Confirmed)
✅
인간이 승인했거나 확립된 논리적 연결.
AI 검증됨
🤖
소스 코드를 통해 자동으로 검증된 연결.
삭제 액션
❌
(빨간색) 해당 엣지를 즉시 물리적으로 제거.
엣지 아이콘 매핑 (Edge Icon Mapping)
배지 내부와 화살표 머리에 사용되는 아이콘들은 연결의 시맨틱한 성격을 정의합니다:
유형
아이콘
상세 의미
Dependency
🔗
모듈 임포트, 상속 또는 패키지 사용.
Call
📡
동기적 함수/메서드 호출.
Data Flow
📊
고대역폭 데이터 또는 스트림 이동.
Reference
📝
포인터, 변수 참조 또는 문서 링크.
Event
⚡
비동기 트리거 또는 콜백 신호.
Conditional
❓
결정 분기점 (if, match, switch).
API Call
🌐
서비스 간 또는 외부 HTTP/RCP 네트워크 호출.
DB Query
🛢️
SQL 쿼리, NoSQL 변동 또는 캐시 액세스.
Loop / Back
🔁
논리적 재귀 또는 반복 루프백.
Fracture
💥
순환 참조 또는 아키텍처 붕괴 상태.
시각 정보가 넘쳐나는 부분인 엣지를 숨길 수 있게 만들었습니다.
여기까지 나왔습니다.
이제 아래 작업 하고 나면 원래 목표했던 네트웍 작업에 들어가려고 합니다.
“Cluster 간 Super Edge (메타 흐름)”
cluster → cluster 간 연결만 남김