본문으로 건너뛰기

CSS 애니메이션 vs JavaScript 애니메이션

작성일 : 2025.01.13

개요​

웹 애니메이션을 구현하는 방법은 크게 CSS와 JavaScript 두 가지가 있습니다. 각각의 특징과 장단점을 자세히 살펴보면서, 어떤 상황에서 어떤 방식을 선택해야 할지 알아보겠습니다.

CSS 애니메이션의 특징​

1. 성능​

CSS 애니메이션은 브라우저의 메인 스레드가 아닌 컴포지터 스레드에서 실행됩니다. 이는 다음과 같은 이점을 제공합니다:

  • 메인 스레드의 JavaScript 실행이나 레이아웃 계산에 영향을 받지 않음
  • GPU 가속을 자동으로 활용할 수 있어 하드웨어 가속의 이점을 얻기 쉬움
  • 부드러운 60fps 애니메이션 구현이 용이함

2. 구현 방식​

CSS 애니메이션은 두 가지 방식으로 구현할 수 있습니다:

/* 1. @keyframes를 사용한 애니메이션 */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.sliding-element {
  animation: slide 2s ease-in-out infinite;
}

/* 2. transition을 사용한 간단한 상태 변화 */
.button {
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

3. CSS 애니메이션의 장점​

  • 간단한 구현: 복잡한 JavaScript 코드 없이도 구현 가능
  • 선언적 정의: 애니메이션의 시작과 끝 상태를 명확하게 정의
  • 성능 최적화: 브라우저가 자동으로 최적화를 수행
  • 부드러운 실행: 60fps를 쉽게 달성할 수 있음

4. CSS 애니메이션의 단점​

  • 복잡한 제어의 한계: 동적인 변화나 조건부 실행이 제한적
  • 세밀한 제어의 어려움: 중간에 애니메이션을 멈추거나 변경하기 어려움
  • 지원하는 속성의 제한: 모든 CSS 속성이 애니메이션 가능한 것은 아님

JavaScript 애니메이션의 특징​

1. 구현 방식​

JavaScript 애니메이션은 여러 가지 방식으로 구현할 수 있습니다:

// 1. requestAnimationFrame 사용
function animate(element) {
  let start = null;
  
  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    
    element.style.transform = `translateX(${Math.min(progress/10, 200)}px)`;
    
    if (progress < 2000) {
      requestAnimationFrame(step);
    }
  }
  
  requestAnimationFrame(step);
}

// 2. Web Animation API 사용
element.animate([
  { transform: 'translateX(0px)' },
  { transform: 'translateX(100px)' }
], {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: Infinity
});

2. JavaScript 애니메이션의 장점​

  • 세밀한 제어: 프레임별로 정확한 제어가 가능
  • 복잡한 애니메이션 구현: 수학적 계산이나 물리 기반 애니메이션 구현 가능
  • 동적인 변경: 사용자 입력이나 조건에 따른 실시간 변경 용이
  • 중간 제어: 일시 정지, 재생, 중단, 되감기 등 다양한 제어 가능

3. JavaScript 애니메이션의 단점​

  • 성능 부담: 메인 스레드에서 실행되어 다른 JavaScript 작업에 영향을 줄 수 있음
  • 구현 복잡도: 상대적으로 더 많은 코드가 필요
  • 최적화 필요: 성능 최적화를 위한 추가적인 작업 필요

어떤 상황에서 무엇을 선택해야 할까?​

CSS 애니메이션이 적합한 경우:​

  • 간단한 상태 전환 (호버, 포커스 등)
  • 시작과 끝이 명확한 애니메이션
  • 성능이 중요한 모바일 환경
  • 자동으로 실행되는 반복 애니메이션
/* 예: 버튼 호버 효과 */
.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

JavaScript 애니메이션이 적합한 경우:​

  • 복잡한 게임이나 인터랙티브 애니메이션
  • 사용자 입력에 따른 동적 애니메이션
  • 물리 기반 모션이 필요한 경우
  • 애니메이션 중간 제어가 필요한 경우
// 예: 물리 기반 바운스 효과
function bounce(element) {
  let velocity = 0;
  let position = 0;
  const gravity = 0.8;
  const damping = 0.9;
  
  function animate() {
    velocity += gravity;
    position += velocity;
    
    if (position > 500) {
      position = 500;
      velocity = -velocity * damping;
    }
    
    element.style.transform = `translateY(${position}px)`;
    requestAnimationFrame(animate);
  }
  
  animate();
}

결론​

애니메이션 구현 방식의 선택은 프로젝트의 요구사항과 상황에 따라 달라져야 합니다. 간단한 전환 효과는 CSS로, 복잡한 인터랙션은 JavaScript로 구현하는 것이 일반적인 접근 방식입니다. 때로는 두 방식을 조합하여 사용하는 것도 좋은 선택이 될 수 있습니다.

성능과 사용자 경험을 최우선으로 고려하면서, 각 기술의 장단점을 잘 파악하고 적절히 활용하는 것이 중요합니다.