소셜 비디오 포맷터

소셜 비디오 포맷터은(는) 무엇을 하나요?

이미 완성된 동영상(스토리, 모션, 브랜딩이 완료된 상태)을 가져와서 피드에서 돋보이게 만듭니다. 이는 동영상을 제작하는 것과는 다른 작업입니다. 노트북에서 멋져 보이는 가로 데모는 세로 피드에서 죽습니다. 레터박스 처리되어 좁은 띠로 보이고, 자막은 UI 버튼 아래에 위치하며, 첫 프레임은 검은색이고, 루프도 되지 않습니다. 이 스킬은 이 다섯 가지 문제를 플랫폼별로 모두 해결하고, 메커닉스 팩이 필요로 하는 정확한 사양을 출력합니다.

이것은 취향(taste) 레이어입니다. remotion-video-production 팩과 함께 사용합니다. 여기서 리프레임, 안전 영역, 자막 스타일, 루프를 결정한 다음 구체적인 사양을 remotion-compose(새로운 <Composition> 너비/높이를 작성하고 자막을 하드코딩)와 remotion-render(플랫폼별로 내보내기)에 전달합니다. 여기서는 컴포지션 코드를 작성하거나 렌더링을 실행하지 말고 사양을 지정하고 연기합니다.

리프레임, 크기 조정, 크롭, 세로 변환, 자막, 또는 "소셜용 포맷/내보내기" 또는 특정 플랫폼(TikTok, Reels, Shorts, X/Twitter, LinkedIn)에 대한 요청, 심지어 "이걸 모바일에서 작동하게 해 줘"와 같은 요청에도 적극적으로 트리거됩니다.

워크플로우

순서대로 실행하세요. 자막보다 먼저 리프레임하세요(자막 안전 영역은 새로운 종횡비에 따라 달라집니다). 또한 렌더링에 넘기기 전에 첫 프레임과 루프를 디자인하세요.

1단계 - 대상 플랫폼을 결정하고 사양을 가져옵니다.

어떤 플랫폼에 게시할지 물어본 다음, references/platform-specs 테이블에서 각 플랫폼의 하드 제약 조건을 가져옵니다. 플랫폼당 네 가지 숫자가 필요합니다: 종횡비, 해상도, 최대 길이, 안전 영역 여백(플랫폼이 자체 UI로 덮는 픽셀 띠 - 사용자 이름, 캡션, 액션 레일, 진행률 표시줄). 절대 추측하지 마세요. 액션 레일 여백 안에 있는 캡션은 기기에서는 보이지 않지만 미리보기에서는 멀쩡해 보입니다. 하나의 소스 동영상은 일반적으로 두세 개의 내보내기 파일로 분기됩니다(예: TikTok/Reels/Shorts용 9:16 마스터 + LinkedIn/X용 1:1 또는 16:9).

2단계 - 리프레임 전략 선택 (9:16 ↔ 16:9)

크롭은 어떤 픽셀이 살아남을지 결정하므로, 피사체가 새 프레임 안에 있어야 합니다. 내보내기별로 전략을 선택하세요. references/reframe-strategies를 참조하십시오:

• 리레이아웃 (최고). 16:9 픽셀을 전혀 크롭하지 않습니다. 새로운 캔버스에 맞게 장면을 다시 구성합니다: 나란히 있던 것을 쌓고, 텍스트를 키우고, 피사체를 세로 중앙으로 옮깁니다. 이것은 remotion-compose 변경 사항(새로운 너비/높이, 동일한 콘텐츠)이며, 항상 크롭보다 낫습니다. 대상 치수를 전달하십시오.
• 센터 크롭. 9:16을 위해 16:9 프레임의 중간 열을 유지합니다. 빠르지만 바깥쪽 1/3을 버리므로 피사체가 중앙에 있을 때만 안전합니다.
• 패드 / 블러 바. 전체 16:9 프레임을 9:16에 맞추고, 흐릿하게 확장된 복사본으로 위/아래를 채웁니다. 토킹헤드나 화면 녹화에는 허용되지만, 모션 디자인 작품에는 게으른 느낌을 줍니다.
• 펀치 앤 트랙. 피사체로 크롭하고 시간이 지남에 따라 크롭 창을 움직여 액션을 따라갑니다. 가장 강력한 결과이지만 가장 많은 작업이 필요합니다. remotion-compose용 키프레임을 지정하십시오.

