Claude Code, 이제 터미널에서 이미지와 비디오를 보여줍니다
Claude Code now shows images and videos in the terminal
핵심 요약
Claude Code에서 작업 결과물(스크린샷, 비디오, QA 비교)을 터미널 내에서 바로 확인할 수 있는 플러그인이 출시되었습니다.
- 터미널 시각화 — 스크린샷과 비디오를 터미널 채팅창에서 직접 확인 가능함
- 자동 QA 비교 — 이전 버전과 변경된 버전을 프레임 단위로 동기화하여 비교함
- 기술적 구현 — Kitty 그래픽 프로토콜을 활용해 메모리 효율적으로 이미지와 영상을 렌더링함
- 사용자 편의성 — 별도의 브라우저 창 전환 없이 터미널 안에서 즉각적인 피드백 확인 가능함
Claude Code가 터미널에서 작업 내용을 바로 보여주도록 플러그인을 만들었다. 스크린샷, 앱을 클릭하며 돌아다니는 영상, 그리고 수정 전후 QA까지 다 보여줌.
https://github.com/iamumeransari/claude-show-your-work
(Ghostty, kitty 같은 최신 터미널 지원. macOS 및 ffmpeg 필요. MIT 라이선스, 완전 로컬 구동)
매번 수정할 때마다 똑같은 짓 반복하는 게 너무 짜증 났다. Claude가 "끝! 가격 페이지 고쳤어"라고 하면, 내가 직접 브라우저 켜서 localhost 탭 찾고, 새로고침하고, 클릭질하면서 예전이랑 뭐가 달라졌는지 기억해내야 했거든.
그래서 Claude가 채팅창에서 바로 보여주도록 플러그인을 하나 짰다.
-
스크린샷: Claude가 페이지를 만들거나, 차트를 렌더링하거나, 목업을 만들면 대화창에 사진이 바로 뜸.
-
영상: Playwright로 앱을 클릭하며 돌아다니는 과정을 녹화해서 채팅창에서 바로 재생됨.
-
수정 전후 QA: 수정 전후의 동일한 흐름을 녹화해서 프레임 단위로 동기화해 나란히 보여줌. 뭐가 바뀌었는지, QA 결과는 어떤지도 리스트로 쫙 뽑아줌.
메모리 효율도 챙겼고 기존 환경에 그냥 얹어서 쓰는 방식이라, 랜딩 페이지 디자인 컨셉 보여주기, 웹사이트 브레이크포인트 테스트, 캐릭터 시트 생성, higgsfield랑 hyper frames로 광고 만들기 등 온갖 상황에서 다 써먹을 수 있다. 커스터마이징도 당연히 가능함!
/plugin marketplace add iamumeransari/claude-show-your-work
/plugin install show-your-work@iamumeransari
brew install ffmpeg
새 Claude 채팅창 열어서 바로 한번 써봐!
