애니메이션은 웹 사이트를 좀 더 화려하게 만들어 사용자들의 이목을 끌 수 있는 좋은 기능이지만,
잘못 사용할 경우 사이트가 느려지는 성능 저하 문제로 이어져 사용자가 기피하는 사이트로 만들 수도 있는 사용자 경험에 있어 민감한 기능이다.
CSS 애니메이션과 VS JavaScript 애니메이션
📄 CSS로 만든 애니메이션 : 선언적 애니메이션
그림과 스타일링을 담당하는 CSS 애니메이션은 메인 스레드가 아닌 브라우저의 컴포지터 스레드에 의해 처리된다. 컴포지터 스레드 덕분에, CSS 애니메이션은 더 비용이 많이 드는 메인 스레드의 작업에 영향을 받지 않는다. 물론 페인트나 레이아웃 이벤트를 트리거하는 애니메이션은 메인 스레드에서 작업을 수행해야 하므로 CSS 애니메이션을 사용하는 이점이 없다.
📄 JavaScript로 만든 애니메이션 : 명령형 애니메이션
자바스크립트는 항상 메인 스레드에 의해 실행된다. 그럼에도 불구하고, 자바스크립트는 애니메이션에 대한 더 많은 제어 기능을 제공하기 때문에 일부 상황에서는 자바스크립트를 사용하는 것이 더 좋다. CSS는 단순한 전환에 최적이지만, 자바스크립트는 바운싱과 같은 고급 효과가 있는 애니메이션에 좋다. 사용자가 일시 중지하거나 되감기 할 수 있는 애니메이션과 시차 스크롤과 같은 특정 효과를 구현하기 위해 자바스크립트가 필요하며, 웹 애니메이션 API의 도움을 받아 복잡한 애니메이션도 구현 가능하다. 자바스크립트를 사용하여 CSS 애니메이션을 제어할 수도 있다.
💥transform3D를 사용할 때
브라우저는 GPU를 사용하여 애니메이션을 렌더링하므로 CPU로 렌더링하는 것보다 빠르다. 또한 transform3D 애니메이션은 하드웨어 가속이므로 브라우저가 사용자의 그래픽 카드를 활용하여 애니메이션 속도를 높일 수 있다.
또 다른 장점은 보다 복잡하고 사실적인 애니메이션이 가능하다. transform3D를 사용하면 기존 x축, y축으로 이루어진 애니메이션 기술로는 불가능한 방식으로 z축을 더해 깊이와 회전, 배율 조정 및 원근감이 포함된 더욱 다양한 애니메이션을 만들 수 있다.
전반적으로 transform3D는 CSS에서 고품질 애니메이션을 만들기 위한 속성 이다. GPU를 활용하고 복잡한 애니메이션을 생성할 수 있는 기능은 매력적이고 시각적으로 매력적인 사용자 인터페이스를 만들고자 하는 디자이너와 개발자에겐 좋은 선택 일 수 있다.
🤓 [반응형 작업 시에 미디어쿼리를 최소화로 잡는 방법]
1. 상대길이 단위 사용하기:
rem, em, vw, vh와 같은 상대길이 단위를 활용하여 스타일을 설정합니다. 이는 화면 크기에 따라 자동으로 조정되기 때문에 미디어쿼리 사용을 최소화할 수 있습니다.
2. grid와 flexbox 활용:
grid를 이용하여 레이아웃을 구성하면 화면 크기에 맞게 자동으로 배치됩니다. 이를 통해 미디어쿼리를 사용하지 않고도 반응형 레이아웃을 쉽게 구현할 수 있습니다.
flexbox를 활용하여 스타일을 변경할 때에도 화면 크기에 따라 유연하게 대응할 수 있습니다.
3. 스타일 변경 시점을 기준으로 미디어쿼리 사용하기:
특정 디바이스 기준이 아닌, 스타일이 변경되는 시점을 파악하여 미디어쿼리를 적용합니다. 이를 통해 디바이스마다의 불필요한 미디어쿼리 작성을 최소화할 수 있습니다.
다만, 프로젝트의 목적과 디자인 요구사항에 따라 디바이스 기준의 미디어쿼리가 필요한 경우도 있으니 적절하게 판단해야 합니다.
이러한 방법들을 활용하면 미디어쿼리를 최소화하면서도 효과적인 반응형 작업을 수행할 수 있습니다.
개발에 관심이있습니다