화면비 계산기

화면비 이해하기

화면비는 이미지 또는 동영상의 가로와 세로의 비율 관계로, 콜론으로 구분된 두 숫자로 표현돼요. 16:9는 가로 16픽셀마다 세로 9픽셀이 있다는 의미예요. 화면비는 무차원 — 1920×1080과 1280×720은 동일한 비율을 가지므로 둘 다 16:9예요.

일반적인 비율과 사용처

• 16:9 (1.78:1) — 와이드스크린 동영상의 세계 표준: YouTube, Netflix, Vimeo, Twitch, TV 방송, 데스크탑 모니터, 노트북 화면.
• 4:3 (1.33:1) — 구형 TV와 모니터 표준. 프레젠테이션, 일부 iPad 앱, 표준 화질 동영상에 여전히 사용돼요.
• 1:1 — 정사각형 형식. Instagram 피드, 프로필 사진, 앨범 아트. 강한 시각적 임팩트로 가로와 세로가 동일해요.
• 9:16 (0.56:1) — TikTok, Instagram 릴스·스토리, YouTube Shorts를 위한 세로 동영상. 모바일 전체 화면 형식이에요.
• 4:5 (0.8:1) — Instagram 세로 피드 게시물. 정사각형보다 세로가 길어 완전한 세로가 아니면서도 더 많은 콘텐츠를 보여줘요.
• 21:9 (2.33:1) — 시네마틱 울트라와이드. 영화(2.39:1 스코프 형식)와 울트라와이드 모니터에서 사용돼요.
• 3:2 (1.5:1) — 전통적인 35mm 필름 사진과 많은 디지털 카메라. 표준 인화 사진 비율이에요.

크기를 조정할 때 화면비를 유지하는 방법

비율을 유지하면서 이미지를 스케일하려면 두 치수에 동일한 스케일 계수를 곱하세요. 새 가로에 대한 비례 세로를 구하려면: 새 세로 = (새 가로 / 원본 가로) × 원본 세로.

예시: 1920×1080을 가로 1280픽셀 버전으로 스케일: 1080 × (1280 / 1920) = 1080 × 0.667 = 720픽셀. 결과 1280×720은 16:9 비율을 유지해요.

CSS aspect-ratio 속성

CSS aspect-ratio 속성(2021년 이후 모든 최신 브라우저에서 지원)을 사용하면 두 치수를 모두 알지 않아도 요소의 의도된 비율을 선언할 수 있어요. 컨테이너에 aspect-ratio: 16 / 9를 설정하고 width만 주면 브라우저가 올바른 높이를 자동으로 계산해요. 이전의 padding-percentage 해킹 기법을 대체해요.

자주 묻는 질문

• 화면비란 무엇인가요?
  화면비는 이미지 또는 동영상의 가로와 세로의 비율 관계를 두 숫자(예: 16:9)로 표현해요. 16:9 비율은 세로 9단위마다 가로가 16단위라는 의미예요.
• YouTube 동영상의 표준 화면비는 무엇인가요?
  YouTube의 표준 비율은 16:9예요. 권장 해상도: 1920×1080 (Full HD). 썸네일은 최소 1280×720, 권장 1920×1080.
• Instagram은 어떤 화면비를 사용하나요?
  Instagram은 1:1 (정사각형, 1080×1080), 4:5 (세로 피드, 1080×1350), 9:16 (스토리/릴스, 1080×1920)을 지원해요.
• 크기를 조정할 때 화면비를 유지하는 방법은?
  새 세로 = (새 가로 / 원본 가로) × 원본 세로. CSS의 경우 aspect-ratio: 16 / 9를 설정하고 한쪽 치수만 주면 브라우저가 나머지를 자동으로 계산해요.
• 16:9는 몇 픽셀인가요?
  일반적인 16:9 해상도: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), 7680×4320 (8K UHD). 가로÷세로=1.778인 모든 치수가 16:9예요.
• CSS aspect-ratio 속성은 무엇을 하나요?
  CSS aspect-ratio 속성은 요소의 선호 비율을 선언해요. aspect-ratio: 16 / 9와 가로만 설정하면 브라우저가 세로를 자동으로 계산해요. 2021년 이후 모든 최신 브라우저에서 지원돼요.