ViewWork · 데스크톱 앱

코드베이스를
실시간으로 관측합니다

ViewWork 는 디렉토리 구조와 참조 관계를 하나의 방사형 그래프로 그리고, 그 위에서 AI 에이전트(Claude Code · Codex · Copilot)가 무엇을 읽고 고치는지, 어떤 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 가 동작하는 모습.

3D 노드맵 + AI 에이전트 캐릭터
3D 씬에서 AI 에이전트 캐릭터가 파일 노드 위에서 작업하는 모습
2D React Flow 그래프 + cloud / MCP 노드
2D 그래프에서 MCP / 클라우드 / 외부 활동 가상 노드 통합 표시
사이드바 — AI 작업 추적 + 라이브 트래픽
사이드바 — 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 코딩 에이전트와 사용자 IDE 의 활동을 실시간으로 표시하는 데스크톱 앱입니다. Windows · macOS · Linux 를 지원하며 무료입니다.

어떤 AI 에이전트를 추적할 수 있나요?

Claude Code, OpenAI Codex, GitHub Copilot 의 세션 기록을 읽어 어떤 파일을 읽고 편집했는지, 어떤 URL 을 탐색했는지 표시합니다. 별도 계정 연동 없이 이미 설치된 CLI 의 세션 파일을 그대로 사용합니다.

온톨로지 그래프뷰는 무엇을 보여주나요?

중심에 프로젝트 루트를 두고 디렉토리 계층을 동심 링으로, 파일 사이의 참조 관계를 각도 근접으로 배치하는 방사형 그래프입니다. Supabase 나 MCP 서버 같은 외부 서비스는 바깥 궤도에서 각자의 위성계로 표시됩니다.

소스 코드가 외부로 전송되나요?

아닙니다. 디렉토리 분석과 활동 추적은 모두 사용자의 컴퓨터 안에서 이루어집니다.

다운로드

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

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

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

1 Finder 에서 우클릭으로 열기 권장
  1. 응용프로그램 폴더의 ViewWork.app 우클릭 (또는 control + 클릭)
  2. 메뉴에서 열기 선택
  3. 다이얼로그에서 열기 다시 클릭 — 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 의 공개 로그로 검증 가능합니다.

최소 구동사양

Windows
  • OS: Windows 10 (1809 이상) / Windows 11
  • CPU: 64-bit (x64)
  • RAM: 최소 4 GB · 5000+ 노드 프로젝트는 8 GB 권장
  • 디스크: 약 250 MB
  • GPU: 통합 그래픽 (Intel UHD 이상) · 3D 모드 부드러움 위해 외장 GPU 권장
macOS
  • OS: macOS 10.15 Catalina 이상
  • Apple Silicon: M1 / M2 / M3 / M4 모두 지원 (macOS 11.0+ 권장)
  • Intel Mac: macOS 10.15 ~ 14.x (Catalina ~ Sonoma)
  • RAM: 최소 4 GB · 8 GB 이상 권장
  • 디스크: 약 280 MB
Linux
  • 배포판: Ubuntu 20.04+ · Debian 11+ · Fedora 33+ · Arch (rolling)
  • 커널 / glibc: 64-bit, glibc 2.28+
  • CPU: x64 (AppImage / deb 모두)
  • RAM: 최소 4 GB · 8 GB 이상 권장
  • 의존성: libgtk-3, libnss3, libasound2 (대부분 distro 기본)

네트워크는 자동 업데이트와 외부 서비스(GitHub / Plausible / AI provider) 호출 시에만 필요합니다. 오프라인 모드에서도 디렉토리 분석·시각화는 정상 동작합니다.

🔌 AI 에이전트와 채팅 통합 (v0.1.64+)

활동 목록에서 추적 중인 AI 에이전트를 클릭하면 ViewWork 의 작업 추적 패널 안 'AI 채팅' 탭이 그 에이전트와 매칭되는 provider 로 자동 전환됩니다. 통합 방식은 3가지:

즉시 사용 가능

① CLI 브리지

ViewWork 가 claude / codex / ollama CLI 를 subprocess 로 spawn 해서 사용자 메시지를 stdin 또는 인자로 전달. stdout 응답을 채팅 bubble 로 표시.

  • Claude Code: claude -p "<prompt>" — 사용자 머신에 Claude Code CLI 설치 필요
  • Codex: codex exec (stdin)
  • Ollama 로컬: ollama run llama3 (stdin)

ViewWork > 작업 추적 탭 > AI 채팅 > "Claude Code (CLI · 추천)" preset 추가.

즉시 사용 가능

② MCP 서버 (역방향)

ViewWork 가 자체 MCP (Model Context Protocol) 서버를 노출 (v0.1.64+) — Claude Code 가 ViewWork 의 그래프 / 활동 / 외부 서비스 / 추적 세션 데이터를 도구로 직접 조회.

노출 도구 6개:

  • viewwork_get_project_info — 프로젝트 기본 정보
  • viewwork_get_project_graph — 파일/엣지 그래프
  • viewwork_get_recent_activity — 최근 파일 활동
  • viewwork_get_external_services — 감지된 외부 서비스
  • viewwork_get_session_summary — 추적 중 에이전트 세션
  • viewwork_search_files — 프로젝트 파일 검색

설치: ViewWork 앱 > 설정 > MCP 탭 > ".mcp.json 템플릿 복사" 버튼 클릭 → Claude Code 의 프로젝트 root .mcp.json 에 붙여넣기 → Claude 재시작.

미정

③ VS Code 확장

VS Code GitHub Copilot 의 세션 직접 통합은 Microsoft 측 API 제한으로 외부 앱에서 불가능. 별도 ViewWork 확장 프로그램(viewwork-vscode) 으로 양방향 메시지 전달 — 추후 release 예정.

대안: Copilot Chat 의 응답을 사용자가 수동 복사 → ViewWork CLI 채팅에 입력 (현재 가능).

보안: API 키와 CLI 명령은 사용자 머신의 localStorage 에만 저장됩니다. ViewWork 의 서버나 외부로 전송되지 않습니다 — main process 가 단발 fetch / spawn 후 즉시 GC.

소스 코드: github.com/gugu9999gu/ViewWork-releases · README · 패치 노트