[도구]Claude Opus 5.5와 Claude Code로 발표용 픽셀 아트 영상 만들기

무슨 일이야

사이먼 윌리슨은 'WeAreDevelopers World Congress North America' 키노트 발표의 마지막 슬라이드를 장식하기 위해 Claude Opus 5.5를 사용했습니다. 구글에서 검색한 카카포(Kākāpō) 새 사진 3장을 넣고, 20마리 이상의 카카포가 파티를 즐기는 HTML5 캔버스 픽셀 아트 애니메이션 코드를 프롬프트로 요청해 생성했습니다.

그는 이렇게 만들어진 HTML 애니메이션을 발표 슬라이드에 넣기 위해 로컬 Claude Code 세션에 비디오 변환을 지시했습니다. 브라우저를 열어 화면을 몇 차례 클릭해 폭죽 효과를 발생시키고 15초 분량의 영상으로 녹화해 달라는 프롬프트를 전달했습니다.

Claude Code는 파이썬 기반의 Playwright 스크립트를 작성하고 실행해 요구사항을 처리했습니다. 스크립트는 1280x720 해상도 화면에서 시간에 맞춰 다양한 위치를 클릭하도록 자동화되었으며, 최종적으로 발표에 필요한 동영상 파일을 만들어냈습니다.

왜 중요해

복잡한 그래픽 툴을 다루지 않아도 LLM을 통해 인터랙티브 웹 그래픽을 만들고, 이를 에이전트 CLI 도구로 브라우저 자동화 도구와 연계해 영상 에셋으로 추출하는 워크플로를 잘 보여줍니다. 프롬프트 몇 줄로 코드 생성과 브라우저 자동 녹화까지 자연스럽게 연결되는 개발자 파이프라인의 실용성을 확인해 볼 수 있습니다.

참고: Simon Willison