감시 모드 + AI 추천 레이아웃 — v0.1.40 ~ v0.1.53 진행 요약
5월 11~12일 이틀 동안 14번의 연속 릴리즈로 ViewWork 의 안정성 / 성능 / 시각 표현을 대폭 개선했습니다. 이 글은 그 기간에 무엇이 추가됐는지 한눈에 정리한 요약입니다.
감시 모드 (v0.1.53)
가장 최근에 추가된, 그리고 가장 강력한 기능입니다. 설정 → 감시 탭에서 "AI / 사용자가 이런 작업을 하면 알림 받고 싶다" 는 규칙을 등록해 두면, 매칭되는 이벤트가 발생할 때마다 우상단에 toast 알림이 떠오릅니다.
알림은 사용자 요청에 따라 다음 정보를 표시합니다:
[EDIT] · 보안 파일 접근 감시 (.env / secrets)
.env.local
변형자: claude-code (ai) · 세션 abc123de
(변경 요약 — Edit 도구의 note 가 있을 때)기본 규칙 4개가 자동으로 추가됩니다 (모두 OFF 상태, 사용자가 켜야 동작):
.env보안 파일 접근 감시- 새 파일 생성 (
create) 감시 - 파일 삭제 (
delete) 감시 - 터미널 명령 실행 (
bash) 감시
각 규칙은 액션 (read / edit / write / create / delete / bash / task / browse / search), 변형자 (all / ai / sub-ai / human / system), path 포함 (substring 매칭) 로 세밀 조정 가능. 같은 (규칙 + agent + path + action) 조합이 5초 내 중복되면 dedup 으로 차단되어 알림 스팸이 없습니다.
AI 추천 레이아웃 (v0.1.47)
기존 horizontal / vertical / city 외에 "AI 추천" Smart Pack 알고리즘을 추가했습니다. 두 가지 핵심 개선:
- importance-first 정렬: 각 폴더의 sub-folder 자식을 leafCount 내림차순으로 정렬 — 큰 서브트리부터 위에. 중요한 게 먼저 보임.
- leaf 다열 그리드 패킹: leaf-only 자식이 많은 폴더 (9개 이상) 를 2~5열 그리드로 압축. 100파일 폴더 → 20행 (5× 압축).
node_modules/.bin, public/images, src/icons
같은 평탄한 파일 더미 폴더에서 극적인 압축 효과. 일반 프로젝트에선 10~30% 압축.
큰 프로젝트도 한 화면에서 구조 파악이 가능해집니다.
캐릭터 손/팔 모션 + Trajectory (v0.1.50)
AI 에이전트나 사용자가 파일을 read / edit / write 할 때, 캐릭터에서 손/팔이 뻗어
나가는 SVG 모션이 표시됩니다. stroke-dasharray
+ stroke-dashoffset 애니메이션으로 source → target 방향으로 path 가
"그려지는" 효과 + drop-shadow 글로우.
액션 별로 trail 색상이 다릅니다:
- 🟦 read — cyan
- 🟧 edit / write — amber
- 🟩 create — green (도착점 burst 효과)
- 🟥 delete — red
- 🟨 bash — yellow
- 🟪 task — purple (sub-agent 호출)
모든 trail 은 30초 TTL 로 자연 페이드 — 사용자가 자리를 비웠다가 돌아와도 직전 작업 흐름을 한눈에 추적할 수 있습니다.
크래시 자동 리포트 (v0.1.38 ~ v0.1.42)
renderer 프로세스 crash / unresponsive (이벤트 루프 정지) / React error boundary / preload 에러 / unhandled exception 등을 자동 감지하여 사용자 동의 시 Discord webhook 으로 진단 로그를 전송합니다.
전송 내용: 앱 버전, OS, 메모리, 에러 메시지, stack trace, scan-diagnostics.log 최근 1MB. 사용자 코드 / 파일 내용은 절대 전송하지 않습니다. consent='unknown' 상태에서 renderer 가 죽으면 main process 가 직접 OS 네이티브 다이얼로그를 띄워 동의 요청.
v0.1.41 부터 자동 전송이 아닌 "진단 로그 전송" 버튼을 사용자가 직접 클릭 하도록 변경. 의도하지 않은 전송 차단.
2D 60Hz 성능 + 시각 정돈 (v0.1.42 ~ v0.1.48)
5000+ 노드 환경에서 2D 모드가 freeze 되는 문제를 4가지 perf 핫스팟에 대한 개선으로 해결:
- Edge highlight effect — RAF throttle + hot-edge 인덱스 (5000 iterations → ~30, 약 160×)
- 모든 엣지 종류
animated: false기본 — SVG dasharray 동시 paint 비용 제거 - AgentAvatars2D — events 배열 대신 length+lastAt signature 만 구독
- useFollowCamera2D — followedAgent null 시 selector 즉시 null 반환
시각적으로도: 엣지를 노드 아래 z-index 로 강제 + lane 16단계 중앙 분포 + 선택 노드 강조 엣지는 별도 SVG 오버레이로 노드 위에 표시 + parent-child 엣지 기본 OFF (folder territory 가 같은 정보 표시).
서브 사이드바 + 노드 정보 양방향 (v0.1.43 ~ v0.1.45)
우측 사이드바 옆에 서브 사이드바가 등장하는 양방향 노드 탐색:
- 메인 사이드바 '노드 정보' 탭에서 관련 노드 클릭 → 서브 사이드바에 표시 (메인 선택 유지)
- 서브 사이드바에서 다른 관련 노드 클릭 → 서브 내용 교체 (chain navigation)
- 서브 헤더의 파일명 클릭 → 메인 사이드바로 승격 + 서브 자동 닫힘
한 화면에서 두 단계 깊이의 노드 탐색이 가능해졌습니다.
3D 라벨 / 폴더 영역 (v0.1.52)
3D 모드에서 줌 아웃 시 파일 / 폴더 이름이 안 보이는 문제 + 폴더 영역 시각화 부족 해결:
- File 라벨
distanceFactor12 → 24 (줌 아웃 시에도 가독) - 디렉토리 라벨 별도 styling —
text-[11px] font-semibold+ accent-glow +/ - 신규 FolderTerritory3D — flat 모드 (horizontal / vertical / city / ai-recommended) 에서 폴더 영역을 반투명 floor plane + wireframe + 좌상단 이름 라벨로 표시. 2D 의 TerritoryNode 와 동등.
- AI 추천 레이아웃도 직각 (orthogonal) 엣지 자동 적용 — leaf grid 격자와 정합.
다음에 올 것
가장 임박한 후속 작업은 외부 서비스 / MCP 실시간 SDK 연동입니다. v0.1.53 에서 LIVE 토글 UI 와 state 저장은 추가됐고, 다음 단계는 Firebase onSnapshot, Supabase realtime channel, Postgres LISTEN/NOTIFY 등의 실제 연결입니다 — 자격증명 보안 검토를 거쳐 OS keychain 통합 후 진행 예정.
그 외에도 시간축 (time scrubber), 팀 협업 모드, 테스트 + 커버리지 라이브, 플러그인 SDK, 지리적 visitor 트래킹 등 — 자세한 항목은 로드맵 페이지 참고.
💡 ViewWork 는 v0.1.37 부터 electron-updater 자동 업데이트를 지원합니다. 기존 사용자는 앱 종료 시 자동으로 최신 버전 (v0.1.53) 으로 업그레이드되므로 별도 다운로드가 필요 없습니다. 새로 설치하시려면 다운로드 페이지 참고.