요약: Chromium은 SVG 애니메이션, 백분율 기반 변환, 배경 색상 및 클립 경로 애니메이션의 하드웨어 가속 기능을 자동으로 업데이트하고 있습니다.
웹 애니메이션 성능과 관련하여 '하드웨어 가속' 및 'GPU 가속' 애니메이션이라는 용어가 등장할 가능성이 높습니다. 그런데 이게 무슨 뜻일까요? 하드웨어 가속 스타일은 CPU (중앙 처리 장치)가 아닌 GPU (그래픽 처리 장치)를 활용하여 시각적 스타일을 렌더링하는 스타일입니다. GPU가 CPU보다 빠르게 웹페이지의 시각적 변경사항을 렌더링할 수 있기 때문입니다.
GPU를 사용하여 그래픽 집약적인 전환 및 애니메이션을 오프로드하면 시각적 요소가 더 부드러워지고 버벅거림이 줄어듭니다. 이러한 애니메이션은 기본 스레드의 영향을 받지 않기 때문입니다. 이러한 스크립트를 기본 스레드에서 제거하면 애니메이션이 페이지에서 실행 중인 다른 활성 스크립트의 크러스트를 우회하므로 시각적 요소의 속도가 느려지고 버벅거림이 발생합니다.
하드웨어 가속 애니메이션 사용 설정
하드웨어 가속 애니메이션은 레이어로 합성되며 개발자가 매끄러운 60FPS (초당 프레임 수) 애니메이션을 달성하여 시각적 렌더링 성능을 개선하는 데 도움이 됩니다. 현재 웹에서 하드웨어 가속 애니메이션 및 전환을 지정하고 사용 설정하는 몇 가지 방법이 있습니다.
- CSS
transform함수를 사용하거나opacity또는filter값을 전환하세요. - 요소에
will-change속성을 추가합니다. OffscreenCanvas를 통해 애니메이션 캔버스 그림 만들기- WebGL 3D 그림 만들기
opacity, filter, transform만 포함되지만 background-color 및 clip-path가 곧 목록에 포함됩니다. 그 밖에 Chromium에서 하드웨어 가속이 기본적으로 지원되는 것은 무엇인가요? SVG 애니메이션을 포함하여 파이프라인에서 내려오는 몇 가지 작업이 있으며, 이는 개발자들이 절실히 요청했던 부분입니다.
하드웨어 가속 SVG 애니메이션
SVG는 어떤 웹사이트에도 훌륭한 부가 기능이며, 이제 이러한 SVG와의 상호작용은 더 효율적으로 수행될 수 있습니다. Chromium 89부터 Chrome은 Firefox와 같은 제품과 함께 SVG 애니메이션에서 하드웨어 가속을 기본적으로 사용 설정할 수 있습니다. 개발자가 해야 할 일은 무엇인가요? 아무 조치도 취하지 않습니다. Chromium 89 이상에서 SVG 애니메이션에 자동으로 적용됩니다.
예
하드웨어 가속을 사용하는 SVG 애니메이션과 사용하지 않는 SVG 애니메이션의 차이점을 살펴보겠습니다. 로드 표시기는 facebook.com과 같이 흔히 사용되는 UI 요소입니다. 이 표시기는 사용자가 응답을 기다리는 동안 서버에서 작업이 수행됨을 나타냅니다. 여기에 표시된 경우 응답은 사이드바에 추가 결과를 로드하는 것입니다.
DevTools를 열면 프로파일링을 시작할 수 있으며, CPU와 GPU 가속 애니메이션 환경의 차이를 실제로 확인할 수 있습니다.
왼쪽 (Chromium 87)에서는 스피너가 애니메이션될 때마다 (연속적으로) 다시 그리기가 발생하는 것을 확인할 수 있습니다. Chromium 89 및 Firefox에서는 오른쪽을 다시 그릴 수 없습니다. 페인트 플래시를 사용 설정하면 DevTools 렌더링 패널에서 이를 테스트할 수 있습니다.
성능 패널을 자세히 살펴보면 이 효과와 웹 속성의 전체 성능에 미치는 영향을 다시 확인할 수 있습니다. 따라서 애니메이션 렌더링과 페인팅 시간을 완전히 줄일 수 있습니다. 즉, 애니메이션이 더 매끄럽고 애플리케이션 성능이 더 뛰어납니다. Facebook은 하드웨어 가속 SVG에 대한 브라우저 지원이 개선될 때까지는 이 SVG 기반 로더를 제공하지 않지만 테마 설정, 확장, 해상도 요구사항 측면에서 유연성이 향상되고 유지보수가 더 쉬울 수 있습니다.
비율 애니메이션
상호작용팀은 Chromium 89에서 비율 변환 애니메이션도 지원합니다. 비율 기반 애니메이션은 백분율 기반 움직임을 포함하는 상호작용을 설명합니다. 예를 들어 항목을 20% 확대하거나 translateX: -100% 등을 사용하여 반응형 사이드바 메뉴를 화면 밖에서 슬라이드할 수 있습니다.
이러한 유형의 UI 애니메이션은 비교적 일반적이지만 이전에는 이러한 애니메이션을 합성할 수 없었기 때문에 현재 하드웨어 가속을 활용하지 않습니다. 변환의 백분율은 상자 크기 (즉, 레이아웃)에 따라 다르지만, 이제 레이아웃 크기가 모든 프레임을 변경하지 않는 한 브라우저에서 절대 변환 값을 미리 계산하고 개발자가 픽셀 값을 제공한 것처럼 실행할 수 있습니다. 좋은 소식은 Chromium팀에서 이 기능을 개발 중이며 조만간 이러한 유형의 애니메이션이 자동으로 합성되고 하드웨어 가속이 사용된다는 점입니다.
다음 단계는 무엇인가요?
이렇게 업데이트된 애니메이션은 웹 스타일을 훨씬 더 매끄럽게 만들어 줍니다. 앞서 언급했듯이 팀에서는 앞으로
웹의 미래에 어떤 니즈가 있는지 지켜보고 있습니다. 현재 Chromium의 향후 버전에서 하드웨어 가속을 자동으로 사용하도록 background-color 및 clip-path를 변환할 예정입니다.
background-color는 전환 및 효과의 사용 수가 많기 때문에 우선순위가 높으며 clip-path는 웹에서 훨씬 더 효율적인 전환 효과를 지원합니다. 성능과 상호작용의 만남이
모두 윈윈합니다.
커버 이미지: Siora Photography for Unsplash