CSS가 형제 요소를 센다…동적 배치에서 sibling-index를 읽는 법

순번을 CSS 계산의 입력으로 사용한다

두르게시 파와르는 5월 21일 스매싱 매거진에서 sibling-index()와 sibling-count()로 동적인 화면 배치를 만드는 방법을 소개했다. 카드마다 다른 등장 지연을 주려면 개별 선택자나 자바스크립트로 순번을 정해 왔는데, 브라우저가 이미 가진 구조 정보를 CSS의 계산으로 사용할 수 있다는 설명이다.

필자는 지연 시간, 같은 폭의 탭, 색상 배분과 원형 배치 등의 예를 제시한다. 이를 모든 상황에서 같은 성능을 내는 측정 결과로 읽지는 않는다. 같은 폭으로 나누더라도 항목이 지나치게 많으면 좁아질 수 있으며, 어떤 배치가 적합한지는 내용의 길이와 화면의 이용 목적에 따라 달라진다.

보이는 순서와 DOM의 요소 순서를 구분한다

CSS Values and Units Level 5 편집 초안은 sibling-index가 같은 부모 아래에서 현재 요소의 위치를 1부터 시작하는 정수로 반환한다고 정의한다. sibling-count는 자신을 포함한 부모의 자식 요소 수다. 공백과 텍스트 조각을 세는 함수가 아니라 요소를 기준으로 삼는다. 현재 초안은 완성된 권고 표준이 아니며 변경될 수 있다.

정의는 화면에 펼쳐진 시각적 트리가 아닌 DOM 트리를 기준으로 한다. 따라서 그림으로 보이는 항목의 수와 코드 안에 존재하는 형제 수가 항상 같다고 가정할 수 없다. 초안은 외부 스타일이 섀도 트리 내부의 구조를 참조할 때 적용되는 경계도 설명한다. 선택자로 일부 항목만 세는 확장은 향후 가능성으로 적혀 있으며 현재 제공되는 인수처럼 쓰지 않는다.

5월의 브라우저 안내를 그대로 반복하지 않는다

원문 발표 시점의 지원 안내와 지금의 문서에는 차이가 있다. 10월 12일 확인한 MDN은 sibling-index를 2026년 8월부터 최신 기기와 브라우저에서 사용할 수 있는 Baseline 2026 기능으로 표시한다. 동시에 오래된 기기나 브라우저에서는 동작하지 않을 수 있다고 안내한다. 5월 글의 특정 브라우저 미지원 설명을 현재의 확정 상태로 옮기지 않아야 한다.

MDN은 함수가 인수를 받지 않고 정수 순번을 반환한다는 점도 확인한다. 계산으로 폭이나 지연을 정하는 것이 선택자로 요소를 고르는 일과 다르다. 실제 배포에서는 기본 표시를 마련하고 기능 지원 여부에 따라 계산을 추가할 수 있다. 이번 기사는 공식 정의와 문서를 읽은 해설이며 브라우저별 데모를 직접 실행해 비교한 시험은 아니다.

규칙이 짧아져도 화면의 의미는 남는다

ARCH.B는 요소 수에 맞춰 표현이 바뀌는 구조가 반복 규칙을 관리하는 부담을 줄일 수 있다고 본다. 다만 구조를 계산한다는 사실이 정보의 우선순위까지 결정해 주지는 않는다. 같은 부모 아래 검색 버튼과 결과 카드가 섞여 있다면 그 구조를 그대로 세는 값이 디자인에서 원하는 순번인지 먼저 확인해야 한다.

시각적 순서만 바꾸면 키보드로 이동하거나 내용을 읽는 순서와 다른 장면을 만들 수 있다. 순번을 사용하는 효과를 더하기 전에 내용이 어떤 흐름으로 이해되어야 하는지 정하는 이유다. 제목과 행동 버튼이 원래의 읽기 흐름에 남는지, 움직임을 줄이고 싶어 하는 사람에게 필요한 정보가 계속 보이는지도 함께 검토할 수 있다.

자동 계산의 범위를 작게 정해 시작한다

필요한 항목 수를 코드와 스타일 양쪽에서 별도로 관리하면 추가하거나 삭제할 때 둘이 어긋날 수 있다. 구조에서 값을 읽는 기능은 이런 중복된 관리 지점을 줄이는 선택지다. 그러나 자식의 구조가 변하는 컴포넌트라면 계산의 기준도 함께 달라진다. 항목을 감싼 새 요소를 추가하는 수정이 표현에 영향을 주는지 살피는 것이 중요하다.

도입할 때에는 카드 몇 장의 지연 효과처럼 입력과 결과가 분명한 영역을 먼저 검토할 수 있다. 그 뒤 좁은 화면, 긴 이름, 항목이 하나인 경우와 삭제된 경우를 보면 어떤 기본 표시가 필요한지 알기 쉽다. 반복 선언이 줄었다는 결과와 이용자가 더 빠르게 원하는 항목을 찾았다는 결과는 서로 다른 평가다.

이 기능의 의미는 모든 배치 로직을 CSS로 옮기는 데 있지 않다. 브라우저가 가진 요소의 관계를 필요한 계산에 직접 연결할 수 있게 됐다는 변화다. 정의의 경계와 지원 상태를 함께 읽으면 간단한 수식이 정확한 화면으로 이어지는 조건을 판단할 수 있다.