Canvas VS Web Animation API

Jump to bottom

박수정 edited this page Sep 4, 2024 · 1 revision

Canvas와 Web Animation API는 웹에서 애니메이션을 구현하는 두 가지 주요 방법이다.
각각의 고유한 특징과 장단점을 알아보았다.

Canvas

<canvas>는 html5 요소로 픽셀 기반의 드로잉 보드처럼 작동.
JavaScript로 그래픽을 그리는 방식을 직접 제어할 수 있어 복잡한 애니메이션이나 그래필 연출에 적합하다.

특징

픽셀기반
<canvas>는 픽셀 단위로 그래픽을 렌더링하므로 이미지를 직접 그리거나 변형하는 애니메이션에 적합
저수준 제어
그래픽을 렌더링하고 제어하는 데 있어 매우 세밀한 제어가 가능
고성능
많은 양의 픽셀 데이터를 제어하고 애니메이션을 만들 수 있어 복잡한 게임이나 시각적 효과를 구현하는 데 자주 사용

장점

자유도
모든 것을 직접 그릴 수 있으므로, 굉장히 창의적이고 독특한 애니메이션을 만들 수 있다.
고성능
복잡한 그래픽 연산이 필요한 경우 더 나은 성능을 발휘
다양한 시각적 효과
고급 그래픽 효과를 구현하는 데 유리

단점

높은 복잡성
모든 것을 코드로 직접 그려야 하므로 구현이 복잡
DOM과의 상호작용 제한
<canvas>는 픽셀 기반이므로, DOM 요소와의 상호작용이 제한적
DOM에서 애니메이션을 조작하거나 반응하는 데는 부적합

Web Animation API

브라우저 내장 애니메이션 기능으로, DOM 요소를 직접 제어하여 애니메이션을 만들 수 있다.
CSS 애니메이션을 더 강력하게 사용하고, JavaScript를 통해 동적으로 제어할 수 있다.

특징

DOM 기반
DOM 요소와 관련된 애니메이션에 매우 적합하며, CSS로 애니메이션을 정의한 것과 유사한 방식으로 작동
고수준 제어
CSS로 정의된 애니메이션을 JavaScript로 더 세밀하게 제어할 수 있다
효율적 애니메이션
브라우저 최적화 덕분에 CSS 애니메이션처럼 자연스럽고 효율적인 애니메이션을 구현
타이밍 제어
타이밍 함수, 반복, 키프레임 등을 이용하여 복잡한 애니메이션도 간편하게 설정 가능

장점

쉬운 구현
DOM 요소를 바로 애니메이션할 수 있어 비교적 간단하게 애니메이션을 구현
DOM과의 상호작용
DOM 요소와의 상호작용이 자연스러워 웹 애플리케이션의 인터랙티브한 애니메이션에 적합
브라우저 최적화
브라우저에서 자동으로 애니메이션을 최적화하여 성능을 높임
CSS 애니메이션과의 호환성
CSS로 정의된 애니메이션을 Web Animation API로 쉽게 제어

단점

복잡한 그래픽 작업에 비효율적
복잡한 그래픽 연산이 필요할 경우 <canvas>에 비해 성능이 떨어질 수 있다
픽셀 수준 제어의 한계
픽셀 기반의 세밀한 그래픽 처리가 필요한 경우 적합하지 않다

언제 어떤 것을 사용하는 것이 좋을까?

Canvas
픽셀 기반의 저수준 그래픽이 필요한 작업에 적합
- 복잡한 2D 게임
- 데이터 시각화
Web Animation API
DOM 기반 작업에 적합
- DOM요소를 애니메이션으로 제어하고자 할 때
- CSS 애니메이션의 확장이 필요할 때