AI 에이전트와 함께 보는
살아있는 코드베이스
ViewWork 는 디렉토리 구조 · AI 에이전트의 작업 흐름 · 사용자 IDE 활동 · dev 서버 트래픽을 한 화면에서 실시간으로 2D / 3D 로 시각화하는 데스크톱 앱입니다. 어떤 파일을 누가 읽고, 어떤 URL 을 탐색 중이며, DB 어느 테이블을 호출하는지 — 노드맵 위 캐릭터로 직접 확인하세요.
한 화면에 모두 담긴 코드 + 활동
단순한 트리뷰가 아닙니다. ViewWork 는 분석 + 워치 + 추적 + 시각화를 한 데 모아 코드와 실시간 활동을 캐릭터 아바타 + 가상 노드 + 데이터 흐름 입자로 그립니다.
2D / 3D 동시 지원
같은 데이터를 React Flow 2D 와 Three.js 3D 로 자유롭게 전환. 4가지 레이아웃 (수평 / 수직 / 방사형 / 부피 트리) — 2D / 3D 모드별로 독립 설정.
AI 에이전트 자동 추적
Claude Code · OpenAI Codex · Cursor · GitHub Copilot · Windsurf 의 세션 로그를 자동 감지. 어떤 도구로 어느 파일을 read / edit / write 중인지 캐릭터가 노드 위로 이동하며 표시.
외부 활동도 시각화
프로젝트 외부의 활동까지 추적 — WebFetch / WebSearch URL 별 가상 노드, LLM thinking, 텍스트 답변 출력 모두 그래프 위에 등장합니다.
MCP + DB 스키마 통합
.mcp.json 의 모든 MCP 서버, Prisma / Drizzle / SQL migration 의 테이블
구조와 외래키 관계까지 자동 추출 + 노드맵에 표시.
방문자 / dev 서버 추적
dev 서버 reverse proxy 로 라이브 visitor 의 페이지뷰 · API 호출 · 폼 제출까지 캡처. LAN 공유로 다른 기기 방문자도 캐릭터로 보입니다.
커스텀 캐릭터 + 3D 모델
PNG / SVG / GIF / WebP / AVIF 캐릭터를 액션별로 등록. .glb /
.fbx 3D 모델 + Mixamo 애니메이션 클립도 자동 매칭.
다국어 + 라이트 / 다크 테마
한국어 · 영어 + 사용자 설치 언어팩. 다크 / 라이트 / 시스템 모드, 5가지 강조 컬러. 뷰포트 전체가 즉시 따라갑니다.
로컬 우선 + 오픈
모든 분석은 사용자 PC 안에서. 외부 서버 없음. 키 / 코드 / 활동 로그가 ViewWork 외부로 나가지 않습니다.
3단계로 시작
설치 후 폴더만 선택하면 끝. AI 에이전트 hook 도 자동 인식.
설치
아래 다운로드 섹션에서 본인 OS 의 인스톨러를 받아 실행. Windows NSIS / macOS DMG / Linux AppImage·deb 지원.
프로젝트 열기
상단 Ctrl+O 또는 헤더의 폴더 아이콘으로 분석할 디렉토리 선택. 첫 스캔에서 노드맵이 즉시 그려집니다.
AI 작업 시작
Claude Code / Cursor / Codex 로 그 프로젝트에서 코딩만 하면 자동 추적. 외부 hook 설치는 필요 없습니다.
스크린샷
실제 ViewWork 가 동작하는 모습.
발전 가능성 — 다음에 올 것
ViewWork 의 핵심은 "코드와 활동의 라이브 시각화" — 그 위에서 다음 항목들을 단계적으로 확장합니다. 우선순위는 사용자 피드백에 따라 조정.
데이터베이스 실시간 감지 시각화
로컬 PostgreSQL / MySQL / SQLite, Supabase / Firestore / MongoDB Atlas 같은 클라우드 DB 의 INSERT · UPDATE · DELETE 가 발생하는 즉시 노드맵 위 해당 테이블에 펄스. 누가 (AI / visitor / 사용자) 어떤 row 를 만들고 수정했는지 캐릭터로 표현.
로컬 / 클라우드 DB 직접 접근
연결 정보를 등록하면 ViewWork 가 직접 read-only 쿼리를 실행 — 테이블/컬럼 통계, row 샘플, 외래키 관계, 누락 인덱스 자동 감지. .env 의 DATABASE_URL 을 자동 파싱. 민감 정보는 OS keychain 에만 저장.
감시 / 경고 (alerting)
프로덕션 DB 에서 비정상 패턴 발생 시 데스크톱 알림 + Discord webhook — "특정 테이블 1분 안 1000건 INSERT" / "auth.users 외부 IP 다수 접근" / "deploy 스크립트가 비표준 시각에 실행" 같은 룰 기반.
시간축 (time scrubber)
과거 N 시간/일 의 모든 활동을 타임라인으로 재생. 특정 버그가 발생한 시점으로 스크럽 → 그 순간의 AI 작업 / dev 서버 트래픽 / 파일 변경을 한 번에 재현.
팀 협업 모드
여러 개발자의 ViewWork 가 같은 프로젝트를 공유. 다른 팀원의 캐릭터 + AI 에이전트가 실시간으로 같은 노드맵 위에 등장. "누가 지금 이 파일을 만지고 있나" 즉시 확인.
테스트 + 커버리지 라이브
Jest / Vitest / Playwright 가 실행 중인 파일 / 통과/실패한 케이스가 노드 위에 표시. 실패한 테스트가 만지는 파일 트리 자동 강조. 커버리지 % 가 노드 색 농도로.
플러그인 / SDK
third-party 가 자기만의 시각화 레이어를 추가할 수 있는 plugin API. 예: Sentry 의 에러 스트림을 노드맵에 오버레이, GitHub Actions 빌드 상태를 노드 외곽에 ring 으로.
지리적 visitor 트래킹
dev/staging 서버에 접속하는 visitor 의 IP 를 GeoIP 로 매핑하여 globe 뷰에 위치 표시. 실제 사용자의 페이지 흐름이 코드 노드에서 → 지구 위로 점프.
AI 에이전트 비교 / 회고
같은 task 를 여러 AI 에 맡겼을 때 누가 어떤 파일을 어떤 순서로 작업했는지 side-by-side 비교. 히스토그램 / Gantt / heatmap 으로 효율 측정.
💡 추가 아이디어가 있다면 문의 또는 GitHub Discussions 에 남겨주세요.
더 자세히
ViewWork 의 동기 / 내부 구조 / 사용 노하우는 블로그 글에서 살펴보세요.
다운로드
GitHub Releases 에서 최신 빌드 (.exe / .dmg / .AppImage / .deb) 를 무료로 다운로드. 업데이트는 앱 실행 시 자동 확인됩니다.
NSIS Installer
DMG
AppImage / deb
소스 코드: github.com/gugu9999gu/ViewWork · README · 패치 노트