9:16 → 16:9로 가는 것은 역방향의 동일한 논리입니다. 세로 클립을 가로 띠로 필러박싱하는 대신 새로운 가로 공간을 활용하도록 리레이아웃하십시오.

3단계 - 새 프레임에 안전 영역 매핑

각 내보내기에 대해 플랫폼의 안전 영역 여백을 오버레이하고 모든 필수 요소(캡션, 로고, CTA, 주요 피사체)를 안전 사각형 안에 유지하십시오. 오른쪽/아래쪽 여백(액션 레일 + 캡션 블록)은 9:16에서 일반적인 문제입니다. 아래 safe_area.js를 실행하여 백분율 여백을 정확한 해상도의 픽셀 박스로 변환한 다음 해당 숫자를 레이아웃 경계로 remotion-compose에 전달하십시오. 읽어야 하는 모든 항목에 대해 안전하지 않은 띠는 사용 금지 영역으로 처리하십시오.

4단계 - 플랫폼 기본 첫 프레임 디자인

첫 프레임은 썸네일이자 스크롤을 멈추게 하는 요소입니다. 자동 재생은 음소거 상태로 시작되므로, 프레임 0은 오디오 없이도 의미를 전달해야 합니다. 검은색, 로고 스팅, 또는 페이드 중간에서 시작하지 마십시오. 읽을 수 있는 훅(결과물, 굵은 캡션 라인, 또는 이미 화면에 있는 피사체)으로 여십시오. 이것은 인트로 장면에 대한 remotion-compose 편집(또는 1-2초의 추가 훅)입니다. 프레임 0이 정확히 무엇을 보여줄지 지정하십시오.

5단계 - 하드코딩된 자막 지정

음소거 재생을 가정합니다: 자막은 선택이 아닌 필수이며, 하드코딩(픽셀에 렌더링)되어야 합니다. 업로드된 .srt 사이드카 파일은 플랫폼 간에 일관성이 없고 스타일 지정이 불가능하기 때문입니다. remotion-compose에 대해 다음을 지정하십시오: 위치(안전 영역 내, 일반적으로 하단 1/3이지만 캡션 블록 여백 위), 스타일(크고, 대비가 높으며, semibold이고, 모든 배경에서 가독성을 위해 획 또는 단색 배경 포함), 타이밍(텍스트 벽이 아닌 음성에 동기화된 구문 수준 덩어리), 화면에 표시되는 줄은 최대 ~2줄을 넘지 않아야 합니다. 단어별 애니메이션 자막의 경우 모션 디자인은 kinetic-typography에 위임하고 여기서는 안전 영역 상자와 타이밍만 지정하십시오.

6단계 - 루프 디자인

피드는 클립을 즉시 다시 재생하므로, 깔끔한 루프는 시청 시간을 배가시킵니다. 다음 중 하나를 결정하십시오:

• 매끄러운 루프 - 마지막 프레임이 첫 프레임과 일치(동일한 구성, 위치, 색상)하여 다시 재생이 눈에 띄지 않습니다. 짧은 앰비언트/브랜드 루프에 가장 적합합니다.
• 훅백 루프 - 시청자를 다시 시작으로 보내는 대사("...그게 1단계입니다")로 끝나서, 다시 보기를 의도적으로 만듭니다.
• 하드 스톱 - 명확한 CTA 종료 카드; 루프가 어색하게 느껴질 수 있는 긴 내러티브 작품에 적합합니다.

매끄러운 루프의 경우, 시작과 끝은 remotion-compose 제약 조건(프레임 0과 마지막 프레임 일치)입니다. 루프 유형과 일치시킬 프레임을 지정하십시오.

7단계 - 내보내기 사양을 생성하고 전달

아래 export-spec 템플릿을 플랫폼당 하나의 블록으로 채우십시오. 이 사양은 메커닉스 팩을 위한 브리핑입니다: remotion-compose는 안전 영역 레이아웃, 첫 프레임 및 하드코딩된 자막과 함께 종횡비별로 하나의 <Composition>을 작성합니다. 그런 다음 remotion-render는 각각을 내보냅니다(9:16 내보내기는 remotion-render의 세로 프리셋에 따라 1080×1920에서 작성된 Composition입니다). 여기서는 렌더링하지 말고 사양을 제공하십시오.

