Remotion 대안: HTML로 모션을 쓰고 브라우저에서 영상으로 편집
Node.js 설치도, React도 필요 없습니다. HTML / CSS / GSAP 모션이 동영상·이미지와 같은 타임라인에 놓입니다.
템플릿으로 시작하기
- 라이브 해설 창 둥근 화자 창 + LIVE 배지 + 이름표, 동영상 소리도 타임라인에
- 프레임 미디어 흰 테두리 빛 번짐 창 + 좌상단 라벨, 확대 등장, 특정 영역 줌인(화면 녹화용)
- 영상 채운 큰 글씨 큰 글씨 속으로 영상·이미지가 보이고 위엔 소제목, 아래엔 부제
- 분할 해설 왼쪽 큰 글씨(둘째 줄 강조색), 오른쪽 미디어, 아래 타임라인 표시
- 사진 벽 세로 사진들이 나란히 차례로 등장, 각자 설명 포함
- 키네틱 큰 글씨 한 단어씩 화면을 때리며 검정·노랑·크림 색면이 대각선으로 바뀝니다
- 형광펜 제목 크림색 바탕에 형광 띠가 지나가고 큰 글씨가 하나씩 떨어집니다
- 3D 회전체 금속 질감의 매듭이 천천히 돌아요(Three.js)
- 데이터 성장 막대가 자라고 숫자가 올라가요
클릭 한 번이면 모션이 이미 들어간 채로 편집기가 열립니다. 소재 슬롯이 있는 템플릿은 동영상이나 이미지를 카드에 끌어다 놓거나 「내 파일 사용」을 눌러 파일을 고르면, 편집기가 열릴 때 이미 제자리에 들어가 있습니다. 파일은 여러분의 기기에만 있고 업로드되지 않습니다.
TutuCut은 Remotion 대안으로 쓸 수 있습니다. HTML, CSS, Canvas, GSAP, Three.js로 모션을 쓰고 브라우저에서 바로 타임라인에 넣어 실사 영상·이미지와 함께 편집해 MP4로 내보냅니다. Node.js 설치도 React도 필요 없고 AI가 대신 써 줄 수도 있습니다. 할 수 없는 일: 서버에서 데이터로 수천 개의 영상을 일괄 렌더링하는 일은 Remotion이 더 적합합니다.
Remotion은 React 컴포넌트로 영상을 씁니다. Node.js를 설치하고 프로젝트를 만들고 코드를 쓴 뒤 렌더링해야 합니다. TutuCut은 다른 길을 택했습니다. 모션은 평범한 HTML 한 페이지일 뿐이라 CSS 애니메이션, Canvas, SVG, GSAP, Three.js로 쓴 코드를 그대로 붙여 넣으면 브라우저에서 한 프레임씩 그려지고, 동영상·이미지·자막과 같은 타임라인에서 편집해 MP4나 GIF로 내보냅니다.
소재를 모션 안에 바로 넣을 수 있습니다. 코드에 tutu-asset 표기를 쓰면 소재 라이브러리의 이미지, 동영상, GIF, 글꼴을 불러오고, 소재 슬롯이 준비된 템플릿(라이브 PIP 창, 포토월, 기기 목업…)에는 동영상을 끌어다 놓기만 하면 됩니다. 모든 처리는 브라우저에서 이루어지며 소재는 업로드되지 않습니다.
Remotion보다 못한 점도 분명히 적습니다. Remotion은 서버(AWS Lambda 포함)에서 데이터로 수만 개의 영상을 일괄 렌더링할 수 있지만 저희에게는 그런 일괄 렌더링 API가 없습니다. React 컴포넌트 생태계도 그쪽이 더 큽니다. 데이터 한 줄마다 영상 하나를 완전 자동으로 뽑아야 한다면 Remotion을, 모션이 들어간 영상 하나를 보면서 고쳐 가며 만들려면 이쪽이 더 간편합니다.
TutuCut과 Remotion 비교
| 비교 항목 | TutuCut | Remotion |
|---|---|---|
| 모션 작성 방식 | TutuCut평범한 HTML / CSS / JS(Canvas, SVG, GSAP, Three.js) | Remotion React 컴포넌트 |
| 알아야 할 것 | TutuCut템플릿 수정은 코드 불필요, 직접 쓰려면 HTML | Remotion React |
| 실사 영상·이미지와 함께 편집 | TutuCut같은 타임라인, 소재를 모션 안에 바로 사용 | Remotion 끌어다 놓기 편집 지원 |
| 설치할 것 | TutuCut설치 없음, 웹페이지를 열면 끝 | Remotion Node.js, 명령줄로 프로젝트 생성 |
| AI가 대신 작성 | TutuCut내장 AI 도우미가 써서 타임라인에 바로 배치 | Remotion 코딩 AI와 함께 사용 가능 |
| 비용 | TutuCut무료, 워터마크 없음 | Remotion 개인, 3명 이하 회사, 비영리 단체는 무료, 그 밖에는 회사 라이선스 필요 |
| 서버에서 데이터로 일괄 렌더링 | TutuCut지원 안 함 | Remotion 지원(AWS Lambda 포함) |
2026-10-04에 확인. 칸 옆의 ↗가 출처이며 열어서 직접 확인할 수 있습니다.
자주 묻는 질문
- TutuCut에서 Remotion 프로젝트를 바로 열 수 있나요?
- 아니요. Remotion 프로젝트는 React 코드라 Node.js에서 번들링하고 렌더링해야 하고, TutuCut은 평범한 HTML을 실행합니다. 옮기려면 애니메이션 부분을 HTML 한 페이지로 다시 쓰면 됩니다. GSAP 타임라인이나 window.__seek(t)로 시간에 맞춰 한 프레임을 그리고, 매개변수는 __PARAMS__에서 읽고, 소재는 tutu-asset 표기로 불러옵니다. 원하는 효과를 AI에게 설명해 바로 쓰게 할 수도 있습니다.
- 무언가 설치해야 하나요?
- 아니요. 웹페이지를 열면 바로 쓸 수 있습니다. Node.js 설치도, 프로젝트 생성도, 명령줄도 필요 없습니다. 모션은 브라우저에서 한 프레임씩 그려져 내보내지며 소재와 코드는 업로드되지 않습니다.
- 모션에 제 동영상과 이미지를 쓸 수 있나요?
- 네. 코드에 tutu-asset 표기를 쓰면 소재 라이브러리의 이미지, 동영상, GIF, 글꼴을 불러올 수 있고, 소재 슬롯이 있는 템플릿에는 파일을 끌어다 놓으면 됩니다. 동영상 슬롯은 「소리 포함」을 켤 수 있으며, 그 소리는 모션을 따라가는 별도의 오디오 클립이 됩니다. 소재가 사라지면 자리 표시가 나타나고 다시 연결하라고 알려 주며, 내보내기 전에 막아서 이미지가 빠진 버전을 몰래 내보내지 않습니다.
- 영상 수백 개를 일괄로 만들 수 있나요?
- 자동 일괄 렌더링은 안 됩니다. TutuCut은 한 번에 영상 하나를 편집합니다. 스프레드시트 데이터로 수백, 수천 개의 영상을 자동으로 만들어야 한다면 Remotion의 서버 / Lambda 렌더링이 더 적합합니다.
- Remotion은 유료인가요? TutuCut은요?
- Remotion 공식 라이선스에 따르면 개인, 3명 이하의 회사, 비영리 단체는 무료로 쓸 수 있고, 그보다 큰 회사는 회사 라이선스를 구매해야 합니다. TutuCut은 편집과 내보내기가 무료이고 워터마크가 없으며 가입도 필요 없습니다.