스크롤 막대가 시계를 해고하고 감독석에 앉았다

요약

• W3C가 2022년 10월 공개한 첫 Scroll-linked Animations 초안은 스크롤 컨테이너가 이동한 정도와 특정 요소가 화면을 통과한 정도를 서로 다른 진행 기준으로 제시했다.
• 2023년 Scroll-driven Animations 초안은 ScrollTimeline, ViewTimeline, animation-timeline을 다듬어, 초 단위 시계 대신 독자의 위치가 움직임의 박자를 잡도록 했다.

긴 기사 중간에 등장한 막대그래프가 두 초 동안 멋지게 자란다. 처음 볼 때는 제법 친절하다. 숫자를 다시 확인하려고 위로 돌아가면 막대는 완성된 채 서 있다. 공연은 이미 끝났고 배우는 다시 나올 생각이 없다. 독자는 글을 위아래로 오가며 읽는데, 그림만 한 방향으로 흐르는 시계에 묶여 있다. 무대를 감독하는 사람이 관객의 손에 들린 스크롤 막대를 못 본 셈이다.

2022년 10월 25일 W3C의 첫 공개 초안은 Scroll-linked Animations라는 이름을 썼다. 여기에는 두 종류의 진행 시간축이 있다. 스크롤 진행은 컨테이너가 시작점에서 끝점까지 얼마나 이동했는지 잰다. 뷰 진행은 한 요소가 화면의 보이는 영역에 들어와 지나간 뒤 나가기까지의 여정을 잰다. 기사 맨 위의 읽기 진행 막대에는 전자가 알맞다. 중간에 놓인 도표의 등장 과정에는 후자가 알맞다. 두 경우 모두 스크롤하지만, 질문은 각각 ‘문서를 얼마나 지났나’와 ‘이 그림은 지금 어디 있나’이다.

브라우저는 이 위치를 측정해 애니메이션에 진행 값으로 건넨다. 사이트는 무엇을 움직일지, 어느 구간에서 움직일지, 그 변화가 무엇을 설명하는지 정한다. 독자가 멈추면 그림도 멈추고, 돌아가면 그림도 되돌아갈 수 있다. 스크롤 막대가 박자를 맡았다고 해서 원고까지 쓰는 것은 아니다. 박자와 의미 사이에는 편집자의 판단이 남는다.

2022년 12월 8일 초안은 CSS로 시간축을 연결하는 방법을 더 자세히 설명했다. scroll()은 스크롤 진행을 가리킬 수 있고, 이름을 붙인 시간축과 뷰 시간축은 효과를 적절한 출처에 연결한다. 여기에는 다소 싱거운 조건도 있다. 컨테이너에 실제로 스크롤할 만큼 넘치는 내용이 없으면 스크롤 시간축은 비활성 상태일 수 있다. 이동할 거리가 없는데 ‘여정의 절반’을 연출하는 것은 1층에 멈춘 엘리베이터에서 3층 풍경을 기대하는 일이다.

2023년 4월 28일 초안의 제목은 Scroll-driven Animations로 바뀌었다. 단순히 스크롤할 때 한번 불꽃놀이를 시작한다는 뜻보다 명확하다. 위치 자체가 움직임의 진행을 이끈다. CSS나 Web Animations 인터페이스로 이 개념을 표현할 수 있다. 효과는 몇 초라는 시간 대신 독자가 이동하는 거리의 한 구간을 차지한다. 사진이 화면에 들어오는 동안 선명해질 수도 있고, 읽기 막대가 기사와 함께 차오를 수도 있다.

2023년 6월 6일 초안은 ScrollTimeline과 ViewTimeline을 별도의 진행 출처로 설명하고, animation-timeline을 통한 연결을 다뤘다. 출처를 헷갈리면 기사 전체의 읽기 막대가 사진 한 장의 등장에 반응하거나, 사진 한 장이 기사 전체의 길이를 따라 움직이는 우스운 일이 생긴다. ‘얼마나 진행됐나’를 묻기 전에 ‘누구의 여정인가’를 정해야 한다.

W3C 공개 이력에는 2022년 첫 초안부터 2023년 개정까지의 길이 남아 있다. 그 문서들이 브라우저에 맡긴 것은 공통의 위치 측정이다. 모든 제목을 빙글빙글 돌리라는 지시가 아니다. 독자가 되돌아갈 때 핵심 설명을 다시 보여 주는 그림은 쓸모가 있다. 손가락이 조금 움직일 때마다 제목들이 묘기를 부리면 기사는 순식간에 유원지가 된다. 시계를 해고한 이유는 분명했지만, 새 감독이 서커스 단장이 될 이유는 없다.

다시 읽는 사람에게는 다시 보여 주는 그림이 어울린다. 이번 공연의 속도는 객석에서 정한다.