CSS

애니메이션의 실행 비용과 사용자 선호

CSS인지 자바스크립트인지보다 매 프레임 어떤 속성을 변경하는지와 사용자의 움직임 감소 선호를 반영했는지가 더 중요합니다.

이럴 때 필요해요

화려한 시각 효과가 화면 끊김(Jank)이나 입력 지연을 유발하지 않고, 어지러움을 느끼는 사용자의 접근성도 해치지 않게 하기 위해 필요합니다.

어떻게 동작하나요?

사이드바가 열리거나 버튼 색이 서서히 바뀌는 단순 상태 전환은 CSS transition과 @keyframes로 선언하는 것이 가장 간결합니다. 반면 마우스 드래그 속도에 맞춰 요소가 따라오거나 실행 도중 방향을 매끄럽게 꺾어야 하는 복잡한 상호작용은 자바스크립트(requestAnimationFrame이나 Web Animations API)로 제어하는 편이 유리합니다.

애니메이션이 끊기지 않고 부드럽게 보이려면 브라우저 렌더링 파이프라인에서 어떤 단계가 다시 실행되는지 살펴야 합니다. 매 프레임 width, height, top, left를 바꾸면 주변 요소들의 위치까지 다시 계산하는 레이아웃(Layout)과 페인트(Paint)가 반복되어 메인 스레드 부담이 커집니다. 반면 transform(이동·크기·회전)과 opacity(투명도) 중심의 변화는 합성(Composite) 단계에서 처리하기 유리해 훨씬 매끄럽지만, 이 역시 레이어 메모리 비용이 있으므로 개발자 도구 Performance 패널로 실제 프레임을 측정해 보아야 합니다.

또한 모든 사용자에게 움직이는 화면이 편안한 것은 아닙니다. 화면 이동에 어지러움이나 피로를 느끼는 사용자가 운영체제에서 '동작 줄이기'를 켜 두었다면, @media (prefers-reduced-motion: reduce)를 감지해 불필요한 이동 애니메이션을 끄거나 즉시 상태만 바뀌도록 배려해야 합니다. 이때 애니메이션 효과를 끄더라도 패널이 열렸다는 정보나 초점 이동 자체는 그대로 유지되어야 합니다.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.css

.panel { transition: transform 180ms ease; }
.panel.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }

css · 읽기 전용3줄

평소에는 transform을 180ms 동안 부드럽게 전환하되, 사용자가 움직임 감소(prefers-reduced-motion: reduce)를 선호하면 전환 효과만 제거해 즉시 열리게 합니다.

자주 헷갈리는 포인트

CSS로 작성한 애니메이션이라고 해서 어떤 속성을 바꾸든 항상 메인 스레드와 무관하게 돌아간다고 오해하면 안 됩니다.
성능을 높이겠다며 모든 요소에 will-change를 상시로 붙여 두면 오히려 GPU 레이어 메모리를 과도하게 낭비할 수 있습니다.

내 말로 설명해 보기

애니메이션이 버벅거리는 현상을 발견했을 때 브라우저 개발자 도구에서 프레임마다 어떤 작업(Layout, Paint, Composite)이 일어나는지 어떻게 확인할 수 있을까요?

공식 참고 자료

MDN: CSS 애니메이션 ↗

← CSS