화면을 꽉 채우면 무엇이 사라질까요? 16:9 그림의 세 가지 비교

무엇을 고정하고 어떤 조건을 바꿨나요?

1280×720 원본 파일은 고정하고, 표시 틀과 contain·cover만 바꿨습니다. 원본이 바뀌는 경우와 표시 방식이 바뀌는 경우를 섞지 않기 위해 세 표본이 같은 파일을 참조하도록 구성했습니다.

원본은 1280 × 720 px, 비율은 16:9입니다. 왼쪽 L, 중앙 C, 오른쪽 R 표식과 아래쪽 문구를 배치했습니다. 실제 작품의 장면이나 개인 사진은 사용하지 않았습니다. 좌우 표식이 남아 있는지 보면 가운데만 보는 것보다 잘림을 쉽게 구분할 수 있습니다.

두 정사각형 틀은 각각 320 × 320 CSS px, 세로형 틀은 180 × 320 CSS px를 기준으로 만들었습니다. 정사각형의 첫 표본만 contain을 쓰고, 나머지는 cover를 썼습니다. 위치는 모두 가운데인 50% 50%입니다. 좁은 창에서는 틀이 작아질 수 있지만 각 틀의 비율은 유지합니다.

2026-10-31에 브라우저 창을 1366×900과 390×844로 바꾸어 표시를 확인했습니다. 두 크기에서 정사각형 틀은 320×320, 세로형 틀은 180×320 CSS px로 측정됐고, 각 이미지의 원본 크기는 1280×720으로 같았습니다. A에서 세 표식이 모두 보이고 B·C에서는 중앙 표식만 남는 모습도 확인했습니다. 이는 한 브라우저에서 두 창 크기를 비교한 기록이며 모든 기기나 브라우저의 검증을 뜻하지 않습니다. 표시 확인값과 계산 기록을 함께 공개합니다.

맞춤 방식의 정의는 MDN object-fit 문서에 근거합니다. 아래 수치는 이번 크기에 그 정의를 대입한 기하 계산입니다. 실제 영상 서비스의 플레이어나 속도를 측정한 값이 아닙니다.

같은 원본은 세 틀에서 어떻게 보이나요?

A는 세 표식을 모두 보여 주고, B와 C는 중앙 표식만 남깁니다. 원본의 L·R이 삭제된 것이 아니라 표시 틀 바깥에 놓이면서 보이지 않는 차이입니다.

A에서는 세 표식이 모두 보입니다. B와 C는 중앙 표식이 크게 보이는 대신 양끝 표식이 사라집니다. 원본 파일에서 삭제된 것이 아니라 표시 틀 바깥으로 밀려난 것입니다. 원본 그림을 따로 열면 세 표식과 문구 전체를 확인할 수 있습니다.

여기서 중요한 차이는 중앙 표식이 얼마나 커 보이느냐보다 가장자리의 정보가 남아 있느냐입니다. 중앙만 보고 비교하면 B가 A보다 “더 많이 보여 준다”고 오해하기 쉽습니다. 실제로 B의 표시 면적은 더 꽉 차지만, 포함된 원본 영역은 줄어듭니다.

56.25%와 31.64%는 어떻게 나왔을까요?

보이는 원본 영역을 전체 원본 면적으로 나누고 100을 곱했습니다. 두 cover 조건에서는 높이 720픽셀이 모두 남으므로 가로 폭의 비율과 면적의 비율이 같습니다.

A의 위아래 여백은 왜 70픽셀인가요?

1280 px 가로를 320 CSS px에 맞추면 배율은 0.25입니다. 그림의 세로는 720 × 0.25 = 180 CSS px가 됩니다. 틀의 높이 320에서 그림 높이 180을 빼면 140이 남으므로, 가운데 배치에서 위아래 여백은 각각 70 CSS px입니다. 원본을 잘라낸 영역은 없습니다.

B에서 좌우 280픽셀씩 가려지는 이유는 무엇인가요?

