Code Recorder — VS Code

코드 작성 과정을 녹화하고 브라우저에서 파일별·단계별로 다시 볼 수 있는 도구입니다. 화면 동영상 대신 텍스트 변경과 파일 전환을 기록합니다.

사용법

1. 프로젝트를 열고 상태 표시줄의 코드 녹화를 누릅니다. 또는 탐색기에서 폴더를 우클릭 → 녹화 시작.
2. 녹화할 프로젝트/폴더를 선택하고 평소처럼 코드를 작성합니다.
3. 상태 표시줄의 녹화 중 · 종료를 눌러 .coderec.json 파일을 저장합니다.
4. 명령 팔레트에서 Code Recorder: 뷰어 저장으로 뷰어를 저장합니다.
5. 뷰어의 index.html을 브라우저에서 열고 녹화 파일을 선택합니다. 별도 서버가 필요 없습니다.

파일명: vscode-프로젝트명-20260926-133159.coderec.json

기록 내용

• 저장하지 않은 편집, 붙여넣기, 실행 취소/다시 실행, 포맷 결과
• 파일 전환, 파일 생성·삭제·이동
• 녹화를 시작할 때의 코드와 이후 변경 (기존 code-recorder JSON v2 호환)
• 별도 복구 기록. 종료 후 저장을 취소하거나 창을 닫은 경우 보관된 녹화 복구 / 다시 내보내기에서 저장할 수 있습니다.

명령 팔레트의 Code Recorder: 녹화 설정에서 제외할 이름과 확장자를 변경할 수 있습니다. 설정 변경은 다음 녹화부터 적용합니다. 기본적으로 숨김 경로, node_modules, 빌드 산출물은 제외합니다. 파일당 2MB, 초기 코드 64MB/5,000개 제한이 있습니다.

뷰어

자동/단계별 보기, 8단계 속도, 파일 전환 안내와 전후 대기, 시간 표시, 파일별 타임라인 색상, 200px 스크롤 여유, 드래그 가능한 탐색기 경계를 제공합니다. 설정과 경계 위치는 브라우저 localStorage에 저장합니다.

지원 범위

VS Code 데스크톱의 로컬 텍스트 파일 프로젝트를 대상으로 합니다. 여러 작업 공간 폴더 중 녹화할 폴더 하나를 선택합니다. 아직 파일로 저장하지 않은 Untitled 문서, 노트북 셀, vscode.dev, 원격/가상 작업 공간은 이번 버전의 지원 대상이 아닙니다. JDK는 필요하지 않습니다. 외부 도구가 옮긴 파일은 삭제·생성으로 기록될 수 있습니다.

VSIX 설치

VS Code 확장 화면 → … → VSIX에서 설치… → 제공된 .vsix 선택. 별도의 실행 스크립트나 전역 설정 변경은 필요 없습니다.

데이터

녹화 내용은 로컬 복구 기록과 사용자가 지정한 내보내기 파일에 저장됩니다. 확장은 녹화 내용을 네트워크로 보내거나 원격 분석을 수집하지 않습니다. 시작 코드 전체와 삭제한 코드도 녹화에 포함되므로 공유 전 내용을 확인하세요. 복구 기록은 VS Code의 확장 globalStorage 폴더에 보관됩니다.

Microsoft의 공식 확장이 아닙니다. VS Code는 Microsoft의 제품입니다.