브라우저 렌더링 과정에서 reflow와 repaint는 무엇이 다른가요?

reflow는 요소의 크기나 위치가 바뀌어 레이아웃을 다시 계산하는 과정이고, repaint는 레이아웃은 유지한 채 색상이나 그림자 같은 시각적 표현을 다시 그리는 과정입니다. reflow는 주변 요소에도 영향을 줄 수 있어 일반적으로 더 비용이 큽니다.

핵심 개념

핵심 기준은 레이아웃 재계산과 픽셀 재그리기의 차이입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

웹 성능 최적화에서는 DOM 변경이 렌더링 파이프라인의 어느 단계까지 영향을 주는지 이해해야 합니다. width, height, font-size 같은 변경은 레이아웃을 흔들 수 있고, color나 background 변경은 주로 repaint에 머무를 수 있습니다.

동작 흐름

1. DOM이나 CSSOM 변경이 발생합니다.
2. 크기와 위치 영향이 있으면 layout 단계에서 reflow가 발생합니다.
3. 시각적 스타일을 반영하기 위해 paint 단계가 실행됩니다.
4. 브라우저가 레이어를 합성해 화면에 표시합니다.

실제 예시

element.style.width = '240px'; // reflow 가능성 높음
element.style.color = 'red';   // 주로 repaint

요소의 크기를 바꾸는 작업은 레이아웃 전체에 영향을 줄 수 있고, 색상 변경은 보통 그리기 단계의 비용으로 끝납니다.

실무에서 주의할 점

• 반복문 안에서 레이아웃 읽기와 쓰기를 섞으면 강제 동기 레이아웃이 발생할 수 있습니다.
• 애니메이션은 가능하면 transform, opacity 중심으로 설계하는 것이 좋습니다.
• 성능 문제는 추측보다 브라우저 DevTools Performance 탭으로 확인해야 합니다.

함께 연결해서 보면 좋은 키워드

브라우저, 렌더링, Reflow, Repaint

면접에서 짚으면 좋은 포인트

• 렌더링 파이프라인 중 어느 단계까지 되돌아가는 변경인지 구분해 설명하면 좋습니다.
• 애니메이션은 width/left보다 transform/opacity를 우선 고려하면 layout 비용을 줄일 수 있습니다.

정리

한 줄로 정리하면, reflow는 레이아웃을 다시 계산하는 작업이고 repaint는 시각적 픽셀을 다시 그리는 작업이며, reflow가 보통 더 비쌉니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.