CSS 애니메이션과 자바스크립트 애니메이션은 어떤 기준으로 선택하나요?

이렇게 답해 보세요 (핵심 답변)

호버 효과나 패널 열림처럼 시작과 끝 상태가 명확한 전환이나 단순 반복은 선언적인 CSS transition·animation으로 작성하는 편이 간결합니다. 반면 마우스 드래그 추적, 물리 탄성 계산이나 실행 중 동적 취소·타임라인 제어가 필요할 때는 자바스크립트나 Web Animations API가 적합합니다. 성능은 언어 자체보다 매 프레임 어떤 속성을 변경하는지에 좌우되므로 transform과 opacity 위주로 설계하고 실제 프레임을 측정해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. width, height, top, left를 매 프레임 바꾸면 레이아웃(Reflow)과 페인트가 반복되지만, transform과 opacity 중심의 변화는 합성(Composite) 단계에서 효율적으로 처리되기 유리합니다.
2. 어지러움을 느끼는 사용자를 위해 prefers-reduced-motion 미디어 쿼리를 확인하여 과도한 이동 효과를 줄이거나 즉시 전환하는 정책을 함께 넣어야 합니다.

면접에서 자주 하는 실수

CSS로 작성한 애니메이션이면 어떤 속성을 바꾸든 무조건 GPU에서 실행되어 항상 빠르다고 단정하면 안 됩니다.