애니메이션의 이해

웹 애니메이션을 제작할 때 여러 가지 방법이 있다. CSS 애니메이션 교육에 앞서 실무에서 자주 사용하는 웹 애니메이션 종류에 대해 알아보고 장단점을 비교해보겠다.

 

---

 

• GIF
  • 최대 256 색상을 지원하며 비 손실 압축 포맷으로 구현이 간편함
  • 압축률이 낮아 이미지 용량이 크고, 브라우저 성능(fps) 저하 발생

 

• MP4
  • 손실 압축 포맷으로 용량이 적고 스트리밍 재생이 가능함
  • 알파 채널이 지원되지 않아 배경색을 포함한 콘텐츠를 제작해야 함

 

• CSS & JS
  • 인터렉션 UI 애니메이션에 적합하고, 부드러운 애니메이션 제공
  • 복잡하고 현란한 애니메이션 제작 어려움

 

• LOTTIE
  • SVG 벡터 기반으로 선명하고 현란한 애니메이션 제작이 가능
  • After Effects 도구 사용으로 진입 장벽이 높음

 

---

 

애니메이션 장단점 비교

 

 

---

 

 

 

[ 출처 ]

BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/60529