Opus 5.5 제품 영상을 읽기 쉬운 세로 영상으로 바꾸는 방법

쓸모 있는 세로 영상을 만들려면 화면 비율뿐 아니라 레이아웃도 바꿔야 합니다. Opus 5.5/Remotion 프로젝트라면 스토리와 원본 에셋은 그대로 두고, 새 세로 컴포지션에 제목, 스크린샷, 자막을 다시 배치하세요. 실제 인터페이스는 시청자가 봐야 하는 부분을 중심으로 크롭하고, 데스크톱 화면을 휴대폰 크기 상자에 욱여넣지 마세요.

이 튜토리얼에서는 30초 제품 개요 영상을 1280 × 720에서 720 × 1280으로 변환합니다. 실제로 내보낸 두 버전과 편집 가능한 프로젝트를 모두 제공합니다. 이번에 새로 하는 작업은 스크린샷 프레이밍, 텍스트 배치, 출력 점검입니다. 코드에서 MP4까지 이어지는 전체 워크플로는 메인 Opus 영상 가이드에서 다룹니다.

실제로 내보낸 두 버전 비교하기

내레이션이 들어간 가로 버전을 재생하거나 내려받은 뒤 세로 버전과 비교해 보세요.

Remotion으로 실제 렌더링한 720 × 1280, 30 fps, 900 영상 프레임 결과물입니다. 영어 참고 내레이션과 문장 자막은 가로 버전과 같습니다. 공개 페이지를 소개하는 영상이며, API 요청이 완료되는 과정을 녹화한 것이 아닙니다.

전체 프로젝트와 세로 MP4를 내려받으세요. 아카이브에는 실제 1280 × 720 원본 캡처와 최종 크롭 좌표가 그대로 들어 있어, 변환 과정을 확인하고 원하는 대로 바꿀 수 있습니다.

처음 React/Remotion 소스를 만들 때는 퍼스트파티 Claude Code에서 claude-opus-5-5를 실제로 호출했습니다. 이 호출에는 텍스트로 쓴 에셋 설명과 크기만 전달했으며, 스크린샷 픽셀은 전달하지 않았습니다. 그 뒤 실제 이미지를 넣고 결과를 검토해 편집상 수정을 한 다음 로컬에서 렌더링했습니다. 이 MP4는 Opus가 직접 출력한 것이 아니며, 참고 음성은 eSpeak NG로 따로 만들었습니다.

재배치, 크롭, 새로 캡처하기 중에서 고르기

가로 스크린샷은 가로 공간이 넉넉해 내비게이션, 가운데 페이지, 사이드바를 한 번에 보여 줄 수 있습니다. 세로 프레임에서는 보통 세 가지를 모두 읽을 수 있는 크기로 담기 어렵습니다. 얼마나 확대할지 정하기 전에, 어떤 부분이 해당 문장의 내용을 뒷받침하는지부터 정하세요.

이 세로 버전은 재배치와 실제 화면 크롭을 함께 사용합니다. 사이트의 모바일 레이아웃을 보여 준다고 주장하지 않습니다. 문서 장면은 왼쪽 소개 부분을 더 가까이서 보여 주고, API 장면은 메인 개요와 표를 유지합니다. 원본 캡처는 수정하지 않았습니다.

이 에셋을 고른 방법은 스크린샷 데모 튜토리얼에서 설명합니다. 실제 모바일 인터페이스가 있다면 데스크톱 화면 일부를 확대하기보다 모바일 화면을 캡처하는 편이 나을 수 있습니다. 이때는 다른 원본 에셋이 되므로 URL, 뷰포트, 캡처 시각을 따로 기록하세요.

스토리는 하나로, 컴포지션은 둘로 관리하기

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

내려받은 프로젝트에서 시작합니다.

npm ci
npm start

