스크롤 애니메이션 4형제, 헷갈림 없이 구분하기
최근 CSS 스크롤 관련 기능이 한꺼번에 쏟아지면서 이름이 비슷한 네 가지 기술이 자주 혼동된다. CSS-Tricks의 제프 그레이엄은 스크롤 구동(scroll-driven), 스크롤 트리거(scroll-triggered), 스크롤 상태(scroll-state) 쿼리, 그리고 뷰 트랜지션을 한자리에 놓고 차이를 정리했다. 핵심은 ‘스크롤 진행도와 애니메이션이 직접 연결되는가’라는 한 가지 질문이다. 이름만 보고 고르면 의도와 다른 동작이 나오기 쉽다.
"It helps me to spell things out like this."Geoff Graham, CSS-Tricks
무슨 일인가
스크롤 구동 애니메이션은 스크롤 위치와 진행도가 1:1로 묶여, 위로 올리면 거꾸로 재생되고 멈추면 곧바로 멈춘다. 스크롤 트리거는 요소가 특정 임계선을 넘는 순간 발동해 스크롤과 무관하게 끝까지 한 번 재생된다. 스크롤 상태 쿼리는 컨테이너가 특정 스크롤 조건에 도달했을 때 스타일을 바꾸는 중간 형태다. 뷰 트랜지션은 같은 문서 안의 상태 변화와 문서 간 페이지 전환을 모두 다루는 CSS+JS 통합 API다.
여러 시각
같은 흐름을 브라우저·표준 관점에서 보면 그림이 더 선명해진다.
- CSS-Tricks(Interop 2026) — 세 주요 엔진이 스크롤 구동 애니메이션·뷰 트랜지션·앵커 포지셔닝을 함께 맞추기로 하면서, ‘지원 여부 단서’를 달지 않고 쓸 수 있는 시대가 가까워졌다고 본다.
- web.dev — 2026년 들어 컨테이너 쿼리와 스크롤 상태 관련 기능이 차례로 Baseline에 올라, 실험 기능이 아니라 기본 도구로 다룰 수 있음을 데이터로 보여준다.
왜 중요한가
네 기술은 목적이 달라 잘못 고르면 성능·접근성에서 비용을 치른다. 스크롤 진행도에 묶어야 할 효과를 트리거로 만들면 사용자가 위로 스크롤할 때 어색하게 멈추고, 반대로 한 번만 재생돼야 할 강조를 스크롤 구동으로 만들면 계속 깜빡인다. 또한 이들 대부분은 메인 스레드를 벗어나 처리되므로, 무거운 자바스크립트 스크롤 핸들러를 걷어내고 성능을 회복할 기회이기도 하다.
실무 적용
- 진행 표시줄·패럴럭스처럼 스크롤과 동기화돼야 하는 효과는 scroll-driven(animation-timeline)으로 만든다.
- 화면 진입 시 한 번 등장시키는 강조는 scroll-triggered로 분리해 되돌이 재생을 막는다.
- 페이지 이동의 연결감이 필요하면 view-transition을 점진적 향상으로 적용해 미지원 브라우저에서도 깨지지 않게 한다.
Kenny의 관점
프론트엔드에서 이 네 가지를 한 단어 ‘스크롤 애니메이션’으로 뭉뚱그리는 순간 디자인 QA가 어려워진다. 나는 기획 단계에서 ‘스크롤을 멈췄을 때 이 모션은 멈춰야 하나, 끝나야 하나’를 먼저 묻는다. 그 한 줄 정의가 곧 기술 선택이고, AX 관점에선 멀미·접근성(prefers-reduced-motion) 대응 범위까지 결정한다. 도구가 표준으로 안착한 지금은 ‘되는지’보다 ‘왜 이걸 쓰는지’를 설명할 수 있어야 한다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