화면 비율은 어떻게 계산하나요?
화면 비율은 가로와 세로를 두 수의 최대공약수(GCD)로 나누어 가장 간단한 정수비로 줄인 것입니다. 1920×1080의 최대공약수는 120이므로 1920÷120 = 16, 1080÷120 = 9가 되어 16:9입니다. 비율은 크기가 아니라 모양을 뜻하므로, 1280×720과 3840×2160도 같은 16:9입니다. 이 도구는 비율과 함께 총 픽셀 수, 메가픽셀, 가로÷세로 소수값을 보여주고, 원하는 새 가로 또는 세로를 넣으면 비율을 유지한 나머지 값을 환산합니다. 영상 편집에서 해상도를 줄이거나, 웹 이미지의 가로를 정했을 때 세로를 맞추거나, 인쇄용 이미지를 자를 때 유용합니다.
비율 유지 환산 공식
원본이 W×H이고 새 가로가 W'라면 새 세로 H' = W' × H ÷ W입니다. 반대로 새 세로 H'를 정했다면 W' = H' × W ÷ H입니다. 예를 들어 1920×1080을 가로 1280으로 줄이면 세로는 1280 × 1080 ÷ 1920 = 720입니다. 결과가 정수가 아니면 반올림해야 하는데, 이때 비율이 아주 조금 달라집니다. 1366×768처럼 정확한 정수비로 떨어지지 않는 해상도는 그 자체로 정확한 16:9가 아니고 683:384로 줄어드는 근사 16:9입니다(소수값 약 1.7786, 16:9는 약 1.7778).
대표 해상도별 비율·메가픽셀 비교표
아래 값은 모두 빌드 시점에 위 공식으로 계산했습니다. 정수비가 복잡하면 가장 가까운 표준 비율의 변형으로 보면 됩니다.
| 구분 | 해상도 | 정수비 | 가로÷세로 | 메가픽셀 |
|---|---|---|---|---|
| HD | 1280×720 | 16:9 | 1.7778 | 0.92 |
| FHD | 1920×1080 | 16:9 | 1.7778 | 2.07 |
| QHD(2K) | 2560×1440 | 16:9 | 1.7778 | 3.69 |
| UHD(4K) | 3840×2160 | 16:9 | 1.7778 | 8.29 |
| XGA | 1024×768 | 4:3 | 1.3333 | 0.79 |
| SXGA | 1280×1024 | 5:4 | 1.2500 | 1.31 |
| 노트북 1366×768 | 1366×768 | 683:384 | 1.7786 | 1.05 |
| 울트라와이드 WQHD | 3440×1440 | 43:18 | 2.3889 | 4.95 |
| 울트라와이드 UWFHD | 2560×1080 | 64:27 | 2.3704 | 2.76 |
| 정사각형 SNS | 1080×1080 | 1:1 | 1.0000 | 1.17 |
| 세로형 숏폼 | 1080×1920 | 9:16 | 0.5625 | 2.07 |
| 4:5 피드 | 1080×1350 | 4:5 | 0.8000 | 1.46 |
3440×1440은 흔히 21:9 모니터로 부르지만 실제 정수비는 43:18(약 2.39:1)이고, 2560×1080은 64:27입니다. 제품 이름의 21:9는 대략적인 표기라는 점을 알아 두세요. 영화 화면비 2.39:1과 가깝다는 의미입니다.
비율별 가로 폭에 따른 세로 높이
| 비율 | 가로 640px일 때 세로 | 가로 1280px일 때 세로 | 가로 1920px일 때 세로 |
|---|---|---|---|
| 16:9 | 360px | 720px | 1080px |
| 4:3 | 480px | 960px | 1440px |
| 1:1 | 640px | 1280px | 1920px |
| 9:16 | 1137.8px | 2275.6px | 3413.3px |
| 21:9 | 274.3px | 548.6px | 822.9px |
| 3:2 | 426.7px | 853.3px | 1280px |
소수점이 있는 값은 실제 작업에서 정수로 반올림해야 하며, 이때 한 픽셀 이내의 오차가 생길 수 있습니다.
다른 비율로 자르면 얼마나 남을까: 중앙 크롭 표
원본의 비율과 목표 비율이 다를 때는 한 방향의 일부를 버려야 합니다. 아래 표는 가운데를 기준으로 가능한 한 크게 잘랐을 때 남는 크기와 버려지는 면적 비율을 빌드 시 계산한 것입니다. 소수점이 남는 값(예: 607.5)은 실제 작업에서 정수로 맞춰야 하므로 짝수 픽셀로 반올림하는 경우가 많습니다.
| 원본 | 16:9로 자르면 | 4:3로 자르면 | 1:1로 자르면 | 4:5로 자르면 | 9:16로 자르면 |
|---|---|---|---|---|---|
| 1920×1080 영상 프레임 | 1920×1080 (버림 0.0%) | 1440×1080 (버림 25.0%) | 1080×1080 (버림 43.8%) | 864×1080 (버림 55.0%) | 607.5×1080 (버림 68.4%) |
| 4032×3024 스마트폰 사진 | 4032×2268 (버림 25.0%) | 4032×3024 (버림 0.0%) | 3024×3024 (버림 25.0%) | 2419.2×3024 (버림 40.0%) | 1701×3024 (버림 57.8%) |
| 1080×1080 정사각형 | 1080×607.5 (버림 43.8%) | 1080×810 (버림 25.0%) | 1080×1080 (버림 0.0%) | 864×1080 (버림 20.0%) | 607.5×1080 (버림 43.8%) |
표에서 눈에 띄는 점은 가로로 긴 영상을 세로형(9:16)으로 바꿀 때 면적의 약 68%가 사라진다는 사실입니다. 같은 장면을 가로와 세로 양쪽에 쓸 계획이라면 촬영 단계에서 중요한 피사체를 화면 가운데 가까이 두는 편이 편집이 쉽습니다. 반대로 4:3 사진을 16:9로 자르면 위아래 25%가 사라지므로 머리 위나 발끝이 잘리지 않는지 확인해야 합니다.
자주 쓰이는 화면 비율과 용도
- 16:9: TV, 대부분의 모니터, 유튜브 가로 영상의 표준 비율입니다.
- 4:3: 과거 CRT TV와 XGA 모니터, 일부 태블릿과 카메라 센서에서 쓰입니다.
- 3:2: 35mm 필름과 많은 DSLR 센서 비율이며, 일부 노트북 화면도 채택합니다.
- 1:1: 정사각형 SNS 게시물과 프로필 이미지에 쓰입니다.
- 4:5와 9:16: 세로형 피드와 숏폼 영상(쇼츠·릴스)에서 화면을 가득 채우기 위해 쓰입니다.
- 21:9 계열: 울트라와이드 모니터와 시네마틱 영상입니다.
검산된 계산 예시
예시 1. 4032×3024 스마트폰 사진. GCD는 1008이므로 비율은 4:3, 총 픽셀은 12,192,768로 약 12.19MP입니다. 이 사진을 16:9로 잘라 유튜브 썸네일에 쓰려면 가로 4032 기준 세로 2268만 남기고 위아래 756px을 버리게 됩니다.
예시 2. 1920×1080 영상을 가로 1280으로 축소. 새 세로 = 1280 × 1080 ÷ 1920 = 720이므로 1280×720이며, 총 픽셀은 921,600으로 원본(2,073,600)의 약 44.4%입니다. 가로세로를 각각 2/3로 줄이면 면적은 4/9가 됩니다.
예시 3. 1080×1080 정사각형 이미지를 4:5로 바꾸기. 가로 1080을 유지하면 필요한 세로는 1080 × 5 ÷ 4 = 1350입니다. 정사각형 원본에서 4:5를 만들려면 세로를 늘릴 수 없으므로 반대로 가로를 864(= 1080 × 4 ÷ 5)로 줄이는 방향으로 잘라야 합니다.
상황별 활용 시나리오
시나리오 1. 블로그 본문 이미지의 세로 높이 정하기. 본문 폭이 740px인 블로그에서 16:9 이미지를 넣으려면 높이는 740 × 9 ÷ 16 = 416.25이므로 반올림해 416px, 4:3이면 740 × 3 ÷ 4 = 555px입니다. 이 값을 이미지 태그의 width·height 속성이나 CSS aspect-ratio에 미리 적어 두면 이미지가 로딩되기 전에도 자리가 확보되어 글이 아래로 밀려 내려가는 현상을 줄일 수 있습니다. 416px로 반올림하면 실제 비율은 740÷416 ≈ 1.7788로 16:9(약 1.7778)와 0.06% 정도 차이가 나는데, 화면에서는 구별되지 않는 수준입니다.
시나리오 2. 링크 미리보기용 1200×630 이미지. 이 크기를 입력하면 최대공약수가 30이라 비율이 40:21, 가로÷세로는 약 1.9048로 나옵니다. 소셜 링크 미리보기 이미지에서 흔히 권장되는 크기로 알려져 있으나 플랫폼마다 권장값이 다를 수 있으니 업로드 전에 해당 서비스 안내를 확인하세요. 이 도구의 표준 비율 목록에서는 2:1이 가장 가까운 것으로 표시되며 오차는 약 4.76%입니다. 정확한 16:9나 2:1이 아니라는 뜻이므로, 16:9 영상 프레임을 그대로 올리면 가장자리가 잘릴 수 있습니다.
시나리오 3. 모니터를 고를 때 해상도 읽기. 3440×1440은 가로÷세로가 약 2.3889로, 목록의 21:9(약 2.3333)와는 약 2.38% 차이가 납니다. 제품 설명의 21:9는 비율의 정확한 정수비가 아니라 분류 이름이라는 것을 이 오차로 확인할 수 있습니다. 한편 3840×2160(4K)은 1920×1080(FHD)과 같은 16:9이면서 픽셀 수는 8,294,400 대 2,073,600으로 정확히 4배입니다. 같은 모양이라도 같은 화면 크기에서 더 촘촘한 화면이라는 뜻이므로, 크기가 아니라 픽셀 밀도는 화면 PPI 변환기로 따로 확인하세요.
입력값 경계와 도구의 실제 동작
- 정수만 받습니다. 가로·세로에 소수(1920.5), 0, 음수를 넣으면 계산하지 않고 오류 안내를 보여 줍니다. 해상도는 픽셀의 개수라서 정수라는 전제입니다.
- 새 가로·새 세로는 선택입니다. 비워 두면 환산 줄 없이 비율만 계산하고, 잘못된 값(소수 등)을 넣으면 오류로 처리합니다. 둘 다 채우면 새 가로가 우선입니다.
- 환산 결과가 정수가 아닐 때는 소수 둘째 자리까지의 값과 반올림한 정수를 함께 적어 줍니다. 어느 쪽을 쓸지는 목적에 따라 정하는데, 영상 인코딩은 짝수만 허용하는 설정이 흔하므로 반올림 후 짝수로 맞추는 경우가 많습니다.
- 가장 가까운 표준 비율은 코드에 들어 있는 12개 목록(16:9, 4:3, 3:2, 1:1, 5:4, 9:16, 3:4, 2:3, 4:5, 21:9, 32:9, 2:1) 가운데 가로÷세로 소수값이 가장 가까운 것입니다. 목록에 없는 비율(예: 1.91:1)은 가까운 이웃으로 표시되고, 오차 퍼센트가 클수록 실제로는 다른 비율이라고 읽어야 합니다.
- 1366×768은 최대공약수가 2뿐이라 683:384로 줄지만, 가로÷세로가 약 1.7786으로 16:9와 0.05% 차이밖에 나지 않아 사실상 16:9 화면으로 취급합니다.
흔한 실수와 한계
- 화면 크기(인치)와 비율을 혼동하는 경우: 같은 16:9라도 24인치와 32인치는 물리 크기와 픽셀 밀도(PPI)가 다릅니다. 비율은 모양만 말해 줍니다.
- 비율이 같으면 화질이 같다고 생각하는 경우: 1280×720과 3840×2160은 같은 16:9지만 픽셀 수는 9배 차이입니다.
- 늘려서 비율을 맞추는 경우: 가로세로를 각각 다른 배율로 키우면 이미지가 찌그러집니다. 비율이 다르면 자르기(크롭)나 여백(레터박스)으로 맞춰야 합니다.
- 가로와 세로 순서를 바꾸는 경우: 1080×1920은 9:16이고 1920×1080은 16:9입니다. 같은 모양이라도 방향이 다르면 다른 비율로 표기합니다.
- 픽셀 종횡비(PAR)가 1이 아닌 일부 구형 영상 포맷은 저장 해상도와 표시 비율이 다를 수 있으며, 이 도구는 정사각 픽셀을 전제로 합니다.
- 메가픽셀은 가로×세로의 단순 곱을 100만으로 나눈 값입니다. 카메라 제품의 유효 화소 표기와는 반올림 기준이 다를 수 있습니다.
결과 활용법
비율을 알았다면 목적지의 요구 비율과 비교하세요. 같으면 크기만 줄이면 되고, 다르면 자를 부분(크롭)을 정해야 합니다. 웹에서는 이미지에 가로와 세로를 모두 지정하거나 CSS의 aspect-ratio 속성에 계산한 비율을 넣으면 로딩 중 화면이 밀리는 현상(레이아웃 이동)을 줄일 수 있습니다. 인쇄할 이미지라면 비율에 더해 필요한 해상도(dpi)도 확인해야 하므로 관련 도구를 함께 이용해 보세요.
자주 묻는 질문
메가픽셀은 무엇을 의미하나요?
메가픽셀은 이미지나 화면을 구성하는 전체 픽셀 수를 백만 단위로 나타낸 것입니다. 예를 들어 1920×1080 해상도는 약 207만 개의 픽셀로 구성되어 있어 약 2.07메가픽셀이 됩니다.
계산된 비율이 딱 맞는 정수로 안 나올 수도 있나요?
네, 가로와 세로 값이 흔히 쓰이는 표준 비율과 정확히 일치하지 않으면 다소 복잡한 비율(예: 683:384)로 표시될 수 있습니다. 이는 계산 오류가 아니라 실제 입력값의 정확한 비율이며, 도구가 가장 가까운 표준 비율을 함께 보여줍니다.
16:9 영상을 4:3 화면에 맞추려면 어떻게 하나요?
두 가지 방법이 있습니다. 위아래에 검은 띠를 두어 전체를 보여 주는 레터박스, 또는 좌우를 잘라 화면을 채우는 크롭입니다. 1920×1080을 4:3 높이에 맞춰 자르면 가로는 1440만 남으며 480px이 버려집니다.
새 가로·세로를 둘 다 입력하면 어떻게 되나요?
새 가로를 우선 적용해 세로를 계산합니다. 새 가로를 비워 두고 새 세로만 입력하면 가로를 계산합니다. 둘 다 정하고 싶다면 두 값의 비율이 원본과 같은지 먼저 확인해야 합니다.
유튜브 영상 업로드에는 어떤 비율이 좋나요?
일반 가로 영상은 16:9가 표준이며, 쇼츠는 세로 9:16입니다. 다른 비율로 올리면 재생기에서 검은 여백이 생길 수 있습니다. 세부 규격은 플랫폼 정책에 따라 바뀔 수 있으니 업로드 전에 공식 도움말을 확인하세요.
가로세로를 서로 바꾸면 비율도 뒤집히나요?
네. 1920×1080은 16:9, 1080×1920은 9:16입니다. 소수값도 약 1.7778과 0.5625로 서로 역수입니다. 스마트폰을 눕혀 찍는지 세워 찍는지에 따라 같은 사진이 다른 비율로 기록되므로, 비율을 확인할 때는 방향부터 보세요.
여백(레터박스)과 크롭 중 무엇을 고르나요?
내용을 하나도 잃으면 안 되는 자료(도표, 글자가 있는 화면)는 여백을 두는 쪽이 안전하고, 인물·풍경처럼 가장자리가 덜 중요한 영상은 크롭이 화면을 꽉 채워 보기 좋습니다. 위의 중앙 크롭 표로 버려지는 면적을 먼저 가늠해 보면 결정에 도움이 됩니다.
비율을 유지하며 키울 때도 화질은 그대로인가요?
아닙니다. 비율 계산은 모양만 맞춰 줄 뿐 없는 픽셀을 만들어 내지 않습니다. 1280×720 이미지를 1920×1080으로 키우면 모양은 같지만 픽셀 사이를 보간으로 채우므로 선명도가 올라가지 않습니다. 가능하면 원본 해상도 이하로 쓰는 것이 좋습니다.
CSS에서는 비율을 어떻게 적나요?
aspect-ratio 속성에 16 / 9처럼 가로 / 세로 형태로 적을 수 있고, 이 도구가 보여 주는 줄어든 정수비를 그대로 쓰면 됩니다. 1366×768처럼 복잡한 정수비는 683 / 384 대신 가까운 16 / 9로 적어도 눈에 띄는 차이가 거의 없습니다.
함께 쓰면 좋은 도구
- 영상 해상도 변환기: 해상도 규격 사이를 오갈 때
- 화면 PPI 변환기: 해상도와 인치로 픽셀 밀도를 구할 때
- 인쇄 해상도 계산기: 이미지 크기로 인쇄 가능한 크기를 알아볼 때
- 최대공약수·최소공배수 계산기: 비율을 줄이는 원리를 직접 확인할 때
- 단위 변환기: 길이, 무게 등 다양한 단위를 변환할 때