📌 css에서 animation 이란?

애니메이션은 웹 페이지에서 요소들의 동작을 부드럽게 만들어주는 기능이다. 애니메이션을 사용하면 웹 페이지를 더 생동감 있게 꾸밀 수 있다. 사용자의 행동에 따라 움직이거나 변하는 등의 간단한 인터렉션을 할 수 있다는 장점이 있지만 너무 많이 사용하거나 복잡한 애니메이션을 적용하면 웹 페이지의 성능을 떨어뜨릴 수 있다는 단점이 있다.

👉 애니메이션 최적화

그래서 웹 페이지에 부담이 없도록 애니메이션 효과를 사용할 수 있게 해주는 애니메이션 최적화 방법에 대하여 알아보겠다.

💡 웹 페이지의 성능이 떨어지는 이유

왜 애니메이션을 사용하면 웹 페이지의 성능이 떨어지는 걸까? 그 이유는 리플로우(reflow)와 리페인트(repaint)가 발생하기 때문이다.

리플로우(reflow)란, 브라우저가 웹 페이지를 렌더링할 html 요소의 위치나 크기 등이 변경될 때 해당 요소와 요소를 포함한 상위, 하위 요소의 레이아웃을 다시 계산하고 렌더링하는 과정을 말하며 리페인트(repaint)는 요소가 변경될 때 css 속성 등을 다시 렌더링하는 과정을 의미한다.

리플로우(reflow)와 리페인트(repaint) 과정은 CPU의 자원을 많이 사용하게 되는데 이 때문에 성능이 저하된다. 그렇기 때문에 최적화를 위해서는 이 둘의 사용을 최소화 시켜야 한다.

리플로우(reflow)와 리페인트(repaint)가 발생하는 속성들

리플로우가 발생하는 속성 ▼
width / height / padding / margin / display / border-width / border / top / position / font-size / float / text-align / overflow-y / font-weight / overflow / left / font-family / line-height / vertical-align / right / clear / white-space / bottom / min-height

리페인트가 발생하는 속성 ▼
color border-style / visibility / background / text-decoration / background-image / background-position / background-repeat / outline-color / outline / outline-style / border-radius / outline-width / box-shadow / background-size

💡 position 사용

위에서 살펴봤듯, 리플로우(reflow)와 리페인트(repaint)를 줄이는 것이 중요한데, 애니메이션을 줄 요소에 css의 position 속성을 사용하면 리플로우(reflow) 과정을 줄일 수 있다. position 속성을 absolute나 fixed로 잡아주는 것이 좋은데, 이때, 다른 요소에 영향을 끼치지 않아서 전체 웹 페이지가 리플로우(reflow)되는 것이 아니라 해당 요소에만 발생하게 되어 결론적으로는 리플로우(reflow)를 줄일 수 있게 된다.

💡 transform에서 3d 사용하기

transform은 부모 요소의 영향을 받지 않으면서 독자적으로 요소의 위치 및 확대, 축소, 회전이 가능한 css 요소이다. 그렇기 때문에 transform을 사용하면 브라우저에서 GPU(그래픽 처리 장치)를 사용하며 이것은 CPU에 부담을 덜어줄 수 있기 때문에 성능을 저하하지 않게 된다. 또 transform 3d의 경우에는 x,y,z 축으로 3차원상에서 이동할 수 있기 때문에 자연스러운 움직임을 구현해낼 수 있다.

💡 will-change 사용하기

will-change는 css의 속성이다. 이름에서 예측할 수 있듯이 미래에 값에 변화가 있을 것을 미리 알려줘서 최적화할 수 있도록 도와준다. 변화가 일어날 요소의 속성으로 넣어주면 된다. 값으로는 변화가 일어날 속성을 넣어줄 수 있다.

div {
	will-change: background-color; 
    // 여러 속성을 쉼표(,)를 사용해서 추가할 수 있다.
}

주의할 점은 모든 요소에 모든 변화 값을 다 will-change에 넣는 것도 문제가 될 수 있다. 만약 최적화할 요소와 속성이 너무 많다면 브라우저는 최적화에 과하게 시간을 투자할 것이고 결국은 성능이 저하될 것이다.

📌 마치며

오늘은 애니메이션에 대해 글을 작성했는데, 애니메이션은 사용한 경험이 적어서 오늘 찾아보며 새롭게 알게 된 사실이 많았다. css 속성만으로도 성능이 저하될 수 있다는 건 생각을 안 하고 있었기 때문에 앞으로 css를 사용할 때도 코드 하나하나를 허투루 쓰지 않아야겠다는 생각을 많이 했다.

참고 사이트
https://wit.nts-corp.com/2017/06/05/4571
https://coding-farmer.tistory.com/7