Summary

  • 핵심 요지. W3C의 2015년 첫 공개 초안은 부정확한 손짓 뒤 사진첩이 반쯤 걸쳐 멈추는 문제를 들고, 스크롤 컨테이너가 쉴 수 있는 스냅 지점을 제안했다.
  • 변화의 결과. 뒤의 초안은 컨테이너가 흡착 강도를, 사진 같은 요소가 정렬 위치를 정하도록 나눴다. 브라우저가 이동과 최종 정지를 처리한다.

편집자가 취재 사진을 한 줄로 놓는다. 컴퓨터에서는 보기 좋지만 휴대전화의 좁은 창에서는 한 장씩 봐야 한다. 독자는 엄지로 쓸어 넘기고, 화면은 두 사진의 경계에 걸린다. 사이트가 화살표 버튼을 세워 매 장면의 이동을 통제할 수도 있다. CSS Scroll Snap이 택한 방법은 더 간단하다. 스크롤은 그대로 두고 브라우저에 “여기쯤 멈추면 사진이 온전히 보인다”고 알려 준다.

2015년 3월 26일 첫 공개 초안의 제목은 CSS Scroll Snap Points였다. 문서는 사진첩을 예로 들며 손가락이나 마우스 휠의 입력이 정확한 페이지 경계에서 끝나지 않아 화면에 반쪽짜리 페이지가 남을 수 있다고 설명했다. 그래서 스크롤이 끝났을 때 컨테이너의 보이는 창이 놓일 지점을 정의했다. mandatory는 가능하면 지점에 멈추게 하고, proximity는 가까운 지점으로 끌어갈지 사용자 에이전트가 판단하게 한다. 축을 따라 반복되는 지점과 요소가 내놓는 지점도 다뤘다. 사이트는 주차선을 긋고 브라우저가 차를 댔다.

2015년 12월 CSS 작업반 회의록을 보면 설계가 움직이는 모습이 보인다. Matt Rakow이 영역과 정렬 개념을 합치고 있었고, 작업반은 낡은 좌표를 scroll-snap-align과 영역으로, 목적지를 padding으로 바꾸기로 했다. 2016년 5월 샌프란시스코 회의에서는 창보다 큰 사진, 눈에 보이지 않는 목표, 도달할 수 없는 스냅 영역을 다뤘다. 도면에는 멋진 주차칸이 있어도 차가 들어갈 수 없다면 독자에게 쓸모가 없다.

2016년 6월 23일 초안에서는 정렬이 중심이 됐다. 컨테이너의 scroll-snap-type이 멈춤 방식을 정하고, 사진의 scroll-snap-align이 어느 가장자리나 가운데를 창에 맞출지 지정한다. 편집자는 사진을 중앙에 보이게 할 수 있고, 손가락의 속도를 직접 계산할 필요는 없다. 문서는 정확한 움직임과 물리 효과를 브라우저에 맡겼다. 긴 페이지의 예는 proximity가 왜 필요한지도 보여 준다. 독자가 문단 중간에서 멈추고 싶은데 매번 다음 표시로 잡아끄는 안내원은 지나치게 성실하다.

2018년 8월 14일 후보 권고안 스냅숏은 scroll-snap-type, scroll-snap-align, scroll-padding, scroll-margin으로 컨테이너와 요소의 역할을 더 자세히 설명했다. 여백은 실제로 맞춰지는 창을 바꿀 수 있다. 고정 머리글 아래에 사진이 가려지지 않도록 공간을 남기는 식이다. 사이트는 사진의 구도를 정하고 브라우저는 스크롤의 계산을 맡는다.

2021년 3월 11일 후보 권고안 스냅숏도 이 구조를 이어 가며 가능한 위치 가운데 최종 정지점을 고르는 방식을 다뤘다. 독자가 움직임을 시작하고 스타일시트가 후보를 제시하면 브라우저가 착지한다. 짧은 사진첩에는 단단한 흡착이 어울릴 수 있다. 긴 글에서는 독자가 중간 문장을 다시 읽을 자리를 남겨야 한다. mandatory와 proximity의 차이는 설정 화면보다 손끝에서 먼저 느껴진다.

W3C 발행 연혁에는 2015년, 2016년, 2018년, 2021년의 이정표가 있다. 이 이야기는 독자가 직접 시작한 스크롤이 끝나는 곳을 다룬다. 위쪽에 새 이미지가 나타나 읽던 자리가 밀리는 문제는 Scroll Anchoring의 몫이다. 여기서는 편집자가 사진을 배열하고, 독자가 넘기고, 브라우저가 두 사진을 가로질러 주차하지 않으면 된다. 2021년 문서는 스냅을 끄더라도 padding과 margin이 특정 요소를 화면으로 가져오는 동작에 영향을 준다고 설명한다. 사진첩에서 다듬은 프레임의 규칙이 다른 스크롤에도 남은 셈이다.