스크롤이 타임라인이 되는 날
JavaScript 없이 구현하는 스크롤 애니메이션, 그 이면의 설계 전환
왜 이 한 편인가
스크롤 애니메이션 기술 소개를 툴 설명이 아니라 디자인-엔지니어링 역할 경계 재조정의 맥락에서 잡았다. CSS가 JavaScript 영역을 반복적으로 흡수해온 10년 패턴 위에 이번 API를 올려놓으면, 단순한 기능 업데이트가 "구현 결정권이 어느 레이어에 있는가"라는 구조적 질문이 된다. 국내 매체가 Animation Timeline API를 접근성 의무와 묶어 다룬 사례가 없어, 이 각도를 선택했다.
현상
웹 애니메이션의 무게중심이 바뀌고 있다. CSS의 Animation Timeline API가 브라우저에 안착하면서, 스크롤 위치를 직접 애니메이션 타임라인으로 연결하는 것이 순수 CSS만으로 가능해졌다(Josh W. Comeau). JavaScript로 스크롤 이벤트를 감지하고, 계산하고, 클래스를 조작하던 3단계 루틴이 단 하나의 선언으로 압축된다.
해석
이 신호가 흥미로운 이유는 도구의 진화 이상이기 때문이다. 스크롤 기반 인터랙션은 오랫동안 "JavaScript 없이는 안 된다"는 암묵적 전제 위에 쌓인 구조였다. 그 전제가 무너질 때, 디자이너와 엔지니어의 경계선도 함께 재조정된다. 선언적 CSS만으로 모션을 설계할 수 있다면, 구현 결정권이 코드 레이어에서 디자인 레이어로 올라온다. 이 흐름은 Figma의 CSS 변수 직접 내보내기, 브라우저 네이티브 color-scheme 지원 확대와 같은 방향의 벡터다. 하나씩 떼어보면 기술 업데이트지만, 묶이면 디자인 결정이 최대한 늦게 코드로 내려오는 구조, 즉 "디자인 레이어의 표현력 확장"이라는 패턴이 된다. 이면에는 트레이드오프가 있다. 브라우저 지원 범위와 접근성 처리(감소된 모션 선호 사용자)는 순수 CSS 구현에서도 여전히 개발자의 몫이다.