CSS와 JS 애니메이션 성능향상 팁

웹 애플리케이션의 성능과 관련된 포스팅을 지속하다가 이번에는 CSS와 JS의 성능 향상은 어떻게 해야 할지,

 

특히나 렌더링에서 많은 연산을 요구하는 애니메이션에 관해 최적화 방법이 궁금해 조사를 해보았다. 

 

아래는 관련해 좋은 글이 있어 번역해 옮겨본다. 

 

Tips for Improving CSS and JS Animation Performance

 

화려한 애니메이션은 웹사이트를 다른 경쟁사보다 눈에띄게 하는 효과가 있지만, 역으로 최적화되지 않은 애니메이션은 성능 문제로 결과적으로 유저를 이탈시키는 결과를 일으키기도 한다. 만약에 애니메이션이 초당 60 프레인 이하로 렌더링 된다면 방문자는 이를 알아차릴 것이고 사용자는 안좋은 경험을 하게 된다. 이 가이드는 어떻게 CSS와 자바스크립트 애니메이션을 스무스하게 유저에게 보여줄 수 있는지에 대해 설명한다. 

 

CSS animations vs JavaScript animations

 

자바스크립트로 구현된 애니메이션을 종종 명령적(imperative) 애니메이션이라고 부르고 CSS로 구현된 애니메이션을 선언적(declarative) 애니메이션이라고 부른다. CSS 애니메이션은 메인 스레드가 아닌 페인팅과 스타일링을 다루는 브라우저의 컴포지터 스레드에서 다뤄진다. 결과적으로 많은 처리를 담당하고 있는 메인스레드에 영향을 받지 않는다. 당연히, 페인트 혹은 레이아웃 이벤트를 일으키는 애니메이션은 메인스레드에 업무처리를 요구하게 되고 이는 CSS 애니메이션 사용의 이점에 반하는 것이다. 

 

반면에 자바스크립트는 오로지 메인 스레트로만 실행된다. 그럼에도 불구하고, 자바스크립트는 애니메이션을 더욱 자유롭게 컨트롤할 수 있기 때문에 경우에 따라서 자바스크립트를 사용하는 것이 좋다. CSS는 간단한 트랜지션에 사용하고 JavaScript는 바운싱과 같은 고급 이펙트에 사용하는 것을 추천한다. 사용자가 멈추거나 되돌리는 등의 애니메이션도 자바스크립트를 이용해 구현하는 것이 좋다. 자바스크립트는 시차 스크롤링 효과 등 특정한 효과에는 필수적이다. Web Animation API를 이용해 객체 지향 애플리케이션의 복잡한 애니메니션을 만들어 낼 수 있다. CSS 애니메이션을 컨트롤하기 위해 자바스크립트를 사용할 수도 있다. 

 

JavaScript animation tips

 

1. requestAnimationFrame() 사용

브라우저에서 최적의 시간에 애니메이션을 실행시키기 위해 setTimeOut()이나 setInterval()과 같은 메서드를 사용하기 보다 requestAnimationFrame() 매서드를 사용해라. 이 매서드는 사용자의 디바이스에 적절한 프렘임 비율을 선택하기 때문에 모바일 사용자들은 테스크탑 유저들과는 다른 프레임으로 화면을 볼 수 있다. 

 

2. 이벤트와 애니메이션의 분리

스크롤링과 같은 이벤트 핸들링 코드는 애니메이션 코드와 분리되어야 한다. HTML5Rocks에 보면 requestAnimationFrame을 다루는 코드를 이벤트와 어떻게 디커플링하는지에 대한 방법이 깊게 설명되어 있다. 

링크

 

3. Javascript 코드를 간결하게 유지하라

웹페이지에 커다란 자바스크립트 더미를 추가하는 것을 경계해라. 만약에 코드를 다루기 어려워지면 자바스크립트 애니메이션을 다른 스레드에서 실행시키기 위해 web workers를 이용할 수 있다. 

 

4. 제이쿼리를 사용하지 마라

