animation 최적화 정리

애니메이션은 웹 사이트를 좀 더 화려하게 만들어 사용자들의 이목을 끌 수 있는 좋은 기능이지만 잘못 사용할 경우 사이트가 느려지는 성능 저하 문제로 이어져 사용자가 기피하는 사이트로 만들 수도 있는 사용자 경험에 있어 민감한 기능이다.

 

기본적으로 알려진 애니메이션이 사용자 경험에 불편함을 느끼는 수치는 초당 60 프레임 미만으로 알려져 있다. 애니메이션을 주는 방식은 CSS와 JS 둘 다 가능하며 사용자 경험에 불편함을 주지 않게 신경 쓰고, 최적화하는 방법을 조사하고 정리해 보았다.

 

💪 CSS 애니메이션과 VS JavaScript 애니메이션

 

✅ CSS로 만든 애니메이션 : 선언적 애니메이션

그림과 스타일링을 담당하는 CSS 애니메이션은  메인 스레드가 아닌 브라우저의 컴포지터 스레드에 의해 처리된다. 컴포지터 스레드 덕분에, CSS 애니메이션은 더 비용이 많이 드는 메인 스레드의 작업에 영향을 받지 않는다. 물론 페인트나 레이아웃 이벤트를 트리거하는 애니메이션은 메인 스레드에서 작업을 수행해야 하므로 CSS 애니메이션을 사용하는 이점이 없다.

 

✅ JavaScript로 만든 애니메이션 : 명령형 애니메이션

자바스크립트는 항상 메인 스레드에 의해 실행된다. 그럼에도 불구하고, 자바스크립트는 애니메이션에 대한 더 많은 제어 기능을 제공하기 때문에 일부 상황에서는 자바스크립트를 사용하는 것이 더 좋다. CSS는 단순한 전환에 최적이지만, 자바스크립트는 바운싱과 같은 고급 효과가 있는 애니메이션에 좋다. 사용자가 일시 중지하거나 되감기 할 수 있는 애니메이션과 시차 스크롤과 같은 특정 효과를 구현하기 위해 자바스크립트가 필요하며, 웹 애니메이션 API의 도움을 받아 복잡한 애니메이션도 구현 가능하다. 자바스크립트를 사용하여 CSS 애니메이션을 제어할 수도 있다.

 

 

😎 JavaScript 애니메이션 팁

1. requestAnimationFrame() 사용

setTimeOut() 및 setInterval()을 사용하는 대신 requestAnimationFrame()을 사용해 브라우저에 가장 적합한 시간에 애니메이션 코드를 실행할 수 있다. 이 방법은 사용자 장치에 적합한 프레임 속도를 선택하므로 모바일 사용자는 데스크톱 사용자와 다른 프레임 속도를 볼 수 있다.

2. 이벤트에서 애니메이션 분리

스크롤과 같은 이벤트 처리를 담당하는 코드는 애니메이션 코드와 별도로 유지되어야 한다.

3. JavaScript 코드를 간결하게 유지

웹 페이지에 엄청난 양의 자바스크립트를 추가하지 않도록 주의해야 한다. Web Workers API를 사용하면 다른 스레드에서 자바스크립트 애니메이션을 실행할 수 있다.

4. jQuery를 사용 X

jQuery와 같은 오래된 애니메이션 라이브러리를 멀리해야 한다. 비슷한 것을 찾고 있다면 Velocity.js는 기본적으로 동일한 방식으로 작동하지만 훨씬 빠르고 더 많은 기능을 지원한다. jQuery의 $.animate()를 $.velocity()로 대체하면 모바일 사용자에게 큰 차이를 준다.

 

 💡 거의 모든 JavaScript용 애니메이션 도구 모아놓은 사이트
     👉 Web Designer Depot

 

 

😎 CSS 애니메이션 팁

1. 동시 애니메이션 피하기