DemoNarrated를 먼저 선택하고, 이어서 DemoPortrait를 선택합니다. 두 컴포지션은 장면 구간, 이미지, 내레이션 일정이 같고 layout prop만 다릅니다. 그래서 의미 있는 비교가 가능합니다. 시청자가 읽을 수 있는 내용이 달라진다면, 그 차이는 대본을 바꿔서가 아니라 레이아웃과 크롭 때문에 생긴 것입니다.

화면만 필요한 버전을 내보낼 때를 위해 무음 DemoLandscape 컴포지션도 유지하세요. 아카이브에 들어 있는 세 번째 결과물이며, 스토리보드는 같습니다.

src/index.tsx에서 SCENES는 4, 11, 18, 25초의 컷을 관리합니다. Root는 컴포지션 크기를 등록합니다. Demo는 레이아웃을 선택하고, ShotScene은 각 이미지를 어디에 놓을지 정합니다. Root만 바꿨다면 실제 디자인 작업은 대부분 아직 끝나지 않은 것입니다.

실제 픽셀 단위로 세로 레이아웃 정하기

세로 컴포지션은 x=48부터 x=672까지의 가로 영역을 사용합니다. 720픽셀 캔버스 양옆에 48픽셀씩 여백을 두고, 스크린샷에는 624픽셀 너비를 줍니다. 메인 콘텐츠는 y=110 부근에서 시작합니다. 스크린샷은 y=330, 챕터 줄은 y=860에서 시작하며, 자막 상자는 y=936부터 y=1060까지 차지합니다.

이 값은 이 프로젝트의 디자인 좌표이며, 모든 소셜 앱에 통하는 공식 안전 영역이 아닙니다. 버튼, 설명 문구, 기기 화면 테두리는 게시처마다 다릅니다. 게시하기 전에 해당 게시처의 현재 미리보기를 확인하세요. 이 튜토리얼의 로컬 테스트는 플랫폼 업로드 테스트가 아닙니다.

실제 로컬 미리보기입니다. 스크린샷은 제목, 자막과 별도로 프레이밍했습니다. 인터페이스와 예제 영상은 영어이며, 다른 언어처럼 보이도록 이미지를 고치지 않았습니다.

제목이 두 줄로 넘어가도 스크린샷이 자막 영역까지 밀려나지 않습니다. “Explore the catalog”(카탈로그 둘러보기)보다 자리를 더 차지하는 “Find the documentation”(문서 찾기)에서 특히 중요한 부분입니다. 다른 제목을 쓸 때는 글자 크기가 같으면 블록 높이도 같다고 가정하지 말고, 실제로 줄바꿈된 높이를 확인하세요.

API 크롭은 이 버전에서 가장 높은 이미지입니다. 높이가 약 479.3픽셀이므로 y=809.3 부근에서 끝나고, 캡처 라벨은 그보다 약 22픽셀 아래에서 시작합니다. 챕터 줄까지 여유 공간이 거의 없으므로, 이 장면을 다시 확인하지 않은 채 이미지 높이나 라벨 글자 크기를 무심코 키우면 안 됩니다.

인터페이스를 왜곡하지 않도록 크롭 계산하기

크롭에는 원본 기준 좌표 네 개, 즉 x, y, 너비, 높이가 필요합니다. 크기를 조정할 때는 두 축에 같은 배율 하나를 씁니다. 최종 원본 크롭은 다음과 같습니다.

모든 크롭은 1280 × 720 원본 파일 범위 안에 있습니다. 카탈로그 크롭은 그 아래의 수시로 바뀌는 가격 영역을 일부러 제외했습니다. 문서와 API 크롭은 실제 픽셀을 그대로 사용하며, 텍스트나 컨트롤을 새로 만들지 않습니다.

표시 너비 W와 크롭 (x, y, w, h)에는 다음 식을 사용합니다.

scale = W / w
viewport height = h × scale
image width = source width × scale
image height = source height × scale
image left = -x × scale
image top = -y × scale

