Claude Code용 실시간 파일 트리 도구 제작 (무료, 오픈 소스)
I built a live file tree for Claude Code so I can see what it reads and edits (free, open source)
핵심 요약
Claude Code 작업 시 읽기/수정 파일을 실시간으로 시각화해 주는 오픈 소스 플러그인을 개발했습니다.
- 실시간 시각화 — Claude가 읽는 파일은 보라색, 수정하는 파일은 주황색으로 표시함
- 작업 추적 — 현재 Claude가 수행 중인 작업과 파일 변경 사항을 실시간으로 확인 가능
- 다중 환경 지원 — macOS와 Linux의 데스크톱 앱, VS Code 확장 프로그램, 터미널에서 작동함
- 오픈 소스 — MIT 라이선스로 배포되며 터미널 명령어로 간편하게 설치 가능
왜 만들었냐고?
예전엔 하루 종일 코드 에디터만 붙잡고 살았는데, 요즘은 Claude 앱이랑 CLI에서 보내는 시간이 훨씬 많아졌어. 그러다 보니 코드베이스랑 점점 멀어지는 느낌이 들더라고. 어떤 파일이 바뀌었는지, 뭐가 커밋됐는지, 이상한 패턴이 슬금슬금 기어 들어오진 않는지 감이 안 잡히는 거지.
뭐 하는 놈이냐고?
채팅창 옆에 붙어서 Claude가 일할 때마다 실시간으로 업데이트되는 창이야.
-
Claude가 읽은 파일은 보라색, 수정한 파일은 주황색으로 표시되고, 추가되거나 삭제된 줄도 다 보여줌
-
이번 턴이나 세션에서 건드린 모든 파일이랑, 커밋된 건지 아닌지도 확인 가능
-
지금 Claude가 뭘 하고 있는지 보여주는 카드도 있음
-
검색 기능은 기본이고, 각 파일 옆에 있는 ⋯ 메뉴 누르면 @-mention으로 호출해서 "이 함수 설명 좀"이라고 물어보거나, diff 확인, 에디터로 바로 열기도 가능함
macOS랑 Linux에서 돌아가고, 데스크톱 앱, VS Code 확장 프로그램, 터미널 다 지원해. 읽기 전용이라 네 컴퓨터 밖으로 데이터가 나갈 일은 절대 없음.
Claude Code로 어떻게 만들었냐고?
이거 전체를 Claude Code로 만들었어. 채팅창 옆에 이 패널을 계속 띄워놓고 작업했으니까, Claude가 자기 코드를 직접 수정하는 걸 실시간으로 지켜본 셈이지. 내가 원하는 걸 말하면 Claude가 패널에서 변경 사항을 확인하고, 코드 짜고 테스트까지 다 했어.
버그 하나 잡으면서 배운 게 있는데, 공유할 만한 내용이라 적어둘게. 터미널에서 파일 타입 라벨이 색깔 꽉 찬 블록으로 뜨는 문제가 있었거든. Claude가 원인을 찾아보니까 색상 값 때문이었어. 투명도 값이 들어가 있었는데, 데스크톱 앱은 이걸 알아서 처리하지만 터미널은 그냥 꽉 찬 색으로 그려버리더라고. 그래서 라벨이 자기 색깔 블록 안에 갇혀버린 거지. Claude가 터미널에 투명도 들어간 색상 전달되면 바로 실패하는 테스트 코드를 짜고, 그게 통과할 때까지 패널을 수정했어. 혹시 여러 환경에서 돌아가는 Claude Code 모드를 만들 생각이라면, 환경별로 따로 테스트해 봐. 데스크톱에서 잘 보인다고 터미널에서도 잘 나온다는 보장은 없거든.
무료로 써봐
무료고 오픈소스(MIT)야. 터미널에서 이렇게 설치하면 돼:
claude plugin marketplace add Marius-Adam/claude-files-pane
claude plugin install files-pane@marius-adam
Claude Code 재시작하면 채팅창 옆에 패널이 뜰 거야.
https://github.com/Marius-Adam/claude-files-pane
나보다 더 큰 규모의 작업을 하는 사람들은 이거 써보고 어떤지 좀 알려줘. 궁금하네.