품질 기준

다음 모든 조건이 충족될 때만 내보내기가 A+입니다:

• 모든 플랫폼 내보내기는 실제 종횡비, 해상도, 최대 길이 및 안전 영역 상자를 명시하며, 사양 테이블에서 가져온 것이지 추측한 것이 아닙니다.
• 어떤 대상 플랫폼에서도 필수 요소(캡션, 로고, CTA, 피사체)가 안전하지 않은 여백에 있지 않습니다. safe_area.js 상자에 대해 검증되었습니다.
• 리프레임은 피사체가 손실될 경우 리레이아웃 또는 트래킹 크롭입니다. 모션 작품에 대한 맹목적인 센터 크롭이나 게으른 블러 바 패딩이 아닙니다.
• 프레임 0은 소리를 꺼도 읽을 수 있습니다: 훅, 결과 또는 피사체 - 절대 검은색, 절대 로고만, 절대 페이드 중간이 아닙니다.
• 캡션은 하드코딩되고, 안전 영역 내에 있으며, 구문 단위로 나뉘고, 2줄 이하이며, 대비가 높습니다.
• 루프 유형은 의도적으로 선택되었으며, 매끄러운 루프의 첫 번째/마지막 프레임은 일치하도록 지정되었습니다.
• 출력물은 remotion-compose / remotion-render에 전달되는 사양입니다. 이 스킬은 컴포지션 코드를 작성하지 않았고 렌더링을 실행하지 않았습니다.

하지 말아야 할 것

• 여기서 프로젝트를 구성하거나, 컴포지션 코드를 작성하거나, 렌더링을 실행하지 마십시오. 사양을 지정하고 remotion-setup / remotion-compose / remotion-render에 위임하십시오.
• 피사체가 중앙에 없을 때 16:9 소스를 9:16으로 센터 크롭하지 마십시오. 피사체를 잘라낼 수 있습니다. 대신 리레이아웃하거나 트래킹하십시오.
• 플랫폼의 액션 레일과 캡션 블록이 덮는 오른쪽/아래쪽 여백에 캡션, CTA 또는 로고를 배치하지 마십시오.
• 소셜용으로 업로드된 .srt/.vtt 사이드카 캡션에 의존하지 마십시오. 항상 렌더링되고 스타일을 제어할 수 있도록 픽셀에 하드코딩하십시오.
• 검은색, 로고 스팅 또는 페이드로 열지 마십시오. 프레임 0은 썸네일입니다.
• 모든 플랫폼에 하나의 16:9 파일을 제공하지 마십시오. 세로 피드는 레터박스 처리하여 좁은 띠로 만듭니다. 종횡비별로 내보내십시오.
• 플랫폼의 최대 길이를 초과하여 "여전히 게시될 것"이라고 기대하지 마십시오. 잘리거나 거부됩니다. 컷에서 제한 시간에 맞추십시오.
• 여기서 단어별 캡션 애니메이션을 디자인하지 마십시오. 그것은 kinetic-typography의 영역입니다. 안전 상자와 타이밍만 지정하십시오.
• 여기서 스토리보드나 샷 순서를 계획하지 마십시오. 동영상이 아직 존재하지 않는다면 그것은 video-storyboard의 영역입니다. 이 스킬은 이미 편집된 동영상을 리프레임합니다.
• 여기서 요소가 움직이는 방식(이징, 간격, 후속 동작)을 조정하지 마십시오. 그것은 motion-design-principles의 영역입니다. 이 스킬은 새로운 캔버스와 경계만 지정합니다.
• 여기서 리프레임을 위한 팔레트, 대비 또는 조명을 선택하지 마십시오. 해당 결정은 motion-color-and-light에 위임하십시오.
• 여기서 제품 데모 콘텐츠 또는 화면 동작을 연출하지 마십시오. 그것은 product-demo-director의 영역입니다. 이 스킬은 콘텐츠가 확정되었다고 가정합니다.
• 여기서 음악, 비트 동기화 또는 사운드를 디자인하지 마십시오. 캡션은 음소거된 자동 재생을 가정하지만, 오디오는 sound-and-music-sync의 작업입니다.

