1년 전이라면 수백 달러를 냈을 법한 Claude 활용 제품 쇼케이스

여기 올라온 쩌는 영상들이랑 Opus가 바닥부터 다 만든 거 보고 영감 제대로 받아서 나도 직접 해봐야겠다 싶었음.

최종 결과물 나오기까지 20번은 넘게 갈아엎은 듯. 애초에 트레일러를 어떤 식으로 뽑아야 할지 감이 안 잡혀서 고생 좀 했거든.

제작 과정 (요약)

영상 편집 툴? 애프터 이펙트? 그런 거 안 씀. 전부 다 Claude Code가 짠 코드로 해결함:

• 장면마다 웹 페이지 하나씩: HTML/CSS/JS로 만들었고, render(t) 함수 하나로 시간 t에 맞는 프레임을 딱딱 그려냄. Playwright로 60fps 프레임 단위로 스크린샷 찍고, ffmpeg로 MP4로 합침. 실시간 애니메이션이 아니라서 모든 프레임이 똑같이 재현 가능함.

• 사운드도 코드: 타격음, 휙 지나가는 소리, 클릭음, 타이핑 소리 전부 Web Audio로 생성했고 애니메이션 타임스탬프에 맞춰서 딱딱 떨어지게 함.

• 음성은 ElevenLabs: 동료가 부르는 소리("야, 5분 있냐?")는 ElevenLabs로 뽑아서 전화기 필터 씌움. 스크립트가 정확한 프레임에 소리를 배치하고 사운드 디자인이랑 섞어버림.

• UI는 녹화가 아니라 재구현: VS Code, Claude Code 채팅창, Cortex 패널 전부 HTML로 똑같이 다시 만듦. 그래서 카메라가 어디를 줌인해도 화질 깨지는 거 없이 깔끔함.

• 장면별 제작: 총 6개 장면인데, 앞 장면 마지막 프레임에서 다음 장면이 시작되게끔 따로 렌더링하고 검수해서 이어 붙임.

• 검수 루프: 렌더링 돌리기 전에 Claude가 스틸컷 몇 장 찍어서 스스로 검사함(잘린 부분, 겹치는 부분, 가독성 등). 난 그냥 방향성만 잡아줌.

20번 넘게 갈아엎은 건 스토리 때문임:

• 초기 버전은 제품 설명하느라 바빴는데, 아무도 안 봄. 먹히는 건 이거임: 첫 5초에 기대감 심어주고, 개발자라면 다 아는 상황 연출하기 (몰입해서 코딩 중 → "5분 있냐?" → 40분 뒤, 내가 뭘 하고 있었지?).

• 화려한 효과만큼이나 그 사이사이에 들어가는 정적인 순간들도 중요함.

그리고 진짜 대박인 부분

마켓플레이스 페이지에 올릴 영상도 필요했는데, 기능별로 짧은 클립이 하나씩 있어야 했음. 일일이 녹화하고 편집하기 귀찮아서 이것도 Claude한테 던져줌. README 텍스트랑 스크린샷 15장, 18초짜리 화면 녹화본 하나 줬더니 내가 직접 만든 것보다 훨씬 잘 뽑아옴.