각 항목은 순서대로 배율(scale), 뷰포트 높이, 이미지 너비, 이미지 높이, 이미지의 왼쪽·위쪽 위치입니다. API 장면에서는 624 / 690 ≈ 0.90435, 530 × 0.90435 ≈ 479.3입니다. 이미지는 overflow: hidden 뷰포트 안에서 계산된 음수 오프셋만큼 이동합니다. 너비와 높이에 같은 배율을 쓰므로 원은 원 모양 그대로이고 텍스트도 늘어나지 않습니다.

다만 한계도 있습니다. 크롭을 확대해도 원본 캡처에 없는 디테일은 살릴 수 없습니다. 문서 크롭은 원본 580픽셀을 출력 624픽셀로 보여 줍니다. 이 약간의 확대는 원본 좌표 계산에서 그대로 드러나며, 더 높은 해상도로 새로 캡처한 페이지가 아닙니다. 작은 텍스트가 튜토리얼의 핵심이라면 해당 영역을 적절한 해상도로 캡처하고, 휴대폰 표시 크기에서 다시 테스트하세요.

첫 렌더링 이후 바뀐 점

모델의 첫 출력은 문서와 API 스크린샷 전체를 세로 레이아웃에 넣었습니다. 렌더링은 됐지만 인터페이스 대부분이 너무 작아 쓸모가 없었습니다. 장면 순서는 그대로 두고 위에 적은 두 원본 크롭을 새로 적용했습니다. 이것이 첫 세로 버전과 최종 버전의 가장 큰 시각적 차이입니다.

자막의 두 줄 CSS 클램프도 제거했습니다. 클램프를 쓰면 상자는 깔끔해 보이지만 뒷부분 단어가 사라질 수 있습니다. 자막이 너무 길면 검토 과정에서 눈에 띄게 두고, 의도적으로 줄이거나 나누거나 공간을 더 주는 편이 안전합니다. 제공된 영어 문장은 점검한 버전에 맞지만, 문장을 바꾸면 다시 확인해야 합니다.

마지막으로, 이제 자막은 참고 오디오 스크립트가 생성한 src/captions.json에서 불러오며, 프레임 반올림에 따라 문장 시작 시점이나 그 직전에 나타납니다. 이 일정과 의도적으로 둔 읽기 시간은 보이스오버와 자막 튜토리얼에서 설명합니다. 이 프로젝트의 자막은 문장 단위이며, 노래방처럼 단어마다 맞춰 표시하는 방식이 아닙니다.

가로 버전의 디자인 요소를 모두 그대로 가져오지 마세요. 가로 버전에서는 문서와 API 제목이 전체 스크린샷 아래의 띠를 자막과 함께 씁니다. 세로 버전에서는 제목, 스크린샷, 캡처 라벨, 챕터 줄, 자막이 각각 다른 높이에 놓입니다. 같은 스토리를 쓰지만 컴포지션은 다릅니다.

Opus에게 검토하기 쉬운 세로 변환 요청하기

아래 프롬프트를 내 프로젝트에 맞게 바꿔 사용하세요. 이 작업에서 유용했던 제약 조건을 정리한 것이며, 가능한 모든 변형을 실행해 봤다는 뜻은 아닙니다.

이 기존 Remotion 프로젝트에 세로 컴포지션을 추가하세요.
가로 컴포지션과 승인된 원본 에셋은 유지하세요.
목표: 720x1280, 30 fps, 같은 장면 경계와 전체 프레임 수.

제목, 스크린샷, 자막을 각각 별도의 세로 블록으로 배치하세요.
다음 원본 크롭을 사용하세요: [승인된 이미지마다 x, y, width, height].
이미지 너비와 높이에 같은 배율 하나를 유지하세요.
인터페이스를 다시 그리거나 스크린샷 안의 라벨을 바꾸지 마세요.

