Oh MyUtils

화면비 계산기 - 이미지·영상 비율 계산 온라인

이미지, 영상 화면비를 계산하세요. 16:9, 4:3, 1:1 등 프리셋으로 비율 유지 리사이즈 및 반응형 크기 계산.

자주 묻는 질문

화면 비율(종횡비)이란 무엇인가요?

화면 비율(종횡비)은 이미지, 동영상 또는 화면의 너비와 높이 사이의 비례 관계를 나타냅니다. 콜론으로 구분된 두 숫자로 표현하며(예: 16:9), 첫 번째 숫자는 너비, 두 번째 숫자는 높이를 나타냅니다. 일반적인 화면 비율로는 16:9(와이드스크린 HD), 4:3(전통적인 TV), 1:1(정사각형) 등이 있습니다. 화면 비율을 이해하면 이미지 왜곡 없이 크기를 조정하고, 다양한 화면과 플랫폼에서 콘텐츠가 올바르게 표시되도록 할 수 있습니다.

이 화면 비율 계산기는 어떻게 사용하나요?

입력 필드에 이미지나 동영상의 너비와 높이를 입력하세요. 도구가 즉시 간소화된 화면 비율(예: 16:9), 소수 비율 및 방향을 계산하여 표시합니다. 빠르게 크기를 설정하려면 비율 프리셋 버튼(16:9, 4:3, 1:1 등)을 클릭하거나 YouTube, Instagram, TikTok 등의 플랫폼 프리셋을 사용하세요. 크기 조정 탭으로 전환하면 기존 크기를 목표 크기에 맞게 비율을 유지하면서 조정할 수 있습니다.

데이터는 안전한가요? 서버로 전송되는 정보가 있나요?

모든 계산은 JavaScript를 사용하여 브라우저에서 100% 클라이언트 측에서 수행됩니다. 크기 데이터, 이미지 또는 기타 어떤 정보도 서버로 전송되지 않습니다. 이 도구는 한번 로드되면 완전히 오프라인으로 작동하므로, 기밀 프로젝트 사양이나 독점 미디어 크기 정보를 다룰 때도 안전하게 사용할 수 있습니다.

16:9와 1.78:1의 차이점은 무엇인가요?

둘은 같은 화면 비율을 서로 다른 형식으로 표현한 것입니다. "16:9"는 간소화된 정수 비율이고, "1.78:1"(정확히는 1.7778:1)은 16을 9로 나누어 얻은 소수 표현입니다. 정수 형식(16:9)은 일반 소비자 미디어와 디스플레이 사양에서 주로 사용되며, 소수 형식은 영화 및 전문 영상 제작에서 더 많이 사용됩니다(예: 아나모픽 와이드스크린의 2.35:1).

너비와 화면 비율을 알고 있을 때 높이는 어떻게 계산하나요?

공식: 높이 = 너비 × (비율 높이 / 비율 너비)를 사용하세요. 예를 들어, 16:9 비율에서 너비가 1920인 경우: 높이 = 1920 × (9/16) = 1080입니다. 이 계산기는 이 과정을 자동화합니다. 16:9 프리셋을 선택한 후 너비에 1920을 입력하면 높이 1080이 자동으로 계산됩니다.

YouTube 동영상에는 어떤 화면 비율을 사용해야 하나요?

YouTube는 일반 동영상에 16:9(와이드스크린)를 권장하며, 일반적인 해상도는 1920×1080(1080p), 2560×1440(1440p), 3840×2160(4K)입니다. YouTube Shorts는 9:16(세로) 방향으로 1080×1920을 사용합니다. 동영상이 16:9에 맞지 않으면 플랫폼이 자동으로 레터박스를 추가하므로, 올바른 비율을 사용하면 검은 여백을 방지할 수 있습니다.

GCD(최대공약수) 간소화는 어떻게 작동하나요?

이 도구는 너비와 높이의 최대공약수를 찾은 다음 두 값을 그 수로 나누어 비율을 간소화합니다. 예를 들어, 1920×1080의 경우: GCD(1920, 1080) = 120이므로, 1920/120 = 16, 1080/120 = 9가 되어 비율은 16:9가 됩니다. 일부 크기는 특이한 간소화 비율을 생성할 수 있으며(예: 1366×768은 683:384로 간소화), 이런 경우 도구는 가장 가까운 표준 비율도 함께 표시합니다.

코드 예제

// Aspect Ratio Calculator in JavaScript

// Calculate GCD using Euclidean algorithm
function gcd(a, b) {
  a = Math.abs(Math.round(a));
  b = Math.abs(Math.round(b));
  while (b) {
    [a, b] = [b, a % b];
  }
  return a;
}

// Calculate aspect ratio from width and height
function calculateAspectRatio(width, height) {
  if (width <= 0 || height <= 0) {
    throw new Error('Width and height must be positive numbers');
  }

  const divisor = gcd(width, height);
  return {
    ratioWidth: width / divisor,
    ratioHeight: height / divisor,
    decimal: +(width / height).toFixed(4),
    label: `${width / divisor}:${height / divisor}`,
  };
}

// Calculate missing dimension
function calculateMissingDimension(ratioW, ratioH, knownDimension, type) {
  if (type === 'width') {
    return Math.round((knownDimension * ratioW) / ratioH);
  } else {
    return Math.round((knownDimension * ratioH) / ratioW);
  }
}

// Scale dimensions proportionally
function scaleDimensions(originalW, originalH, targetW, targetH) {
  if (targetW) {
    const factor = targetW / originalW;
    return { width: targetW, height: Math.round(originalH * factor), factor };
  }
  if (targetH) {
    const factor = targetH / originalH;
    return { width: Math.round(originalW * factor), height: targetH, factor };
  }
}

// Example usage
const ratio = calculateAspectRatio(1920, 1080);
console.log(ratio);
// { ratioWidth: 16, ratioHeight: 9, decimal: 1.7778, label: "16:9" }

const height = calculateMissingDimension(16, 9, 2560, 'height');
console.log(`2560 x ${height}`);
// "2560 x 1440"

const scaled = scaleDimensions(1920, 1080, 1280, null);
console.log(`${scaled.width} x ${scaled.height} (${(scaled.factor * 100).toFixed(1)}%)`);
// "1280 x 720 (66.7%)"

관련 도구