Opus 5.5와 실제 스크린샷으로 제품 데모 영상 만드는 방법

Opus 5.5를 활용하면 제품 브리프를 편집 가능한 영상 프로젝트로 만들 수 있습니다. 이 튜토리얼에서는 Opus 5.5가 React/Remotion 코드를 작성하고, 실제 웹사이트 캡처가 인터페이스 화면이 되며, Remotion이 MP4를 내보냅니다. 다섯 장면으로 된 30초 개요 영상을 만들고 스크린샷을 교체한 뒤, 완성된 영상이 제품을 사실대로 보여 주는지 확인합니다.

로컬 프로젝트는 실행할 수 있지만 모든 요소를 직접 애니메이션으로 만들고 싶지 않은 운영 담당자, 창업자, 콘텐츠 크리에이터를 위한 글입니다. 이 영상은 스크린샷으로 만든 소개 영상이며, 사용자가 API 요청을 완료하는 과정을 녹화한 것이 아닙니다. 전체 워크플로와 다른 프롬프트는 Opus 5.5 영상 제작 가이드에서 먼저 확인하세요.

결과 영상 보기와 작업 파일 받기

실제 로컬 렌더링 결과: 1280 × 720, 30 fps, 900프레임. 이 버전에는 일부러 소리를 넣지 않았습니다. 인터페이스는 영어이며 2026년 9월 30일에 캡처했습니다.

전체 프로젝트, MP4, 원본 모델 브리프를 내려받을 수 있습니다. 같은 프로젝트에 내레이션 버전과 세로 버전 컴포지션도 들어 있으며, 각 버전의 튜토리얼 링크는 아래에 있습니다.

테스트한 범위: 기존 퍼스트파티 Claude Code 세션에서 claude-opus-5-5를 호출해 생성된 소스를 보관하고 로컬에서 렌더링했습니다. 모델에는 스크린샷 파일명과 크기, 텍스트 설명만 전달했으며, 이 호출에서 모델이 이미지 픽셀을 직접 본 것은 아닙니다. 그 뒤 실제 이미지를 검토하면서 세로 크롭과 자막 처리 등 코드를 수정했습니다. 재현할 수 있는 프로젝트 하나를 보여 주는 것이며, 모델 벤치마크나 프롬프트 한 번으로 상업용 품질을 얻는다는 주장이 아닙니다.

아카이브에는 src/index.tsx, 패키지 lock 파일, 원본 캡처, 참고용 내레이션, 영어 SRT, 브리프, 재현 방법이 들어 있습니다. 인증 정보와 node_modules는 포함하지 않았습니다.

스크린샷으로 보여 줄 수 있는 것 정하기

이 예제는 브리프의 범위를 일부러 좁혔습니다. 모델 카탈로그를 소개하고, 문서를 보여 주고, API 레퍼런스 위치를 안내합니다. 모두 시청자가 직접 확인할 수 있는 공개 페이지 세 곳입니다. 가짜 커서를 움직이거나 API 응답을 지어내지 않으며, 문서를 둘러보는 장면만으로 요청이 성공한 것처럼 보이게 만들지 않습니다.

에셋을 모으기 전에 시청자의 다음 행동을 한 문장으로 적어 두세요. 이 예제에서는 “카탈로그를 살펴본 뒤 내 연동에 필요한 문서를 찾는다.”입니다. 서로 관련 없는 이점 다섯 가지를 약속하는 영상이라면 더 많은 근거와 다른 스토리보드가 필요합니다. 전환 효과를 더 넣는다고 해결되지 않습니다.

파일명, 원본 URL, 캡처 시각, 크기, 의도한 주장을 적은 간단한 에셋 목록을 관리하세요. 각 이미지는 원본 크기로 확인합니다. 잔액, 개인 식별 정보, 비공개 대화, 실제 API 키는 넣지 마세요. 인터페이스 언어가 맞지 않다면 실제 언어 설정으로 다시 캡처하거나, 글에서 영어 인터페이스라고 설명하세요. 현지화된 것처럼 보이도록 화면 속 텍스트를 바꾸면 안 됩니다.

