화면비(Aspect Ratio) 계산기

화면비는 나눗셈이 아니라 약분이다

화면비를 “가로 나누기 세로”라고 생각하면 계산은 맞지만 중요한 걸 놓칩니다. 1920 ÷ 1080 = 1.7778, 1366 ÷ 768 = 1.7786. 소수로 보면 둘은 사실상 같습니다. 반올림해서 보여 주는 계산기라면 둘 다 1.78이라고 말할 겁니다.

그런데 최대공약수로 약분하면 이야기가 완전히 달라집니다.

1920 × 1080  →  gcd = 120  →  16 : 9      ← 깔끔하다
1366 ×  768  →  gcd =   2  →  683 : 384   ← ???
1200 ×  630  →  gcd =  30  →  40 : 21     ← OG 이미지
2560 × 1080  →  gcd =  40  →  64 : 27     ← "21:9" 모니터

약분은 소수 표현이 숨기는 걸 드러냅니다. 683은 소수(prime)라서 384와 더 이상 약분되지 않습니다. 즉 1366×768은 16:9와 “비슷한” 게 아니라 아예 다른 비율이고, 그 사실이 0.0008이라는 차이 뒤에 가려져 있었을 뿐입니다.

왜 1366인가

768에서 출발해 16:9를 만들면 768 × 16 ÷ 9 = 1365.333...입니다. 픽셀은 소수로 존재할 수 없으니 누군가는 올림하거나 내림해야 했고, 패널 제조사들은 1366을 택했습니다. 그래서 세계에서 가장 많이 팔린 노트북 해상도가 자기가 16:9라고 광고하면서 실제로는 16:9.004입니다.

이게 실무에 나타나는 순간이 있습니다. 1366×768 화면을 꽉 채우는 16:9 히어로 이미지를 넣으면 세로로 0.5px이 남습니다. 대부분은 눈치채지 못하지만, 그 위에 배경색이 다른 요소를 붙이는 순간 1px 실선으로 보입니다.

padding-top 핵이 왜 통했는가

aspect-ratio가 생기기 전에는 이렇게 썼습니다. 오래된 코드베이스라면 아직 살아 있을 겁니다.

.wrap { position: relative; padding-top: 56.25%; }  /* 9 ÷ 16 */
.wrap > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

이 핵의 핵심은 56.25라는 숫자가 아니라, 퍼센트 패딩이 세로 방향이어도 부모의 ‘가로’를 기준으로 계산된다는 CSS 명세의 규칙입니다. padding-top: 56.25%는 “높이의 56.25%”가 아니라 “부모 너비의 56.25%”입니다. 부모가 800px이면 450px이 되고, 800:450은 정확히 16:9입니다.

명세가 이렇게 정한 이유는 순환 참조를 막기 위해서입니다. 세로 패딩이 높이를 기준으로 하는데 그 높이가 내용에 따라 정해진다면, 패딩이 높이를 바꾸고 높이가 다시 패딩을 바꾸는 무한 루프가 됩니다. 그래서 명세는 “세로 방향 퍼센트도 가로를 본다”로 못을 박았고, 15년 뒤 누군가 그 제약을 비율 유지 도구로 뒤집어 쓴 것입니다.

aspect-ratio: 16 / 9는 이걸 한 줄로 대체합니다. 이제 이 핵은 쓸 이유가 없습니다 — 다만 position: absolute 자식과 빈 컨테이너 없이 동작하기 때문에, 옛 코드를 걷어낼 때 래퍼 div 하나를 통째로 지울 수 있다는 게 진짜 이득입니다.

aspect-ratio가 무시되는 순간

이 속성으로 가장 자주 겪는 문제는 “썼는데 안 먹는다”입니다. 원인은 거의 항상 둘 중 하나입니다.

• 두 축이 이미 정해졌다. aspect-ratio는 한 축이 정해졌을 때 나머지를 계산해 주는 속성입니다. width와 height를 둘 다 주면 계산할 게 없으므로 조용히 무시됩니다. flex나 grid 부모가 align-items: stretch(기본값)로 세로를 늘리고 있는 경우도 같습니다 — 코드에 height가 안 보여도 레이아웃이 대신 정해 버린 것입니다.
• 콘텐츠가 상자보다 크다. aspect-ratio는 자동 최소 크기를 이기지 못합니다. 16:9 상자에 세 줄짜리 텍스트를 넣으면 상자가 세로로 늘어나 비율이 깨집니다. 이건 버그가 아니라 “내용을 잘라내지 않는다”는 CSS의 기본 방침입니다. 잘라도 된다면 overflow: hidden을, flex 아이템이라면 min-height: 0(또는 가로 방향이면 min-width: 0)을 명시해야 합니다.

/* 안 먹는다 — 두 축이 다 정해졌다 */
.box { width: 300px; height: 200px; aspect-ratio: 16 / 9; }

/* 먹는다 */
.box { width: 300px; aspect-ratio: 16 / 9; }

/* flex 안에서 먹게 하려면 */
.item { aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }

16:9, 21:9, 2.39:1이 따로 존재하는 이유

