슬라이드, 이제 바로 영상이 됩니다.

This is the long-form blog cut of a note I originally posted on LinkedIn. The claims, numbers, and product names are the same; the formatting is for reading on the site.

Context

Original framing (translated in place for key technical posts; substance preserved):

혹시 AI 콘텐츠 팀을 완성하고 싶다면 이 글을 확인하세요. 영상 제작의 핵심 Hyperframes 스킬을 소개합니다.

github repo: https://lnkd.in/gNsc5bRS

저번 포스트에서 clone-slide 하네스를 공개했습니다. PDF 슬라이드를 html, png, pptx로 그대로 복제하는 하네스였죠.

자연스럽게 다음 질문이 따라왔습니다. “그럼 영상으로도 뽑을 수 있나?”

결론부터 말하면, 됩니다. 그래서 직접 구축했습니다. 슬라이드 제작부터 영상 전환까지, 콘텐츠 파이프라인 전체입니다.

“Hyperframes” : HTML + CSS + GSAP 조합으로 슬라이드를 영상으로 전환하는 스킬입니다.

슬라이드에 들어간 애니메이션과 전환이 그대로 mp4 형식으로 저장됩니다. built-in template이 가장 잘 작동하지만, 원하는 방식이 있다면 미리 세팅해두면 됩니다. 한 번 세팅하면 그 이후로는 정말 ‘딸깍’ 수준입니다.

전체 흐름은 이렇

혹시 AI 콘텐츠 팀을 완성하고 싶다면 이 글을 확인하세요. 영상 제작의 핵심 Hyperframes 스킬을 소개합니다.

github repo: https://lnkd.in/gNsc5bRS

저번 포스트에서 clone-slide 하네스를 공개했습니다. PDF 슬라이드를 html, png, pptx로 그대로 복제하는 하네스였죠.

자연스럽게 다음 질문이 따라왔습니다. “그럼 영상으로도 뽑을 수 있나?”

결론부터 말하면, 됩니다. 그래서 직접 구축했습니다. 슬라이드 제작부터 영상 전환까지, 콘텐츠 파이프라인 전체입니다.

“Hyperframes” : HTML + CSS + GSAP 조합으로 슬라이드를 영상으로 전환하는 스킬입니다.

슬라이드에 들어간 애니메이션과 전환이 그대로 mp4 형식으로 저장됩니다. built-in template이 가장 잘 작동하지만, 원하는 방식이 있다면 미리 세팅해두면 됩니다. 한 번 세팅하면 그 이후로는 정말 ‘딸깍’ 수준입니다.

전체 흐름은 이렇습니다.

① PDF/이미지 → clone-slide로 HTML 슬라이드 복제 ② HTML 슬라이드 → Hyperframes로 영상 전환 ③ 중간 어디서든 pptx로도 추출 가능

가장 큰 이슈 하나. GSAP 렌더링 특성상 페이지 간 전환이 너무 빠르게 지나가거나 내용이 사라지는 문제가 있습니다. 내용을 확인할 수 없으면 영상이 의미가 없죠.

저는 ‘hold window on the actual page DOM’ 키워드로 해결했습니다. 각 페이지를 충분히 잡아두고 전환만 부드럽게 연결하는 방식입니다.

여기서 개인적인 얘기.

저 이제 컴퓨터 안 들고 다닙니다. 핸드폰으로 텔레그램 켜서 일합니다.

그래도 PPT, 슬라이드, 영상까지 바로 뽑힙니다. 집에 켜둔 Codex App을 원격으로 가동시키는 것도 됩니다. 웬만한 자동화를 Codex 덕분에 거의 다 구현했습니다.

현재 개발 환경: → MacBook Pro M5 Pro + Galaxy S25 + 외부 클라우드 서버 → Codex Pro 20x, Claude Code Max 20x, Gemini Pro, OpenCode with API

clone-slide에 이어 Hyperframes까지, 콘텐츠 엔진은 거의 완성되어 갑니다. 드디어 저만의 업무 환경 구축도 마무리 단계입니다.

4월은 건강 관리하고, 5월부터 본격적으로 돈을 벌어보려고 합니다.

Links

• https://lnkd.in/gNsc5bRS