요약

  • 2013년 6월 W3C 첫 공개 초안은 CSS 전환, CSS 애니메이션, SVG 애니메이션에 공통인 시간과 효과를 하나의 모델로 설명하려 했다.
  • 2014년 문서는 스크립트가 애니메이션을 만들고 브라우저가 실행하는 인터페이스를 제시했다. 2023년 문서는 현재 시간, 일시정지, 역방향, 완료, 취소의 상태를 자세히 정의했다.

무대 뒤에 초시계가 세 개 놓였다. 한 사람은 전환 효과로 그림을 밀어 넣고, 또 한 사람은 키프레임으로 아이콘을 돌리며, 셋째는 SVG 선을 움직인다. 독자가 “선이 저 지점을 지날 때로 돌아갈 수 있나요?”라고 묻는다. 편집자는 시계 세 개의 눈금을 맞춰야 한다. 각각에 JavaScript 타이머를 붙여 매 프레임을 직접 계산할 수도 있다. 그러면 설명을 쓰던 사람이 갑자기 시계 수리공을 겸하게 된다.

2013년 6월 25일 Web Animations 첫 공개 초안은 이 구조적 문제를 짚었다. CSS Transitions, CSS Animations, SVG는 비슷한 움직임을 만들지만 서로 다른 말로 설명했다. 초안은 공통된 시간, 활동 구간, 효과의 개념을 하나의 추상 모델로 모았다. 시간축이 진행을 제공하고 효과가 중간 값을 계산하며 여러 결과가 결합될 수 있다. 독자에게 무엇을 보여 줄지는 페이지가 정한다. 움직임을 재는 언어는 함께 쓸 수 있다.

2014년 6월 5일 초안은 모델과 프로그래밍 인터페이스를 나란히 놓았다. 스크립트가 애니메이션을 만들 수 있고, 만들어진 뒤에는 사용자 에이전트가 실행한다. 페이지의 콜백이 모든 프레임을 직접 그리고 계산하는 방식과는 일의 분담이 다르다. 문서는 requestAnimationFrame과 시간 값 및 실행 순서가 어떻게 맞물리는지도 설명했다. 브라우저가 태엽을 돌리고, 사이트는 어느 설명에 움직임을 쓰고 언제 재생을 시작할지 고른다.

일시정지는 장식용 기능이 아니다. 독자가 네트워크 경로 그림을 멈춰 화살표의 표기를 읽을 수 있다. 선생님은 신호의 출발점을 보여 주려고 동작을 거꾸로 돌릴 수 있다. 애니메이션의 현재 시간과 재생 상태를 일관되게 다룰 수 있으면, 페이지는 독자가 다시 보고 싶은 순간으로 돌아간다. 세 종류의 움직임을 위해 사적인 시계를 세 벌 발명할 필요가 줄어든다.

2018년 10월 11일 Level 1 초안은 시간축, 애니메이션 객체, 효과의 역할을 정리해 갔다. 효과는 무엇이 변하는지를, 시간축은 진행의 기준을, 재생 상태는 대기·실행·정지·완료를 말한다. 속도와 방향을 바꿀 때마다 그림을 프레임 단위로 다시 설계할 필요는 없다. 되감기 버튼이 자연스럽게 보이는 이유는 모델 안에 “지금”의 위치가 정해져 있기 때문이다.

2023년 6월 5일 초안은 조작판을 더 자세히 적었다. 현재 시간과 시작 시간을 설정하고, 재생·일시정지·완료·취소를 처리하며, 속도와 역방향을 바꾼다. 준비와 완료에 관련된 상태도 정의한다. 정지 명령은 실제 시작 전이나 마지막 프레임 직전에 도착할 수 있다. 브라우저는 그때 어떤 상태로 옮겨 갈지, 어떤 그림을 보여 줄지 정해야 한다. 독자에게는 버튼 하나지만 시계는 대충 짐작하고 움직일 수 없다.

W3C 발행 연혁은 2013년, 2014년, 2018년, 2023년의 초안을 확인해 준다. 이 역사에서 중요한 것은 CSS와 SVG의 움직임을 하나의 시간 개념으로 이야기하고 스크립트로 재생을 다루게 된 과정이다. 스크롤 위치를 새로운 진행 원천으로 삼는 뒤의 작업은 다른 질문을 다룬다. 편집자는 어떤 동작이 설명에 필요한지, 독자에게 어느 순간 멈출 권한을 줄지 결정한다. 브라우저가 시계를 맡고 무대 뒤 초시계 세 개는 서랍으로 들어간다.