[IT] animation 최적화 기법 과 반응형 작업에 미디어 쿼리를 최소화로 잡는 방법

애니메이션을 구현하다보면 jank현상 (스크롤 떨림, 지연, 끊김 등)이 나타난다.

이를 해결하기 위해 css 에서 애니메이션 최적화가 필요하다.

---

 

< CSS animation 최적화 기법 3가지>

1) GPU 가속 사용

will-change속성을 사용하면 css애니메이션을 보다 부드럽게 만들고

웹 페이지가 CPU대신GPU를 사용하여 애니메이션을 더욱 부드럽게 처리할 수 있다.

2) 애니메이션 시간제한 설정

애니메이션의 지속시간을 제한하면 브라우저가 애니메이션을 더욱 부드럽고 빠르게 처리 할 수 있다.

3) 픽셀 값 대신 퍼센트 값 사용

css애니메이션에서 픽셀 값을 사용하면 브라우저가 레이아웃을 다시 계산해야 한다.

따라서 퍼센트 값을 사용하면 브라우저가 더욱 빠르게 애니메이션을 처리할 수 있다.

 

ㅇ Transform 사용 시 3D를 사용하는 이유

css에 transform을 사용하면 요소를 x , y, z 축을 따라 이동하고 회전할 수 있도록 만들 수 있다.

동적인 애니메이션 구현 가능하다.

 

< 반응형 작업시에 미디어쿼리를 최소화로 잡는 방법 3 가지>

1) 상대적인 단위 사용

절대적인 단위(px)를 사용하는 것보다 상대단위(em,rem)을 사용하는 것이 더욱 유연하고 

반응형 웹 페이지를 궝하는데 효과적이다.

미디어 쿼리에서 사용되는 값도 상대적으로 조정할 수 있으며, 유지보수도 더욱 쉬워진다.

2) 재사용 가능한 미디어 쿼리

특정한 미디어 쿼리를 여러번 사용할 경우, 이를 변수로 선언하며 재사용 가능한 미디어쿼리를 만드는 것이 좋다.

3) 미디어쿼리 분리

미디어쿼리를 분리하여 작성하는 것은 성능을 향상시키는 또 다른 방법이다.

이를 통해 페이지 로딩 시간을 줄일 수 있다. 

대체적인 스타일은 기본 스타일 시트에 작성하고,

미디어 쿼리에 해당하는 스타일만 따로 분리하여 작성하는 것이 좋다.