ResizeObserver의 box 크기와 반복 알림 문제
논리적 크기, 관찰 상자, 레이아웃 피드백을 구분해 ResizeObserver 반복 알림을 진단합니다.
발행·오류 제보: infostoa · 편집 기준
이 글의 개별 작성자와 전문 검토자 정보는 제공되지 않습니다.
ResizeObserver는 창이 아니라 요소의 크기 변화를 관찰합니다. 콜백에서 레이아웃을 바꾸면 다음 계산에서 다시 크기가 바뀌어 재알림이 생길 수 있습니다. CSS Working Group의 Resize Observer 초안은 관찰 상자와 알림 전달 규칙을 정의하며, MDN과 Chrome Developers의 실무 설명을 함께 읽으면 구현에서 확인할 지점을 구분할 수 있습니다.
개념 그림이며 브라우저 측정 자료가 아닙니다.
관찰할 상자와 받은 크기
observe(target, {box})의 box는 어떤 CSS 상자의 변경이 관찰을 발생시키는지 선택합니다. ResizeObserverEntry에는 contentBoxSize, borderBoxSize, devicePixelContentBoxSize가 별도로 제공됩니다. 각 크기의 inlineSize와 blockSize는 쓰기 방향에 따른 논리 축이므로 항상 가로·세로와 같지 않습니다. 배열 형태는 여러 fragment를 표현하기 위한 것이며, 배열이 언제나 여러 조각을 담는다고 가정하지 마세요. contentRect는 기존 물리 축 API로 다룹니다.
콜백에서 다시 크기를 바꾸면
관찰 콜백이 너비를 바꾸고 그 변경이 관찰된 상자 크기에 영향을 주면 브라우저는 레이아웃을 다시 계산합니다. 같은 갱신 과정에서 반복되는 관찰은 무한히 처리되지 않도록 제한되며, 일부 알림이 다음 기회로 미뤄지면 ResizeObserver loop 오류가 보고될 수 있습니다. 오류 메시지를 숨기는 것만으로 원인이 해결되지는 않습니다.
수렴하는 업데이트를 설계
콜백에서 측정과 쓰기를 무조건 왕복시키지 말고, 이전에 적용한 목표 크기와 새 목표가 달라질 때만 갱신하는 식으로 불필요한 쓰기를 줄입니다. 이 guard는 특정 레이아웃이 안정화된다는 증명은 아닙니다. 부모와 자식이 서로의 크기를 계속 결정하면 프레임마다 진동할 수 있습니다. requestAnimationFrame으로 지연해도 피드백 관계 자체는 사라지지 않습니다.
필요한 값만 읽고 정리하기
컨테이너가 아니라 실제 콘텐츠 상자를 관찰하는지 확인하고, 쓰기 방향과 CSS box-sizing을 고려해 값을 비교하세요. device-pixel 상자는 픽셀 단위 요구에 맞지만 CSS 픽셀과 같지 않을 수 있습니다. 관찰 대상이 사라지거나 컴포넌트가 해제될 때 unobserve 또는 disconnect를 호출합니다. ResizeObserver는 요소 크기 변화 API이지 CSS transform 변화나 모든 시각적 차이를 감지하는 도구가 아닙니다.
원인을 분리해 진단하기
먼저 콜백에서 읽는 값과 쓰는 CSS 속성을 기록해 어떤 쓰기가 관찰 상자의 다음 크기를 바꾸는지 찾습니다. 예를 들어 콘텐츠 폭을 읽은 뒤 부모 폭을 늘리고, 그 부모 폭이 자식의 줄바꿈과 높이를 다시 바꾸면 두 요소가 서로를 따라갈 수 있습니다. 크기를 직접 설정할 필요가 없다면 CSS grid, flex, container query로 관계를 표현하는 편이 단순합니다. ResizeObserver는 CSS 레이아웃을 매 프레임 폴링하는 대체재가 아닙니다.
오류가 한 번 나타나고 다음 렌더링 주기에 남은 알림이 전달되는 것과, 애플리케이션이 프레임마다 크기를 뒤집는 지속 피드백은 서로 다른 현상입니다. 로그를 줄이려고 observer를 매번 disconnect하는 것은 진단 신호를 없앨 수 있지만 레이아웃 순환을 해결하지 않습니다. 목표 크기를 제한하고 동일 값 쓰기를 생략한 뒤, 관찰 옵션과 실제 content/border box를 다시 맞추세요.
가상 크기 추적으로 자기 참조 쓰기 찾기
설명용 추적(실행 결과가 아님)을 보겠습니다. 가로 쓰기 방향, content-box, 패딩과 테두리 없음, 관찰된 요소의 콘텐츠 너비가 처음 320px이라고 가정합니다. 콜백이 읽은 inlineSize에 1px을 더해 같은 요소의 CSS width로 쓰면 다음 관찰값은 321px, 이어서 322px처럼 변할 수 있습니다. 이 숫자는 규칙에 따른 가상 입력·출력이지 브라우저 측정값은 아닙니다. 관찰한 상자와 같은 값을 콜백이 다시 바꾸고 있어 안정된 목표가 없는 것이 핵심입니다.
실제 진단에서는 콜백의 읽기 값, 대상 box, 쓰는 CSS 속성, 쓰기 전후의 목표값을 함께 기록해 변화가 어디서 되먹임되는지 분리하세요. 단순히 동일값 쓰기를 건너뛰는 guard는 중복 갱신을 줄일 수 있지만, 매번 목표가 1px씩 달라지는 규칙을 수렴시키지는 않습니다. 가능하면 관찰 대상 자체가 아닌 고정된 부모 조건에서 목표를 계산하고, 레이아웃만으로 표현할 수 있는 반응은 CSS grid, flex 또는 container query에 맡기세요. Resize Observer 초안의 깊이 제한과 미전달 알림 오류는 전달 절차를 제한하는 장치이지, 애플리케이션의 피드백 관계를 자동으로 고치는 기능은 아닙니다.