원본 세 장은 모두 1280 × 720입니다. 카탈로그 장면에서는 원본 상단 320픽셀만 보여 줍니다. 그 아래에 수시로 바뀌는 가격이 있기 때문입니다. 이 크롭은 편집상의 선택이며, 현재 가격을 확인했다는 뜻이 아닙니다. 촬영 날짜가 있는 캡처를 언제나 유효한 가격 약속처럼 써서는 안 됩니다.

애니메이션을 요청하기 전에 스토리보드 만들기

좋은 스토리보드는 모델이 풀 문제의 범위를 정해 줍니다. 어떤 에셋으로 어떤 메시지를 얼마 동안 보여 주고, 어떤 결과를 유지해야 하는지 정하는 것입니다. 이 프로젝트는 다음과 같은 고정 타임라인을 사용합니다.

30 fps 기준으로 장면 전환은 0, 120, 330, 540, 750프레임에서 일어나며 컴포지션은 900프레임에서 끝납니다. 세 가지 출력 버전을 같은 타임라인에 맞추는 실용적인 방법입니다. 수정 요청도 구체적으로 할 수 있습니다. “문서 장면을 더 오래 보여 줘”라고 하면 막연하게 영상 전체를 다시 생성하는 대신, 이미 정해 둔 경계만 바꾸면 됩니다.

내 제품에 적용할 때는 색상보다 장면 메시지를 먼저 바꾸세요. 대시보드 개요라면 빈 상태, 설정을 마친 화면, 내보낸 보고서를 보여 줄 수 있습니다. 뒤의 두 장면은 실제 캡처가 있을 때만 사용하세요. 파일 업로드처럼 상호작용이 스토리의 중심이라면 실제 화면 녹화로 바꾸고 녹화의 시작과 끝을 설명하세요. 스크린샷 위에서 포인터를 움직이는 애니메이션은 같은 수준의 증거가 되지 않습니다.

제공된 프로젝트부터 실행하기

Node.js와 npm이 설치된 컴퓨터를 사용하세요. 아카이브는 React 19.1.0과 Remotion 패키지 4.0.424로 버전을 고정해 두었으므로, 이 글을 읽는 시점의 예제가 읽는 시점의 최신 릴리스에 의존하지 않도록 했습니다. 내 환경 설정과 조직 내 사용 조건은 Remotion의 코딩 에이전트 설정과 라이선스 정보를 확인하세요.

프로젝트를 실행하기 전에 Node.js와 npm을 설치하세요. 아래의 선택 사항인 터미널 미디어 점검에는 ffprobe가 포함된 FFmpeg를 따로 설치해야 합니다. npm ci는 이 셸 명령을 설치하지 않습니다. 선택 사항인 점검 명령을 쓰지 않아도 제공된 npm 스크립트로 렌더링할 수 있습니다.

프로젝트 압축을 풀고 루트 폴더에서 터미널을 연 뒤 다음을 실행합니다.

npm ci
npm start

터미널에 표시된 로컬 URL을 엽니다. 컴포지션 목록에서 DemoLandscape를 선택합니다. 5초 지점으로 이동하면 빈 사각형이 아니라 카탈로그 크롭이 보여야 합니다. 13초 지점에서는 문서 캡처가 보여야 합니다. 둘 중 하나라도 보이지 않으면 디자인을 바꾸기 전에 경로부터 고치세요.

실제 로컬 Remotion Studio 캡처입니다. 편집 가능한 프로젝트 미리보기이며, 위에서 내려받는 MP4가 내보낸 결과물입니다.

주요 파일의 역할은 다음과 같습니다.

