tcut × Remotion — 실제 터미널 영상으로 론칭 비디오 만들기
tcut은 픽셀 완벽한 터미널 클립을 생성하고, Remotion은 React에서 스프링, 타이포그래피, 레이아웃을 사용하여 이를 구성합니다. 이 둘의 조합으로 실제 터미널 영상이 완전히 재현 가능하고 다시 렌더링할 수 있는 풀 모션 디자인 론칭 비디오를 만들 수 있습니다.
먼저 두 스킬을 설치하세요: npx skills add AmanVarshney01/tcut remotion-dev/skills.
파이프라인
-
tcut으로 영상 녹화하기 (
tcut스킬 참조). Remotion용 클립의 경우:fps: 30으로 Remotion 컴포지션과 일치시키고,margin: 0, borderRadius: 0으로 설정하여 React가 카드(둥근 모서리, 그림자)를 그리도록 합니다.windowBar: "colorful"로 유지하면 신호등 표시가 "실제 터미널"처럼 보입니다.- 1920×1080 컴포지션의 경우
--font-size 30으로 녹화하면(80열 기준 약 1480px 너비) 클립이 확대되지 않습니다. maxPause: "1s"로 클립을 간결하게 유지하고, 시청자가 키 입력을 확인해야 하는 경우에만keys: true를 추가합니다.- 출력은 MP4 (H.264)로 합니다. Remotion의
<OffthreadVideo>가 프레임 정확하게 읽습니다. - 각 단계 전에
t.chapter("name")을 추가하면 챕터가 MP4에 기록되고ffprobe -show_chapters -print_format json clip.mp4로 정확한 타임스탬프를 얻을 수 있어 오버레이 동기화(예: 실행 중인 스크립트 줄 강조 — 가장 강력한 "코드 → 비디오" 효과)에 사용할 수 있습니다. - 하나의 캐스트를 여러 테마로 다시 렌더링하세요 —
tcut render hero.cast --theme nord -o themes/nord.mp4— 그리고 프레임별로<OffthreadVideo src>를 교체하면 동일한 타임라인에서 테마가 실시간으로 전환됩니다.
-
Remotion 프로젝트 생성하기:
bun create video(blank 선택), 또는remotion,@remotion/cli,react,react-dom을registerRoot가 있는 프로젝트에 추가합니다. -
구성하기: tcut MP4 파일을
public/폴더로 복사한 후 다음 코드로 프레임을 구성합니다:
import { AbsoluteFill, OffthreadVideo, staticFile, spring, useCurrentFrame, useVideoConfig } from "remotion";
const Clip: React.FC<{ src: string; caption: string }> = ({ src, caption }) => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const enter = spring({ frame, fps, config: { damping: 200 } });
return (
<AbsoluteFill style={{ background: "#11111b", justifyContent: "center", alignItems: "center" }}>
<div style={{ transform: `scale(${0.92 + 0.08 * enter})`, borderRadius: 16, overflow: "hidden", boxShadow: "0 30px 80px rgba(0,0,0,.6)" }}>
<OffthreadVideo src={staticFile(src)} style={{ width: 1060 }} muted />
</div>
<h2 style={{ color: "#cdd6f4", fontFamily: "ui-monospace, monospace", fontSize: 38, marginTop: 26, opacity: enter }}>{caption}</h2>
</AbsoluteFill>
);
};
<Sequence from={...} durationInFrames={...}>를 사용하여 장면을 순서대로 배치하고, 각 클립의 실제 길이(ffprobe -show_entries format=duration)에 맞춰 장면 길이를 조정합니다. startFrom/endAt (프레임 단위)으로 자를 수 있습니다.
margin이 포함되어 녹화된 클립은 overflow: hidden 카드 안에서 비디오를 videoW / (videoW - 2 * margin)만큼 확대하여 자를 수 있습니다.
-
렌더링하기:
bunx remotion render <CompositionId> out/promo.mp4 --crf 15 --image-format png로 고품질 마스터를 렌더링합니다(PNG 중간 파일, 거의 무손실 H.264). 컴포지션fps를 tcut 클립과 일치시켜 리샘플링을 방지하고,bunx remotion still <Id> still.png --frame N으로 장면당 한 프레임씩 레이아웃을 먼저 확인하세요. -
웹 페이지로도 배포하기 (선택 사항): 동일한 컴포지션을
@remotion/player를 사용하여 브라우저에서 실시간으로 실행할 수 있습니다 —<Player component={Promo} durationInFrames fps compositionWidth={1920} compositionHeight={1080} controls autoPlay loop initiallyMuted acknowledgeRemotionLicense style={{ width: "100%" }} />.<OffthreadVideo>는 Player에서 자동으로<Video>로 대체됩니다. 클립 URL을 하나의 헬퍼(staticFile(ASSET_BASE + path))로 관리하여 프로젝트와 사이트가 다른 폴더를 가리키도록 하고, 클립을 사이트의public/폴더에 복사하고, 동일한 폰트(예:@fontsource-variable/jetbrains-mono)를 로드합니다. 타이틀은 실제 DOM 텍스트가 되며 전체 비디오를 스크러빙할 수 있습니다. tcut.amanv.dev/promo가 예시입니다.
프로페셔널하게 보이게 하는 디자인 노트
- 터미널 클립은 선명한 텍스트입니다: 절대 100% 이상으로 확대하지 말고, 프레임 카드 안에서 약간 축소(85~95%)하여 배치하세요.
- 터미널 테마 팔레트의 단색 배경(예:
#0b0b12, 전경#e8e8f2)을 사용하고, 윈도우 카드가 그림자를 통해 깊이감을 전달하도록 하세요. 그라디언트, 글로우, 도트 그리드는 피하세요 — 선명한 터미널 텍스트와 어울리지 않습니다. - 타이틀 카드: 한 프레임에 한 글자씩 나타나는 모노스페이스 헤드라인은 "터미널 네이티브" 느낌을 줍니다.
- 엔드 카드: 로고 대신 복사-붙여넣기 형태의 설치 명령어 블록이 더 효과적입니다.
- 장면당 하나의 아이디어, 큰 모노 헤드라인과 그 기능을 수행하는 tcut API 한 줄; 클립에 무언가 나타나는 순간에 컷을 넣으세요. 기능 투어는 약 70초, 소셜 미디어용 컷은 30초 이내로 유지하세요.
이 조합이 좋은 이유
터미널 영상은 화면 캡처가 아니라 빌드 산출물입니다: tcut 스크립트나 테마를 변경하고 다시 실행한 다음 bunx remotion render로 프로모션을 다시 렌더링하면 완전히 재현 가능한 엔드투엔드 TypeScript 론칭 비디오 파이프라인이 완성됩니다.