채팅창은 맨 아래에 닿았다. 기사는 혼자 내려갔다

Summary

• 안쪽 스크롤 영역이 끝에 닿으면 남은 움직임이 바깥 조상 영역으로 전달될 수 있다. 채팅은 멈추고 기사만 움직이는 이유다.
• contain은 바깥으로의 전달을 막으면서 안쪽 경계의 시각적 반응은 남길 수 있다. none은 그 반응도 막는다. 두 값은 독자가 끝을 느끼는 방식부터 다르다.

긴 기사 위에 채팅창 하나가 놓여 있다. 독자가 대화의 마지막 줄을 확인하고 휠을 한 번 더 돌리자, 채팅창 아래에 있던 기사 문단이 사라진다. 2019년 W3C 첫 공개 작업 초안은 이 현상을 스크롤 연쇄라고 설명한다. 입력은 안쪽 영역에서 출발하고 경계에 도착하면 바깥 조상 영역으로 이어질 수 있다. 브라우저에게는 자연스러운 전달일지 몰라도 독자에게는 대화창 바닥이 갑자기 에스컬레이터로 바뀐 셈이다.

예전에는 사이트가 터치나 휠 이벤트를 감시하다가 경계에서 preventDefault()를 호출했다. 초안이 적은 비용은 선명하다. 수동 처리 표시가 없는 이벤트 감시자가 있으면 브라우저가 스크립트의 결정을 기다려야 하므로 스크롤이 늦어질 수 있다. 이벤트를 통째로 취소하면 경계를 넘는 동작뿐 아니라 경계까지 가는 정상 이동도 막을 수 있다. 안쪽 창이 끝에 닿았음을 알리는 작은 탄성이나 빛도 같은 동작에 묶여 있을 수 있다. 기사가 움직이지 않게 하자고 채팅창의 도착 신호까지 압수할 필요는 없다.

2016년 12월 CSS 작업반 회의록에는 속성이 아직 scroll-boundary-behavior로 불리던 시절의 논쟁이 있다. Tab Atkins는 위나 아래 끝에 닿은 스크롤 의도가 바깥으로 빠져나가야 하는지를 물었다. Simon Fraser는 한 손짓 동안 같은 스크롤 영역을 붙드는 방식과 사용자를 페이지 안에 가둘 위험을 꺼냈다. 끝에 닿은 채팅 위젯은 회의에서 나온 구체적 사례였다. 표준화할 만하다는 의견은 모였지만 이름과 동작을 더 다듬어야 했고, 즉시 최종 결정을 내리지는 않았다.

WICG에서 자란 제안은 2018년 1월 Majid Valipour의 이관 요청을 받았다. CSS 작업반 초안으로 옮겨 브라우저 사이에 공통으로 논의하자는 것이었다. 그의 글은 당시의 브라우저 구현 상황도 적었다. 한 채팅창을 지키던 임시 요령이, 작성자와 브라우저가 공유하는 규칙으로 바뀌기 시작한 순간이다. 사이트는 어디서 멈출지를 말하고, 손짓의 물리까지 직접 구현할 필요는 없게 됐다.

W3C 발행 이력은 첫 공개 작업 초안을 2019년 6월 6일로 기록한다. 초안은 경계의 반응을 둘로 가른다. 창 안쪽의 튕김이나 빛은 국소적이다. 부모 페이지로 스크롤을 넘기거나 탐색 동작을 일으키는 것은 바깥에 영향을 준다. auto는 평소 브라우저 동작을 따른다. contain은 바깥 영향을 막고 안쪽 반응은 허용한다. none은 안쪽 반응도 없앤다. 채팅창에서는 작은 '여기가 끝' 신호가 유용할 수 있고, 계속 항목을 불러오는 목록에서는 조용한 끝이 어울릴 수 있다.

방향도 문제였다. 물리적인 x축과 y축만으로 쓰면 문자 배열 방식이 다른 페이지에서 의도가 어긋난다. 2018년 4월 베를린 회의에서 작업반은 block과 inline 속성을 더하기로 결정했다. 스크롤 경계가 글의 논리적 흐름을 따르게 한 것이다. 여러 언어를 별도로 쓰는 매체라면 이런 세부 설계가 남의 일이 아니다.

초안에는 고정된 옆 메뉴, 당겨서 새로고침하는 페이지, 무한 목록이 함께 나온다. 끝에 닿았을 때 각 화면이 해야 할 일은 다르다. 이 이야기의 채팅창은 마지막 메시지에 닿았다고 기사를 여행 보내고 싶지 않을 뿐이다. 문턱 하나로 화면 전체의 위치가 지켜진다.