translate() vs positioning 비교 :: 마이구미

이 글은 css의 translate()와 top/left 와 같은 positioning을 비교한다.

지금까지 요소를 이동시킬 때, 두가지 방식을 활용하고 있다.

두가지 방식은 성격자체가 다르기 때문에, 차이점을 분명히 인지해야한다.

결론부터 말하고자 한다면, 이동에 있어서는, translate()를 사용하는 것이 효율적이다.

참고한 글을 통해 예제를 확인할 수 있다.

Why moving elements with translate is better than position abs top/left?

 

transform 속성의 경우에는 좌표 공간을 변형하여 다른 요소에 영향을 미치지 않고 위치를 변경하는 것이고,

position의 경우에는 말 그대로, 위치시킨다는 의미로 생각하면 된다.

차이점은 다음 그림을 통해 설명 가능하다.

 

 

위 - transform - translate

아래 - position - top/left

 

그림에서 보다시피 차이점이 볼 수 있다.

위 그림은 먼저 이해해야할 부분이 무엇인지 말하기 위해서 보여줬다.

 

어떤 목적을 위해 존재하는 것인가?

 

그 답은 참고 자료에서 언급된 다음 문장으로 가능하다.

 

"Don’t confuse positioning with design-y motion."

 

디자인 모션과 포지셔닝을 혼동하지 말라는 것이다.

즉, top/left은 엘리먼트를 특정 위치에 위치시키기 위한 포지셔닝의 성격이다.

움직임이 필요한 모션의 경우는 translate와의 관계가 성립한다.

 

목적부터 다르다는 것은 이해했다. 그렇다면 성능 차이도 존재하는가?

 

그렇다.

실제로 하나의 요소를 이동하거나, 단순한 상황에서는 눈으로 보기에는 크게 차이점을 느끼지 못한다.

하지만 크롬의 개발자 도구를 이용해서 내부를 통해 차이점을 알 수 있다. (개발자 도구 사용법)

 

왼쪽 - top/left - https://codepen.io/chriscoyier/full/pBCax

오른쪽 - translate - https://codepen.io/chriscoyier/full/kyctm

 

 

 

보다시피 Rendering, Painting 존재의 차이점을 볼 수 있다. (참고 - 웹 브라우저 동작 순서)

포지셔닝 같은 경우는 다른 엘리먼트에 영향을 끼치기 때문에 당연히 랜더링과 페인팅이 발생하게 된다.

그로인해, 상황이 무거워질수록 CPU 계산이 늘어나기 때문에, 그 과정에서 속도 저하 및 끊김을 경험하게 된다.

우리는 성능 차이가 클 것이라고 추측할 수 있다.

 

실제로 무거운 상황일 경우는 눈으로도 차이를 느낄 수 있다.

top/left - https://codepen.io/paulirish/full/nkwKs

translate - https://codepen.io/paulirish/full/LsxyF

 

반대로 다음과 같은 속성들은 GPU에서 처리된다.

• opacity
• translate
• rotate
• scale

애니메이션의 경우에는 transform 이용하라는 것인가?

 

그렇다.

CPU의 무거운 짐을 적합한 GPU에서 처리하기 때문에, 애니메이션의 경우에는 transform을 활용하면 효율적이다.