웹 색상 성능: 그라데이션, 그림자 및 필터

CSS의 색상은 무료가 아닙니다. 웹 페이지에 칠해진 모든 픽셀은 메인 스레드가 레이아웃 및 페인트 작업을 실행하는 CPU나 합성 및 특정 시각 효과가 처리되는 GPU에서 컴퓨팅 주기를 소비합니다. 대부분의 경우 비용은 미미하며 결코 눈치 채지 못할 것입니다. 그러나 레이어형 그라디언트, 다중 상자 그림자, CSS 필터 및 배경 흐림을 추가하는 등 디자인이 더욱 정교해짐에 따라 이러한 비용이 누적됩니다. 저전력 모바일 하드웨어에서 사려 깊은 색상 렌더링을 갖춘 디자인과 이러한 비용을 무시하는 디자인의 차이는 유연한 60fps 경험과 버벅거리고 배터리를 소모하는 인터페이스의 차이일 수 있습니다.

이 가이드는 성능 비용을 줄이면서 시각적 의도를 유지하는 실용적인 대안과 함께 브라우저가 색상을 처리하는 방법, 색상 관련 CSS 속성이 비용이 많이 드는 이유, 실제로 "GPU 가속"이 실제로 의미하는 것, 렌더링 병목 현상을 일으키는 특정 패턴에 대한 개발자 수준의 이해를 제공합니다.

브라우저가 색상을 그리는 방법

일부 색상 효과가 비용이 많이 드는 이유를 이해하려면 브라우저의 렌더링 파이프라인을 이해해야 합니다. 최신 브라우저(Chromium, Firefox, Safari/WebKit)는 픽셀이 화면에 나타나기 전에 여러 단계를 거쳐 페이지를 처리합니다.

렌더링 파이프라인

1. 스타일 재계산: 브라우저는 각 요소에 어떤 CSS 규칙이 적용되는지 계산하고 최종 계산 값(계단식, 특이성 및 상속 단계)을 계산합니다.

2. 레이아웃: 브라우저는 페이지의 각 요소(상자 모델, 가변상자, 그리드, 흐름 위치 지정)의 크기와 위치를 계산합니다.

3. 그림판: 브라우저는 각 요소를 픽셀 비트맵으로 래스터화합니다. 여기에는 색상, 그라데이션, 그림자, 테두리 및 배경이 그려집니다. 페인트는 기본적으로 CPU에서 발생합니다.

4. 합성: 브라우저는 페인팅된 레이어를 디스플레이로 전송되는 최종 이미지로 조립합니다. 특정 요소가 자체 합성기 레이어로 승격된 경우(아래 GPU 가속 참조) 합성은 GPU에서 발생합니다.

핵심 성능 통찰력: 레이아웃과 페인트는 비용이 많이 드는 단계입니다. 합성은 GPU의 병렬 픽셀 처리 하드웨어를 사용하여 이미 래스터화된 비트맵에서 작동하기 때문에 비교적 저렴합니다. 성능 최적화의 목표는 페인트를 최소화하고 모든 프레임에 페인트를 요구하는 대신 합성 단계에서 애니메이션을 유지하는 것입니다.

페인트와 복합재 속성

CSS 속성은 변경 시 영향을 미치는 파이프라인 단계에 따라 광범위하게 분류될 수 있습니다.

변경 시 레이아웃 + 페인트 + 합성이 필요한 속성: width, height, margin, padding, font-size, border-width. 이러한 애니메이션을 사용하지 마세요.

변경 시 페인트 + 합성이 필요한 속성: color, background-color, border-color, box-shadow, outline, background-image(그라디언트). 이는 레이아웃 재계산을 건너뛰지만 여전히 브라우저에서 픽셀을 다시 그려야 합니다.

복합만 필요한 속성: transform, opacity. 변환, 회전, 크기 조정, 페이드 등 이러한 속성에 대한 변경 사항은 CPU 페인트 파이프라인을 건드리지 않고도 GPU 컴포지터에서 완전히 처리할 수 있습니다. 이것이 CSS 변환 애니메이션이 항상 모션에 선호되는 이유입니다.