제이쿼리와 같이 오래된 애니메이션 라이브러리를 사용하지 말자. 만약 비슷한 것을 찾고 있다면 Velocity.js가 비슷한 방식으로 일하면서 더욱 빠르고 더욱 많은 기능을 지원한다. 모바일 유저 코드로는 제이쿼리의 $. animate()를 $. velocity()로 바꾸면 끝이다. Web Designer Depot에 가면 다양한 자바스크립트 애니메이션 툴 리스트를 볼 수 있다. 

 

Choosing which CSS properties to animate

연속적인 애니메이션은 엄청난 양의 리소스를 잡아먹는데 특정 CSS 특성들은 다른 것들보다 특히 더 많은 비용을 필요로 한다. 브라우저가 애니메이션을 구현하기 힘든 만큼, 프레임 비율이 느려질 것이다. 따라서 적절한 CSS 특성을 선택하는 것은 페이지 가동성에 엄청난 영향을 미친다. 

 

CSS 특성에는 크게 세 가지 타입이 있다:

• 레이아웃 특성(Layout properties) - 이 특성은 페이지 앨리먼트의 크기와 위치를 결정한다. 앨리먼트의 너비와 높이를 바꾸는 애니매이션은 다른 페이지 앨리먼트의 위치에 영향을 미칠 수 있다. 따라서 layout thrash라고도 불리는 연쇄 작용을 일으키게 된다. 따라서 페이지 레이아웃을 변화시키는 변화는 특히나 비용 소모가 심하다. 따라서 피하는 게 제일 좋다. 
• 페인트 특성(Paint properties) - 이 특성은 페이지 엘리먼트의 외형을 결정한다. 색과 같은 특성의 변화는 리페인팅을 필요로 하고 이는 높은 비용을 요구한다. 즉, 작은 규모의 영역에 리페인트되는 간단한 애니메이션은 전체 성능에 큰 영향을 미치진 않지만, 리페인팅이 필요한 큰 규모의 애니메이션은 지양해야 한다.
• 합성 특성(Composite properties) - transform과 opacity 등을 포함한 이 특성은 가장 적은 코스트로 CSS 애니메이션을 구현할 수 있는 최고의 친구다. 가급적 합성 특성을 이용하도록 시도하라. 약간의 창의적인 생각만으로 이 특성을 이용해 어떤 기능들을 이끌어 낼 수 있는지 알게 된다면 놀랄 것이다. ISL.co에 조악한 레이아웃 애니메이션을 어떻게 자연스러운 합성특성 애니메이션으로 바꾸었는지 설명하는 블로그 포스트가 있다. (옮긴이: 현재는 블로그가 닫혀있다.)

CSS Triggers에는 다양한 브라우저에서 각 CSS 특성들이 어떤 프로세스를 발생시키는 지 간단한 차트로 설명되어 있다. 

이를 통해 애니메이션이 페인팅 혹은 레이아웃 변화를 일으킬지 확인할 수 있다. 최고의 방안은 아래 네 개의 합성 특성을 활용하는 것이다:

• position
• scale
• rotation
• opacity

이 네 가지 특성을 이용하면 다른 페이지 엘리먼트의 위치에 영향을 미치지 않고 레이아웃 특성을 이용해 거의 모든 것을 할 수 있다. 예를 들어, 이미지의 크기를 변경하기 위해 width() 특성 대신에 scale() 특성을 이용할 수 있다. 

 

CSS animation tips

1. 동시적 애니메이션을 피해라

자연스럽게 잘 작동하는 애니메이션도 수십 개의 다른 애니메이션과 함께 구현하려면 잘 작동하지 않을 수 있다. 동시에 두 개 이상의 애니메이션이 작동하면 렉이 걸릴 가능성이 높다. 따라서, 타이밍을 정해 애니메이션이 동시에 실행되지 않도록 하는 것은 안정적인 성능에 매우 중요하다. 이는 transition delays를 추가해 해결할 수 있다. 애니메이션 최적화를 위해선 몇 번의 시도와 애러가 필요하다. 하지만 그 노력의 결과로 얻는 성능 향상은 그 값어치를 할 것이다. 

 