혼자선 부드럽게 실행되는 애니메이션이어도 수십 개의 다른 애니메이션과 함께 실행되는 경우에는 페이지에서 제대로 작동하지 않을 수 있다. 두 개 이상의 애니메이션이 동시에 진행되면 의도한 바와 다르게 지연이 발생할 가능성이 높다. 따라서 애니메이션이 한 번에 모두 실행되지 않도록 타이밍을 맞추는 것이 일관된 성능을 유지하는 데 매우 중요하며 이는 transition-delay(또는 animation-delay)을 사용하여. 구현할 수 있다. 애니메이션을 최적으로 구성하는 방법을 알아내려면 약간의 시행착오가 필요하겠지만 성능 향상은 그만큼 노력할 가치가 있다.

2. 슬로우 모션으로 애니메이션 검사하기

애니메이션이 슬로우 모션에서 잘 보이면 일반 속도에서도 잘 보일 것이다. 애니메이션 속도를 낮추면 렌더링 문제를 더 정확히 파악하는 데 도움이 될 수 있다.

3. 모든 애니메이션을 1초 미만으로 delay시키기

페이지 로드가 시작될 때 브라우저가 매우 바쁘기 때문에 초기 로드 이벤트 후 수백 밀리 초까지 모든 애니메이션을 지연하면 전체 페이지 성능에 눈에 띄는 차이가 나게 좋아질 수 있다.

4. 스크롤에 CSS 애니메이션을 바인딩하지 않기

사용자가 스크롤할 때 뷰포트를 따라가는 애니메이션은 성가실 뿐만 아니라 화면의 다른 모든 성능을 저하시킨다.

5. CSS를 SVG와 결합하기

확장 가능한 벡터 그래픽 또는 SVG는 해상도 저하 없이 크기를 조정할 수 있으므로 애니메이션에 탁월하다. Adobe Illustrator와 같은 프로그램에서 SVG를 만들고 CSS를 적용하여 모양을 변경할 수 있습니다. 애니메이션 관점으로 봤을 때 아이콘 글꼴보다 SVG를 선택하는 또 다른 이유가 되기에 충분하다.

 

 

🤔 고려해야 될 부분 정리

 

📌 애니메이션을 적용할 CSS 속성 선택

지속적인 애니메이션은 상당한 양의 리소스를 소비할 수 있지만 일부 CSS 속성은 다른 속성에 비해서도 애니메이션 비용이 더 많이 든다. 브라우저가 속성에 애니메이션 효과를 주기 위해 더 열심히 작업할수록 프레임 속도가 느려진다.

따라서, 애니메이션에 적합한 CSS 속성을 선택하는 것은 페이지 성능에 큰 영향을 미칠 수 있다.

 

 

📌 애니메이션에서 신경 써야 할 CSS 속성 유형 세 가지

• Layout  속성 - 페이지 요소의 크기와 배치를 결정한다. 요소의 너비와 높이를 변경하는 애니메이션은 다른 페이지 요소의 배치에 영향을 줄 수 있으며,  "layout thrash"라는 연쇄 반응을 일으킬 수 있다. 페이지 레이아웃을 변경하는 애니메이션은 특히 비용이 많이 들기 때문에 피하는 것이 가장 좋다.
• Paint 속성 - 페이지 요소의 모양을 정의합니다. 색상과 같은 속성을 변경하려면 다시 칠해야 해서 비용이 많이 들 수 있다. 즉, 뷰포트의 일부를 다시 칠해야 하는 간단한 애니메이션은 전체 성능에 미미한 영향을 미칠 수 있으며, 더 큰 애니메이션같은 경우 생각할 가치조차 없을 수 있다.
• Composite 속성 - transform 및 opacity를 포함하는 속성은 최소한의 비용으로 CSS 애니메이션을 만드는 가장 좋은 친구다. transform을 사용하면 페이지 레이아웃에 영향을 주지 않고 scale 하고 rotate 애니메이션을 적용 할 수 있다.  가성비 좋은 Composite 속성만 사용하더라도 생각보다 많은 애니메이션을 해낼 수 있다.

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

• position
• scale
• rotation
• opacity

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

 

📌  transform3D 속성 사용

CSS의 속성 transform3D을 사용하면 HTML 요소에서 3D 변형을 만들 수 있다. 이 속성은 다른 애니메이션 기술보다 더 나은 성능과 부드러운 애니메이션을 제공하기 때문에 CSS 애니메이션에 자주 사용된다.

 

