요약

  • 2020년 2월 11일 나온 W3C 첫 공개 초안은 화면에 보이는 영역의 시작 근처에서 앵커 노드를 고르고, 그 노드가 밀린 만큼 스크롤 위치를 조정하는 방식을 제시했다.
  • 11월 11일 초안은 적합한 후보와 우선 후보, 스크롤 스냅과의 관계를 분명히 했다. overflow-anchor: none으로 특정 영역을 후보에서 뺄 수 있다.

광고는 꼭 재미있는 대목에서 늦게 도착한다. 위에 자리를 잡고 아래에 있던 글을 밀어 버린다. 독자는 방금 보던 문장을 다시 찾는다. 그동안 브라우저는 원래의 스크롤 값을 성실하게 지켰다. 문서 맨 위에서 얼마만큼 내려왔는지 하는 숫자다. 그런데 눈 밖의 위쪽에서 문서가 길어지면 같은 숫자는 다른 문장을 가리킨다. 계산은 맞았고 독서 경험은 틀어졌다.

2020년 2월 11일 W3C 첫 공개 초안은 이 어긋남을 구체적으로 설명한다. 스크립트가 광고 iframe을 끼워 넣거나, 공간을 미리 잡아 두지 않은 이미지가 느린 네트워크를 타고 나중에 나타나는 경우다. 두 경우 모두 보이는 영역 위쪽에 높이가 생긴다. 사이트가 처음부터 크기를 예약하면 가장 좋다. 초안은 그렇지 못한 도착에도 브라우저가 독자의 자리를 지킬 방법을 마련했다.

브라우저는 스크롤되는 상자 안에서 기준이 될 노드를 찾는다. 화면에 보이는 구역의 시작점에 가깝고 문서 구조 안쪽에 있는 요소가 유력하다. 배치가 바뀌기 전 그 노드의 위치와 바뀐 뒤의 위치를 재고, 차이만큼 스크롤을 조정한다. 광고는 자기 높이를 갖고, 읽던 문단은 화면에서 자기 자리를 지킨다. 스크롤 막대의 수치가 바뀌는 편이 문장이 사라지는 것보다 낫다는 판단이다.

어떤 노드든 기준으로 삼을 수는 없다. 메뉴, 장식, 움직이는 패널과 본문이 한 화면에 뒤섞인다. 초안은 앵커 후보의 자격을 정하고, 예정된 보정을 레이아웃 처리의 알맞은 시점까지 미루는 억제 구간을 둔다. 브라우저가 작은 움직임 하나하나에 호들갑을 떨지 않고 변화의 묶음을 다루게 하는 장치다.

2020년 11월 11일 작업 초안은 적합한 후보와 우선 후보를 더 명확히 쓰고, 스크롤 스냅과의 관계를 다듬었다. 화면이 정해진 지점에 멈추도록 만든 인터페이스라면 그 기하학도 고려해야 한다. W3C의 발행 기록에는 그해의 두 초안이 나란히 실려 있고, 2월 발표문은 독자가 읽는 동안 화면 밖 변화 때문에 페이지가 움직이는 문제를 짚었다.

페이지 제작자는 필요한 곳에서 범위를 조절한다. overflow-anchor의 기본값은 auto이고, none을 쓰면 스크롤 상자에서 앵커링을 끄거나 특정 하위 영역을 후보에서 제외할 수 있다. 자체적으로 스크롤을 다루는 구성 요소나 의도된 움직임에는 그런 선택이 필요하다. 브라우저는 일반적인 읽기 상황을 지키고, 페이지는 자기 설계의 예외를 표시한다.

앞쪽 장에 새 종이를 끼워 넣는 동안 손가락으로 책의 한 줄을 짚고 있다고 생각해 보자. 장수는 달라져도 손가락은 문장에 남아 있다. 2020년의 스크롤 앵커링은 브라우저에 그 손가락을 맡겼다. 광고가 늦어도 독자까지 줄을 다시 서지는 않는다.