클로드 코드 /diff 패널 사용법: AI 변경사항 검토 순서
Claude Code 2.1.260 기준으로 /diff 패널을 여는 법과 파일별 변경 확인, git diff·테스트로 이어지는 검토 순서를 설명합니다.
왜 필요한가 · AI가 여러 파일을 빠르게 수정할수록 대화 내용만 읽어서는 실제 코드 변경 범위와 삭제된 줄을 놓치기 쉽기 때문입니다.
누구에게 · Claude Code에 코딩 작업을 맡기면서 터미널을 벗어나지 않고 변경사항을 바로 검토하고 싶은 입문자
읽고 나면 · Claude Code /diff 패널을 열고 파일별 변경을 읽은 뒤 Git 상태와 테스트까지 확인하는 검토 흐름을 만들 수 있습니다.
핵심 요약
- Claude Code 2.1.260은 전체 화면에서 대화 옆에 변경사항을 계속 열어두는 diff 패널을 추가했습니다.
- 코드가 바뀌면 패널에서 추가·삭제 줄과 파일별 변경량을 보고, /diff로 패널을 숨기거나 다시 열 수 있습니다.
- 패널은 빠른 시각 검토에 유용하지만, 커밋 전에는 git status·git diff·테스트로 변경 범위와 동작을 다시 확인해야 합니다.
- 이번 실습은 Linux, tmux, Claude Code 2.1.260, 임시 Git 저장소에서 진행했습니다.
Claude Code에 코딩 작업을 맡기다 보면 프롬프트보다 더 자주 확인해야 할 것이 생깁니다. 바로 AI가 실제로 바꾼 코드입니다. Claude가 “수정을 완료했다”고 설명해도 어느 파일에서 몇 줄이 삭제됐는지, 요청하지 않은 변화가 섞였는지는 대화만으로 알기 어렵습니다.
Claude Code 2.1.260에는 전체 화면에서 대화와 변경사항을 나란히 보여주는 /diff 패널이 추가됐습니다.[1] diff는 변경 전후 코드를 비교해 무엇이 추가되고 삭제됐는지 보여주는 화면입니다. 작업 흐름을 끊지 않고 AI 변경사항을 바로 검토할 수 있습니다. 이 글에서는 업데이트와 전체 화면 설정, 파일별 diff 읽는 법, Git 명령과 테스트로 마무리하는 순서까지 실제 실행 기준으로 정리합니다.
/diff 패널이 필요한 이유
기존에도 Claude Code에서 /diff 명령을 실행하면 Git 변경사항과 턴별 변경을 보는 대화형 화면이 열렸습니다. 2.1.260에서 새로 들어온 부분은 전체 화면 대화 옆에 패널을 계속 열어두는 좌우 분할 방식입니다.[1][2]
왼쪽에는 Claude와 나눈 대화와 도구 실행 결과가 남고, 오른쪽에는 현재 변경 파일과 추가·삭제된 줄이 표시됩니다. Claude가 코드를 고치는 동안 같은 화면에서 다음 세 가지를 바로 볼 수 있습니다.
- 요청하지 않은 파일까지 바뀌었는지
- 기존 코드가 삭제되거나 조건이 느슨해지지 않았는지
- 설명한 작업과 실제 코드가 같은 방향인지
코드를 완벽하게 읽지 못해도 파일명, 변경 줄 수, 빨간 삭제 줄과 초록 추가 줄부터 비교하면 검토를 시작할 수 있습니다. AI 결과물을 검토하는 기본 기준은 AI가 만든 코드를 그대로 믿지 않는 습관에서 먼저 정리했습니다.
버전과 실습 환경
이번 실습은 운영 중인 프로젝트가 아닌 임시 Git 저장소에서 진행했습니다.
| 항목 | 확인 환경 |
|---|---|
| 운영체제 | Linux |
| 터미널 구성 | tmux 고정 크기 세션 |
| Claude Code | 2.1.260 |
| 저장소 | 샘플 JavaScript 파일이 있는 임시 Git 저장소 |
| 검토 대상 | cart.js 1개 파일, +11 / -1 |
먼저 설치 버전을 확인합니다.
claude --version
이번 환경에서 출력된 버전은 2.1.260 (Claude Code)입니다.
Claude Code 2.1.260 실제 터미널 캡처. 이미지를 누르면 원본 크기로 볼 수 있습니다.
2.1.260보다 낮은 버전이 보이면 Claude Code 세션을 닫고 다음 순서로 업데이트합니다.
claude update
claude --version
업데이트했는데도 예전 버전이 계속 나온다면 실행 파일이 여러 개 설치됐는지 확인합니다.
command -v claude
type -a claude
command -v는 지금 실행되는 경로를, type -a는 셸이 찾은 같은 이름의 실행 경로를 보여줍니다. 업데이트한 파일과 실제로 실행되는 파일이 다르면 최신 기능이 보이지 않을 수 있습니다.
전체 화면 모드 준비
좌우 분할 패널은 Claude Code의 전체 화면 렌더링에서 동작합니다. 여기서 전체 화면은 터미널 창을 모니터 가득 키운다는 뜻이 아닙니다. vim이나 htop처럼 터미널의 대체 화면 버퍼를 사용하는 TUI 렌더링 모드입니다.[3]
Claude Code 세션 안에서 다음 명령을 입력합니다.
/tui fullscreen
현재 대화는 유지된 채 전체 화면 렌더링으로 다시 열립니다. 원래 방식으로 돌아가려면 /tui default, 현재 모드를 확인하려면 /tui를 사용합니다.[3]
/tui
/tui default
공식 문서 기준 전체 화면 렌더링은 아직 research preview입니다.[3] 버전에 따라 단축키와 화면 구성이 바뀔 수 있으므로, 이 글은 2.1.260을 기준으로 봐야 합니다.
클로드 코드 /diff 패널 사용법
작은 변경부터 요청
패널의 역할을 확인하기 쉽도록 한 파일만 수정하는 요청부터 시작합니다.
cart.js에서 잘못된 상품과 수량을 제외하도록
calculateTotal 함수를 수정해줘.
함수 위에는 짧은 설명 주석을 추가해줘.
이번 실습에서는 Claude가 cart.js를 수정하자 오른쪽 패널에 1 file changed +11 -1이 표시됐습니다. 왼쪽 대화에는 수정 과정이, 오른쪽에는 실제 파일 diff가 함께 남았습니다.
Claude Code 2.1.260 실제 /diff 터미널 캡처. 작은 화면에서는 이미지를 눌러 원본으로 확인할 수 있습니다.
패널을 숨기거나 다시 열 때는 같은 명령을 사용합니다.
/diff
하단 안내가 /diff to hide diff로 보이면 패널이 열린 상태입니다. 다시 /diff를 입력하면 대화 화면만 남고, 한 번 더 입력하면 오른쪽 패널이 나타납니다.
파일과 변경 묶음 이동
공식 단축키는 현재 Git diff와 대화 턴별 diff를 오가도록 구성돼 있습니다.[2]
| 키 | 동작 |
|---|---|
← / → | 현재 Git 변경과 개별 대화 턴의 변경 사이 이동 |
↑ / ↓ | 파일 목록에서는 파일 이동, 상세 diff에서는 줄 단위 스크롤 |
Enter | 선택한 파일의 상세 diff 열기 |
Page Up / Page Down | 상세 diff를 페이지 단위로 이동 |
Esc | 상세 보기에서 파일 목록으로 돌아가기 |
파일이 많을 때는 오른쪽 패널 상단의 전체 변경량부터 봅니다. 예상보다 파일 수가 많다면 세부 코드를 읽기 전에 Claude에게 변경 범위를 다시 설명하게 하는 편이 빠릅니다.
현재 변경된 파일을 목적별로 나누고,
내 요청과 직접 관련 없는 파일이 있는지 먼저 알려줘.
패널에서 먼저 볼 세 가지
파일 범위
요청은 한 파일이었는데 설정 파일, 잠금 파일, 문서까지 함께 바뀌었다면 이유를 확인합니다. 의존성을 설치하면 lock 파일이 바뀔 수 있지만, 설명 없이 변경 범위가 넓어졌다면 이유부터 확인합니다.
git status --short
git status --short의 앞 두 칸은 각각 인덱스와 작업 트리 상태를 나타냅니다. M은 수정, A는 추가, D는 삭제이며 새 미추적 파일은 ??로 표시됩니다. 이 목록과 /diff 패널의 파일 목록이 예상 범위인지 비교합니다.
삭제된 코드
초록색 추가 줄보다 빨간색 삭제 줄을 먼저 보는 습관이 유용합니다. 입력 검증을 넣는 과정에서 기존 예외 처리나 로그가 사라질 수도 있습니다. 삭제 이유가 분명하지 않으면 바로 되묻습니다.
삭제한 각 코드 블록의 역할과 삭제 이유를 설명해줘.
기존 동작이 사라지는 부분이 있으면 수정하지 말고 알려줘.
설명과 실제 구현
Claude의 완료 설명에는 “잘못된 수량을 제외한다”고 적혀 있어도, 실제 조건이 quantity <= 0인지 quantity < 0인지에 따라 0 처리 결과가 달라집니다. 완료 요약과 diff의 실제 조건식이 서로 맞는지 확인해야 합니다.
💡 Tip
완료 메시지를 먼저 읽으면 이미 작업이 맞다는 쪽으로 생각하기 쉽습니다. 저는 오른쪽 diff에서 파일 수와 삭제 줄을 먼저 보고, 그다음 왼쪽 설명을 읽는 순서가 더 편했습니다.
/diff 패널과 git diff의 차이
/diff 패널은 Claude와 대화하면서 변화를 빠르게 보는 화면이고, Git 명령은 커밋할 실제 범위를 다시 확인하는 기준입니다. 둘 중 하나를 고르는 관계가 아닙니다.
| 확인 도구 | 잘하는 일 | 놓치기 쉬운 부분 |
|---|---|---|
Claude Code /diff 패널 | 대화 옆에서 파일별 추가·삭제를 계속 확인 | 화면만 보고 테스트 성공이나 커밋 범위까지 알 수 없음 |
git status --short | 수정·추가·삭제 파일 범위 확인 | 코드 내용은 보이지 않음 |
git diff | 스테이징 전 변경 내용 확인 | 이미 스테이징한 변경은 별도 명령 필요 |
git diff --staged | 커밋 대기 중인 변경 내용 확인 | 실행 결과와 기능 동작은 검증하지 않음 |
| 테스트·빌드 | 코드가 실제로 동작하는지 확인 | 요구사항과 다른 구현도 테스트가 부족하면 통과 가능 |
공식 문서는 /diff 화면이 Git의 사용자 정의 diff 드라이버나 textconv 출력 대신 저장소의 원본 blob 내용을 기준으로 diff를 계산한다고 설명합니다.[2] 이미지나 특수 파일처럼 별도 diff 도구를 쓰는 저장소라면 터미널의 git diff 결과와 표현이 다를 수 있습니다.
이번 2.1.260 실습에서는 cart.js를 git add한 뒤에도 오른쪽 패널에 1 file changed +11 -1이 남아 있었습니다. 다만 이것만 보고 스테이징 상태를 판단하지 않고, 다음 두 명령으로 나눠 확인하는 편이 명확합니다.
git diff
git diff --staged
커밋 전 검토 순서
Claude가 수정을 끝냈다면 다음 순서로 마무리합니다.
1. 파일 목록 확인
git status --short
예상하지 않은 파일이 있으면 즉시 멈추고 생성 이유를 확인합니다. 삭제된 파일이나 새 바이너리 파일은 특히 따로 봅니다.
2. 코드 변경 읽기
git diff
git diff --check
첫 명령은 실제 패치를 보여주고, 두 번째 명령은 공백 오류나 충돌 표식 같은 기본 문제를 찾습니다. /diff 패널에서 눈에 띈 조건식과 삭제 줄이 터미널 diff에도 같은지 확인합니다.
3. 테스트와 빌드 실행
프로젝트에 정의된 명령을 사용합니다.
npm test
npm run build
모든 프로젝트가 같은 명령을 쓰는 것은 아닙니다. package.json, README, CI 설정을 먼저 보고 실제 저장소에 맞는 검증 명령을 선택합니다.
4. 스테이징 후 마지막 확인
git add cart.js
git diff --staged
실제 작업에서는 cart.js 대신 검토를 마친 파일명을 입력합니다. git add .로 한꺼번에 올리기보다 검토한 파일을 지정하면 임시 파일이나 로그가 커밋에 섞일 가능성이 줄어듭니다. Git 설치와 초기 설정부터 필요하다면 Git 처음 설정하기: 이름·이메일·기본 브랜치·SSH 키를 먼저 확인합니다.
보이지 않을 때 확인할 것
버전은 최신인데 패널이 없음
claude --version이 2.1.260 이상인지 확인한 뒤 Claude Code 안에서 /tui fullscreen을 실행합니다. 터미널 창을 최대화하는 것만으로는 모드가 바뀌지 않습니다.
화면 읽기 모드를 사용하면 일반 세션은 클래식 렌더러로 동작합니다. 일반 tmux 세션은 지원하지만 iTerm2의 tmux integration 모드인 tmux -CC는 전체 화면 렌더링과 호환되지 않습니다.[3]
오른쪽 코드가 너무 좁음
패널은 대화와 diff가 같은 터미널 폭을 나눠 사용합니다. 긴 코드가 많이 줄바꿈되면 터미널 폭을 넓히거나, /diff로 패널을 닫은 뒤 필요할 때 상세 화면을 확인합니다.
Git 변경과 표현이 다름
저장소가 사용자 정의 diff 드라이버나 textconv를 사용한다면 Claude Code 화면과 git diff 표현이 다를 수 있습니다.[2] 이때는 프로젝트가 원래 쓰던 Git 명령과 전용 비교 도구를 최종 기준으로 둡니다.
변경이 갱신되지 않음
현재 공식 문서는 열린 /diff 화면의 Git 상태 자동 새로고침에 Claude Code 2.1.198 이상이 필요하다고 안내합니다.[2] 그보다 낮은 버전이라면 업데이트하고, 현재 세션의 /diff 화면을 다시 엽니다.
검토 체크리스트
Claude Code 변경사항 확인 순서
/diff패널에서 변경 파일 수와 삭제 줄부터 확인git status --short와git diff로 실제 범위 확인- 프로젝트 테스트와 빌드 통과 확인
- 검토한 파일만 선택해 스테이징
/diff에서 Git 검증까지
Claude Code /diff 패널의 장점은 별도 창을 오가지 않고 AI 변경사항을 대화와 함께 계속 볼 수 있다는 점입니다. 파일 수와 삭제 줄을 먼저 보면 완료 설명만 읽을 때보다 이상한 변화를 빠르게 발견할 수 있습니다.
패널은 변경을 발견하는 화면이고, Git과 테스트는 커밋해도 되는지 판단하는 기준입니다. 이 순서를 습관으로 만들면 Claude에게 더 많은 작업을 맡기면서도 사람이 판단할 지점을 놓치지 않게 됩니다.
참고 자료
[1] https://github.com/anthropics/claude-code/releases/tag/v2.1.260 — Claude Code v2.1.260 release [2] https://code.claude.com/docs/en/commands — Claude Code commands [3] https://code.claude.com/docs/en/fullscreen — Claude Code fullscreen rendering
자주 묻는 질문
- Claude Code /diff 패널은 어떤 버전부터 사용할 수 있나요?
- 대화 옆에 계속 열어두는 전체 화면 diff 패널은 Claude Code 2.1.260에 추가됐습니다. 기존 /diff 명령 자체는 이전 버전에도 있었으므로, 이 글에서 설명하는 좌우 분할 화면을 쓰려면 2.1.260 이상인지 확인합니다.
- /diff를 입력해도 좌우 패널이 보이지 않는 이유는 무엇인가요?
- 먼저 claude --version으로 2.1.260 이상인지 확인하고, Claude Code에서 /tui fullscreen을 실행합니다. 전체 화면 렌더링은 터미널 창 최대화가 아니라 별도의 TUI 렌더링 모드입니다.
- /diff 패널만 확인하면 바로 커밋해도 되나요?
- 아닙니다. 패널은 변경을 빠르게 훑는 화면입니다. git status --short로 파일 범위를 확인하고, git diff와 git diff --staged로 실제 패치를 읽은 뒤 프로젝트 테스트와 빌드를 실행하는 편이 안전합니다.
- 이미 git add한 파일도 /diff 패널에서 보이나요?
- 이번 Claude Code 2.1.260 실습에서는 cart.js를 git add한 뒤에도 변경 파일과 추가·삭제 줄이 패널에 남았습니다. 버전과 저장소 상태에 따라 달라질 수 있으므로 최종 확인은 git diff와 git diff --staged를 함께 사용합니다.
이 글은 입문자 기준으로 이해하기 쉽게 정리했으며, 내용은 운영 과정에서 순차적으로 보완될 수 있습니다. 환경에 따라 화면이나 명령이 다르게 보일 수 있으니, 막히는 부분이 있으면 isense2021@gmail.com 로 알려주세요.