2. 느린 모션으로 애니메이션을 점검해라

만약 느린 모션에서 애니메이션이 정상적으로 작동하다면 보통의 속도에서도 잘 작동할 것이다. 느린 속도로 애니메이션을 관찰하면 렌더링 문제를 발견하는데 도움이 될 것이다. 

 

3. 순간적으로 모든 애니메이션을 딜레이 시켜라

페이지를 처음 로딩할 때 브라우저가 만일 바쁜 상태라면, 모든 매이메이션을 초기 로딩 이벤트 후 수백 밀리세컨드 연기 시기는 것이 전체 페이지 성능에 괄목할만한 차이를 만들어 낼 수 있다.

 

4. 스크롤에 CSS 애니메이션을 묶지 마라

사용자의 스크롤에 따라 반응하는 애니메니션은 짜증 날 뿐만 아니라, 화면에 다른 모든 성능을 저하시킨다. 

 

5. CSS를 SVGs와 연동해라

Scalable vector graphics(SGVs)는 화질을 떨어뜨리지 않고 크기를 조절할 수 있기 때문에 애니메니션에 아주 좋다. 어도비 일러스트레이터와 같은 프로그램에서 SVGs를 만들고 CSS로 외형을 바꾸도록 적용하라. 관련된 또 다른 이유는 여기를 참조하라. 

 

will-change를 사용해야 할 때

만약 모든 다른 방법을 시도하고도 여전히 성능 문제가 발생할 때, 애니메이션에 will-change 특성 사용을 고래해 볼 수 있다. 이름이 암시하듯, will-change는 엘리먼트의 특성이 변화될 것이니 브라우저는 적절한 준비를 해둘 수 있다. 변화될 특성들을 아래와 같이 나열하면 된다:

.element {
    will-change: transform, opacity;
}

will-change는 리소스를 소비하기 때문에, 남용은 추가적 성능 문제를 일으킬 수 있다. will-change를 모든 애니메이션 이전에 추가하는 것은 추천하지 않는다. 페이지 성능 향상의 마지막 시도로 사용하라.

 

애니메이션을 테스트하라

웹 어플에 애니메이션을 빌딩 하면서 성능 테스트는 지속적으로 이루어져야 한다. 렌더링 문제를 발견하는데 오래 걸릴수록 문제의 근원을 찾기 어려워질 것이다. 

크롬의 개발자 도구, 파이어폭스 그리고 사파리는 네트워크 탭 아래에 frame-by-frame으로 쪼개서 페인트와 렌더 이벤트를 볼 수 있도록 지원한다. 이 정보를 이용해서 애니메이션을 최적화할 수 있다. 크롬을 이용한다면 Rendering 탭 아래에 FPS 미터와 같은 추가적 기능을 볼 수 있다. 

 

사용자의 스크린 크기는 애니메이션 디스플레이에 주요한 영향을 미친다. 따라서 모바일을 포함한 다양한 플랫폼에서 기능을 테스트해라. 

 

Summary

웹을 위한 애니메이션 최적화는 상대적으로 직관적인 과정이다. 방문객을 유혹할 참여 유도 애니메이션을 결정하는 것은 그들이 환경을 고려해야 하기 때문에 어렵다. 어떻게 당신 웹사이트의 기술적 성능이 유저 전환에 영향을 미칠 것인가를 추적하는 것과 더불어 최종적으로 웹 애니메이션이 어떤 결과를 만들어 낼지를 주의 깊게 생각해라. 만약에 애니메이션이 도움이 되지 않는다면 리소스를 낭비할 뿐이니 차라리 다른 곳에 사용하는 것이 낫다.

 

출처: Tips for Improving CSS and JS Animation Performance - KeyCDN

Tips for Improving CSS and JS Animation Performance - KeyCDN