GPU 가속(합성 레이어 분리)

transform, will-change, opacity 같은 속성을 썼더니 갑자기 애니메이션이 부드러워지는 것을 쉽게 확인할 수 있을 것이다.
이것은 브라우저가 GPU 가속을 써줬기 때문이다.

GPU 가속이란?

브라우저가 일부 화면 그리기 작업을 CPU 대신 GPU(그래픽 카드)에 맡겨서애니메이션을 더 부드럽게 만드는 최적화 기법

• GPU는 그래픽 연산에 특화되어 있어 transform, opacity, filter 같은 시각적 속성을 빠르게 처리할 수 있다.
• 이때 브라우저는 해당 요소를 합성 레이어(Compositing Layer)라는 별도 층으로 분리

왜 브라우저는 레이어를 나눌까?

보통 웹페이지는 모든 요소를 한 번에 그리는 게 아니라, 다음과 같은 3단계 렌더링 과정을 거친다.

• 1단계 Layout: 요소 위치와 크기를 계산
• 2단계 Paint: 요소를 픽셀로 그림
• 3단계 Composite: 각각의 요소를 합쳐 최종 화면을 구성함

하지만 transform, opacity, will-change 같은 속성 같이 쓸 경우

• 브라우저는 해당 돔이 자주 변할 것 같으니 따로 레이어 만들어 GPU로 처리하려 한다.
• 이렇게 분리된 레이어는 전체 페이지를 다시 그릴 필요 없이 해당 레이어만 빠르게 변경 가능(성능 향상)

GPU 레이어를 유발하는 속성

속성/상황	GPU 가속 유도 여부	설명
transform (scale, translate)	강하게 유도	대표적인 GPU 가속 속성
opacity	유도	투명도 변화
will-change: transform	사전 예약	“이거 곧 바뀔 거야”라고 미리 알려줌
filter, backdrop-filter	유도	흐림/명암 등 필터
video, canvas, iframe	유도	자체적으로 레이어 분리 필요
position: fixed + z-index	조건부 유발	뷰포트 고정 + z-index 높으면 유발 가능

GPU 가속의 단점

아무 요소나 GPU로 넘기면 안 된다.

• 너무 많은 GPU 레이어: 메모리 낭비 + 성능 저하
• 레이어 분리 타이밍 이슈: 깜빡임, 플래시 현상 등 시각적 부작용
• 디버깅 어려움: 어떤 요소가 레이어로 분리됐는지 명확히 보기 어려움

디버깅 방법 (Chrome DevTools)

• 1. F12 → Rendering 탭 켜기

• 2. 아래 옵션 체크:

  • Show composited layer borders
  • Paint flashing

• 테두리에 노란색/초록색 선이 보이면 GPU 레이어가 분리된 상태

권장 전략

• transform 애니메이션: GPU 가속 예상, 적극 활용 가능
• 작은 아이콘에 will-change: 오히려 리소스 낭비
• 큰 박스가 깜빡임 발생 시:
  • overflow-hidden 추가: 애니메이션 중 요소가 부모의 경계를 넘는 걸 잘라내기 위함
  • will-change 제거: 불필요하게 GPU 레이어를 분리해서 생기는 깜빡임, 플래시 현상 방지