npm ci는 없는 의존성을 내려받아야 하므로 네트워크 연결이 필요합니다. Remotion으로 처음 렌더링할 때 헤드리스 브라우저를 내려받을 수도 있습니다. 이는 모델 이용과는 관계가 없습니다. 아카이브에 이미 들어 있는 코드를 렌더링할 때는 Opus를 다시 호출하지 않습니다.

Opus가 구현할 수 있는 브리프 쓰기

원본 브리프는 위에서 내려받을 수 있습니다. 아래의 짧은 변형용 템플릿은 중요한 제약 조건은 그대로 두고 스토리만 바꿀 수 있게 만든 것입니다. 모델로 한 번 더 실행해 테스트한 결과는 아닙니다.

기존 Remotion 프로젝트 안에 편집 가능한 제품 개요 영상을 만드세요.
설치된 패키지 버전을 유지하세요. 수정하기 전에 현재 소스를 확인하세요.

대상 시청자: [누가 보는가]
다음 행동: [구체적인 목적지 하나]
컴포지션: DemoLandscape, 1280x720, 30 fps, 900 frames.
에셋: [파일명, 크기, 원본 URL, 각 이미지가 증명하는 것].
실제 이미지를 Img/staticFile로 사용하고, 인터페이스를 다시 그리지 마세요.

타임라인:
0-4 s: [오프닝 문장]
4-11 s: [에셋 1과 검증 가능한 메시지]
11-18 s: [에셋 2와 검증 가능한 메시지]
18-25 s: [에셋 3과 검증 가능한 메시지]
25-30 s: [클로징과 목적지]

스크린샷 비율을 유지하세요. 모든 크롭은 원본 픽셀 단위로 명시하세요.
비공개 데이터를 보여 주거나 과거 가격을 현재 가격처럼 약속하지 마세요.
움직임은 CSS 애니메이션이 아니라 useCurrentFrame/interpolate/spring으로 구현하세요.
가짜 커서 상호작용, 지어낸 결과, 새 패키지 추가, 네트워크 호출은 금지합니다.
변경한 파일을 반환하고, 미리보기와 렌더링 방법을 설명하세요.

에이전트가 이미지를 볼 수 있다면 승인된 실제 에셋을 전달하되, 결과물은 여전히 직접 확인하세요. 이 예제처럼 크기와 설명만 전달했다면 모델이 화면에서 어떤 컨트롤이 중요한지 이해했다고 가정하면 안 됩니다. 렌더링된 화면 검토가 선택적인 마무리 작업이 아니라 워크플로의 필수 단계인 이유입니다.

실제 인터페이스를 읽을 수 있게 유지하기

가로 버전의 카탈로그 뷰포트 너비는 1120픽셀입니다. 따라서 1280 × 320 원본 크롭은 1120 × 280으로 표시되며, 두 축에 같은 배율 0.875가 적용됩니다. 1280 × 720 문서 캡처 전체는 1120 × 630이 됩니다. 제목과 자막은 이미지 아래의 별도 영역에 놓이므로 페이지를 가리지 않습니다.

이 계산이 중요한 이유가 있습니다. 스크린샷을 임의의 상자에 꽉 채우면 컨트롤이 늘어나거나, 필요한 라벨이 잘리거나, 비활성 컨트롤이 다른 요소처럼 보일 수 있습니다. 제공된 Shot 컴포넌트는 이미지 비율을 유지하고, overflow 컨테이너로 보이는 크롭 영역을 정합니다. 원본 PNG는 그대로 보존됩니다.

움직임은 절제하세요. 예제의 카메라 배율은 0.985에서 1로만 바뀝니다. 크게 확대하면 작은 UI 텍스트가 흐려집니다. 오프닝의 사각형은 누가 봐도 편집 그래픽이고, 제품 화면은 실제 캡처입니다. 내 영상에 맞게 바꿀 때도 이 구분을 지키세요. 장식 요소로 스토리를 설명할 수는 있지만, 제품 화면 안에서 증거를 지어내서는 안 됩니다.

