Notice

[팁]주옥같은 안드로이드 팁

Recent Posts

Recent Comments

Link

« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

오늘도 공부

Claude Code 세션을 녹화한 비디오처럼 Replay로 다시 돌려보자? 본문

Claude Code 세션을 녹화한 비디오처럼 Replay로 다시 돌려보자?

행복한 수지아빠 2026. 3. 7. 10:30

AI 기반 개발 도구가 점점 많아지면서 AI와 함께 진행한 개발 과정을 공유하는 것이 중요해지고 있습니다.
하지만 대부분의 경우 AI와의 대화 기록은 로그 형태로 남기 때문에, 다른 사람에게 보여주기 어렵습니다.

이번 글에서는 Claude Code 세션 로그를 인터랙티브하게 재생할 수 있는 HTML로 변환해주는 CLI 도구
Claude Replay를 소개합니다.

GitHub - es617/claude-replay: Community tool to convert Claude Code session transcripts into self-contained, embeddable HTML rep

Community tool to convert Claude Code session transcripts into self-contained, embeddable HTML replays - es617/claude-replay

github.com

프로젝트 소개

Claude Replay는 Claude Code의 세션 로그를 인터랙티브 HTML 리플레이로 변환하는 오픈소스 CLI 도구입니다. (GitHub)

Claude Code는 개발 과정에서 다음과 같은 정보를 로컬 로그(JSONL)로 저장합니다.

사용자 프롬프트
Claude의 응답
tool 호출
tool 실행 결과
thinking block
timestamp

이 모든 기록은 일반적으로 다음 위치에 저장됩니다.

~/.claude/projects/

Claude Replay는 이 JSONL 로그를 읽어 AI와 함께 진행한 개발 세션을 “영상처럼 재생 가능한 HTML”로 변환합니다. (GitHub)

결과물은 다음 특징을 가집니다.

단일 HTML 파일
외부 dependency 없음
이메일 / 블로그 / 문서에 바로 삽입 가능

즉,

AI와 함께 코딩한 과정을 “재생 가능한 형태로 공유”할 수 있는 도구입니다.

왜 이 프로젝트가 등장했을까

AI 코딩 도구가 보편화되면서 새로운 문제가 등장했습니다.

1. AI 개발 과정 공유가 어렵다

기존 방식

AI 대화 기록
↓
텍스트 로그
↓
사람이 직접 정리
↓
블로그 / 문서

문제

실제 작업 흐름을 보여주기 어려움
tool 호출 / reasoning 과정이 사라짐
시간 흐름이 보이지 않음

2. 영상은 너무 무겁다

개발 과정을 공유하려고 하면 보통 다음 방법을 사용합니다.

Loom
Screen recording
YouTube

하지만 문제점이 있습니다.

검색 불가
코드 복사 불가
수정 불가
용량 큼

3. 로그는 너무 읽기 어렵다

Claude Code 로그 예시

{
  "role": "assistant",
  "content": "...",
  "tool_calls": [...]
}

이걸 그대로 공유하면

사람이 읽기 어려움
흐름 이해가 힘듦

그래서 등장한 것이 바로

“AI 개발 세션을 재생 가능한 형태로 시각화하는 도구”

Claude Replay입니다.

핵심 기능

Claude Replay가 제공하는 주요 기능을 살펴보겠습니다.

1. 인터랙티브 세션 재생

Claude Replay는 세션을 영상처럼 재생할 수 있습니다.

가능한 기능

재생 / 일시정지
속도 조절
타임라인 이동

즉

AI 코딩 세션
↓
Replay Player
↓
Step-by-step 재생

이 기능 덕분에 다음과 같은 사용이 가능합니다.

AI pair programming 기록 공유
AI 디버깅 과정 설명
교육용 데모

2. Tool Call / Thinking Block 보기

Claude Code 로그에는 다음 정보가 포함됩니다.

tool 호출
reasoning (thinking block)

Claude Replay는 이를 접었다 펼칠 수 있는 UI로 제공합니다. (GitHub)

예

Assistant message
└ Tool Call
   └ Result
└ Thinking Block

덕분에 다음이 가능합니다.

AI가 어떤 reasoning을 했는지 분석
tool workflow 디버깅
agent 동작 분석

3. Self-contained HTML

Claude Replay의 가장 큰 특징은

결과물이 단일 HTML 파일

이라는 점입니다.

특징

JS dependency 없음
CDN 없음
static file

즉

replay.html

이 파일 하나로 다음이 가능합니다.

블로그 embed
GitHub Pages
이메일 공유
documentation 삽입

4. Secret Redaction

로그에는 종종 다음 정보가 포함됩니다.

API Key
Token
Secret

Claude Replay는 export 전에 secret redaction 기능을 제공합니다. (GitHub)

즉

로그
↓
민감정보 제거
↓
Replay HTML 생성

5. Bookmark / Chapter 기능

긴 세션을 쉽게 탐색할 수 있도록

챕터
북마크

기능도 제공합니다.

예

00:00 프로젝트 생성
02:10 API 구현
05:30 버그 수정
08:20 테스트 작성

프로젝트 구조

Claude Replay는 크게 CLI + Parser + HTML Renderer 구조로 동작합니다.

설명

1️⃣ CLI

사용자가 실행하는 커맨드

claude-replay session.jsonl

2️⃣ Session Loader

Claude Code 로그 위치

~/.claude/projects/

또는

custom session.jsonl

을 읽습니다.

3️⃣ JSONL Parser

Claude 로그는 JSONL 형식입니다.

예

{"role":"user","content":"create a REST API"}
{"role":"assistant","content":"Sure..."}

Parser가 이를 이벤트 구조로 변환합니다.

4️⃣ Renderer

이벤트를 UI 형태로 변환합니다.

message
tool call
thinking block
timestamp

5️⃣ HTML Generator

최종적으로

interactive replay player

가 포함된 HTML을 생성합니다.

설치 및 사용 방법

1. 설치

npm으로 설치합니다.

npm install -g claude-replay

또는

npx claude-replay

2. 기본 사용

Claude 세션 로그를 HTML로 변환

claude-replay session.jsonl -o replay.html

결과

replay.html

브라우저에서 열면 AI 세션 플레이어가 실행됩니다. (GitHub)

3. 실제 워크플로

예시 워크플로

Claude Code 개발
↓
session.jsonl 생성
↓
claude-replay 실행
↓
replay.html 생성
↓
블로그 / 문서 공유

활용 사례

Claude Replay는 다음 상황에서 특히 유용합니다.

1. 기술 블로그

AI와 함께 개발한 과정을 그대로 보여줄 수 있습니다.

예

"AI로 REST API 만드는 과정"

→ replay embed

2. AI Pair Programming 교육

AI와 함께 코딩하는 흐름을 단계별로 보여줄 수 있습니다.

3. 버그 리포트