CSS 전환을 통해 box-shadow 또는 그라디언트에 애니메이션을 적용할 때 브라우저는 모든 프레임에서 요소를 다시 그려야 합니다. 이는 메인 스레드에서 JavaScript 실행과 경쟁하는 CPU 바인딩 작업입니다. 여러 애니메이션을 동시에 실행하는 저전력 장치에서는 프레임이 떨어지는 것을 볼 수 있습니다.

그라데이션 렌더링 성능

CSS 그라데이션은 현대 웹 디자인에서 가장 일반적인 색상 관련 성능 고려 사항 중 하나입니다. 배경, 버튼 상태, 오버레이, 히어로 섹션에 나타나며 점점 더 미묘한 텍스처 요소로 나타납니다. 렌더링 비용을 이해하면 과도한 사용을 방지할 수 있습니다.

그라디언트 렌더링 방법

모든 CSS 그래디언트(선형, 방사형, 원추형 또는 반복 변형)는 페인트 단계에서 CPU에 의해 래스터화됩니다. 브라우저는 요소 경계 상자 내 모든 픽셀의 색상 값을 계산하고 그라데이션 색상 공간의 색상 정지점 사이를 보간합니다. 이 계산은 요소가 그려질 때마다 발생합니다.

애니메이션이 적용되지 않는 요소의 간단하고 안정적인 그라데이션 배경의 경우 이 비용은 한 번만 지불되고 결과가 캐시됩니다. 그라디언트가 다음과 같은 경우 성능 문제가 발생합니다.

• 애니메이션(매 프레임마다 그라데이션 값이 변경됨)
• 매우 큰 요소에 적용(더 많은 픽셀 = 더 많은 계산)
• 여러 번 레이어링(여러 그라디언트 배경 또는 여러 스택 요소의 그라디언트)
• 동일한 요소에 다른 고가의 속성과 결합하여 사용됨

그라디언트 애니메이션 비용

CSS 전환 또는 키프레임 애니메이션을 사용하여 그라디언트에 애니메이션을 적용하면 모든 프레임에서 강제로 다시 그려집니다. 이는 background-image(그라디언트를 포함하는 속성)가 컴포지터 바로 가기가 없는 페인트 단계 속성이기 때문입니다.

비싸다 - 60fps 애니메이션에는 피하세요:

/* Forces CPU repaint every frame */
@keyframes shimmer {
  from { background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%); }
  to { background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%); }
}

더 나은 방법 - 대신 의사 요소의 변환에 애니메이션을 적용하세요.

.shimmer-container {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}

.shimmer-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  /* Animating transform triggers composite only, not paint */
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  to { transform: translateX(200%); }
}

의사 요소 기술은 그라데이션을 한 번 생성한 다음 합성 단계에 머무르는 transform를 사용하여 이동합니다. 시각적 결과는 동일합니다. 애니메이션 프레임에서 다시 그리기가 발생하지 않기 때문에 성능 비용이 크게 낮아집니다.

큰 그라데이션 영역

4K 디스플레이의 전체 뷰포트를 덮는 그라데이션은 약 800만 픽셀에 걸쳐 색상을 보간한다는 의미입니다. M 시리즈 Mac에서는 이는 사소한 일입니다. 저렴한 Android 기기에서 전체 뷰포트 그래디언트를 그리는 데는 몇 밀리초가 걸릴 수 있습니다. 그리고 해당 요소가 다시 칠해지는 경우(스크롤, 크기 조정 또는 근처의 DOM 변경으로 인해) 해당 비용이 반복적으로 지불됩니다.

큰 경사 영역에 대한 완화: - 상호 작용 중에 다시 그려지지 않는 경우 will-change: transform를 사용하여 그라디언트 요소를 자체 레이어로 승격합니다. - 그래디언트가 정적인 경우 CSS 그래디언트 대신 작은 그래디언트 배경 이미지(background-image: url()를 통해)를 사용합니다. 래스터 이미지는 일반적으로 매우 큰 크기의 계산된 그래디언트보다 페인트하는 데 비용이 더 저렴합니다. - 페이지 미학을 정의하는 전체 페이지 그라데이션의 경우 body 또는 래퍼 요소에 설정하고 상호 작용 중에 다시 그리기를 트리거하는 항목이 없는지 확인하세요.

그라데이션 색상 보간: sRGB 대 OKLCH

