animation 최적화 기법이 무엇인가?!

animation 최적화 기법이 뭘까요..

스터디를 같이 하는 사람들과 얘기를 하다 나온 말이었어요

그래서 블로그에 한 번 적어나 봐야겠다 했던 내용인데

부족하지만 적어볼게여

 

정말 간단하게 말을 해보자면

웹사이트에서 애니메이션을 더 효율적으로 동작하게 하는 여러 방법을 말해요

여러 방법이라고 하니 당연히 방법이 하나가 아닌

상황에 맞는 여러 방법이 있는 거죠

 

이렇게 최적화 기법을 사용하면

웹사이트의 성능을 향상하고 사용자 경험을 개선하는데 도움이 됩니다

대표적인 방법으로는

1. GPU 가속 활용  2. will-change 속성 사용  3. 요청 애니메이션 프레임  4. 애니메이션 복잡성 줄이기

이렇게 있는데 오늘 제가 말씀드릴건

3D Transform 사용하는 이유와 CSS로 Animation 최적화 방법을 

제가 궁금해서 찾았기에 끄적여볼게요

---

3D Transform 사용하는 이유

 

우선 'transform' 프로퍼티가 웹 페이지의 요소를 변형하는데 주로 사용되는데

이는 2D & 3D 변형을 포함할 수 있어요

 

근데 이때 3D를 사용하는 이유는 위에서 말한 최적화 기법 중 하나에 있어요

바로, GPU 가속을 활용하는 방법인 거죠

3D 변형을 사용하면 브라우저는 그래픽 가속을 활용해서 렌더링을 개선하고

이는 애니메이션에서 중요한 부분이고 더 부드럽고 빠른 애니메이션을 가능하게 하기도 해요

 

그럼 드는 생각이 하나 있죠

2D는 왜 사용을 안 하는가?

물론 많은 상황에서 2D를 사용하고 있어요

하지만 3D를 사용함으로써 CPU 대신 그래픽을 통해 그래픽 처리하는 게

더 유용하다고 생각할 때 사용을 하는 거죠

즉, 간단한 효과에서는 사용을 하지만 복잡하고 부드러운 애니메이션이 필요한 상황이라면?

3D를 조금 더 사용한다는 말이에요

---

CSS로  Animation 최적화 방법

 

위에서 말한 will-change 속성을 사용하는 게 CSS로 최적화하는 방법이에요

이 속성은 브라우저에게 어떤 요소가 변할 것인지 미리 알려줄 수 있어요

 

will-change: transform;이라는 코드가 있다면

요소의 변형이 곧 변형될 것이라고 브라우저에게 알려주는 거죠

이러면 브라우저 입장에서는 미리 알려줬으니 최적화도 미리 할 수 있고

저 최적화를 바탕으로 애니메이션의 성능을 향상할 수 있는 거예요

 

제가 궁금해서 찾아본 내용은 요기까지예요

물론 제가 이해한 것을 바탕으로 적었기에 잘못된 내용이 있을 수 있어요...

많은 피드백 부탁드리고, 조금이라도 도움이 되셨으면 합니다!!