transform vs position을 활용한 위치 변경

답변 확인

• 위치를 동적으로 변경할 때 transform과 position 중 어떤 것을 사용할지는 목적과 성능 최적화에 따라 달라짐

1. transform: translate()를 사용할 경우

📌 장점

✅ 성능 최적화 (GPU 가속)

• transform: translate()는 GPU가속을 활용하여 부드러운 애니메이션을 제공
• position, top, left 변경보다 리플로우 (Reflow)와 리페인트(Repaint)를 최소화 → 렌더링 성능이 더 우수

✅ 레이아웃에 영향을 주지 않음

• transform: translate() 는 요소의 위치만 변경하고 레이아웃을 유지
• 즉, position: absolute나 relative 처럼 다른 요소에 영향을 주지 않음

✅ 부드러운 애니메이션 가능

• transform은 requestAnimationFrame과 함께 사용하면 매우 부드러운 모션 구현 가능
• transition 또는 animation과 함께 사용하면 프레임 드롭 없이 자연스러운 애니메이션 적용

❌ 단점

🚫 요소의 실제 위치(getBoundingClientRect)는 변경되지 않음

• translate() 는 화면상 위치만 변경하고, 실제 DOM에서 요소의 위치는 그대로 유지 됨
• 따라서 스크롤 위치 기반 계산이 필요할 때 불편할 수 있음

2. position: absolute / relative를 사용할 경우

📌 장점

DOM의 실체 위치를 변경

• top, left 값이 변경되면 실제 위치도 변경되므로, 클릭 이벤트나 다른 요소와의 관계를 정확히 반영
• 예를 들어, 툴팁이나 모달 위치를 조정할 때 position을 이용하면 정확한 위치 보장 가능

✅ 스크롤과 관계된 동적 위치 조정에 유용

• transform은 요소의 원래 위치를 유지한 채 이동하지만, position: absolute는 스크롤이 발생할 때 정확한 위치를 반영
• 예를 들어, 스크롤 이벤트에 따라 UI 요소를 조정해야 할 때 유리

❌ 단점

🚫 레이아웃 변경이 발생하여 성능 저하 가능

• top, left 값을 변경하면 브라우저가 Reflow(레이아웃 재계산) 를 수행 → 성능 저하 발생 가능
• 특히 많은 요소가 포함된 레이아웃에서 position을 남발하면 성능 저하

🚫 애니메이션 성능이 transform보다 떨어짐

• position 변경 시 Reflow가 발생하여 부드러운 애니메이션이 어려움
• transform과 다르게 transition을 적용해도 부드럽지 않을 수 있음

🔹 결론

사용 목적	추천 방식
부드러운 애니메이션이 필요할 때	transform: translate() ✅
성능 최적화가 중요한 경우	transform: translate() ✅
스크롤에 따라 정확한 위치를 조정할 때	position: absolute ✅
요소의 실제 위치를 변경해야 할 때	position: absolute / relative ✅
레이아웃을 유지하면서 위치만 이동할 때	transform: translate() ✅

🛠️ 결론적으로

• 애니메이션이 포함된 동적 위치 변경 → transform: translate() ✅
• 레이아웃을 고려한 위치 변경 → position: absolute / relative ✅
• 스크롤을 고려한 위치 조정 → position: absolute ✅

👉 애니메이션 및 성능 최적화를 고려할 경우 transform을 선호하는 것이 일반적

👉 정확한 위치 계산이 필요한 경우 position을 사용해야 함

📚 참고 자료

• [10분 테코톡] 체프의 브라우저 렌더링
• [위니북스] translate vs position
• [마이구미의 HelloWorld] translate() vs positioning 비교