유튜브 숏츠 가로 세로 변환 크롭 수식과 Safe Zone 가이드

직접 해보기 →

기존 16:9 비율의 가로 카메라 영상이나 데스크톱 화면 녹화본을 유튜브 쇼츠(Shorts), 인스타그램 릴스(Reels), 틱톡(TikTok) 규격인 9:16 종횡비 세로 폼 포맷(1080x1920px)으로 재가공할 때 자막 가림 및 인앱 UI 차단 영역을 방지하는 계산 기법이 바로 가로 ➔ 세로 비디오 변환 및 Safe Zone 검수입니다.

가로 16:9 영상을 9:16 세로 대지 중앙에 맞추면 상하에 넓은 블랙 박스 여백이 생기거나, 줌인(Zoom-in) 확대 시 인물의 머리나 핵심 자막이 화면 밖으로 잘려 나가는 문제가 발생합니다. 세로 캔버스 3분할 뷰와 X축 수평 이동 offset 수식, 그리고 우측 반응 버튼 UI 안심 영역(Safe Zone) 레이어를 시각 모의하는 시뮬레이터입니다. 본 글에서는 16:9 to 9:16 좌표 수식을 해설합니다.

---

1. 16:9 ➔ 9:16 좌표 크롭 및 Safe Zone 수식 공식

가로 영상 폭 W_169, 높이 H_169를 9:16 세로 캔버스 W_916, H_916으로 꽉 채우기 위한 줌 스케일 S_fill 및 수평 X축 센터링 좌표 Shift_x 산출 공식은 다음과 같습니다:

[ S_{\text{fill}} = \frac{H_{916}}{H_{169}} = \frac{1920}{1080} \approx 1.7778 ]

[ \text{Shift}x = \frac{W{169} \times S_{\text{fill}} - W_{916}}{2} + \Delta x ]

숏폼 3대 인앱 UI 차단 위험 영역 (Safe Zone Boundary):

• 우측 하단 아이콘 레이어: 좋아요, 댓글, 공유, 음원 동그라미 배지가 점유하는 우측 120px, 하단 240px 범위.
• 상단 제목 및 프로필 바: 상단 160px 범위의 계정 닉네임 및 구독 버튼 겹침 영역.
• 이상적인 중앙 자막 배치 세이프존: Y축 35% ~ 65% 높이 구간의 1:1 중앙 박스 영역.

---

2. Canvas 16:9 ➔ 9:16 세로 비디오 가상 크롭 소스

다음은 HTML5 Canvas 상에서 가로 영상 프레임을 9:16 세로 비율로 잘라내고 Safe Zone 오버레이 가이드를 그리는 자바스크립트 소스입니다:

function drawVerticalShortsFrame(ctx, videoEl, cropXPercent) {
  const canvasWidth = 1080;
  const canvasHeight = 1920;

  // 1. 세로 꽉 차는 줌 스케일 계산
  const scale = canvasHeight / videoEl.videoHeight;
  const scaledWidth = videoEl.videoWidth * scale;

  // 2. 사용자가 조절한 X축 수평 이동 offset 적용
  const maxShiftX = scaledWidth - canvasWidth;
  const currentShiftX = (cropXPercent / 100) * maxShiftX;

  // 3. 캔버스에 가로 영상 중앙 렌더링
  ctx.drawImage(
    videoEl,
    currentShiftX / scale, 0, canvasWidth / scale, videoEl.videoHeight,
    0, 0, canvasWidth, canvasHeight
  );

  // 4. Safe Zone 가이드라인 빨간 박스 오버레이 그리기
  ctx.strokeStyle = 'rgba(239, 68, 68, 0.8)';
  ctx.lineWidth = 4;
  ctx.strokeRect(100, 400, 880, 1000); // 안전한 자막 중앙 영역
}

[!NOTE] 매번 프리미어나 파이널컷 같은 무거운 영상 편집 프로그램에서 줌인하고 자막 위치가 쇼츠 하단 좋아요 버튼에 가리는지 폰으로 확인하며 테스트할 필요 없이, 유튜브 숏츠 가로 영상 세로 변환 크롭 가이드 도구를 활용하면 화면 비율과 X축 위치 조절 및 안전 영역 레이어를 실시간으로 사전 검수할 수 있습니다.

---

3. 실무 숏폼 영상 자막 레이아웃 지침

1. 상하 2분할(Top/Bottom Division) 템플릿 활용: 가로 영상을 억지로 확대하면 화질이 깨집니다. 상단 1/2에는 16:9 가로 영상 원본을 띄우고, 하단 1/2 영역에는 텍스트 타이틀과 배경 그라디언트를 배치하는 2분할 숏폼 양식이 시각적 가독성에 매우 훌륭합니다.
2. 자막 폰트 크기 모바일 시청 기준 확대: 데스크톱 16:9 모니터 기준 자막 크기(24pt)는 스마트폰 세로 숏폼 화면에서 너무 작게 보입니다. 모바일 단말기 시청환경을 고려해 폰트 크기를 최소 1.8배 크게 확대해야 스와이프 시 시선을 사로잡을 수 있습니다.