이제 CSS 그라데이션은 in 구문을 사용하여 다양한 색상 공간의 색상을 보간할 수 있습니다.

background: linear-gradient(in oklch, #FF5733, #3355FF);
background: linear-gradient(in sRGB, #FF5733, #3355FF);
background: linear-gradient(in hsl, #FF5733, #3355FF);

OKLCH 보간은 지각적으로 균일한 그라데이션을 생성합니다. 즉, sRGB 보간이 특정 색상 쌍에 대해 생성하는 채도가 낮은 "회색 진흙" 전환 없이 중간점이 인간의 인식에 따라 두 색상 사이의 중간점처럼 보입니다. ColorFYI의 Gradient Generator는 색상 공간 사양에 맞게 조정할 수 있는 CSS 그라데이션 코드를 생성합니다.

성능 관점에서 볼 때 색상 보간 공간은 래스터화 비용에 큰 영향을 미치지 않습니다. CPU는 중간 색상을 다르게 계산하지만 픽셀 수는 동일합니다. 성능이 아닌 시각적 품질을 기반으로 보간 공간을 선택하십시오.

박스섀도우 비용 및 대안

box-shadow는 시각적으로 가장 널리 사용되는 CSS 속성 중 하나이며 페인트 비용도 더 많이 드는 속성 중 하나입니다. 비용이 많이 드는 이유와 대안을 사용해야 하는 시기를 이해하는 것은 성능에 민감한 UI 작업에 대한 실용적인 지식입니다.

Box-Shadow가 비싼 이유

상자 그림자는 요소 모양의 흐릿한 오프셋 복사본을 렌더링합니다. 흐림 알고리즘은 요소 경계(각 방향의 흐림 반경)를 넘어 확장되는 영역에서 픽셀 단위로 작동합니다. 흐림 반경이 큰 상자 그림자(box-shadow: 0 20px 60px rgba(0,0,0,0.3))는 60px 반경에 걸쳐 흐리게 표시되어 보이는 요소를 훨씬 넘어 페인트된 영역을 확장합니다.

비용 요소: - 흐림 반경: 더 큰 흐림 = 흐림 계산 중에 더 많은 픽셀이 처리됩니다. 계산 비용은 흐림 반경에 따라 달라집니다. - 확산: 그림자 크기를 늘려 처리할 픽셀 영역을 늘립니다. - 다중 그림자: box-shadow는 쉼표로 구분된 다중 값을 허용합니다. 박스섀도우 3개는 1개보다 가격이 약 3배 정도 비쌉니다. - 큰 요소: 큰 상자 그림자가 있는 전체 너비 컨테이너는 상당한 뷰포트 영역을 덮을 수 있습니다.

Box-Shadow가 문제가 될 때

표준 카드 구성 요소의 단일 box-shadow: 0 2px 8px rgba(0,0,0,0.15)는 기본적으로 무료입니다. 다음과 같은 경우 비용이 눈에 띄게 됩니다.

• 큰 상자 그림자가 있는 많은 요소가 뷰포트에 동시에 존재합니다.
• 큰 상자 그림자가 있는 요소는 자주 다시 그려집니다(호버 상태, 스크롤 기반 레이아웃 변경 또는 동적 콘텐츠로 인해).
• 상자 그림자는 JavaScript 또는 CSS 전환을 통해 애니메이션화됩니다(모든 프레임에는 다시 그리기가 필요함)

Box-Shadow의 대안

그림자 필터링: 직사각형이 아닌 요소(특히 SVG 아이콘 또는 투명도가 있는 이미지)의 경우 filter: drop-shadow()는 경계 상자가 아닌 실제 보이는 픽셀에 그림자를 적용하여 시각적으로 더 정확한 결과를 생성합니다. 성능은 box-shadow와 유사하지만 직사각형이 아닌 콘텐츠에서는 칠해진 영역이 더 작습니다.

의사 요소 그림자: 그림자 색상으로 설정된 그라데이션 배경과 함께 ::after 의사 요소를 사용하여 그림자를 생성하고 요소 뒤에 절대적으로 위치합니다. 이 의사 요소는 자체 컴포지터 레이어로 승격될 수 있으며 상태 변경 시 기본 요소를 강제로 다시 칠하지 않습니다.

.card {
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  inset: 10px 0 -10px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, transparent 70%);
  z-index: -1;
  /* Stable element — painted once, composited cheaply */
}

고도 그림자 대신 테두리 및 윤곽선: 주로 상호 작용 또는 선택 상태(시각적 고도 아님)를 나타내기 위해 그림자를 사용하는 UI 요소의 경우 미묘한 border 또는 outline 색상 변경은 마우스 오버 시 box-shadow를 추가하거나 변경하는 것보다 훨씬 저렴한 페인트 작업입니다.

CSS 필터 성능

CSS filter는 흐림, 밝기, 대비, 채도, 색조 회전 등의 픽셀 수준 이미지 처리를 요소와 해당 콘텐츠에 적용합니다. 대부분의 CSS 속성과 달리 필터는 요소가 그려진 후에 적용되어 래스터화된 픽셀에서 작동합니다.

필터는 본질적으로 비싸다

모든 필터 작업은 요소 경계 상자(및 흐림의 경우 경계 상자 너머로 확장되는 영역)의 모든 픽셀을 처리합니다. 이는 상당한 CPU 계산이며 페인트 타임에 발생합니다.

특정 필터 비용: - blur(): 단연 가장 비싼 필터입니다. 가우시안 흐림 알고리즘은 흐림 반경에 따라 크기가 조정되는 커널을 사용하여 모든 픽셀을 여러 번 방문합니다. 큰 요소에 큰 블러를 적용하는 것은 CSS에서 할 수 있는 가장 비용이 많이 드는 작업 중 하나입니다. - brightness(), contrast(), saturate(), opacity(): 픽셀별 변환이지만 단일 패스 — 요소의 픽셀 영역에 대략 비례하여 블러보다 훨씬 저렴합니다. - hue-rotate(): 또한 상대적으로 저렴합니다. 픽셀당 컬러 매트릭스 곱셈입니다. - drop-shadow(): 블러와 같은 이유로 비용이 많이 듭니다(그림자는 흐릿한 복사본입니다).

필터를 위한 GPU 가속

브라우저는 특정 조건, 특히 요소에 이미 컴포지터 레이어가 있거나 필터가 변환과 결합된 경우에 GPU 가속 filter 작업을 수행합니다. 그러나 이는 보장되지 않으며 정확한 동작은 브라우저 버전 및 장치에 따라 다릅니다.

필터의 GPU 가속을 장려하려면:

/* Adding a transform promotes the element to a compositor layer */
.filter-element {
  filter: blur(4px) brightness(0.9);
  transform: translateZ(0); /* Promotes to own compositor layer */
}

컴포지터 레이어를 생성하는 데는 고유한 오버헤드가 있습니다. 각 레이어는 GPU 메모리를 소비합니다. 많은 레이어(예: 긴 목록의 카드 구성 요소당 하나씩)를 생성하면 브라우저의 GPU 메모리가 부족해지고 CPU 렌더링으로 대체될 수 있으며 이는 전혀 승격하지 않는 것보다 더 나쁩니다. 레이어 승격을 보편적으로 사용하지 않고 의도적으로 사용하십시오.

필터 애니메이션

필터에 애니메이션을 적용하면 기본적으로 프레임마다 다시 칠해지는 상황이 생성됩니다. 예외는 다음과 같습니다. - filter: opacity() — 불투명도는 최신 브라우저에서 합성에 친화적입니다. - GPU 가속 변환을 통해 명시적으로 승격된 요소를 필터링합니다.

흐림 애니메이션을 적용하지 마세요:

/* Terrible performance — blurs a large area every animation frame */
.element:hover {
  transition: filter 0.3s;
  filter: blur(8px);
}

대안: 포함 및 레이어 승격으로 흐리게 처리:

디자인상의 이유로 블러 애니메이션이 절대적으로 필요한 경우 이를 작은 요소에 적용하고 contain: paint 또는 isolation: isolate를 사용하여 해당 요소가 문서의 나머지 부분과 격리되었는지 확인하고 will-change: filter를 사용하여 레이어 승격을 암시합니다. 그러나 약한 하드웨어에서는 여전히 비용이 많이 드는 작업이라는 점을 이해하십시오.

배경화면 필터 고려사항

backdrop-filter는 요소 뒤의 픽셀에 필터 효과를 적용합니다. 이는 젖빛 유리 효과에 일반적으로 사용됩니다. 이는 사용 가능한 CSS 기능 중 계산 비용이 가장 많이 드는 기능 중 하나입니다.

배경화면 필터가 비싼 이유

요소 자체의 페인팅된 픽셀을 처리하는 filter와 달리 backdrop-filter에서는 브라우저가 다음을 수행해야 합니다.

1. 요소("배경") 뒤의 모든 콘텐츠를 렌더링합니다.
2. 현재 요소의 배경으로 해당 픽셀에 필터를 적용합니다.
3. 필터링된 배경화면 위에 현재 요소의 콘텐츠를 칠합니다.

1단계는 배경을 생성하기 위해 backdrop-filter 요소 뒤의 모든 요소를 ​​래스터화해야 함을 의미합니다. backdrop-filter 뒤에 있는 요소를 변경하려면 배경을 다시 렌더링하고 필터를 다시 적용해야 합니다.

이는 계단식 결과를 가져옵니다. backdrop-filter: blur() 요소가 뒤에 애니메이션 또는 스크롤 콘텐츠가 있는 페이지에 존재하는 경우 모든 스크롤 또는 애니메이션 프레임은 배경화면 다시 렌더링 및 필터 재적용을 트리거합니다. 중급 모바일 하드웨어에서는 이것이 스크롤 버벅거림의 원인이 되는 경우가 많습니다.

배경화면 필터의 실제 사용 규칙

아껴서 사용하세요: 페이지의 backdrop-filter 요소 수를 제한하세요. 반투명 유리 모달 하나는 괜찮습니다. backdrop-filter: blur()를 사용하는 고정 헤더, 사이드바, 도구 설명 및 모달은 모바일 하드웨어가 원활하게 처리하기에는 너무 많은 경우가 많습니다.

흐림 반경 제한: backdrop-filter: blur(4px)는 backdrop-filter: blur(20px)보다 훨씬 저렴합니다. 가우시안 블러 커널은 반경에 따라 증가하여 계산량이 직접적으로 증가합니다. 디자인 의도를 달성하는 가장 작은 흐림 반경을 사용하십시오.

contain: layout paint 사용: contain 속성은 요소와 해당 하위 항목이 시각적으로 자체 포함되어 있음을 브라우저에 알려줍니다. backdrop-filter를 사용하는 요소에서 contain: layout paint는 다시 칠해지는 표면을 줄일 수 있습니다.

견고한 폴백 제공: backdrop-filter가 너무 비싸거나 지원되지 않는 장치 및 브라우저에 견고하고 불투명한 배경을 제공하려면 @supports를 사용하십시오.

.glass-panel {
  background: rgba(255, 255, 255, 0.9); /* Fallback */
}

@supports (backdrop-filter: blur(1px)) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
  }
}

