260328 지피터스 모각 리모션 실습 사례글

[2026-03-28] 리모션(Remotion) 실습 사례글: 영상 3종 정복기 🎬

지피터스 11시 모각 리모션 실습을 따라하면서 제작한 3가지 영상 사례를 정리했습니다. 전문 프로그램 없이 AI(Antigravity)와 코드로 영상을 만들어낸 과정입니다.

1. 캐릭터 첫 인사 영상 (Remotion 입문)

소개

먼저, 저는 우리 캐릭터를 소개하는 짧은 영상(10초)을 만들고 싶었습니다. 보통 영상을 만들려면 프리미어 프로나 애프터 이펙트 같은 전문 편집 프로그램을 써야 하는데, 리모션이 영상 잘 말아준대서 바로 드갔습니다. 그래서 AI(Antigravity)의 도움을 받아, 코드로 영상을 만드는 도구인 Remotion을 써보기로 결심했습니다.

직접 마우스로 하나하나 편집하는 대신, AI에게 "이런 영상을 만들어줘"라고 말하면 코드가 자동으로 만들어지고, 그 결과물이 MP4 영상으로 뚝딱 나오는 경험이 신기하고 흥미로웠습니다. (사실 딱히 신기하진 않았고 그렇구나 했습니다.)

사실 전에 혼자 Remotion을 설치해보려 했는데, 제대로 동작을 안 했었습니다. 알고 보니 Remotion은 프로그램 하나만 설치하면 끝나는 게 아니라 아래처럼 여러 부품이 같이 갖춰져야 했습니다.

• remotion, @remotion/cli 등 (영상 제작 엔진)

• react, react-dom (화면 구성 뼈대)

• tsconfig.json, public/ 폴더 구조 등

• FFmpeg (영상을 MP4로 변환해주는 필수 도구)

진행 방법

• 사용한 도구: Antigravity, Remotion (v4), Node.js, FFmpeg

• 실제 사용 프롬프트:

  "폴더의 [캐릭터 이미지(배경제거).png] 이용해서 캐릭터가 움직이며 소개하는 영상 10초 using remotion"

• 연출 선택: AI가 제안한 스타일 중 통통 튀는 발랄한 느낌의 A안을 골랐습니다. (왜냐면 그 정도는 css로도 간단히 만들 수 있는 거였으니...)

구현 원리: 스프링(Spring) 효과

AI가 src/ 폴더 안에 애니메이션 코드를 작성해주었습니다. 핵심은 Remotion의 spring() 함수로, 이를 사용하면 별도의 디자인 작업 없이도 캐릭터 이미지에 물리 법칙이 적용된 통통 튀는 효과를 줄 수 있습니다. 완성 후 npm run build 한 줄이면 영상이 출력됩니다.

결과와 배운 점

• 결과: 배경 제거 이미지 1장만으로 생동감 넘치는 10초 영상 완성.

• 꿀팁: 배경 제거 이미지가 핵심입니다. 미리 배경을 제거해 두면 완성도가 훨씬 올라갑니다.

• 참고: Flash model을 활용하니 스튜디오를 켜지 않고도 로컬에 바로 간단하게 저장해줘서 효율적이었습니다. (근데 퀄리티 등가 교환이 있는듯한 ^^;)

2. 브랜드 애니메이션 (프롬프트 활용)

소개

두 번째 영상은 강사님이 수업에서 주신 프롬프트를 그대로 활용해 만들었습니다. 원본 프롬프트는 영문 샘플 텍스트로 구성되어 있었는데, 저는 텍스트 부분만 '하이호', '취업시켜줘' 로 바꿨습니다. 그게 전부입니다.

진행 방법

• 실제 사용 프롬프트: 4가지 색상의 커서가 날아와 픽셀 블록을 하나씩 채워 자막(1행 "하이호", 2행 "취업시켜줘요")을 완성하는 브랜드 애니메이션 요청.

• 강사님이 주신 프롬프트 구조 그대로에 텍스트 내용만 직접 수정했습니다.

구현 원리: 캔버스 샘플링 (Canvas Sampling)

이 영상의 핵심 원리는 가상 캔버스에 글자를 그린 뒤, 이를 격자로 쪼개서 글자가 있는 위치에만 3D 블록을 쌓는 캔버스 샘플링 방식입니다. 하지만 한글 가독성이 큰 문제였습니다. AI가 선명하게 하려고 여러 시도를 했지만, 격자가 조금만 어긋나도 글자가 뭉치거나 깨져 보였습니다. 결국 어느 정도 타협하며 마무리했습니다.

결과와 배운 점

• 결과: 프롬프트 한 줄 재구성으로 8초짜리 세련된 픽셀 애니메이션 완성.

• 꿀팁: 프롬프트 구조를 빌리고 내용만 바꿔도 완전히 다른 영상이 나옵니다. 다만, 한글 픽셀 아트는 캔버스 방식이 그나마 최선이지만 완벽하지 않으므로 고퀄리티를 원한다면 별도의 픽셀 이미지를 준비하는 게 나을 것 같습니다.

3. 정교한 캐릭터 애니메이션 (고급 기술)

소개

단순히 이미지가 화면에 나타나는 것을 넘어, 캐릭터에게 생명력을 불어넣는 10초 분량의 '열연' 영상을 만들고 싶었습니다. 이미지 한 장으로 정교한 애니메이션 구간을 설계하고 물리 법칙을 적용하는 고난도 작업을 시도했습니다.

진행 방법

강사님이 주신 리모션 필수 기술(Sequence, Spring, Interpolate) 활용 가이드를 기반으로 주제만 새롭게 요청했습니다.

AI가 생성한 핵심 기술 요구사항:

1. Sequence: 영상 시간을 구간별로 나누어 4개의 씬(등장-점프-노래-퇴장) 설계.

2. Spring: 물리 기반의 자연스러운 바운스 구현.

3. Squash & Stretch: 캐릭터가 땅에 닿을 때 납작해지고 공중에서 늘어나는 효과.

구현 원리: 시퀀스와 물리 효과

1. 멀티 씬 구조 (Sequence): 전체 10초를 구간으로 나누어 관리하니까 훨씬 전문적인 연출이 가능했습니다. (그랬구나 ai쨩. 나는 몰랐어.)

2. 물리 법칙 애니메이션: 캐릭터가 그냥 올라오는 게 아니라 탄력 있게 '통통' 튀게 했고, 점프할 때 몸이 길쭉해졌다가 땅에 닿을 때 납작해지는 효과를 넣었습니다.

결과와 배운 점

• 결과: 프롬프트 1개로 복잡한 4단 구성의 풍성한 캐릭터 연기 영상 완성.

• 꿀팁: 수학 지식 없어도 물리 효과가 가능합니다. 캐릭터가 찌그러지는 비율 같은 복잡한 계산을 AI가 대신 처리해줍니다. (그게 무슨 효과인지 저는 모릅니다!)

마무리하며: 앞으로의 계획

• 음악도 들어간 캐릭터 영상 만들어보고 싶음

• 더 다양한 캐릭터 표정 변화를 이미지 시퀀스로 만들어 애니메이션 실험 해보고 싶음

• 리모션의 다른 고급 스킬들을 활용해 숏폼 콘텐츠 제작 시도(는 진짜 하고 싶네요)

도움 받은 글

• Remotion 공식 문서: https://www.remotion.dev/docs

📝 이 사례글은 AI(Antigravity)의 도움으로 작성되었습니다.

• 검토한 초안 정리해달랬더니 내용 수정하고 제가 피드백한 괄호를 이상한데 넣어서 다시 검토했네요 ㅎㅋㅎㅋ