관련 스킬

이것은 비디오 팩의 하나의 제작 스킬입니다. 요청이 실제로 다른 스킬의 관심사일 때는 형제 스킬에 위임하고, 형식 사양은 메커닉스 스킬에 전달하십시오:

• video-storyboard - 동영상이 존재하기 전에 비트와 샷 순서를 계획합니다. 이 스킬 이전에 옵니다.
• product-demo-director - 데모 콘텐츠와 화면 동작을 연출합니다.
• motion-design-principles - 애니메이션의 이징, 간격 및 움직임 기술; 새 종횡비에 맞게 프레임을 리레이아웃할 때 활용하십시오.
• motion-color-and-light - 팔레트, 대비 및 조명 결정.
• kinetic-typography - 단어별 캡션 모션 애니메이션 (여기서 안전 상자와 타이밍을 지정하면 애니메이션을 디자인합니다).
• sound-and-music-sync - 음악 및 비트 동기화; 이 스킬이 의도적으로 건드리지 않는 오디오 레이어.
• remotion-compose / remotion-render - 이 스킬의 내보내기 사양을 소비하여 종횡비별 <Composition>을 작성하고 MP4를 내보내는 메커니즘.

계산기

독립형 Node 스크립트. safe_area.js로 저장하고 node safe_area.js로 실행하십시오. 각 플랫폼의 백분율 안전 영역 여백을 해당 플랫폼의 해상도에 대한 픽셀 상자로 변환하여 정확한 레이아웃 경계를 remotion-compose에 전달할 수 있도록 합니다. 종속성이 없습니다. 사양이 변경됨에 따라 platforms 블록을 편집하십시오.

// 소셜 안전 영역 계산기. 실행: node safe_area.js
// 여백은 플랫폼 UI가 덮는 각 가장자리의 백분율입니다(위/오른쪽/아래/왼쪽).
// 오른쪽 + 아래쪽은 액션 레일과 캡션 블록 때문에 9:16에서 큽니다.
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    'safe box -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

실행 예시 출력

TikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479
Reels          1080x1920   safe box -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574
X (in-feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161

해석: TikTok에서 모든 필수 읽기 요소를 x 32→961, y 115→1594 내에 배치하십시오. 오른쪽 여백(액션 레일: 좋아요, 댓글, 공유)은 마지막 ~119px를 차지하고, 아래쪽(사용자 이름 + 캡션)은 ~326px를 차지합니다. 스튜디오 미리보기에서는 괜찮아 보이지만 기기에서는 그곳에 있는 모든 것이 가려집니다. 이것을 레이아웃 경계로 remotion-compose에 전달하십시오. 1080×1920 세로 Composition에서 캡션과 CTA를 원시 프레임 가장자리가 아닌 상자 안에 배치하십시오.

템플릿: export-spec

플랫폼당 하나의 블록을 채우십시오. 이것은 remotion-compose와 remotion-render가 사용하는 브리핑입니다. safe_area.js의 안전 영역 숫자를 붙여넣으십시오.

SOCIAL EXPORT SPEC. [FILL: 동영상 이름]. 출처: [FILL: 16:9 마스터, 1920x1080]

PLATFORM: [FILL: TikTok / Reels / Shorts / X / LinkedIn]
  종횡비 / 해상도:   [FILL: 9:16 / 1080x1920]
  최대 길이:            [FILL: 예: 피드 내 <= 60초]
  안전 상자 (픽셀):         x:[FILL] y:[FILL] w:[FILL] h:[FILL]   (safe_area.js에서)
  리프레임 전략:      [FILL: re-layout / center crop / blur-pad / punch-and-track]
    -> remotion-compose: [FILL: 새 Composition WxH + 레이아웃 노트 / 크롭 키프레임]
  첫 프레임 (프레임 0): [FILL: 0에서 보여줄 음소거 훅 - 절대 검은색/로고/페이드 아님]
  캡션:              하드코딩, [FILL: 안전 상자 내 위치], <=2줄,
                         구문 단위, [FILL: 스타일 - 크기/대비/배경]
  루프:                  [FILL: seamless / hook-back / hard stop]
    -> 매끄러운 경우:      프레임 0이 마지막 프레임과 [FILL: 위치/색상] 일치
  렌더링:                remotion-render [FILL: 프리셋, 예: 1080x1920 H.264 MP4]

(대상 플랫폼 각각에 대해 블록 반복)

참고 자료/플랫폼 사양

출시 전에 각 플랫폼의 현재 크리에이터 문서와 대조하여 확인하십시오. 이것은 안정적인 형태이지만 제한 사항은 변경될 수 있습니다. 종횡비와 안전 영역이 정확한 최대 길이보다 더 중요합니다.

• TikTok - 9:16, 1080x1920. 인피드 최적 시간은 짧은 편(~60초 미만)이지만, 업로드는 훨씬 길어질 수 있습니다. 오른쪽 액션 레일이 두껍고 아래쪽 캡션 블록이 높습니다. 필수 읽기 콘텐츠는 위쪽과 중앙에 유지하십시오. 사운드 온 문화이지만 접근성과 음소거 자동 재생을 위해 여전히 캡션을 추가하십시오.
• Instagram Reels - 9:16, 1080x1920. 최대 ~90초. TikTok과 유사한 오른쪽/아래쪽 UI에 프로필/오디오 행이 아래에 추가됩니다. 인그리드 크롭은 1:1이므로 중앙이 정사각형 썸네일로도 읽혀야 합니다.
• YouTube Shorts - 9:16, 1080x1920. 최대 60초(루프 제외). 오른쪽 액션 레일은 더 가볍고 아래쪽은 더 컴팩트합니다. 위쪽은 제목과 채널 아이콘으로 거의 먹히지 않습니다. 안전 영역이 가장 제한적이지 않지만, 아래쪽과 오른쪽 모서리에 있는 CTA를 확인하십시오.
• X (Twitter) - 인피드 1:1, 1080x1080. 더 긴 동영상은 편집됨 또는 타임라인에서 더 작게 표시될 수 있습니다. 오른쪽/아래쪽 UI는 액션(리포스트, 좋아요, 북마크)을 위한 얇은 여백과 아래쪽의 캡션 바를 위한 약간 더 큰 여백입니다. 액션 여백 밖에 CTA를 배치하지 마십시오.
• LinkedIn - 인피드 1:1(1080x1080, 피드에서 가장 일반적임) 또는 4:5(1080x1350, 뉴스피드에서 더 많은 수직 공간을 제공함). 위쪽 여백은 프로필 아이콘/이름에 사용되며 아래쪽은 액션(좋아요, 댓글, 공유) + 캡션을 위한 것입니다. 리더빌리티는 표면적으로는 비즈니스 톤이지만 여전히 시차를 두고 스크롤됩니다.

도구 모범 사례

• safe_area.js를 관련 있는 모든 곳에 주입하고 실행하십시오. 동영상당 여러 플랫폼을 처리할 때 한 번 실행하면 됩니다.
• 플랫폼 사양을 조회한 후에만 export-spec을 작성하십시오. 추측한 사양은 전달하지 마십시오.
• remotion-compose는 정확한 Composition 치수(예: 9:16의 경우 1080×1920)와 안전 영역, 첫 프레임 및 자막 스타일 규칙 목록을 기대합니다. 이 템플릿은 그 목록이며, 그 형식으로 채워야 합니다.
• remotion-render는 플랫폼 프리셋과 함께 composition 이름을 기대합니다. Aspect와 Render 필드는 이 연결을 명시적으로 만듭니다.
• 프레임 0이 썸네일 선택 권장 사항을 위반하는 경우(여전히 검은색 또는 페이드 중간일 때) 거절하십시오.

이 스킬은 다른 스킬(kinetic-typography, motion-design-principles 등)의 출력을 평가하기 위한 검증 게이트가 아닙니다. 리레이아웃 중 동작이 충분히 다듬어지지 않은 경우(예: 펀치 앤 트랙 크롭이 흔들림) remotion-compose 사양을 전달하기 전에 해당 스킬로 다시 라우팅하십시오.