브라우저 렌더링 심화: 합성(Compositing)

개요

현대 브라우저는 60fps 유지와 부드러운 애니메이션 구현을 위해 'Paint' 이후 단계에서 추가 최적화 공정을 수행한다. 레이어 분리(Layering), 래스터화(Rasterization), 합성(Compositing)​이다.

1. 레이어 나누기 (Layering)

브라우저는 전체 화면을 하나의 비트맵으로 그리지 않는다. 대신 여러 개의 레이어(Layer)​로 분리하여 렌더링을 수행한다. 포토샵의 레이어 개념과 매우 흡사하다.

• 왜 나누는가? 특정 요소만 움직이거나 변할 때, 나머지 변하지 않는 부분은 그대로 두고 해당 레이어만 다시 처리하기 위해서다.
• 언제 생성되는가? opacity, video, canvas, position: fixed, transform, will-change 같은 속성이 부여된 요소들은 브라우저가 별도의 compositing layer로 분리할 수 있다.

단, 레이어 수가 지나치게 많아지면 GPU 메모리 사용량이 증가하고 합성 비용이 커질 수 있으므로 무분별한 레이어 생성(will-change 남용)은 오히려 성능에 악영향을 줄 수 있다.

Chrome DevTools에서 레이어 확인하기

Chrome DevTools에서는 현재 페이지가 어떤 요소를 기준으로 레이어가 분리되어 있는지 직접 확인할 수 있다.

DevTools에서 다음 경로로 확인할 수 있다.

DevTools → More tools → Layers

Chrome DevTools 레이어탭 이미지
그러면 현재 페이지의 Compositing Layer 구조를 시각적으로 확인할 수 있다.

왼쪽 패널에서는 레이어 트리 구조를 확인할 수 있으며, 어떤 DOM 요소가 별도의 레이어로 분리되었는지 확인할 수 있다.
가운데 영역에서는 선택한 레이어의 위치와 크기를 시각적으로 확인할 수 있다.

이 기능을 활용하면 다음과 같은 것들을 분석할 수 있다.

• position: fixed 요소가 별도 레이어로 분리되는지
• transform 적용 요소가 compositing layer로 올라가는지
• 레이어 수가 과도하게 생성되지는 않았는지

이러한 분석은 애니메이션 성능 문제나 스크롤 끊김 현상을 디버깅할 때 매우 유용하다.

2. 래스터화 (Rasterization)

페인트 단계에서 생성된 '그리기 명령어(Display List)'들을 실제 픽셀(Pixel) 데이터로 변환하는 과정이다.

• 타일링(Tiling): 레이어가 너무 크면 한꺼번에 픽셀로 바꾸기 힘들다. 브라우저는 레이어를 작은 타일 단위로 쪼개어, 현재 사용자 눈에 보이는 부분부터 우선적으로 픽셀화한다. 사용자가 스크롤을 할 때, 이미 래스터화된 타일은 그대로 두고 **새로 화면에 들어오는 영역의 타일만 우선적으로 래스터화*한다.
• GPU의 활약: 이 방대한 계산 작업은 GPU(그래픽 카드) 가속을 활용하여 처리 속도를 극대화한다.

3. 합성 (Compositing)

여러 레이어를 z-order에 맞게 합성하여 최종 프레임을 만드는 단계다.

• 합성 스레드(Compositor Thread): 이 단계는 메인 스레드와 별개로 동작한다. 덕분에 자바스크립트 실행이 무거워져도(메인 스레드가 바빠도) 스크롤이나 애니메이션이 부드럽게 유지될 수 있는 것이다.
• 최고의 효율: 이미 그려진 레이어의 위치(transform)나 투명도(opacity)만 변경되는 경우, 레이아웃과 페인트를 생략하고 오직 '합성' 단계만 거치므로 성능 부하가 거의 없다.

성능 최적화의 핵심

우리가 렌더링 5단계를 명확히 구분해야 하는 이유는 비용 차이 때문이다.

1. Layout 발생 (가장 비쌈): 요소의 크기가 변하면 주변 요소의 위치까지 다 계산해야 한다. (width, height, top, left 등)
2. Paint 발생 (비쌈): 위치는 그대로지만 색상 등이 변하면 다시 픽셀을 채워 넣어야 한다. (background-color, box-shadow 등)
3. Compositing 발생 (매우 저렴): 이미 그려진 레이어의 위치만 바꾼다. (transform, opacity 등)

최적화 팁: 애니메이션 효과를 줄 때는 top/left 대신 transform을 사용하는 것이 좋다. 레이아웃과 페인트를 건너뛰고 바로 합성 단계로 직행하기 때문이다.

top / left
→ Layout → Paint → Composite

transform / opacity
→ Composite only

정리

• CSS 속성별 영향 범위

속성	Layout	Paint	Composite
width, height, top	✅	✅	✅
color, background	❌	✅	✅
transform, opacity	❌	❌	✅

브라우저 렌더링은 성능 극대화를 위한 전략적 최적화 공정이다. 레이어 분리와 합성의 원리를 활용하면 애니메이션과 스크롤 성능을 효과적으로 제어할 수 있으며, 이는 곧 사용자 경험(UX) 품질로 직결된다.