Composition 단계에서 레이어가 분리되는 경우 vs 그렇지 않은 경우 vs 애매한 경우

[airman5573]

레이어가 분리되는 확실한 경우

• translate3d, translateZ 등 3D 변환
• will-change: transform | opacity | filter
• filter, backdrop-filter, mix-blend-mode, clip-path
• 실제 값이 변하는 opacity/transform 애니메이션·트랜지션

분리되지 않는 기본 케이스

• 정적 opacity
• 값이 1인 scale, rotate
• width, height, background-color 등 레이아웃·페인트 속성
• 합성과 무관한 will-change (예: will-change: width)

애매한 케이스

• 정적 opacity만 있을 때: 레이어 X
• 정적 opacity + translateZ 형제: 레이어 O가 될 수 있음 (스쿼싱 해제)
• 정적 opacity + will-change: opacity: 레이어 O (직접 승격 선언)
• 스코프가 contain: paint/isolation: isolate로 분리되면 외부 승격 영향 차단

DevTools 확인 방법

Chrome Layers 패널에서 레이어 구성 확인.

실험팁

• 각 시나리오를 격리된 스코프(contain: layout paint)로 나눠서 비교.
• 카드에 Layer O / X / ? 표기 + “DevTools에서 확인” 안내.
• 애니메이션, will-change, 강한 합성 트리거를 조합한 예제를 분리해 보여줄 것.

실제예제: airman5573/fe-20s-interview#377