화면 비율은 계산하려 할 때까지는 당연하게 느껴지는 개념입니다. YouTube가 16:9이고 오래된 가족사진이 와이드스크린 TV에서 이상하게 보인다는 건 알지만, 동영상을 리사이즈하거나 반응형 이미지 컨테이너를 설계할 때 수학이 발목을 잡습니다. 이 가이드는 정의부터 CSS 구현까지 모든 것을 다루며, 마지막에 무료 온라인 계산기를 제공합니다.
화면 비율이란?
화면 비율은 직사각형의 너비와 높이 사이의 비례 관계를 너비:높이 형식으로 표현합니다. 1920×1080 디스플레이의 화면 비율이 16:9인 이유는 두 값의 최대공약수가 120이고, 1920÷120=16, 1080÷120=9이기 때문입니다.
비율은 모양을 설명하는 것이지 크기가 아닙니다. 640×360 썸네일과 3840×2160 4K 모니터는 모두 16:9 화면 비율을 가집니다——다른 크기의 같은 모양입니다.
화면 비율이 등장하는 영역:
- 디스플레이와 모니터 — 화면 해상도 스펙은 항상 화면 비율을 의미함
- 영상 제작 — 내보내기 설정, 플랫폼 업로드 요건
- 사진 — 센서 크롭 팩터, 인쇄 크기
- 웹 디자인 — 반응형 이미지 컨테이너, 임베드 래퍼
- 모바일 UI — 안전 영역 계산, 스플래시 화면 크기
주요 화면 비율
16:9 — 현대 표준
16:9가 주류 와이드스크린 표준이 된 것은 4:3(구 TV 표준)과 2.39:1(시네마 와이드스크린)의 기하평균이기 때문입니다. 레터박스나 필러박스가 최소화되면서 두 콘텐츠 유형 모두에 잘 맞습니다.
사용 예: YouTube, Netflix, Vimeo, 대부분의 노트북과 데스크톱 모니터, Full HD(1920×1080), 4K UHD(3840×2160), HD(1280×720).
4:3 — 레거시 TV
4:3 비율은 2000년대 중반까지 TV와 컴퓨터 모니터를 지배했습니다. 16:9보다 정사각형에 가까워 동영상에는 시대에 뒤떨어져 보이지만, 특정 문서나 프레젠테이션 레이아웃에는 적합합니다. PowerPoint의 원래 슬라이드 형식이 4:3입니다.
사용 예: 레거시 SD 동영상, iPad(거의 4:3), 일부 문서 레이아웃.
21:9 — 울트라와이드
울트라와이드 모니터는 21:9를 사용합니다(시네마에서는 2.39:1, 2560×1080 모니터 표준에서는 64:27). 영화는 보통 2.39:1 또는 2.35:1로 촬영되어, 표준 16:9 디스플레이에서 검은 바가 표시됩니다.
사용 예: 울트라와이드 게이밍 모니터(2560×1080, 3440×1440), 영화 마스터링.
1:1 — 정사각형
정사각형 형식은 Instagram 초기 피드에서 대중화되었습니다. 대칭이 중요한 프로필 이미지, 앨범 아트, 소셜 썸네일에 잘 맞습니다.
사용 예: Instagram 게시물, 앱 아이콘, 앨범 커버, 아바타.
9:16 — 세로 동영상
9:16은 16:9의 세로 반전——세로로 든 스마트폰을 위해 설계되었습니다. 숏폼 동영상이 가로 플랫폼을 앞지르면서 9:16이 모바일 우선 콘텐츠의 주류 형식이 되었습니다.
사용 예: TikTok, Instagram Reels, YouTube Shorts, Snapchat Stories, 모바일 전체화면 광고.
화면 비율 계산 방법
알고리즘:
- 유클리드 알고리즘으로 너비와 높이의 최대공약수(GCD)를 찾는다.
- 두 값을 GCD로 나눈다.
JavaScript:
function gcd(a, b) {
return b === 0 ? a : gcd(b, a % b);
}
function aspectRatio(width, height) {
const divisor = gcd(width, height);
return `${width / divisor}:${height / divisor}`;
}
console.log(aspectRatio(1920, 1080)); // "16:9"
console.log(aspectRatio(2560, 1440)); // "16:9"
console.log(aspectRatio(1280, 960)); // "4:3"
console.log(aspectRatio(1080, 1920)); // "9:16"Python:
from math import gcd
def aspect_ratio(width: int, height: int) -> str:
divisor = gcd(width, height)
return f"{width // divisor}:{height // divisor}"
print(aspect_ratio(1920, 1080)) # 16:9
print(aspect_ratio(3840, 2160)) # 16:9
print(aspect_ratio(1080, 1350)) # 4:5 (Instagram 세로형)리사이즈 시 화면 비율 유지
원본 치수를 알고 비율을 유지하면서 리사이즈할 때는 교차 곱셈 공식을 사용합니다.
너비를 알 때 높이 구하기:
새 높이 = (새 너비 × 원본 높이) / 원본 너비높이를 알 때 너비 구하기:
새 너비 = (새 높이 × 원본 너비) / 원본 높이예: 원본은 1920×1080. 너비를 1280으로 리사이즈하고 싶다.
새 높이 = (1280 × 1080) / 1920 = 720결과: 1280×720, 여전히 16:9입니다.
코드로:
function resizeByWidth(originalWidth, originalHeight, newWidth) {
return Math.round((newWidth * originalHeight) / originalWidth);
}
function resizeByHeight(originalWidth, originalHeight, newHeight) {
return Math.round((newHeight * originalWidth) / originalHeight);
}
// 1920×1080을 너비 800px에 맞게 리사이즈
const newH = resizeByWidth(1920, 1080, 800); // 450
console.log(`800×${newH}`); // 800×450CSS에서의 화면 비율
CSS는 반응형 레이아웃에서 화면 비율을 유지하는 두 가지 확실한 방법을 제공합니다.
aspect-ratio 속성
현대적인 방법——모든 현재 브라우저 지원(Chrome 88+, Firefox 89+, Safari 15+):
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.square-thumbnail {
width: 200px;
aspect-ratio: 1;
}
.portrait-card {
width: 300px;
aspect-ratio: 9 / 16;
}padding-top 핵 (레거시 지원)
구 브라우저 지원을 위한 인트린식 비율 기법:
.ratio-16-9 {
position: relative;
width: 100%;
padding-top: 56.25%; /* (9 / 16) × 100 */
}
.ratio-16-9 > * {
position: absolute;
inset: 0;
}패딩 퍼센트 공식: (높이 / 너비) × 100
| 비율 | padding-top |
|---|---|
| 16:9 | 56.25% |
| 4:3 | 75% |
| 1:1 | 100% |
| 9:16 | 177.78% |
| 21:9 | 42.86% |
반응형 임베드
<iframe> 임베드(YouTube, Vimeo, Google Maps)를 반응형으로 확장하는 래퍼:
<div class="embed-container">
<iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
</div>.embed-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.embed-container iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}온라인에서 화면 비율 계산
ZeroTool의 화면 비율 계산기가 브라우저에서 직접 계산합니다. 너비, 높이, 목표 치수 중 두 값을 입력하면 비율, 나머지 치수, 일반적인 표준에 해당하는 해상도를 계산합니다. 회원가입 불필요, 서버로 데이터 전송 없음.