요소 배치 : translate vs position

🔍 translate? position? 요소를 배치하기 위해 어떤 속성을 사용해야 할까? reflow, repaint 과정을 통해 알아보자.

transform: translate과 position은 모두 요소의 위치를 설정하기 위해 사용되는 속성이다. 둘 중 어느 것을 사용하더라도 화면에 나타나는 결과는 같다. 그렇다면 두 속성의 차이는 무엇일까? 그 답은 브라우저 렌더링 과정에 있다.

reflow와 repaint

브라우저 렌더링은 과정을 간략하게 정리하면 HTML 파싱으로 인한 DOM 트리 생성 → CSS 파싱으로 인한 CSSOM 트리 생성 → 두 트리를 토대로한 렌더트리 생성 → 렌더트리 배치(레이아웃)와 렌더트리 그리기(페인트) → 컴포지팅으로 설명할 수 있다.
브라우저는 HTML 구조나 스타일의 변화가 있을 때 레이아웃을 먼저 잡은 후 요소를 꾸미게 된다. 변화가 생기면 렌더 트리를 재생성하고 이를 다시 그리는 작업이 reflow와 repaint이다.

reflow에선 요소의 위치와 크기가 계산 된다. position, width, height, margin, padding, border, display ... 등은 물론 font-family, text-align 등 텍스트 관련 요소가 포함된다.
그 후 순차적으로 repaint가 실행된다. 요소를 꾸미는 시각적인 작업이 진행되는데 background, box-shadow 등이 여기 포함된다. 요소 배치, 크기 등에 계산이 필요 없는 경우 reflow 과정이 생략되고 repaint 과정만 실행되기도 한다.

모든 CSS 속성이 reflow, repaint 과정을 거치는 것은 아니다. transform의 경우 두 과정이 생략되고 사용자 컴퓨터의 GPU를 사용한다. 브라우저의 부담을 덜기 위함인데 애니메이션을 구현 시 계속된 reflow-repaint 작업이 수행될 수 있기 때문이다.

translate, position 선택의 기준

다시 translate와 position으로 돌아가보자. 둘 중 어떤 속성을 활용할 지는 때에 따라 다르다. 정적인 사이트에서 단순히 요소의 위치를 배치하는 작업은 position을 사용해도 reflow-repaint 과정이 반복되지 않는다. 그러나 애니메이션 등 동적으로 요소의 위치를 이동시킬 경우 position을 사용하면 reflow-repaint 과정을 반복하게 되어 성능 이슈가 발생할 수 있다. 따라서 이 과정에는 transform: translate() 등의 속성을 사용해 reflow-repaint 반복에서 벗어나는 방법을 택하는 것이 성능 유지에 좋다.

transform: translate()과 position이 보기에는 같은 역할을 하니 별 생각없이 사용하곤 했다. 브라우저 렌더링 과정에서 둘이 큰 차이를 가지고 있음을 알 수 있었다..! 이번 글에서는 둘 중 어떤 것을 사용해야할까? 에 초점을 맞추었지만 브라우저 렌더링에 대해 좀 더 깊게 공부하고 이해한 내용을 앞서 정리한 URL/IP/PORT 등과 함께 다시 정리하도록 해야겠다!