오늘날의 웹 페이지는 동적인 콘텐츠와 다양한 인터렉션 요소를 포함하고 있으며, 이를 통해 사용자 경험의 중요성도 점차 높아졌다. 이와 같이 사용자 경험을 향상시키기 위한 방법 중에서 css로 페이지 내부의 요소들에 animation속성을 부여하는 방법이 있다. 이번 포스팅에서는 animation속성이 브라우저의 렌더링에 미치는 영향과 이를 최적화하는 방법에 대해서 알아보려고 한다.
브라우저 렌더링 과정
그림과 같이 일련의 과정을 거쳐 웹페이지가 브라우저에서 렌더링 된다.
Process
- parsing
사용자가 웹 페이지에 접근시, 해당 페이지를 렌더링 하기 위하여 서버로부터 자원을 받게 된다. (HTML, CSS, JS file)
각각의 파일들을 parsing하여 DOM과 CSSOM이라는 트리구조를 가지는 객체 모델을 생성한다. - render tree
생성된 DOM과 CSSOM을 결합하여 render tree를 생성한다. - layout(reflow)
render tree를 기반으로 화면을 구성하는 요소의 위치와 크기를 계산하고, 이를 배치하는 작업을 한다. - paint(repaint)
layout단계에서 계산된 값을 토대로 layer를 여러개로 나누어 실제 픽셀 단위로 그려낸다. - composition
paint 단계에서 그려진 layer를 합성하는 과정이 진행되며, 이후 사용자는 화면에 렌더링된 웹페이지를 볼 수 있다.
css animation
MDN 공식문서에 따르면, animation 속성은 다수의 스타일을 전환하는 애니메이션을 적용할 때, 사용된다고 한다. 따라서, 요소의 스타일이 변경되기 때문에 위의 과정에서 layout단계가 발생하며, 이를 reflow라고 부른다. 따라서, 레이아웃의 재배치가 발생했기 때문에, 자연스럽게 paint가 다시 진행되는 repaint과정이 발생한다.
css animation 최적화
css animation을 최적화 하는 방법으로는 여러가지 방법이 있으나, 이번 포스팅에서는 그 중에서 will-change 에 대하여 알아보려고 한다.
will-change
will-change란?
will-change 속성은 향후에 변경 가능성이 있는 요소의 속성을 브라우저에 알려주는 css 속성이다. 이를 통하여 브라우저는 요소의 렌더링을 미리 최적화하여 더 나은 성능을 얻을 수 있다.
왜 사용하는가?
앞서 언급했듯이 더 나은 성능을 얻기 위해 사용되며, 애니메이션의 성능을 향상시킬 수 있고, reflow와 repaint를 방지할 수 있다.
will-change value
will-change: auto; // default
will-change: scroll-position;
will-change: contents;
will-change: transform; // <custom-ident>
will-change: opacity; // <custom-ident>
will-change: left, top; // <animatable-features>css 파일에서 적용하려는 요소에 위의 구문을 사용하여 최적화를 할 수 있다.
- auto
브라우저에 표준 최적화를 적용해야 함을 알려주는 용도로, default값이다. - scroll-position
스크롤의 위치 변화가 일어나기 전에는 콘텐츠가 보여지지 않아야 하는 경우를 기대하는 경우에 사용한다. - contents
요소의 내용이 변경되기 때문에, 브라우저가 해당 요소의 콘텐츠를 캐시하지 말라는 의미로 사용된다. <custom ident>
transform, opacity, background 등을 사용할 수 있으며, 해당 속성과 관련된 변화를 기대하는 경우에 사용한다.<animatable-features>
css에 animation효과를 주기위해 사용하는 값들로 위의 예시 이외에도 다양한 값들이 존재한다.
사용법
예를 들어 버튼 태그에 마우스를 올렸을 때, 색상이 blue로 변하는 경우라면 다음과 같이 작성할 수 있다.
// css
button:hover {
will-change: color;
color: blue;
}이외에도 다양하게 사용할 수 있다.
아래의 몇가지 예시를 더 보자.
#animated-button {
will-change: transform, opacity
}
#animated-button.animation {
transition: transform 0.5s, opacity 0.5s;
transform: scale(2);
opacity: 0;
}버튼을 클릭 시, transform과 opacity와 관련된 변화가 일어날 수 있음을 브라우저에 알리고, 해당 변화를 설정하여 사용할 수 있다.
#changing-button {
will-change: width, height, transform;
}
#changing-button.change {
width: 200px;
height: 200px;
transform: translateX(100px);
}여기서도, will-change 속성을 사용하여 브라우저에 너비, 높이 및 transform 속성이 변경될 수 있음을 알리고, 그 아래에 변화되는 내용을 작성하여 사용할 수 있다.
사용하지 않아야 하는 경우
- 작은 요소에는 사용을 지양하자.
작은 요소의 렌더링을 최적화하여 얻을 수 있는 성능 향상은 미미하기 때문에, 오히려 모든 요소에 will-change 속성을 사용 시 오히려 성능 저하가 야기된다. - non-animatable 속성.
css의 일부 속성에는 animation효과를 줄 수 없는 경우가 있다. 때문에, 아무런 효과도 일어나지 않으며, 오히려 부정적인 영향을 미칠 수 있다.(animation효과를 적용할 수 있는 속성은 이곳을 참고하자.) - 목적하는 브라우저를 참고하여 사용.
will-change 속성은 비교적 새로운 CSS 속성이기 때문에, caniuse에서 지원되는 브라우저를 확인 후에 사용해야 한다.
