T
css animations scroll-driven keyframes web-design

현대 CSS 애니메이션: 스크롤 기반, 스프링 물리 및 그 너머

웹 애니메이션을 다음 단계로 끌어올리세요. CSS 스크롤 기반 애니메이션, 스프링 물리, 그리고 고급 3차 베지어 타이밍 함수에 대해 알아봅니다.

2026-04-18

현대 CSS 애니메이션: 스크롤 기반, 스프링 물리 및 그 너머

애니메이션은 이제 단순히 '있으면 좋은' 장식이 아닙니다. 사용자에게 피드백을 제공하고, 시선을 유도하며, 기억에 남는 브랜드 경험을 만드는 필수 도구입니다.

현대 CSS는 이전에 복잡한 JavaScript 스크롤 리스너나 무거운 애니메이션 라이브러리가 필요했던 요소 애니메이션에 혁신적인 방법을 도입했습니다.

1. 스크롤 기반 애니메이션: JS 없이 구현하기

CSS 애니메이션에서 가장 흥미로운 추가 기능은 스크롤 기반 애니메이션(Scroll-Driven Animation) 사양입니다. 이를 통해 애니메이션의 진행률을 컨테이너의 스크롤 위치와 직접 연결할 수 있습니다.

작동 원리:

이전에는 window.onscroll과 requestAnimationFrame이 필요했습니다. 이제는 scroll-timeline만 있으면 됩니다.

@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-indicator {
  animation: progress-bar linear;
  animation-timeline: scroll(); /* 페이지 스크롤에 연결! */
}

주요 활용 사례:

  • 읽기 진행 바: 사용자가 페이지를 얼마나 읽었는지 표시합니다.
  • 패럴랙스 효과: 스크롤에 따라 배경 요소를 서로 다른 속도로 이동시킵니다.
  • 스크롤 시 나타나기: view-timeline을 사용하여 요소가 뷰포트에 들어올 때 페이드 인 효과를 줍니다.

2. 고급 키프레임 및 합성

현대 CSS는 애니메이션이 결합되는 방식을 더욱 세밀하게 제어할 수 있게 해줍니다.

  • animation-composition: 동일한 속성에 영향을 미치는 여러 애니메이션이 혼합되는 방식(replace, add, 또는 accumulate)을 정의합니다.
  • animation-range: 뷰포트 내에서 스크롤 기반 애니메이션이 시작되고 끝나는 지점을 정밀하게 조정합니다.
.card {
  animation: fade-in linear;
  animation-timeline: view();
  /* 요소가 화면 중앙 50% 영역에 있을 때만 애니메이션 실행 */
  animation-range: entry 25% exit 75%;
}

3. 선형을 넘어서: 3차 베지어와 스프링 물리

타이밍 함수는 애니메이션의 '느낌'을 정의합니다. ease-in-out이 표준이지만, 수준 높은 디자인에는 커스텀 곡선이 사용됩니다.

3차 베지어 (Cubic-Bezier)

3차 베지어 함수를 사용하면 '오버슈트(overshoot)'나 '예상(anticipation)' 효과를 만들 수 있습니다.

.button:active {
  /* 약간의 바운스 효과 */
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

CSS 스프링 애니메이션 (실험적)

아직 모든 브라우저에서 완전히 네이티브로 지원되지는 않지만, 스프링 물리(Spring Physics)(질량, 강성, 감쇠) 개념이 CSS에 도입되고 있습니다. 이는 기존의 시간 기반 타이밍보다 훨씬 자연스럽고 유기적인 움직임을 만들어냅니다.

4. 성능: 60FPS 규칙

부드러운 애니메이션의 핵심은 '메인 스레드'를 점유하지 않는 것입니다. 현대 CSS 애니메이션은 고도로 최적화되어 있지만, 올바른 속성을 애니메이션화할 때만 그 성능이 발휘됩니다.

애니메이션화하기 안전한 속성:

  • transform (scale, rotate, translate)
  • opacity
  • filter (일부 브라우저)

피해야 할 속성 (레이아웃 시프트를 유발함):

  • width / height
  • margin / padding
  • top / left / bottom / right

5. 뷰 전환: DOM 변경 애니메이션화

뷰 전환(View Transition) API와 결합하여, CSS는 이제 두 상태 사이에서 요소가 '변형(morphing)'되는 과정을 처리하여 앱과 같은 매끄러운 경험을 제공할 수 있습니다.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

FAQ: 자주 묻는 질문

Q: 스크롤 기반 애니메이션이 지원되나요?

A: 2024년 현재 Chrome 및 Edge에서 지원됩니다. Firefox 및 Safari는 개발 중입니다. 현재는 '점진적 향상(progressive enhancement)' 기법으로 사용할 수 있습니다. 즉, 지원되지 않아도 사이트는 작동하되 지원되는 브라우저에서는 더 멋지게 보이도록 하는 방식입니다.

Q: 애니메이션이 왜 끊기나요?

A: transform과 opacity만 사용하고 있는지 확인하세요. 또한 너무 많은 backdrop-filter 효과가 활성화되어 있지 않은지 확인해 보세요. 성능에 큰 부담을 줄 수 있습니다.

Q: @scroll-timeline을 써도 되나요?

A: 예전의 @scroll-timeline 구문은 더 간결한 animation-timeline: scroll() 및 view() 함수로 대체되었습니다. 미래를 대비해 최신 구문을 사용하는 것을 권장합니다.

사이트에 생동감을 불어넣으세요

애니메이션은 현대적인 사용자 인터페이스의 '영혼'입니다. 스크롤 기반 타임라인과 고급 타이밍 함수를 마스터함으로써 사용자가 계속 머물고 싶어 하는 전문적이고 매력적인 경험을 만들 수 있습니다.

타이밍을 완벽하게 만들고 싶으신가요? 당사의 3차 베지어 생성기(출시 예정)를 사용해 보거나 기존 애니메이션 도구를 활용해 보세요.

블로그로 돌아가기