정적 마케팅 페이지와 문서 사이트는 여전히 패럴랙스, 읽기 진행 표시줄, 섹션 등장 애니메이션에 scroll 이벤트와 IntersectionObserver를 자주 씁니다. CSS 스크롤 기반 애니메이션(scroll-timeline, animation-timeline, view() 뷰 타임라인)은 키프레임 진행을 스크롤 위치나 가시 비율에 직접 연결해 번들 크기와 메인 스레드 부담을 줄입니다. MPA·정적 생성 출력처럼 런타임 번들을 늘리고 싶지 않은 팀에게 유리하며, 본문은 Safari/WebKit 실제 기기 차이에 초점을 맞춥니다. 전체 페이지 전환까지 다루려면 View Transitions API와 정적 MPA를, 채널별 재현 차이는 Safari Technology Preview와 안정판 비교를 함께 보세요.
정적 사이트에 타임라인이 필요한 이유
명령형 스크롤 코드는 레이아웃 값을 읽을 때 동기 레이아웃을 유발하기 쉽고, 모바일 Safari에서는 입력 지연과 맞물려 끊김이 두드러집니다. 선언형 CSS로 옮기면 조건이 맞을 때 컴포지터가 애니메이션을 진행해 체감이 안정됩니다. 정적 HTML 팀에는 클라이언트 JS를 늘리지 않고도 마케팅 요구에 대응하기 쉬운 점이 큽니다.
2026년 초 공개 텔레메트리에 따르면 scroll-timeline 계열을 완전히 만족하지 못하는 데스크톱 세션이 대략 5~8% 남습니다. 마케팅은 모션을, 엔지니어는 점진 강화를 원하므로 @supports와 정적 폴백으로 중재하세요.
scroll-timeline과 뷰
스크롤 타임라인은 스크롤 컨테이너 이동 거리에, 뷰 타임라인은 요소가 스크롤포트에서 얼마나 보이는지에 동기화됩니다. 후자는 섹션마다 옵저버를 붙이던 패턴을 단순화합니다. animation-range로 어떤 스크롤 구간이 0~100% 키프레임에 해당하는지 자르면 예전 scrollY 비율 계산을 브라우저에 맡길 수 있습니다.
접근성에서는 prefers-reduced-motion: reduce를 반드시 처리하고, 동작을 줄인 사용자에게 읽을 수 없는 반투명 상태를 남기지 마세요.
최소 코드 예시
.reveal {
animation-name: fade-slide;
animation-duration: 1s;
animation-timing-function: linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes fade-slide {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}같은 클래스를 여러 섹션이 써도 요소마다 뷰 인스턴스가 분리되어 데이터 속성 난립을 줄입니다. 전체 문서 진행 바는 루트 스크롤에 타임라인을 묶고 범위를 문서 전체로 늘리면 됩니다.
2026 브라우저 관점
| 엔진 | 스크롤 연동 | 정적 QA 메모 |
|---|---|---|
| Chromium | 강함 | 타임라인 스크럽 가능. |
| Firefox | 지원(버전 확인) | view 범위를 스펙 예제와 대조. |
| Safari 안정판 | 최신 macOS에서 사용 | 마이너마다 스크롤 동작 변화. |
| 구형 모바일 WebKit | 부분·미지원 | @supports와 reduced-motion 필수. |
초안 단계 별칭이 남기 쉬우니 빌드 산출물에 실제로 들어가는 속성 목록을 내부 위키에 한곳으로 모으세요.
Safari 체크리스트와 클라우드 Mac
Linux CI는 고무줄 끝단에서의 합성 스케줄이나 시스템 서체 서브픽셀을 완전히 재현하지 못합니다. 주당 30~45분, Apple 실리콘 실기기에서 안정판과 STP를 병행하세요. PR에 Safari 버전을 남기고, 100/125/150% 확대, 중첩 overflow:auto, 인쇄 스타일 잔여 투명도를 확인합니다.
조달이 늦으면 Apple Silicon Mac mini를 클라우드로 단기 임대해 SSH 배포와 VNC Safari 조작을 병행하며 하루 약 $16.9 수준을 가정할 수 있습니다. 실험 플래그 전에 디스크 스냅샷을 두면 설정 손상에도 롤백이 빠릅니다.
스테이징의 Content-Security-Policy와 폰트 호스트를 프로덕션과 맞추세요. 작은 줄 높이 차이도 스크롤 연출을 ‘버벅임’으로 느끼게 하며 원인은 늦게 도착한 웹폰트일 수 있습니다.
스크롤 타임라인을 건드리는 PR에는 Chromium과 Safari 30~60초 화면 녹화를 첨부하고 빌드 도구 버전·압축 CSS 해시를 본문에 적어 지원팀이 티켓을 빠르게 분류하도록 하세요.
position: sticky 헤더와 뷰 타임라인을 함께 쓸 때는 Safari에서 쌓임 맥락과 오버플로 클리핑 순서가 Chromium과 달라질 수 있으니 최소 재현 페이지로 QA에 넘기세요. 스크롤이 아니라 z-index 상호작용으로 끊김이 보이는 경우가 흔히 있습니다.
FAQ
CSS 스크롤 기반 애니메이션이 JavaScript 스크롤 리스너를 모두 대체하나요?
시각 효과의 상당 부분은 대체할 수 있지만 분석, 복잡한 제스처, API와 상태 동기화는 여전히 JavaScript가 필요합니다. CSS는 표현, JS는 동작과 데이터로 역할을 나누세요.
2026년 Safari의 scroll-timeline 지원에서 무엇을 주의해야 하나요?
caniuse, WebKit 릴리스 노트, 보유 중인 STP/안정판으로 마이너마다 재확인하세요. 구형 iOS WebKit은 미지원이 남아 @supports 점진 강화가 필요합니다.
물리 Mac 없이 스크롤 연동 CSS를 정확히 검증할 수 있나요?
자동화 WebKit 스모크는 도움이 되지만 고무줄 스크롤·글리프 래스터·컴포지터 스케줄은 실제 기기와 다릅니다. 주당 30~45분 실기기 또는 클라우드 Mac mini VNC로 육안 사인오프를 확보하세요.
Mac mini는 WebKit 스크롤 검증용으로 조용한 기준기입니다. MacHTML은 SSH/VNC가 있는 베어메탈 임대로 스프린트마다 환경을 올리고 증적을 남긴 뒤 해제할 수 있습니다.