한 화면에 모두 담긴 코드 + 활동

단순한 트리뷰가 아닙니다. 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 가 동작하는 모습.

3D 씬에서 AI 에이전트 캐릭터가 파일 노드 위에서 작업하는 모습

2D 그래프에서 MCP / 클라우드 / 외부 활동 가상 노드 통합 표시

사이드바 — AI 작업 추적, 라이브 트래픽, 표시 옵션 통합 패널

설정 모달 — 6개 탭으로 분리된 시스템 설정

로드맵 — 최근 진행 + 다음에 올 것

ViewWork 의 핵심은 "코드와 활동의 라이브 시각화". 최근 (v0.1.40 ~ v0.1.53) 빠르게 기능을 확장했으며, 다음 항목들을 단계적으로 진행합니다.

✓ 최근 진행 상황 (v0.1.40 ~ v0.1.53)

14번 연속 릴리즈로 안정성 / 성능 / 시각 표현을 대폭 개선. 전체 패치 노트 →

✓

감시 모드 + 외부 서비스 연동 (v0.1.53)

규칙 기반 감시 모드 — AI / 사용자가 .env 수정 / 파일 생성 / 터미널 실행 등 지정된 액션 시 우상단 toast 알림. 변형자 · 세션 · 변경 내용 상세 로그. MCP / Firebase / Supabase 등 감지된 서비스 별 LIVE 토글.

✓

크래시 / freeze 자동 리포트 (v0.1.38 ~ v0.1.42)

renderer crash / unresponsive / React error boundary / preload 에러를 자동 감지 → 사용자 동의 시 Discord webhook 으로 진단 로그 전송. 익명 (앱 버전 / OS / 메모리 / stack). 사용자 코드 / 파일 내용은 절대 전송 안 함.

✓

AI 추천 레이아웃 + 도시형 (v0.1.41 ~ v0.1.47)

"AI 추천" Smart Pack 알고리즘 — importance(leaf 수) 기준 정렬 + leaf 가 많은 폴더를 다열 그리드로 압축 (최대 5× 압축). 도시형 — 프로젝트 root 중앙 + 4방향 strip 분배.

✓

캐릭터 손/팔 모션 + 30초 trajectory (v0.1.50)

AI / 사용자 작업 시 캐릭터에서 손/팔이 뻗어 나가는 SVG 모션 + action 별 색상 trail (read=cyan, edit=amber, create=green, ...). 30초 동안 궤적 잔존.

✓

2D 60Hz+ 성능 + 엣지/노드 비겹침 (v0.1.42 ~ v0.1.48)

5종 perf 핫스팟 개선 — RAF throttle + hot-edge 인덱스 + events signature 디커플링. 엣지 z-index 노드 아래 + lane 16단계 분포 + 강조 엣지 별도 SVG 오버레이.

✓

우측 서브 사이드바 + 노드 정보 양방향 (v0.1.43 ~ v0.1.45)

메인 사이드바 ↔ 서브 사이드바 양방향 노드 탐색. 작업 추적에서 path 클릭 → 서브 사이드바, 헤더 파일명 클릭 → 메인 사이드바로 승격.

다음에 올 것

🛢

데이터베이스 실시간 감지 시각화

로컬 PostgreSQL / MySQL / SQLite, Supabase / Firestore / MongoDB Atlas 같은 클라우드 DB 의 INSERT · UPDATE · DELETE 가 발생하는 즉시 노드맵 위 해당 테이블에 펄스. 누가 (AI / visitor / 사용자) 어떤 row 를 만들고 수정했는지 캐릭터로 표현. v0.1.53 의 LIVE 토글 위에서 실제 SDK 연동.

🔐

로컬 / 클라우드 DB 직접 접근

연결 정보를 등록하면 ViewWork 가 직접 read-only 쿼리를 실행 — 테이블/컬럼 통계, row 샘플, 외래키 관계, 누락 인덱스 자동 감지. .env 의 DATABASE_URL 을 자동 파싱. 민감 정보는 OS keychain 에만 저장.

📈

시간축 (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 의 동기 / 내부 구조 / 사용 노하우는 블로그 글에서 살펴보세요.

📝 ViewWork — 내가 이 도구를 만든 이유와 사용 방법

왜 ViewWork 인가 · AI 에이전트가 내 코드베이스에서 무엇을 하는지 실제로 보고 싶었던 이유, 그리고 그 결과로 만들어진 도구의 안내. 약 12분 분량.

다운로드

GitHub Releases 에서 최신 빌드 (.exe / .dmg / .AppImage / .deb) 를 무료로 다운로드. 업데이트는 앱 실행 시 자동 확인됩니다.

Windows

macOS 처음 실행 시 "악성 코드가 없음을 확인할 수 없습니다" 경고가 나옵니다

ViewWork 는 현재 Apple Developer ID 로 서명되지 않은 오픈소스 빌드라 macOS Gatekeeper 가 처음 실행 시 차단합니다. 한 번만 아래 두 방법 중 하나로 허용하면 그 후엔 정상 실행됩니다.

1 Finder 에서 우클릭으로 열기 권장

응용프로그램 폴더의 ViewWork.app 우클릭 (또는 control + 클릭)
메뉴에서 열기 선택
다이얼로그에서 열기 다시 클릭 — 1회만 진행하면 됨

2 터미널에서 quarantine 속성 제거

아래 명령을 터미널에서 실행하면 Gatekeeper 가 더 이상 묻지 않습니다.

xattr -d com.apple.quarantine /Applications/ViewWork.app

DMG 를 그냥 더블클릭으로 열어 앱을 직접 실행하는 경우엔 ~/Downloads/ViewWork.app 경로를 사용하세요.

왜 이런 경고가 뜨나요? Apple Developer Program 멤버십($99/년) 으로 서명·공증(notarization) 받으면 경고 없이 실행됩니다. ViewWork 는 비영리 오픈소스라 아직 서명을 적용하지 않았습니다. CI 빌드는 GitHub Actions 의 공개 로그로 검증 가능합니다.

최소 구동사양