소개
프리미어 프로 같은 영상 편집 프로그램을 전혀 켜지 않고, 오직 텍스트(프롬프트) 명령만으로 모션 그래픽 영상을 제작하는 것을 시도했습니다.
수업을 통해 코드로 영상을 만드는 프레임워크인 '리모션(Remotion)'과 이를 제어하는 '안티그래비티(Antigravity)'에 대해 알게 되었습니다. 안티그래비티에 리모션 스킬을 설치하면, 비개발자라도 AI가 알아서 리액트(React) 코드를 짜고 애니메이션을 입혀 영상을 만들어준다는 사실에 충격을 받아 제 업무용 홍보 영상 제작에 바로 적용해 보았습니다
어떤 도구를 사용했고, 어떻게 활용하셨나요?
안티그래비티(Antigravity)와 Node.js, 그리고 안티그래비티 브라우저 익스텐션을 주요 도구로 사용했습니다. 안티그래비티 터미널에서 명령어 몇 줄로 리모션 프로젝트를 생성하고, 스킬을 설치한 뒤 프롬프트를 통해 영상을 기획하고 제미나이 TTS 음성까지 입혀 렌더링했습니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
1차 프롬프트 (기획 및 뼈대 생성): 특정 웹페이지 링크를 주면서 세로형 홍보 영상 기획 및 폴더 구조 생성을 요청했습니다.
2차 프롬프트 (디테일, 제미나이 TTS 및 애니메이션 추가): 뼈대만 있는 영상에 생동감을 불어넣기 위한 효과와 음성을 추가했습니다.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
[안티그래비티 창에서 폴더를 열고(Open Folder) 프롬프트를 입력하는 캡처 화면 삽입] [리모션 로컬 스튜디오(npm run dev)에서 실시간으로 렌더링 된 영상을 확인하는 캡처 화면 삽입]
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요.
리모션을 시작하기 위해 안티그래비티 터미널(New Terminal)에서 실행했던 필수 명령어들입니다.
# 1. 리모션 프로젝트 생성 (기본 설정, Tailwind 등 선택)
npx create-video my-video-project
# 2. 안티그래비티가 리모션을 쓸 수 있도록 스킬 설치
# (에이전트 선택 시 'Antigravity' 선택, 글로벌 권한 부여)
npx @remotion/skills
# 3. 필요한 모듈 설치
npm install
# 4. 개발 서버 실행 ( 웹 브라우저에서 스튜디오 화면 실시간 확인)
npm run dev
--------------------------------------------------------------------------------
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
안티그래비티의 자동 렌더링 기능 활용: 클로드 코드와 다르게 안티그래비티는 자체적으로 브라우저를 지켜보며 파란색 표시와 함께 렌더링을 캡처하듯 진행해 줍니다. 이 과정을 그냥 지켜보는 것만으로도 작업이 훨씬 수월했습니다.
제미나이 TTS의 강력함: 안티그래비티는 제미나이와 연결되어 있어서, 프롬프트에 "제미나이 TTS를 사용해 줘"라고만 해도 고품질의 한국어 음성이 무료로 즉시 입혀집니다.
이미지 폴더 구조화: AI가 이미지를 잘 불러오게 하려면
src폴더 안에image폴더를 따로 만들고 (src/image), 프롬프트에 해당 경로를 명확히 지정해 주면 오류 없이 화면에 로고나 사진을 띄워 줍니다.
과정 중에 어떤 시행착오를 겪었나요?
처음 영상을 뽑았을 때 로고 이미지가 화면에서 너무 작고 흐리게 나오는 문제가 있었습니다. 당황하지 않고 안티그래비티에게 "로고 이미지가 잘 안 보이니 다시 확인해서 크기를 키워 렌더링해 줘"라고 요청했더니, 스스로 코드를 수정해 화면에 꽉 찬 로고로 다시 렌더링해 주어 무사히 해결했습니다
