첫 번째 영상의 문제를 고쳐 Remotion 쇼츠로 다시 만들어보기

지난번에는 맥킨지의 웰니스 리포트를 바탕으로 첫 번째 Remotion 영상을 만들었습니다.

디자인의 일관성은 있었지만, 실제로 재생해보니 세 가지 문제가 보였습니다.

그래서 이번에는 첫 영상에서 발견한 문제를 디자인 시스템에 반영하고, 실제 쇼츠로 다시 검증해보기로 했습니다.

기존 시스템은 컬러, 폰트, 그리드처럼 정적인 화면 규칙이 중심이었습니다.

Claude Design에서 여기에 다음과 같은 모션 규칙을 추가했습니다.

수정한 디자인 시스템은 PPT가 아니라 handoff 파일로 내보냈습니다.

handoff 파일을 VS Code의 Claude Code에 전달해 Remotion 코드로 옮기기 시작했습니다.

이 과정은 생각보다 길었습니다. 컴포지션 등록 누락, 사용하지 않는 코드로 인한 lint 오류, 토큰 구조 불일치, Remotion에서 지원하지 않는 Easing 사용 등 여러 에러를 하나씩 수정해야 했습니다.

Claude Code는 handoff 원문과 기존 코드를 다시 비교하며 Beat, Easing, 안전영역, 세로형 프레임과 프로토타입 컴포넌트를 추가했습니다.

하지만 디자인 시스템과 컴포넌트 업데이트를 모두 끝내기 전에 GitHub Copilot 사용량이 소진됐습니다. 원래는 Claude Code로 영상을 완성하려 했지만, 여기서 Codex로 작업을 전환했습니다.

Codex에서는 남은 디자인 시스템 전체를 구현하기보다 제출할 영상을 먼저 완성했습니다.

주제는 맥킨지 리포트에서 출발해 ‘웰니스 소비자의 선택 과정’으로 정했습니다.

과학적 근거와 소셜미디어에서 제품을 발견하고,
성분·연구·후기를 검증한 뒤,
직접 체험하고 변화를 측정한다.

이 흐름에 맞춰 12개 장면을 구성했습니다.

이미지 장면 사이에는 25% 도트 매트릭스, 40%+ 막대 차트, 발견–검증–체험–측정 루프를 넣어 첫 영상보다 리듬을 강화했습니다.

스토리보드에 필요한 이미지 6개도 Codex에서 만들었습니다.

휴대폰으로 제품을 비교하는 장면처럼 실제 소비 행동에 가깝게 계속 수정했습니다. 이번에 사용한 Codex 5.6 Sol은 이미지 결과도 기대보다 좋았습니다.

나레이션은 ElevenLabs에서 만들었습니다.

원고를 줄였지만 최종 음성은 약 42초였습니다. 원하는 속도 조절 기능을 찾지 못해 음성을 빠르게 만드는 대신 영상 길이를 늘렸습니다.

앞에는 1.5초의 음악 구간을 추가하고, 마지막에는 음성이 자연스럽게 끝나도록 여백을 넣었습니다. 배경음악은 5%로 낮추고 페이드인·페이드아웃을 적용했습니다.

디자인 시스템 구현 범위가 너무 커졌습니다. 모든 모션 규칙과 컴포넌트를 완성하려다 본편 제작이 늦어졌습니다. 제출 일정에 맞춰 핵심 모션만 적용하고 영상 완성을 우선했습니다.
작업 도구를 중간에 바꿔야 했습니다. Claude Code 작업 중 GitHub Copilot 사용량이 소진돼 Codex로 전환했습니다. handoff 파일과 코드가 남아 있어 작업을 이어갈 수 있었습니다.
나레이션과 영상 길이가 맞지 않았습니다. 42초 음성을 33초 영상에 넣자 시작과 마지막 문장이 잘렸습니다. 영상을 약 45.5초로 늘리고 앞뒤에 여백을 추가했습니다.

아직 장면과 나레이션이 조금 어색하게 연결되는 부분은 남아 있습니다. 그래도 첫 영상보다 이미지, 타이포그래피와 차트가 유기적으로 연결되면서 영상다운 리듬이 생겼습니다.

앞으로 연습 영상을 몇 편 더 만들면서 반복되는 작업과 계속 수정되는 지점을 확인해볼 생각입니다.

그다음에는 스토리보드, 이미지 준비, 컴포넌트 매핑, 나레이션과 렌더링을 더 자동화하고 싶습니다. Remotion과 n8n을 연결해 영상 제작 워크플로우를 만드는 것도 괜찮은 방향이라고 생각합니다.

WellnessShortV2_Final.mp4

5.1MB