GPU 가속 기술

웹 컨텍스트에서 "GPU 가속"은 렌더링 작업을 CPU 기반 페인트 파이프라인에서 GPU 컴포지터로 이동하는 것을 의미합니다. GPU는 픽셀 배열을 처리하는 당혹스러울 정도로 병렬 작업에 최적화되어 있습니다. GPU는 레이어를 합성하고 CPU 페인트 파이프라인보다 몇 배 더 빠르게 간단한 변환을 적용할 수 있습니다.

레이어 승격 작동 방식

브라우저가 요소에 자체 컴포지터 레이어가 필요하다고 결정하면 다음을 수행합니다. 1. 요소의 페인팅된 콘텐츠를 GPU 텍스처(GPU 메모리의 비트맵)로 래스터화합니다. 2. 후속 프레임에서 다시 래스터화하지 않고 주어진 위치와 불투명도에서 해당 텍스처를 합성하도록 GPU에 지시합니다.

안정적인 콘텐츠를 위해 페인트 비용을 한 번만 지불한다는 의미입니다. 애니메이션 콘텐츠(변환, 불투명도)의 경우 각 프레임에서 CPU 페인트 활동 없이 애니메이션이 진행될 수 있음을 의미합니다.

레이어 승격 트리거

브라우저는 다음을 감지하면 자동으로 요소를 컴포지터 레이어로 승격합니다. - CSS transform 애니메이션 또는 전환 - CSS opacity 애니메이션 또는 전환 - position: fixed 또는 position: sticky 요소(일부 브라우저의 경우) - will-change: transform 또는 will-change: opacity가 선언된 요소

