요약

  • W3C는 2020년 2월 11일 Resize Observer의 첫 공개 작업 초안을 냈다. 요소의 크기 변화를 관찰하고 측정 정보를 콜백에 전달하는 API다.
  • CSSWG 편집자 초안은 콘텐츠 상자, 테두리 상자, 기기 픽셀 콘텐츠 상자를 나누고, 렌더링 중 통지를 전달하다 남은 크기 변화가 있을 때의 처리 절차를 설명한다.

대시보드 안의 그래프를 떠올려 보자. 바깥 그리드는 그래프 카드에 공간을 배정한다. 그래프 작성자는 축에 몇 개의 글자를 넣을지 정한다. 사이드바가 열리면 카드는 좁아지지만 창 크기는 변하지 않는다. 그리드는 축의 글자 길이를 모르고, 그래프는 그리드의 칸 너비를 지휘하지 않는다. 둘을 이어 주는 데 필요한 정보는 카드가 실제로 얼마만큼의 자리를 받았는가다.

2020년 2월 11일 W3C 첫 공개 작업 초안은 요소 크기를 관찰하는 ResizeObserver를 제시했다. observe()로 대상을 등록하면, 관찰 중인 상자의 크기가 달라질 때 측정 항목이 콜백에 전달된다. unobserve()는 대상 하나를 떼고 disconnect()는 관찰을 종료한다. W3C의 공식 발행 기록은 2020년 초안의 날짜와 첫 공개 작업 초안이라는 지위를 확인해 준다. 관심의 단위가 창 전체에서 실제로 변한 카드로 내려왔다.

새 너비를 받은 그래프는 축의 눈금 수를 줄이거나 범례를 옮기거나 다시 그릴 수 있다. 브라우저는 레이아웃 계산 뒤의 수치를 전하고, 그래프 작성자는 그 수치로 무엇을 바꿀지 정한다. 페이지는 모든 카드의 안쪽 사정을 배우지 않고도 그리드를 재배치할 수 있다.

어떤 크기를 볼지도 선택해야 한다. CSSWG의 Resize Observer Module Level 1 편집자 초안은 content-box, border-box, device-pixel-content-box를 다룬다. 첫째는 내용 공간, 둘째는 테두리까지 포함한 공간, 셋째는 CSS 변형 전 기기의 픽셀 단위로 본 내용 공간이다. 긴 문장을 담는 칸과 테두리가 있는 카드, 또렷한 canvas 그림은 서로 다른 눈금을 필요로 한다. 질문에 맞는 줄자를 집어야 한다.

observe()에서 고른 상자는 어떤 변화가 통지를 일으키는지 정한다. 전달된 항목에는 크기 데이터도 담긴다. 통지 조건과 읽을 수 있는 데이터를 구분하면 쓸데없는 재계산을 줄이기 쉽다. 카드가 화면에서 사라지면 관찰도 끝내면 된다. 철거된 방에 계속 줄자를 들고 올 이유는 없다.

콜백 자체가 소동을 만들 수도 있다. 카드가 좁다고 넓혔더니 새 측정값이 오고, 그 값을 보고 다시 줄였더니 다음 값이 온다. CSSWG 초안은 관찰 처리를 렌더링 과정에 두고 요소의 깊이를 이용해 한 번의 과정에서 반복 전달을 제한한다. 그때 전달하지 못한 변화는 크기 변경 반복 오류로 알려지고 다음 프레임에서 다뤄질 수 있다. 작성자는 반응이 끝내 안정되도록 설계해야 한다. 주어진 상자 안의 그림을 조정하면, 상자 벽을 계속 밀고 당기는 일을 피할 수 있다.

CSSWG 문서는 2022년 11월 22일 자 편집자 초안이고, W3C 기록은 2020년의 첫 공개 초안을 보여 준다. 이 문서들이 들려주는 변화는 소박하다. 브라우저가 특정 부품의 자리를 재서 알려 주고, 부품의 작성자가 그 안에 무엇을 넣을지 정한다.