이 숫자들은 취향이 아니라 역사입니다. 알고 나면 어떤 걸 골라야 할지가 분명해집니다.

• 4:3 — 영화 필름과 초기 TV의 비율. 브라운관 시대의 표준이었습니다. 지금 이 비율을 쓰는 건 아이패드 세로와 일부 카메라 정도입니다.
• 16:9 — 4:3(1.33)과 시네마스코프(2.35)의 기하평균에 가까운 값을 찾아 방송 표준으로 정한 것입니다. 두 진영 어느 쪽 콘텐츠를 틀어도 검은 띠가 최소가 되는 타협점이었습니다. 유튜브·HD·거의 모든 모니터가 여기 있습니다.
• 2.39:1— 아나모픽 렌즈로 촬영해 상영하는 시네마스코프 규격. “영화 같아 보이는” 느낌의 정체가 대체로 이 비율입니다.
• 21:9 — 시네마스코프를 모니터로 가져오려는 마케팅 이름입니다. 실제 제품은 2560×1080(64:27, 2.370)이나 3440×1440(43:18, 2.389)이고, 정확히 21:9(2.333)인 패널은 사실상 없습니다. 위 계산기에 3440과 1440을 넣어 보면 21:9가 아니라 43:18이 나오는 이유입니다.
• 9:16 — 16:9를 그냥 눕힌 게 아닙니다. 사람이 폰을 세로로 들고 한 손으로 쓴다는 사실에서 나온 비율이고, 릴스·숏츠·틱톡이 전부 여기 있습니다.

썸네일과 OG 이미지: 1200×630은 16:9가 아니다

실무에서 가장 자주 보는 사고입니다. “썸네일은 16:9”라는 습관 때문에 1280×720 이미지를 만들어 OG 이미지로 등록합니다. 그런데 OG 권장 규격은 1200×630이고, 이건 1.9048:1(약분하면 40:21)입니다.

유튜브 썸네일   1280 × 720   →  16 : 9   (1.7778)
OG / 트위터     1200 × 630   →  40 : 21  (1.9048)
인스타 피드     1080 × 1080  →   1 : 1
릴스 / 숏츠     1080 × 1920  →   9 : 16

16:9 이미지를 1.91:1 슬롯에 넣으면 플랫폼이 가운데를 기준으로 위아래를 잘라냅니다.이미지 아래쪽에 로고나 텍스트를 넣어 뒀다면 그게 통째로 사라집니다. 카카오톡·페이스북 미리보기에서 “내 로고가 왜 안 보이지”의 원인은 거의 항상 이것입니다. OG 이미지는 처음부터 1200×630으로 따로 만들고, 중요한 요소는 안쪽 80% 영역에만 두세요.

0.5px 문제: 비율을 지키면 반드시 소수가 나온다

비율을 유지한다는 건 곱셈과 나눗셈을 한다는 뜻이고, 그 결과가 정수라는 보장은 어디에도 없습니다.

가로 1000px, 16:9  →  세로 562.5px
가로  375px, 16:9  →  세로 210.9375px
가로  343px, 16:9  →  세로 192.9375px

브라우저는 레이아웃을 소수로 계산하지만, 실제로 화면에 칠할 때는 물리 픽셀 격자에 맞춰 반올림합니다. 문제는 어디서 반올림하는지가 요소마다 다르다는 것입니다. 562.5px 높이의 상자가 y좌표 100.5에 놓이면 위쪽 경계는 100.5 → 101로, 아래쪽 경계는 663 그대로 반올림되어 실제 높이가 562가 됩니다. 같은 상자가 y좌표 100에 있으면 563이 됩니다. 같은 CSS인데 위치에 따라 1px이 왔다 갔다 합니다.

이게 화면에 드러나는 모양은 대개 셋 중 하나입니다.

• 이미지와 그 아래 요소 사이에 배경색이 1px 비쳐 보이는 헤어라인 틈
• 그리드로 늘어놓은 카드들의 높이가 1px씩 들쭉날쭉한 현상
• 스크롤할 때 경계선이 깜빡이는 현상(서브픽셀 위치가 계속 바뀌므로)

해법은 소수를 없애는 게 아니라 소수가 보이지 않게 하는 것입니다. 이미지와 컨테이너 배경색을 같게 두면 1px 틈이 있어도 보이지 않습니다. 인접 요소를 겹치게 (margin-top: -1px) 두는 것도 흔한 처방입니다. 정확도가 정말 필요한 레이아웃이라면 컨테이너 폭을 비율의 배수로 잡으세요 — 16:9라면 가로를 16의 배수(1920, 1600, 1280, 960, 640)로 두면 세로가 항상 정수로 떨어집니다.

반대로, 소수를 무서워해서 aspect-ratio에 1.7778을 넣는 건 더 나쁩니다. aspect-ratio: 1.7778은 가로 1920에서 세로 1080.02를 만듭니다. 약분한 정수 쌍16 / 9를 그대로 쓰면 브라우저가 유리수로 정확히 계산하므로 이 오차 자체가 생기지 않습니다. 위 계산기가 소수 비율을 “참고용”으로만 보여 주고 CSS 스니펫에는 약분한 정수를 넣는 이유입니다.