transform3D를 사용할 때 브라우저는 GPU를 사용하여 애니메이션을 렌더링하므로 CPU로 렌더링하는 것보다 빠르다. 또한 transform3D 애니메이션은 하드웨어 가속이므로 브라우저가 사용자의 그래픽 카드를 활용하여 애니메이션 속도를 높일 수 있다.

또 다른 장점은 보다 복잡하고 사실적인 애니메이션이 가능하다.  transform3D를 사용하면 기존 x축, y축으로 이루어진 애니메이션 기술로는 불가능한 방식으로 z축을 더해 깊이와 회전, 배율 조정 및 원근감이 포함된 더욱 다양한 애니메이션을 만들 수 있다.

전반적으로 transform3D는 CSS에서 고품질 애니메이션을 만들기 위한 속성 이다. GPU를 활용하고 복잡한 애니메이션을 생성할 수 있는 기능은 매력적이고 시각적으로 매력적인 사용자 인터페이스를 만들고자 하는 디자이너와 개발자에겐 좋은 선택 일 수 있다.

 

📌 will-change 속성 사용

다른 모든 것을 시도해도 여전히 성능 문제가 있는 경우 애니메이션에 will-change 속성을 추가해 보는 것도 한 가지 방법이다. 이름에서 알 수 있듯이 will-change는 브라우저가 적절한 준비를 할 수 있도록 요소의 속성이 변경됨을 나타낸다. 사용법은 다음과 같이 변경될 특정 속성을 나열한다.

 

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

 

will-change 속성을 사용하면 리소스를 소비하므로 과도하게 사용할 경우 추가 성능 문제가 발생할 수 있다. 그래서 모든 애니메이션에 기본적으로 넣을 필수 속성이 아니다. 오히려 페이지 성능을 최적화하기 위한 최후의 수단으로 생각하면 좋을 것 같다.

 

 

📌 애니메이션 테스트

성능 테스트는 웹 앱용 애니메이션을 빌드하는 동안 진행 중인 프로세스여야 한다. 렌더링 문제를 식별하기 위해 더 오래 기다릴수록 문제의 원인을 정확히 찾아내기가 더 어려워진다.

Chrome, Firefox 및 Safari용 개발자 도구는 네트워크 탭에서 페인트 및 렌더링 이벤트의 프레임별 분석을 제공한다. 이 정보는 애니메이션을 디자인할 때 애니메이션을 최적화하는 데 도움이 될 수 있다. Chrome을 사용하는 경우 DevTools 콘솔의 Rendering 탭에서 FPS 미터와 같은 추가 기능을 확인하면 된다.

 

크롬 Frame Rendering Stats 설정했을 때 나오는 결과(좌) Frame Rendering Stats 설정 화면(우) 이미지

 

💡 Frame Rendering Stats
사용자의 화면 크기는 애니메이션이 표시되는 방식에 큰 영향을 미치므로 모바일 장치를 포함한 여러 플랫폼에서 프로젝트를 테스트해야 한다.

 

✨ 조사하며...

애니메이션과 UX의 관계

웹을 위해 애니메이션을 만드는 게 문제지 최적화하는 것은 비교적 간단한 과정이다. 하지만 새로운 클라이언트들이 우리가 운영하고 있는 웹사이트에 머물도록 유도할 매력뿜뿜 애니메이션을 선택하는 것은 단순히 '멋있다!'로 끝나는 게 아닌 사용자 사용성도 고려해야 하기 때문에 더 어렵다고 생각한다.

 

성능 외 부분에 대한 생각

애니메이션을 적용하는 데 있어 사이트 성능에 어떤 영향을 미치는지를 확인하는 것도 분명 중요한 부분이지만, 기업이라면 수익에 미치는 영향도 무시하면 안 될 것 같다. 회사는 결국 이익을 위해 투자하는 것인데 애니메이션이 도움이 되지 않는다면, 다른 곳에서 더 유용하게 사용할 수 있는 리소스를 낭비하는 것밖에 안된다는 결론이 나올 수도 있다 생각한다.