Claude Code가 읽고 편집하는 내용을 볼 수 있는 라이브 파일 트리 제작기 (무료, 오픈 소스)

제가 이것을 만든 이유
저는 예전에는 하루 대부분을 코드 에디터에서 보냈습니다. 최근에는 Claude 앱과 명령줄 인터페이스(CLI)를 점점 더 많이 사용하게 되었고, 그 결과 코드를 기반으로 하는 전체 구조에 대한 감각을 잃어가기 시작했습니다. 어떤 파일이 변경되었는지, 무엇이 커밋되었는지, 새로운 패턴이 스며들고 있는지 등을 알 수 없었습니다.

무엇을 하는가
Claude가 작업하는 동안 업데이트되는 채팅 옆의 패널입니다: Claude가 읽는 파일은 보라색으로, 편집하는 파일은 주황색으로 표시되며 추가되거나 제거된 줄들이 나타납니다. 이번 턴 또는 이 세션에서 건드려진 모든 파일과 커밋된 것 vs. 아직 커밋되지 않은 것을 보여줍니다.

기능
Claude가 현재 무엇을 하고 있는지 보여주는 카드, 그리고 각 파일에 있는 검색 기능 및 '⋯' 메뉴를 통해 해당 파일을 @-멘션(예: “이 새로운 함수를 설명해 줘”)하거나, diff(차이점)를 보거나, 에디터에서 열 수 있습니다.

작동 환경
데스크톱 앱, VS Code 확장 프로그램, 터미널에서 macOS와 Linux 모두 작동합니다. 읽기 전용이며, 아무것도 사용자의 기기를 벗어나지 않습니다.

Claude Code로 어떻게 만들었나
저는 이 전체 것을 Claude Code를 사용하여 만들었습니다. 패널을 채팅 옆에 항상 열어두고, Claude가 자체 코드를 작업하는 모습을 보여주도록 했습니다. 제가 원하는 바를 설명하고 패널의 각 변경 사항을 확인하면서, Claude는 코드와 테스트를 작성했습니다.

한 버그 덕분에 전수할 만한 교훈을 얻었습니다. 터미널에서 파일 유형 레이블은 단색 블록으로 표시되었습니다. Claude가 이를 색상 문제로 추적했고: 이 색상은 투명도 값(transparency value)을 가지고 있었는데, 데스크톱 앱에서는 이것이 혼합되어 보이지만 터미널에서는 단색으로 그려지기 때문에 각 레이블이 자체 색상의 블록 안에 놓이는 것이었습니다. Claude는 만약 터미널에 반투명한 색상이 전달될 경우 실패하는 테스트를 작성했고, 그 후 패널을 수정하여 이 테스트를 통과시켰습니다.

팁
만약 여러 표면(surface)에 대해 Claude Code 모드를 구축한다면, 각 표면별로 개별 테스트를 수행하세요. 데스크톱에서 올바르게 보이는 것이 터미널에서는 오작동할 수 있습니다.

사용 방법
무료이며 오픈 소스입니다 (MIT). 다음 명령어로 설치합니다:
claude plugin marketplace add Marius-Adam/claude-files-pane<br>claude plugin install files-pane@marius-adam<br><br>Claude Code를 재시작하면 패널이 채팅 옆에 열립니다.

https://github.com/Marius-Adam/claude-files-pane 저보다 더 광범위한 변경 작업을 하신다면, 이 코드가 어떻게 작동하는지 알려주시면 좋겠습니다. /u/mCadamek 님이 제출했습니다. [링크] [댓글]