"성능을 고려하여 애니메이션 구현하기" 첫 업로드

Author: kimtaejin3

posts/web-request-animate-queue.mdx

@@ -0,0 +1,27 @@
+---
+title: 성능을 고려하여 애니메이션 구현하기
+date: 2025-02-27
+category: "Web"
+description: requestAnimationFrame을 활용한 애니메이션 최적화
+---
+
+> 글 편집 중입니다.
+
+최근에 랜딩 페이지를 만드는 업무를 받았었습니다. 랜딩 페이지에서 흔히 볼 수 있는 애니메이션 중 하나는 슬라이드 애니메이션입니다, 저도 해당 애니메이션을 구현해야 했고, 라이브러리를 사용할지 직접 구현할지 고민을 했습니다.
+저는 라이브러리를 사용하여 구현했다가 바뀐 요구사항으로 인해 직접 구현을 다시 하게 되었습니다. 그 과정에서 브라우저 성능을 고려하여 애니메이션을 구현해 보았습니다.
+
+### 슬라이드 애니메이션
+
+제가 말하는 슬라이드 애니메이션은 아래와 같은 형태의 애니메이션을 말합니다.
+
+![슬라이드 애니메이션](/videos/video01.gif)
+
+목차
+
+scrollLeft로 구현하는 방법 (transform으로 가능한지 확인 필요 -> requestAnimationFrame 필요 없게 되니까 -> 필요없으면 GPU 언급하고 넘어가면 될듯)
+
+reflow와 repaint
+
+requestAnimationFrame
+
+transform으로 구현하는 방법