웹 페이지의 애니메이션을 최적화하는 여러 방안들은 무엇일까?

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

웹 페이지에서 애니메이션이 등장하곤하면 웹 페이지가 버벅이는 현상들이 존재한다. 이는 웹 페이지의 성능이 떨어지기 때문에 발생하는 현상인데, 이 같은 현상이 발생하는 이유는 리플로우(Reflow)와 리페인트(Repaint)가 발생하기 때문이다.

· 리플로우가 뭐예요?
리플로우는 브라우저가 웹 페이지를 렌더링 할 HTML 요소의 위치나 크기 등이 변경될 때 해당 요소와 요소를 포함한 상위 · 하위 요소의 레이아웃을 다시 계산하고 렌더링하는 과정을 말한다.
· 리페인트가 뭐예요?
리페인트는 리플로우 과정이 끝난 후, 요소가 변경될 때 CSS 스타일 속성 등을 다시 렌더링하는 과정을 의미한다.
(재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 backgound-color, visibility, outline 등의 스타일 변경 시, 리플로우 과정이 생략된 리페인트 작업만을 수행한다)

리플로우(Reflow)와 리페인트(Repaint) 과정은 CPU의 자원을 많이 사용하게 되는데 이 때문에 성능이 저하되며, 최적화를 위해서 이 두가지 요소의 사용을 최소화시켜야한다.

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

리플로우(Reflow)가 발생하는 속성들

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

리페인트(Repaint)가 발생하는 속성들

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

웹 페이지 성능 최적화 방법

애니메이션을 다루며 신경 써야 할 CSS 속성 유형

Layout 속성

페이지 요소와 크기 및 배치를 결정한다. 요소의 너비와 높이를 변경하는 애니메이션은 다른 페이지 요소의 배치에 영향을 줄 수 있다. 페이지 레이아웃을 변경하는 애니메이션은 특히 비용이 많이 들기 때문에 피하는 것이 가장 좋다.

Paint 속성

페이지 요소의 모양을 정의한다. 색상과 같은 속성을 변경하려면 다시 칠해야해서 비용이 많이 들 수 있다.

Composite 속성

transform 및 opacity를 포함하는 속성은 최소한의 비용으로 CSS 애니메이션을 만들어준다. transform을 사용하면 페이지 레이아웃에 영향을 주지 않고 scale 하고 rotate 애니메이션을 적용할 수 있다. 가성비 좋은 Composite 속성만 사용하더라도 생각보다 많은 애니메이션을 제공할 수 있다.

최상의 결과를 얻고 싶다면 Composite 속성에서 네가지 정도의 속성만을 사용하도록 제한을 하는 방법도 있다.

· position

· scale

· rotation

· opacity

Composite의 속성을 사용하여 다른 페이지 요소의 위치(Position)에 영향을 미치지 않고, 거의 모든 작업을 할 수 있다. 예를 들어 이미지의 크기를 변경하려면 width 대신 scale을 사용할 수 있다.

position의 fixed · absolute 사용하기

리플로우(Reflow)와 리페인트(Repaint)를 줄이는 것이 중요하기 때문에, 애니메이션을 줄 요소의 css에 position 속성을 사용하면 리플로우(Reflow) 과정을 줄일 수 있다. 이때 단순히 position 값만을 사용하는 것이 아닌 fixed와 absolute 속성을 사용하여 다른 요소에 영향을 끼치지 않게 하여 전체 웹 페이지가 리플로우(Reflow) 되는 것이 아니라, 해당 요소에만 발생하게 되어 결론적으로는 리플로우(Reflow)를 줄일 수 있게 된다.

transform에서 3d 사용하기

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

will-change 사용하기

will-change는 css의 속성 값 중 하나이다. 미래의 값에 변화가 있을 것을 이미 알려줌으로써 애니메이션을 최적화할 수 있도록 도와준다. 변화가 일어날 요소의 속성으로 넣어주면 된다.

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

여기서 주의할 점은 모든 요소에 모든 변화에 대한 값을 입력한다면, 브라우저는 최적화에 과한 시간을 투자하며 또 이 부분에 있어 상당한 성능 저하를 야기할 수 있기 때문에 꼭 필요한 경우에만 사용하는 것을 권장한다.

느릿느릿 개발자