대시보드와 사이드 패널을 위한 Claude Code 패널 모드

Claude Code 패널 모드는 대화 옆에 패널을 열고 Claude가 작업하는 동안 내용을 계속 최신 상태로 유지합니다. 커밋되지 않은 변경 사항의 실시간 diff, 테스트 결과 대시보드, 로그 tail, 세션 동안의 토큰 사용량 차트 등이 대표적인 용도입니다. 상태 표시줄과 달리 패널에는 표, 목록, 버튼을 넣을 공간이 있습니다.

Claude Code 패널 모드는 어떻게 작동하나요?#

모드는 $.ui.open(...)으로 패널을 열고, Pane 렌더 사이트에 대한 ui.render를 처리해 내용을 그립니다. 패널 안의 화면은 Box, Text, Markdown, Code, Button, Input, Select 같은 요소로 구성하며, 이 요소들은 모두 $.ui.resolve(e)에서 가져옵니다. 버튼을 누르거나 입력란에 입력하면 모드는 ui.press, ui.input, ui.select를 받습니다. ui.close는 패널이 닫히기 직전에 발생하며, $.ui.panes()는 현재 열려 있는 패널을 나열합니다.

대부분의 패널은 모드가 $.command.register로 추가한 슬래시 명령에서 열리며, 데이터를 $.state에 보관하므로 데이터가 바뀌면 화면이 자동으로 다시 그려집니다. Claude Code 자체의 /diff 명령도 이런 방식으로 만든 기본 제공 모드입니다. 모든 요소는 인터페이스 문서에 설명되어 있습니다.

설치하기 전에 무엇을 확인해야 하나요?#

패널 모드에는 거의 항상 UI 변경이 표시되고, 명령어/도구 추가도 자주 함께 표시됩니다. 중요한 것은 데이터가 어디에서 오느냐입니다. diff 패널에는 git을 위한 명령어 실행이 필요합니다. 로그나 지표 대시보드에는 파일 읽기나 네트워크가 필요할 수 있습니다. 패널이 Client 요소를 렌더링한다면 패널 안에서 웹 콘텐츠를 실행하는 것이므로, 소스를 읽어 무엇을 불러오는지 확인하시기 바랍니다.

지원 환경도 확인하십시오. 패널은 터미널과 데스크톱 Code 탭에서 작동하지만, claude -p, VS Code 확장의 채팅 패널, Agent SDK에서는 그려지지 않습니다. 이런 환경에서는 모드가 훅만 실행합니다.

패널이 적합하지 않은 경우는 언제인가요?#

숫자 하나만 필요하다면 상태 표시줄이나 프롬프트 위의 밴드가 화면 공간을 덜 차지합니다. 무언가 끝났을 때 알림만 받으면 된다면 토스트가 더 낫습니다. 패널은 그렇지 않았다면 Claude Code 옆에 두 번째 터미널을 열어 두었을 상황, 예를 들어 git diff를 반복해서 실행하거나 테스트 러너를 지켜봐야 할 때 공간을 차지할 가치가 있습니다.