틀을 채우려면 그림 세로 720을 틀 높이 320에 맞춥니다. 이때 가로는 약 568.89 CSS px로 커집니다. 틀의 가로는 320이므로 넘친 부분이 가려집니다. 원본 좌표로 바꾸면 보이는 가로는 720 px, 잘리는 가로는 1280 − 720 = 560 px입니다.

보이는 비율 = 720 × 720 ÷ (1280 × 720) × 100 = 56.25%

가운데 맞춤이므로 좌우에서 원본 280 px씩이 가려집니다. 양옆의 표식은 이 영역에 놓여 있어 B에서 보이지 않습니다. 원본의 높이는 그대로 남으므로 위아래가 아니라 좌우가 잘리는 조건입니다.

C에서는 왜 가로 405픽셀만 남나요?

높이 320에 맞추는 배율은 B와 같지만 틀의 가로가 180 CSS px입니다. 이를 원본 좌표로 바꾸면 180 × 720 ÷ 320 = 405 px가 보입니다. 원본의 가운데 405 × 720만 남으므로 보이는 면적은 31.640625%, 가려진 면적은 약 68.36%입니다. 이 비율은 화질이 31.64점이라는 뜻이 아닙니다.

가운데 맞춤을 바꾸면 보이는 면적도 바뀌나요?

같은 원본·틀·cover 조건에서 정렬 위치만 바꾸면 남는 영역의 크기는 같고, 그 안에 들어가는 내용이 달라질 수 있습니다. 앞의 56.25%가 같아도 왼쪽 표식을 볼지 중앙 표식을 볼지는 배치 기준에 영향을 받습니다.

앞의 수치는 틀 크기와 가운데 배치를 고정했을 때의 결과입니다. 같은 cover라도 왼쪽으로 정렬하면 왼쪽 표식이 남고 오른쪽이 더 많이 가려질 수 있습니다. 남는 영역의 크기가 같아도 남는 내용은 달라집니다. object-position 문서는 이 정렬 위치를 별도의 속성으로 설명합니다.

• 크기를 결정하는 조건: 원본과 표시 틀의 비율, 맞춤 방식입니다.
• 위치를 결정하는 조건: 가운데 또는 가장자리 같은 정렬 기준입니다.
• 이번 관찰 범위: 실제 세 표본은 모두 가운데 배치로 확인했습니다.

그래서 “정사각형이면 좌우가 항상 똑같이 잘린다”고 일반화하지 않습니다. 전체 맞춤과 채우기를 구별한 뒤, 어떤 기준점으로 배치했는지도 봐야 합니다. 얼굴이나 글자가 화면 가장자리에 있을 때는 이 위치 차이가 특히 잘 드러납니다.

이 결과를 내 화면에서는 어떻게 확인하나요?

같은 장면을 유지하고 맞춤 방식만 바꾼 뒤, 가장자리 물체가 돌아오는지 비교합니다. 네트워크와 화질까지 동시에 바꾸면 화면 범위가 달라진 이유를 분리하기 어렵습니다.

1. 같은 장면을 유지합니다. 화면 가장자리의 물체나 문구를 비교 기준으로 고릅니다.
2. 맞춤 방식만 바꿉니다. 전체 맞춤에 해당하는 설정에서 사라진 부분이 돌아오는지 봅니다.
3. 결과를 구별합니다. 돌아오면 표시 범위를 먼저 살피고, 계속 없으면 제공 파일의 편집 범위를 추가로 확인합니다.

그림에 직접 들어 있는 문구는 그림과 함께 잘립니다. 그러나 플레이어가 별도로 그리는 자막은 같은 방식으로 잘린다고 보장할 수 없습니다. 이번 비교에는 자막 트랙, 동영상 디코딩, 음성이나 네트워크 전송을 넣지 않았습니다. 이 결과를 특정 외부 서비스의 품질 판정으로 사용하는 것은 범위를 벗어납니다.

독자가 가져갈 결론은 “여백을 남겨야 항상 좋다”가 아닙니다. 장면 전체가 중요한 상황과 화면을 채우는 것이 중요한 상황의 차이를 알고 선택하자는 것입니다. 자막이나 가장자리의 동작을 확인할 때는 먼저 전체가 보이는 상태를 비교 기준으로 삼을 수 있습니다.