will-change를 사용한 수동 승격:

/* Hint that this element will animate */
.animated-card {
  will-change: transform, opacity;
}

애니메이션이 적용되는 요소에만 will-change를 사용하세요. 이를 전역적으로 적용하면(예: * { will-change: transform }) 모든 요소에 대해 GPU 메모리를 사용하므로 비생산적이며 메모리가 부족한 장치에 충돌이 발생할 수 있습니다.

변환 및 불투명도 규칙

CSS 색상 및 시각 효과 애니메이션에 대한 범용 GPU 성능 규칙: transform 및 opacity에만 애니메이션을 적용합니다. 두 속성 모두 모든 주요 브라우저에서 합성기 전용 코드 경로를 보장합니다. 색상, 배경, 그림자 및 필터를 포함한 다른 모든 항목에는 각 프레임에 CPU 페인트가 필요합니다.

디자인에서 마우스 오버 시 색상 전환을 요구하는 경우(예: 버튼이 #3B82F6에서 #2563EB로 변경됨) 색상을 변경하는 단일 요소의 CPU 페인트 비용은 무시할 수 있습니다. 한 페이지에 있는 30개의 카드가 스크롤 시 상자 그림자를 동시에 변경하면 누적 CPU 비용이 표시됩니다. 그에 따라 디자인하십시오.

실제 페인트 성능 측정

브라우저 DevTools의 성능 탭은 그리기 작업을 기록합니다. 사용자 상호 작용이나 애니메이션을 기록한 다음 "페인트" 및 "복합 레이어" 작업에 대한 프레임 분석을 검사합니다. Flame 차트에서 녹색으로 표시된 작업은 합성기 작업(저렴함)입니다. "페인트" 레이블이 있는 녹색 작업은 CPU 페인트 작업입니다(더 비쌉니다). 애니메이션 중에 "페인트" 작업이 나타나는 경우 렌더링 패널의 "페인트 깜박임" 오버레이를 사용하여 해당 작업을 트리거하는 요소를 조사하세요.

주요 내용

• 브라우저 렌더링 파이프라인은 스타일 재계산 → 레이아웃 → 페인트 → 합성입니다. 색상 속성은 페인트 단계에 영향을 미칩니다. transform 및 opacity만 애니메이션 중에 합성 단계를 유지할 수 있습니다.
• 그라디언트, 상자 그림자 또는 색상 애니메이션은 매 프레임마다 CPU를 강제로 다시 칠하게 합니다. 저전력 하드웨어에서는 이로 인해 버벅거림이 발생합니다. 해결 방법은 대신 의사 요소에서 transform에 애니메이션을 적용하는 것입니다.
• 박스-그림자 비용은 흐림 반경, 확산, 요소 크기 및 그림자 수에 따라 달라집니다. 성능에 민감한 호버 효과의 대안으로 의사 요소 그라데이션을 사용하세요.
• CSS filter: blur()는 CSS에서 가장 비용이 많이 드는 작업 중 하나입니다. 이는 흐림 반경에 비례하는 영역의 모든 픽셀을 처리합니다. 명시적인 레이어 승격 및 포함 전략을 통해서만 애니메이션을 적용하세요.
• backdrop-filter는 filter보다 훨씬 비쌉니다. 전체 배경을 다시 렌더링해야 합니다. 동시 배경 필터 요소 수를 제한하고 흐림 반경을 설계에서 허용하는 한 작게 유지하십시오. 견고한 배경 폴백을 제공합니다.
• will-change: transform를 사용하여 요소를 애니메이션화하기 전에 GPU 컴포지터 레이어로 승격합니다. 그러나 각 레이어가 GPU 메모리를 소비하므로 드물게 사용합니다.
• ColorFYI의 Gradient Generator를 사용하여 CSS 그래디언트 코드를 작성한 다음 의사 요소 변환 기술로 그래디언트 애니메이션을 구현하여 합성 단계에서 유지합니다.
• 최적화 전 측정: Chrome 또는 Firefox DevTools의 성능 패널을 사용하여 코드를 변경하기 전에 실제로 페인트 비용이 존재하는 위치를 확인하세요.