Resize Observer API
Baseline: Widely available (널리 사용 가능)
✅ Chrome ✅ Edge ✅ Firefox ✅ Safari
이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2020년 7월부터 브라우저 전반에서 사용할 수 있게 됐어요.
Resize Observer API는 코드가 요소의 크기 변화를 모니터링할 수 있는 성능 좋은 메커니즘을 제공하며, 크기가 변할 때마다 observer에게 알림이 전달돼요.
안녕하세요! 프론트엔드 개발의 반응형 디자인(Responsive Design)을 책임지는 든든한 기술, Resize Observer API 문서를 가져오셨군요.
과거에 window.onresize 이벤트를 쓰다가 브라우저가 버벅거리는 현상을 겪어보셨거나, 뷰포트 크기가 아니라 특정 div 박스의 크기만 바뀌었을 때를 감지하고 싶어서 고민하셨던 적이 있다면, 이 API가 완벽한 해결책입니다. 준비 중이신 포트폴리오 사이트나 독후감 사이트에서도, 창 크기를 줄이거나 늘릴 때 글자 크기나 레이아웃이 부드럽게 조정되도록 만들 때 아주 유용하답니다.
그럼, 강사의 실무 팁과 함께 자세히 번역해 드릴게요!
개념 및 사용법 (Concepts and usage)
웹 개발을 하다 보면 어떤 요소(element)의 크기 변화에 반응하여 디자인을 바꿔야 하는 반응형 디자인 테크닉(그 외 기타 여러 상황)을 써야 할 때가 정말 많습니다. 하지만 이전에는 이를 구현하는 방법들이 꼼수(hacky)에 가깝거나, 에러가 나기 쉬운 불안정한(brittle) 방식이었습니다.
예를 들어, 미디어 쿼리(media queries)나 window.matchMedia는 브라우저 전체(뷰포트)의 크기가 특정 지점(breakpoint)을 지날 때 레이아웃을 업데이트하는 데는 아주 훌륭합니다. 하지만, 바깥쪽 컨테이너(뷰포트)가 아니라 그 안에 있는 특정 요소(element)의 크기가 변하는 것에만 반응해서 레이아웃을 바꾸고 싶다면 어떡해야 할까요?
과거에 이를 해결하기 위한 제한적인 꼼수로는, 크기가 변할 것으로 예상되는 요소와 관련된 적절한 이벤트(예: window resize 이벤트)를 감지(listen)한 다음, Element.getBoundingClientRect나 Window.getComputedStyle 같은 메서드를 사용해서 크기 변화 후의 새로운 치수(dimension)나 특징을 계산해 내는 방식이 있었습니다.
이런 꼼수 방식은 아주 제한적인 상황에서만 작동할 뿐만 아니라, 성능에도 악영향을 미칩니다 (위에서 언급한 메서드들을 크기가 변하는 내내 반복적으로 호출하면 성능이 곤두박질치는 큰 타격을 입게 됩니다). 게다가 뷰포트 창 크기가 바뀌지 않은 채로 내부 요소의 크기만 바뀌는 상황(예: 사이드바 토글, 텍스트 추가로 인한 박스 크기 증가 등)에서는 아예 동작하지조차 않았죠.
Resize Observer API는 정확히 이런 종류의 문제들(그리고 그 이상)에 대한 완벽한 해결책을 제공합니다. 이 API를 사용하면 요소의 콘텐츠 영역(content box)이나 테두리 영역(border box)의 크기 변화를 아주 쉽고 퍼포먼스(성능) 저하 없이 관찰하고 반응할 수 있습니다. 이는 웹 플랫폼 개발자들 사이에서 오랫동안 논의되어 왔던 "요소 단위 쿼리(element queries, 컨테이너 쿼리)"의 부재를 해결해 주는 자바스크립트 차원의 훌륭한 설루션입니다.
사용법은 아주 간단하며, Performance Observer나 Intersection Observer 같은 다른 관찰자(observer) 객체들과 거의 똑같습니다.
ResizeObserver() 생성자를 사용해서 새로운 ResizeObserver 객체를 만든 다음, ResizeObserver.observe()를 호출하여 특정 요소의 크기 변화를 지켜보라고 명령하기만 하면 됩니다.
그러면 생성자 안에 설정해 둔 콜백 함수(callback function)가 요소의 크기가 변할 때마다 실행되면서 새로운 치수 정보를 제공해 주며, 여러분은 이 정보에 반응하여 원하는 어떤 작업이든(예: 캔버스 다시 그리기, 글꼴 크기 조절 등) 할 수 있게 됩니다.
💡 강사의 실무 팁:
이 API가 빛을 발하는 순간이 언제일까요? 앞서 배우신 Canvas를 사용할 때입니다!
캔버스는 크기가 유동적으로 변하면 화면이 찌그러지는 현상이 발생하죠. 이때ResizeObserver를 캔버스를 감싸는div박스에 달아두고, 박스 크기가 변할 때마다 콜백 함수 안에서 캔버스의width,height속성을 재계산해서drawImage를 다시 해주면, 창 크기를 이리저리 늘리고 줄여도 절대 깨지지 않는 완벽한 반응형 캔버스를 만들 수 있습니다!
인터페이스 (Interfaces)
ResizeObserver
새로운 관찰자를 등록하고, 특정 요소들에 대한 관찰(observing)을 시작하거나 중지할 수 있는 기능을 제공합니다.
ResizeObserverEntry
크기가 변경된 단일 요소를 설명하는 객체로, 어떤 요소의 크기가 변했는지(target) 그리고 그 요소의 새로운 크기(size)는 얼마인지를 알려줍니다.
예제 (Examples)
저희의 GitHub 저장소에서 두 가지 간단한 예제를 확인하실 수 있습니다:
- resize-observer-border-radius.html (소스 코드 보기): 이 예제는 뷰포트 크기의 특정 퍼센트로 크기가 지정된 초록색 박스를 보여줍니다. 뷰포트 크기가 변하면 박스의 크기도 변하는데, 이때 Resize Observer가 이를 감지하여 박스의 둥근 모서리(
border-radius) 값을 박스의 크기에 비례하여 동적으로 변경해 줍니다. 그냥 CSSborder-radius에 퍼센트(%)를 쓰면 크기가 변할 때 모서리가 찌그러진 타원 모양이 되어 보기 흉해지지만, 이 자바스크립트 해결책을 사용하면 박스 크기가 변해도 항상 완벽하게 둥근 원형 모서리를 유지할 수 있습니다. - resize-observer-text.html (소스 코드 보기): 이 예제에서는 슬라이더(range input)의 값을 조절하면 글씨를 감싸고 있는
<div>의 너비가 변합니다. 이때 Resize Observer가 박스 너비 변화를 감지해서 헤더(h1)와 문단(p)의font-size를 그에 맞춰 줄이거나 키웁니다. 이는 뷰포트 크기가 전혀 변하지 않더라도, 요소 자체의 크기 변화에 반응하여 작업을 수행할 수 있다는 것을 완벽하게 보여주는 예시입니다.
일반적으로 코드는 아래와 같은 패턴을 따르게 됩니다 (resize-observer-border-radius.html 예제에서 발췌):
// 1. 관찰자(Observer)를 생성하고 콜백 함수를 정의합니다.
const resizeObserver = new ResizeObserver((entries) => {
// 모서리를 둥글게 깎을 반지름(px)을 계산하는 도우미 함수
const calcBorderRadius = (size1, size2) =>
`${Math.min(100, size1 / 10 + size2 / 10)}px`;
// 크기가 변한 요소들(entries)의 배열을 순회합니다.
for (const entry of entries) {
// 최신 브라우저는 borderBoxSize 속성을 제공합니다.
if (entry.borderBoxSize) {
// inlineSize(너비)와 blockSize(높이)를 사용해 border-radius를 적용합니다.
entry.target.style.borderRadius = calcBorderRadius(
entry.borderBoxSize[0].inlineSize,
entry.borderBoxSize[0].blockSize,
);
} else {
// 구형 브라우저를 위한 폴백(Fallback) 처리: contentRect를 사용합니다.
entry.target.style.borderRadius = calcBorderRadius(
entry.contentRect.width,
entry.contentRect.height,
);
}
}
});
// 2. 페이지의 특정 div 요소를 지켜보라고(observe) 명령합니다.
resizeObserver.observe(document.querySelector("div"));💡 강사의 실무 팁:
콜백 함수 안에서entries배열을for...of로 도는 이유가 뭘까요?
ResizeObserver.observe()를 호출할 때 타겟 요소를 하나가 아니라 여러 개 지정할 수도 있기 때문입니다. 만약 3개의 박스를 감시 중인데, 사용자가 브라우저 크기를 휙 줄여서 3개 박스의 크기가 동시에 변했다면 콜백은 한 번만 호출되고 그 안의entries배열에 3개의 변경 정보가 모두 담겨 들어옵니다. 이렇게 일괄 처리(batch)를 해주기 때문에 브라우저 성능이 아주 뛰어나게 유지될 수 있는 것입니다!
어떠신가요? Intersection Observer로 '화면에 보이는가'를 감지했다면, 이제 Resize Observer로 '크기가 변했는가'까지 완벽하게 감지할 수 있게 되셨습니다. 이 두 가지 Observer API만 마스터하셔도 프론트엔드에서 DOM을 다루는 실력이 한 단계 훌쩍 뛰어오를 거예요!