이 프로젝트의 디자인 범위: x=48..672, 중요한 콘텐츠 y=90..1080.
이는 프로젝트 여백이며, 특정 플랫폼의 안전 영역을 뜻하지 않습니다.
별도의 자막 띠를 사용하고, 넘치는 텍스트를 line-clamping으로 숨기지 마세요.
단어 타임스탬프를 지어내거나 보이스오버를 몰래 줄이지 마세요.

변경한 파일, 크롭 계산, 확인해야 할 프레임을 반환하세요.
제목, 캡처 라벨, 자막이 더 이상 들어가지 않는 장면이 있으면 표시하세요.

모델이 크롭을 제안하면 실제 에셋과 대조하세요. 보기 좋은 영역이라도 화면을 이해하는 데 필요한 라벨이 빠져 있을 수 있습니다. 더 작은 글자 크기를 제안하면 실제로 볼 크기에서 확인하세요. 합격 기준은 모든 요소가 캔버스 안에 들어가는지가 아니라, 시청자가 의도한 메시지를 이해할 수 있는지입니다.

모든 장면을 확인한 뒤 두 버전 내보내기

카탈로그, 문서, API 장면을 대표하는 150, 390, 600프레임 같은 지점으로 이동해 확인하세요. 오프닝과 엔딩도 봐야 합니다. 제품 장면이 모두 괜찮아도 마지막 목적지 문구가 길면 넘칠 수 있습니다.

Remotion Studio의 프레임 선택기로 두 컴포지션의 같은 시점을 비교하세요. 어떤 페이지인지 알 수 있는지, 자막이 끝까지 보이는지, 크롭 가장자리, 제목 줄바꿈, 캡처 라벨 주변 공간을 살펴봅니다. 전환의 시작과 끝도 확인해 spring 효과나 카메라 움직임 때문에 콘텐츠가 의도한 영역 밖으로 밀려나지 않는지 보세요.

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

세로 영상의 예상 스트림은 H.264, 720 × 1280, 30 fps, 900 영상 프레임입니다. AAC 사운드트랙은 인코딩 과정에서 30초 영상 타임라인보다 조금 더 길게 남을 수 있습니다. 컨테이너의 반올림된 길이만 보지 말고 실제 문장 타이밍을 비교하세요.

이 점검은 로컬 브라우저 미리보기와 렌더링된 파일로 진행했으며, 실제 기기나 소셜 플랫폼 게시 테스트는 아닙니다. 캠페인을 시작하기 전에 시청자가 실제로 볼 크기로 최종 파일을 확인하고, 업로드된 버전도 확인하세요. 이 글이 다섯 개 언어로 제공된다고 해서 언어별 영상을 다섯 개 따로 만든 것은 아닙니다.

편집 가능한 가로·세로 세트로 전달하기

두 파일을 알아보기 쉬운 이름으로 저장하고, 두 파일을 만든 원본 프로젝트를 함께 보관하고, 플랫폼별로 바꾼 레이아웃도 기록하세요. 그래야 나중에 자막이나 제품 화면을 업데이트할 때 변경 이력을 추적할 수 있습니다. 내레이션을 교체했다면 두 레이아웃을 모두 다시 점검하세요. 가로에서 잘 맞던 문장도 세로에서는 줄바꿈을 다르게 해야 할 수 있습니다.

Opus 5.5 모델 페이지는 프로젝트 코드를 생성하거나 수정하는 작업과 관련된 페이지입니다. 기록된 호출은 퍼스트파티 Claude Code로 실행했으며, 로컬 렌더러와 참고 음성 엔진은 별개의 도구입니다. 이 예제가 Ofox에 원클릭 세로 편집 기능이 있다는 증거는 아닙니다.

전체 제작 과정은 Opus 영상 종합 가이드에서 다시 확인하세요. 원본 스토리를 다듬어야 한다면 제품 데모 튜토리얼을, 새 포맷에서 타이밍 문제가 드러났다면 오디오·자막 튜토리얼을 참고하세요. 작업을 이렇게 나눠 두면 수정할 때마다 검증하기가 쉬워집니다.