모든 처리는 브라우저 내부에서 실행됩니다 — 파일·입력은 서버로 전송되지 않습니다.
프리셋(16:9·4:3·21:9·1:1·3:2·9:16)을 고르거나 커스텀 `W:H`를 입력해 종횡비를 설정한 뒤 가로 또는 세로 중 한쪽을 입력하면 나머지가 즉시 계산됩니다. 출력 패널에는 양쪽 픽셀 값, 단순화된 비율(예: `1920:1080`을 GCD로 나눠 `16:9`), 스타일시트에 그대로 붙여 넣을 수 있는 CSS `aspect-ratio` 선언이 표시됩니다.
히어로 이미지, 임베드 비디오, 반응형 iframe, 카드 썸네일 크기를 정할 때 사용하세요. CSS의 `aspect-ratio` 속성(Chrome 88 이상·Firefox 89 이상·Safari 15 이상, 2026년 기준 브라우저 지원율 약 95%)은 비율을 강제하는 현대적 방식이며 가로를 지정하면 세로가 뷰포트 크기에 상관없이 자동으로 따라옵니다. 레거시 padding-bottom 트릭(16:9에 대한 `padding-bottom: 56.25%`)은 구형 브라우저용으로 지금도 안전하지만 빌드 타깃이 허용하는 환경에서는 교체해야 합니다.
ratio: 16:9 width: 1200
width: 1200 height: 675 CSS: aspect-ratio: 16 / 9;
1200×675 이미지는 표준 와이드스크린 비디오 비율로 1200 너비 콘텐츠 컬럼에 딱 들어맞습니다. CSS에서 `width: 100%; aspect-ratio: 16 / 9;`를 함께 쓰면 반응형으로 스케일되어도 비율이 유지됩니다. 레티나용에는 2배(2400×1350)로 익스포트해 브라우저가 축소하게 두세요.
ratio: 9:16 height: 1920
width: 1080 height: 1920 CSS: aspect-ratio: 9 / 16;
1080×1920은 세로 짧은 동영상의 네이티브 해상도입니다. Instagram Reels·TikTok·YouTube Shorts 모두 이 크기로 인코드합니다. CSS의 `aspect-ratio: 9 / 16`(순서는 가로 → 세로, 비디오 프레임과 동일)은 웹의 임베드 미리보기를 같은 비율로 제약합니다. 모바일 우선 제품 페이지에서는 프로모션 비디오용으로 9:16 섹션을 두는 사례가 늘고 있습니다.
width: 2560 height: 1080
ratio (raw): 2560:1080 ratio (simplified): 64:27 (GCD(2560, 1080) = 40)
2560×1080 울트라와이드 모니터는 정확히는 `64:27`이며 마케팅이 반올림해 부르는 `21:9`(정확히는 `2520:1080`)는 아닙니다. 단순화 단계는 양변을 최대공약수로 나눕니다. 마케팅 종횡비는 편리한 약칭이지만, 디자이너는 특정 디스플레이용으로 레이아웃할 때 정확한 픽셀 치수를 유지해야 합니다.
지원되는 환경에서는 `aspect-ratio`를 쓰세요(Chrome 88 이상·Firefox 89 이상·Safari 15 이상 — 2021년 초에 출시되어 2026년 기준 글로벌 지원율 약 95%). 한 줄 선언으로 `max-content`를 포함한 임의의 너비에서 동작하고, 위쪽 콘텐츠가 바뀌어도 올바르게 리플로우합니다. padding-bottom 트릭은 폴리필로, 컨테이너에 `padding-bottom: 56.25%`(16:9용)를 두고 자식을 절대 배치로 채웁니다. 2021년 이전 브라우저를 대상으로 할 때만 쓰세요. 현대 웹 스택 대부분에서는 더 이상 필요 없습니다.
**16:9** — HD·4K 영상, 노트북과 TV 화면의 대부분, YouTube 기본값, 2008년경 이후 데스크톱의 사실상 표준. **9:16** — 세로 모바일 영상(TikTok·Reels·Shorts). **4:3** — 옛 TV·iPad·옛 모니터. 설정을 바꾸지 않으면 Lightroom 익스포트도 여전히 기본입니다. **3:2** — 35mm 필름·전통적인 DSLR·Surface 기기. **21:9·64:27** — 울트라와이드 모니터·시네마 필름. **1:1** — Instagram 정사각형(2018년 이후 줄어듦), 프로필 사진. **3:4·4:5** — Instagram 세로, 모바일 편집 사진에서 인기.
영화·시네마에서는 뒷자리를 1로 고정한 소수 표기를 씁니다. 가로가 분자가 되므로 16 ÷ 9 ≈ 1.778, 그래서 `1.778:1`입니다. 웹·동영상 도구에서는 정수 표기 `16:9`를 씁니다. 비율로는 같습니다. 영화는 추가로 `2.39:1`(현대 아나모픽 "스코프")이나 `1.85:1`("플랫")을 사용하지만 깔끔한 정수 쌍이 없습니다. 영화는 역사적으로 투영 어퍼처가 픽셀 격자를 가정해 설계되지 않았기 때문에 소수 표기가 쓰여 왔습니다.
현대 구문 — 한 줄 선언: ```css iframe { width: 100%; aspect-ratio: 16 / 9; } ``` 2021년 이전 브라우저용 레거시 구문: ```css .video-wrap { position: relative; padding-bottom: 56.25%; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; } ``` 56.25%는 `9 / 16 × 100`입니다. YouTube·Vimeo 임베드 일부는 플레이어를 고정하는 쿼리 파라미터 `?aspect=16:9`도 받지만 CSS 방식이 보편적인 해답입니다.
Google 검색은 리치 리절트용으로 가로 최소 1200px의 가로 이미지를 선호하며 가시성을 위해서는 16:9에 가까운 종횡비가 바람직합니다. Open Graph(`og:image`) 권장은 1200×630(약 1.91:1)으로 16:9보다 좀 좁고 Facebook·LinkedIn·Twitter 카드 미리보기에 맞춰 선정되었습니다. Schema.org의 `ImageObject`는 `width`와 `height`를 받으므로 크롤러가 적절한 썸네일을 고를 수 있습니다. 정사각형(1:1)은 대부분의 플랫폼에서 잘리기 때문에 전달성이 가장 나쁘고, 세로(9:16)는 모바일 전용이며 데스크톱 캐러셀에서는 제외됩니다.
흔한 원인이 두 가지입니다. **필러박스**(좌·우 검은 바)는 4:3 콘텐츠를 16:9 프레임에 넣었을 때, **레터박스**(위·아래 검은 바)는 그 반대일 때 발생합니다. 플레이어는 원본 비율을 유지하고 얼굴이 늘어나는 것을 피하기 위해 나머지를 검정으로 채웁니다. 해결책은 대상 비율로 소스를 다시 익스포트(크롭이나 팬앤스캔)하거나, 가장자리 잘림이 허용되면 컨테이너를 `object-fit: cover`로 두는 것입니다. **임베드 `<video>` 기본값**은 부모 요소의 `aspect-ratio`에 관계없이 소스 비디오의 네이티브 비율을 유지하며 부모가 내부 비디오에 맞춰 줄어듭니다.
종횡비는 직사각형의 가로와 세로의 비율입니다 — `W:H`라는 한 숫자(또는 소수 `W/H`)로 크기를 지정하지 않고 모양만 표현합니다. 1920×1080과 3840×2160은 둘 다 16:9이며 면적은 4배 차이지만 *모양*은 같습니다. 단순화 단계는 GCD로 나누는 것뿐입니다. 양변을 최대공약수로 나눠 최소 정수 쌍을 얻습니다(1920 ÷ 120 = 16, 1080 ÷ 120 = 9).
비율 선택은 미학보다 **기기 표준화**에 이끌립니다. 영화 산업은 1950년대에 텔레비전(당시 4:3, 이후 16:9)에 대응하기 위해 1.85:1과 2.39:1을 표준화했습니다. 컴퓨터 모니터는 2000년대 초반에 4:3에서 16:10으로, 2008년경 TV 제조사의 생산 라인 통합과 함께 16:9로 옮겨 갔습니다. 모바일 사진에서 사이클이 리셋되었습니다. TikTok의 9:16 성공은 2018~2020년경 Instagram과 YouTube가 세로 우선 제품 표면을 추가하도록 밀었습니다. 새로 지배적인 비율은 CSS 프리셋, Lightroom 익스포트 옵션, iframe 사이즈 관례로 1~2년 안에 흡수됩니다.
반응형 디자인을 형성하는 인접 개념이 3가지 있습니다. **CSS `aspect-ratio`**(Web Spec, 2021년 출시)는 padding-bottom 트릭을 대체하고 반응형 미디어를 단순하게 만듭니다 — 가로를 지정하면 세로가 따라옵니다. **컨테이너 쿼리**(`@container`, 2022~2023년 출시)는 단일 컴포넌트가 부모 요소의 가로에 적응하게 해, 같은 카드를 넓은 그리드에서는 16:9, 사이드바에서는 4:5로 미디어 쿼리 없이 전환할 수 있게 합니다. **`object-fit`**은 컨테이너 종횡비와 콘텐츠가 일치하지 않을 때 동작을 통제합니다 — `cover`는 채우고 잘라내고, `contain`은 레터박스로 담고, `fill`은 왜곡해 맞춥니다. `aspect-ratio` + `object-fit: cover` 조합이 반응형 썸네일의 현대적 기본입니다.
선형·방사형 CSS 그라디언트를 시각적으로 생성합니다. 컬러 스톱 드래그, 각도 조정, background CSS 바로 복사를 지원합니다.
HEX / RGB / HSL을 서로 변환하고 실시간으로 미리볼 수 있습니다.
두 색상의 명도 대비를 WCAG 기준으로 확인합니다. 본문/큰 텍스트/UI 컴포넌트별로 AA·AAA 합격 여부를 즉시 표시.
이미지에서 BlurHash 플레이스홀더 문자열을 생성합니다. 약 30바이트의 짧은 해시가 흐릿한 이미지로 표시되어 Next.js 로딩, Unsplash 스타일 피드, SSR에 적합합니다.
aspect-ratio: 16 / 9;