안녕하세요! 프론트엔드 개발자 양성 과정 강사입니다. MDN 공식 문서를 통해 CSS의 최신 스펙을 깊이 있게 탐구하시는 모습이 정말 훌륭합니다. 개발 트렌드를 쫓아가는 이런 학습 습관은 현업에서 엄청난 무기가 될 거예요!
요청하신 대로 딱딱한 번역투를 벗어나, 이해하기 쉬운 구어체로 꼼꼼히 번역했습니다. 중간중간 실무에서 어떻게 쓰이는지 제 경험을 녹여낸 팁들도 팍팍 넣어두었으니 재미있게 읽어보시길 바랍니다. 자, 그럼 시작해볼까요?
CSS object-view-box 속성 사용하기 (Using the CSS object-view-box property)
object-view-box 속성은 대체 요소(replaced elements) 내부에 뷰박스(viewbox)를 정의해서, 콘텐츠의 특정 부분만을 잘라서 화면에 보여줄 수 있게 해주는 아주 유용한 속성입니다.
이 속성을 사용하면 콘텐츠가 가진 본래의 종횡비(aspect ratio)를 그대로 유지하면서, 화면에 보여질 부분을 확대(줌인)하거나 축소(줌아웃)할 수도 있고, 원본 크기 그대로 보여줄 수도 있습니다. 이번 가이드에서는 이 object-view-box 속성을 자세히 살펴보고, 우리에게 익숙한 object-fit 속성과 어떻게 다른지 비교해 볼 거예요. 나아가 이미지를 확대/축소하고 이리저리 이동(패닝, panning)시키는 기능까지 함께 알아보겠습니다.
💡 강사의 팁:
"대체 요소(replaced element)"라는 단어가 좀 낯설게 느껴지실 수 있어요. 쉽게 말해<img>,<video>,<iframe>처럼 CSS가 아닌 외부에서 불러온 자원에 의해 화면에 그려질 내용과 크기가 결정되는 태그들을 의미합니다!
내재적 크기, 외재적 크기, 그리고 object-fit (Intrinsic size, extrinsic size, and object-fit)
모든 대체 요소는 두 가지의 크기를 가집니다. 바로 외재적 크기(extrinsic size)와 내재적 크기(intrinsic size)입니다.
외재적 크기는 박스 모델(box model)과 시각적 포맷팅 모델(visual formatting model)을 바탕으로, 콘텐츠가 화면에 실제로 렌더링되는 HTML 요소의 '껍데기' 크기를 말합니다. 박스 모델과 시각적 포맷팅 모델은 내부 콘텐츠, HTML 속성, 요소와 그 부모 요소에 적용된 CSS, 그리고 화면(viewport)의 크기를 종합적으로 계산해서 요소가 화면에 그려질 최종 크기를 결정합니다.
반면에 내재적 크기는 콘텐츠 자체가 본래 가지고 있는 실제 크기입니다. 즉, 아무런 CSS 스타일이나 레이아웃 제약이 적용되지 않았을 때 요소가 가지는 고유한 크기죠. 외재적 크기와 내재적 크기가 무조건 같아야 하는 건 아니지만, 대체 요소가 가진 본래의 종횡비(aspect ratio)를 깨뜨리지 않고 유지하는 것은 웹 디자인에서 일반적으로 매우 중요합니다.
💡 강사의 팁:
쉽게 비유하자면, '내재적 크기'는 사진작가한테 받아온 원본 사진 파일의 해상도(예: 1920x1080)를 말하고, '외재적 크기'는 우리가 웹페이지에 사진을 넣기 위해 CSS로 지정한 액자의 크기(width: 300px; height: 300px;)를 말합니다. 이 둘을 명확히 구분하는 것이 이미지 레이아웃의 핵심이에요!
object-view-box 대 object-fit 비교 (object-view-box versus object-fit)
CSS에는 크기를 조절하는 다양한 속성들이 있습니다. 대체 요소의 크기를 다룰 때, object-fit 속성을 사용하면 지정된 박스 안에서 대체 요소가 어떻게 그려질지 어느 정도 제어할 수 있죠.
예를 들어, 아래 스크린샷을 볼까요? 1200 x 400 크기의 이미지가 <img> 태그를 통해 화면에 출력되고 있습니다. 그런데 이 <img> 요소의 크기(외재적 크기)는 400 x 200으로 지정되어 있어요. 이때 object-fit: none; 이라는 선언을 사용해 이미지 콘텐츠의 위치를 잡은 모습입니다.
하지만 object-view-box 속성은 object-fit 보다 훨씬 유연하고, 할 수 있는 일도 더 많습니다! 예를 들면 이미지를 자르고(crop), 줌인/줌아웃(zoom)하고, 화면을 이동(pan)시키는 일까지 가능하거든요.
이 속성은 화면에 보여질 영역(뷰박스)을 설정합니다. 즉, 원본 콘텐츠 중 '어느 부분'을 보여줄지, 그리고 그 부분을 외재적 크기(HTML 요소의 크기) 안에 '어떻게' 맞출 것인지를 정의하는 거죠. 뷰박스 값은 콘텐츠의 내재적 영역(원본 크기)을 기준으로 한 사각형의 크기와 좌표를 담고 있습니다. 하지만 여기서 중요한 사실은, 뷰박스의 물리적인 크기는 여전히 요소의 외재적 크기(CSS로 지정한 크기)와 동일하게 유지된다는 점입니다. 뷰박스는 표시할 콘텐츠 영역에 '마커'를 표시하는 역할을 하고, 그렇게 선택된 콘텐츠 영역이 HTML 요소의 외재적 크기에 딱 맞도록 변환(transform)되는 원리입니다.
다음 이미지를 볼까요? 400 x 150 크기의 이미지 태그 안에 똑같은 표범 사진이 들어있습니다. 그런데 이번에는 object-view-box 속성을 사용해서 표범의 눈 부분만 보이도록 사진을 잘라낸(crop) 모습입니다.
이 경우, <img> 요소의 크기와 object-view-box 속성으로 정의한 뷰박스의 크기가 둘 다 400 x 150 픽셀로 똑같습니다. 종횡비가 동일하기 때문에 이미지가 확대되거나 찌그러지는 왜곡 현상 없이 아주 깔끔하게 출력되었죠.
동일한 종횡비(aspect ratio)를 유지하면 이미지가 찌그러지는 것을 막을 수 있습니다. object-view-box를 활용하면, 요소의 껍데기 크기(외재적 크기)와 뷰박스의 크기가 서로 다르더라도 이미지가 확대/축소될 때 찌그러지지 않게 방지하면서 정말 다양한 이미지 처리를 해낼 수 있습니다.
💡 강사의 팁:
요즘 리액트(React)나 Next.js로 컴포넌트를 설계할 때 프로필 아바타 이미지나 썸네일을 다루는 일이 아주 많죠? 예전에는 이미지의 일부분만 보여주기 위해서 바깥에<div>를 하나 더 씌우고overflow: hidden과transform: translate()를 써서 번거롭게 작업해야 했어요. 하지만 이제object-view-box하나면 불필요한 래퍼(wrapper) DOM 요소 없이 이미지 태그 하나만으로 마치 카메라 렌즈로 비추듯 영역을 쏙 뽑아낼 수 있습니다. 마크업이 훨씬 깔끔해지는 마법이죠!
줌인과 줌아웃 (Zooming in and out)
화면에 표시되는 뷰박스의 크기를 줄이게 되면, 작게 선택된 영역이 HTML 요소의 큰 크기에 맞춰지기 위해 쭉 늘어나야 하므로 자연스럽게 줌인(확대) 효과가 발생합니다. 반대로 뷰박스의 크기를 늘리면 줌아웃(축소) 효과가 나타나겠죠.
아래 예제는 object-view-box 속성을 사용해, 크기가 고정된 HTML 요소 안에서 대체 요소의 특정 부분을 줌인/줌아웃하는 방법을 보여줍니다. 이번에는 아주 큰 이미지 속 표범의 '오른쪽 눈'을 줌 효과의 초점(focal point)으로 삼았습니다.
HTML
이 예제에서는 <img> 요소 하나와 슬라이더 역할을 할 range 타입의 <input> 요소, 그리고 이와 연결된 <label> 요소를 사용합니다. 여기서 사용하는 표범 원본 이미지의 자연스러운 크기(내재적 크기)는 가로 1244px, 세로 416px이며, 종횡비는 3:1입니다.
<img
src="[https://mdn.github.io/shared-assets/images/examples/leopard.jpg](https://mdn.github.io/shared-assets/images/examples/leopard.jpg)"
alt="leopard" />
<p>
<label for="box-size">Zoom-in: </label>
<input type="range" id="box-size" min="115" max="380" value="150" />
</p>
<output></output>CSS
여기서는 --box-size 라는 CSS 사용자 지정 속성(CSS 변수)을 정의했습니다. 이 변수는 xywh() 함수 안에서 너비와 높이 값으로 사용되며, 가로세로 비율이 1:1인 정사각형 뷰박스를 만들어냅니다. 줌 효과의 중심점 역할을 하는 뷰박스의 시작 좌표(offset)는 x 좌표 500px, y 좌표 30px로 설정되었는데, 이 좌표가 바로 표범의 오른쪽 눈의 좌측 상단 모서리에 해당합니다.
img {
width: 350px;
height: 350px;
border: 2px solid red;
--box-size: 150px;
object-view-box: xywh(500px 30px var(--box-size) var(--box-size));
}JavaScript
이제 사용자가 슬라이더를 움직일 때마다 --box-size CSS 변수의 값을 업데이트해주는 이벤트 리스너를 추가해 보겠습니다. 슬라이더를 오른쪽으로 밀었을 때 화면이 '확대'되게 만들려면, 뷰박스의 크기는 반대로 줄어들어야 합니다. 그래서 자바스크립트 코드에서 500px에서 슬라이더의 현재 값을 빼주는 방식으로 값을 뒤집어(invert) 계산한 것입니다.
const img = document.querySelector("img");
const zoom = document.getElementById("box-size");
const output = document.querySelector("output");
function update() {
const size = 500 - zoom.value;
img.style.setProperty("--box-size", `${size}px`);
output.innerText = `object-view-box: xywh(500px 30px ${size}px ${size}px);`;
}
zoom.addEventListener("input", update);
update();슬라이더를 한 번 움직여보세요! xywh() 함수의 시작 좌표인 x와 y 값은 그대로 고정된 상태에서, 뷰박스의 크기(너비와 높이)만 변경되면서 화면이 줌인/줌아웃 되는 효과를 직접 확인하실 수 있습니다. 이때 <img> 요소 자체의 빨간색 테두리 크기(350px)는 전혀 변하지 않고 굳건히 유지되는 것도 눈여겨보세요.
이미지 패닝 (Panning an image)
이번에는 화면을 상하좌우로 스르륵 이동시키는 패닝(panning) 효과를 만들어보겠습니다. 화면에 보여질 뷰박스의 크기는 일정하게 유지하면서, xywh() 함수의 x와 y 좌표값만 살살 바꿔주면 됩니다! 예를 들어, 뷰박스의 가로세로 크기는 놔두고 가로 위치(x 파라미터)만 변경하면 이미지가 가로로 휙 스와이프되는 효과를 얻을 수 있죠.
💡 강사의 팁:
패닝(Panning)이라는 단어는 카메라 기법에서 온 말입니다. 삼각대에 카메라를 고정해두고 렌즈만 좌우로 돌리며 넓은 풍경을 훑는 모습을 상상해보세요! 지도를 스와이프해서 이동하는 것도 일종의 패닝입니다.
<img
src="[https://mdn.github.io/shared-assets/images/examples/leopard.jpg](https://mdn.github.io/shared-assets/images/examples/leopard.jpg)"
alt="leopard" />
<p>
<label for="position">Left offset: </label>
<input type="range" id="position" min="0" max="900" value="450" />
</p>
<output></output>img {
width: 350px;
height: 350px;
--x-position: 0;
object-view-box: xywh(var(--x-position) 30px 350px 350px);
}const img = document.querySelector("img");
const position = document.getElementById("position");
const output = document.querySelector("output");
function update() {
img.style.setProperty("--x-position", `${position.value}px`);
output.innerText = `xywh(${position.value}px 30px 350px 350px);`;
}
position.addEventListener("input", update);
update();슬라이더를 좌우로 움직여보세요. xywh() 함수의 x 값을 증가시키거나 감소시키는 것만으로도 얼마나 쉽게 훌륭한 패닝 효과를 만들어낼 수 있는지 확인하실 수 있을 거예요.
더 보기 (See also)
더 깊이 있는 학습을 위해 아래의 MDN 공식 문서들도 함께 참고해 보세요!
object-view-box속성 상세 보기object-fit속성 상세 보기object-position속성 상세 보기background-size속성 상세 보기- 종횡비(Aspect ratio) 완벽 이해하기
MDN 문서 개선에 참여하기 (Help improve MDN)
- 이 페이지가 도움이 되셨나요? (Was this page helpful to you?) [ Yes / No ]
- 기여하는 방법 알아보기 (Learn how to contribute)
- 이 페이지는 MDN 기여자들(MDN contributors)에 의해 2025년 12월 9일에 마지막으로 수정되었습니다.
- GitHub에서 이 페이지 원본 확인하기
- 이 콘텐츠의 문제점 신고하기 (Report a problem with this content)
어떠셨나요? object-view-box의 원리를 완전히 정복하셨길 바랍니다. 프론트엔드 실무에서 이미지 렌더링 최적화와 마크업 경량화는 언제나 핵심 이슈입니다. 이 속성을 잘 응용해서 포트폴리오에 근사한 이미지 제어 기능(예: 커스텀 크롭 뷰어 등)을 추가해 보시면 면접관의 시선을 확 사로잡으실 수 있을 거예요! 화이팅입니다!
