Published on

CSS 애니메이션과 JS 애니메이션 비교

Authors
  • avatar
    Name
    Inhwan Cho
    Twitter

웹 개발 과정에서 애니메이션은 사용자 경험을 향상시키는 중요한 요소 중 하나입니다.

이 글에서는 CSS 애니메이션과 JavaScript(JS) 애니메이션의 주요 차이점을 설명하고, 각각의 사용 사례를 자세히 살펴볼 것입니다.

CSS 애니메이션

CSS 애니메이션은 CSS 코드를 사용하여 HTML 요소에 애니메이션 효과를 적용하는 방법입니다.

@keyframes 규칙을 사용하여 애니메이션의 중간 상태를 정의하고, 애니메이션 속성을 사용하여 해당 애니메이션을 요소에 적용합니다.

예시:

styles.css
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

위 예시에서는 <div> 요소의 배경색이 빨간색에서 노란색으로 2초 동안 변하는 애니메이션을 만들었습니다.

장점

  • 성능: 대부분의 최신 브라우저는 CSS 애니메이션을 하드웨어 가속을 통해 처리하므로, JS 애니메이션에 비해 더 나은 성능을 제공할 수 있습니다.
  • 간결성: 복잡한 JavaScript 코드 없이도 몇 줄의 CSS만으로 애니메이션을 구현할 수 있어 코드가 간결해집니다.
  • 접근성: CSS 애니메이션은 JavaScript가 비활성화되어 있어도 작동하므로 접근성 측면에서 유리합니다.

단점

  • 유연성 부족: 사용자의 행동에 따라서 실시간으로 애니메이션을 변경하는 것이 JS 애니메이션에 비해 제한적입니다.
  • 제어: 애니메이션이 시작되고 끝날 때 이벤트 핸들러를 추가하는 것이 JS보다 더 복잡합니다.

JS 애니메이션

JavaScript 애니메이션은 웹 페이지에서 복잡한 애니메이션과 상호 작용을 구현할 수 있게 해주는 기술입니다. JS 애니메이션 라이브러리를 사용하거나 requestAnimationFrame 같은 웹 API를 사용하여 구현할 수 있습니다.

예시:

html
<!DOCTYPE html>
<html>
<head>
  <title>JS Animation Example</title>
</head>
<body>
  <div id="animateMe">Hello, world!</div>

  <script>
    var elem = document.getElementById("animateMe"); 
    var pos = 0;
    var id = setInterval(frame, 10); // 10 밀리초마다 frame 함수를 호출합니다.
    function frame() {
      if (pos == 350) {
        clearInterval(id);
      } else {
        pos++; 
        elem.style.top = pos + 'px'; 
        elem.style.left = pos + 'px'; 
      }
    }
  </script>
</body>
</html>

위 예시에서는 <div> 요소가 화면을 대각선으로 이동하는 애니메이션을 JavaScript를 사용하여 구현하였습니다.

장점

  • 유연성: JavaScript는 사용자의 상호 작용에 따라 실시간으로 애니메이션을 변경하고, 복잡한 로직을 통해 예측할 수 없는 애니메이션을 만들 수 있습니다.
  • 제어: 애니메이션의 시작, 중간, 종료 시점에 이벤트 핸들러를 쉽게 추가할 수 있어 애니메이션의 제어가 용이합니다.

단점

  • 성능: CSS 애니메이션에 비해 성능이 떨어질 수 있습니다. 특히, 많은 DOM 조작이 필요한 경우 브라우저의 리플로우와 리페인트가 빈번하게 발생합니다.
  • 복잡성: 복잡한 애니메이션을 구현하기 위해서는 복잡한 JavaScript 코드가 필요할 수 있습니다.

비교

  • JS애니메이션은 보통 GSAP이나 Framer-motion같은 라이브러리를 사용하여 구현하는게 일반적입니다.
기준CSS 애니메이션JS 애니메이션
성능높음보통 또는 낮음
제어제한적용이
유연성낮음높음
코드의 복잡성낮음높음
접근성좋음보통

결론적으로, 간단하고 정적인 애니메이션은 CSS를 사용하여 구현하는 것이 좋으며, 복잡하거나 상호작용이 필요한 동적인 애니메이션의 경우 JavaScript를 사용하는 것이 더 적합할 수 있습니다.

각 프로젝트의 요구 사항과 목표에 따라 적절한 기술을 선택하는 것이 중요합니다.

Discuss on Twitter • View on GitHub