휴대폰 크기에서는 내보낸 파일이 기술적으로 선명하더라도 데스크톱 페이지 전체가 너무 작게 보일 수 있습니다. 모바일 시청자를 위해서는 가로 프레임 전체를 축소하지 말고 세로 레이아웃 재구성 튜토리얼을 따르세요.

작동하는 버전을 잃지 않고 장면 수정하기

크게 수정하기 전마다 작동하는 프로젝트를 저장해 두세요. 다음처럼 합격 조건을 붙여 한 번에 하나만 바꿔 달라고 요청합니다.

카탈로그 장면만 변경하세요. 4-11초 구간과
소스 크롭 y=0..320을 유지하세요. 제목과 이미지 사이 간격을 12픽셀 늘리세요.
스크린샷, 이후 장면, 컴포지션 크기, 의존성은 바꾸지 마세요.
150프레임에서 제목, 전체 크롭, 캡처 라벨이 서로 겹치지 않아야 합니다.

900프레임 전체를 내보내기 전에 diff를 확인하고 바뀐 구간만 먼저 렌더링하세요. 장면 길이를 바꾸는 요청이라면 SCENES, 전체 길이, 내레이션, 자막을 함께 확인합니다. 음성 트랙은 그대로 둔 채 화면 장면만 늘리면 단순한 디자인 변경이 아니라 타이밍 변경이 됩니다.

실제 수정 과정에서는 세로 버전의 문서·API 장면에 더 좁은 원본 크롭이 필요했습니다. 나중에 편집할 때 자막 텍스트를 경고 없이 숨길 수 있는 줄 수 제한(line-clamping)도 제거했습니다. 이 수정 사항은 내려받는 최종 소스에 포함되어 있으며, 출처 메모에 모델 출력과 편집자 수정 사항을 구분해 적어 두었습니다.

MP4 내보내기와 검증

프로젝트 루트에서 다음을 실행합니다.

npm run render:landscape
ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames \
  -show_entries format=duration -of json out/landscape.mp4

예상 결과는 H.264, 1280 × 720, 30 fps, 900프레임, 30초 타임라인입니다. 이 컴포지션은 설계상 소리가 없으므로 오디오 누락 오류로 판단하지 마세요. 보이스오버와 자막 가이드를 따라 할 때는 DemoNarrated를 사용하세요.

파일이 생성됐는지만 보고 끝내지 마세요. MP4를 처음부터 끝까지 재생하고, 장면마다 멈춰서 스크린샷을 원본과 비교하세요. 목적지가 잘 읽히는지, 비공개 데이터가 보이지 않는지, 의도하지 않은 빈 화면이 없는지 확인합니다. 메타데이터로는 크기와 길이만 확인할 수 있으며, 메시지가 유용하고 정확한지는 알 수 없습니다.

완성된 영상 활용하기

편집 가능한 프로젝트와 원본 에셋, 내보낸 파일을 함께 보관하세요. 그래야 제품 화면이 바뀌었을 때 스토리를 새로 지어내지 않고 업데이트할 수 있습니다. 내 제품을 소개할 때는 샘플의 Ofox 목적지와 스크린샷을 교체하세요. 공개 페이지를 소개하는 영상을 테스트하지 않은 비공개 워크플로의 증거로 재사용하면 안 됩니다.

Opus 5.5 모델 페이지는 이 튜토리얼과 관련된 Ofox 모델 항목입니다. 이 튜토리얼에서 기록한 코드 생성 호출은 Ofox API가 아니라 퍼스트파티 Claude Code로 실행했습니다. Ofox의 모델 항목과 문서는 다음에 방문하기 좋은 곳이지만, Ofox가 Remotion 렌더러 역할을 한다는 뜻은 아닙니다.

다음 단계로 보이스오버와 자막 추가하기나 세로 영상용 레이아웃 다시 짜기를 보세요. 전체 워크플로는 메인 영상 가이드에서 한눈에 볼 수 있습니다.