CSS transform과 transition 성능 차이 - GPU 가속으로 애니메이션 버벅거림 100% 해결

웹 애니메이션을 구현할 때 개발자들은 보통 margin이나 top 같은 위치 속성으로 요소를 움직인다. 다만 대부분의 경우 이렇게 하면 프레임이 떨어지고 버벅거린다. 원인은 단순하다. 브라우저가 매 프레임마다 레이아웃을 다시 계산해야 하기 때문이다. 이번에는 CSS transform과 transition의 정확한 차이가 뭔지, 왜 transform이 성능상 훨씬 우월한지, 실제 코드로 어떻게 적용하는지 완벽하게 정리해서 소개하겠다.

웹 페이지가 화면에 표시되는 과정은 여러 단계를 거친다. HTML을 파싱해서 DOM 트리를 만들고, CSS를 적용해서 스타일을 계산하고, 요소들의 레이아웃을 결정하고, 픽셀을 그리고, 여러 레이어를 합성한다. 이 전체 과정을 브라우저 렌더링 파이프라인이라고 부른다.

margin이나 top 같은 속성을 바꾸면 브라우저는 전체 파이프라인을 다시 돌린다. 레이아웃을 다시 계산해야 하기 때문이다. 이걸 reflow(리플로우)라고 부르고, 매우 비용이 크다. 반면 transform을 사용하면 레이아웃 계산 단계를 건너뛰고 합성 단계로 바로 간다. GPU를 활용해서 변환을 처리하므로 CPU 부하도 훨씬 낮다.

실제로 두 방식이 어떻게 다르게 동작하는지 코드로 보자.

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin-left: 0;
  transition: margin-left 0.5s ease;
}

.box:hover {
  margin-left: 300px;
}

이 코드는 호버할 때마다 box를 오른쪽으로 이동시킨다. 문제는 매 프레임마다 페이지의 전체 레이아웃을 다시 계산한다는 것이다. margin 값이 바뀌면 그 요소와 그 뒤에 있는 모든 요소들의 위치를 다시 계산해야 한다. 복잡한 페이지에서는 이것이 심각한 성능 저하를 초래한다.

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: translateX(0);
  transition: transform 0.5s ease;
}

.box:hover {
  transform: translateX(300px);
}

transform을 사용하면 브라우저는 요소를 새로운 레이어로 승격시키고 GPU를 사용해서 변환을 처리한다. 레이아웃 재계산이 발생하지 않으므로 훨씬 부드럽고 빠르다. 복잡한 페이지에서도 성능 저하가 거의 없다.

transform 속성에 적용할 수 있는 함수들을 정리했다.

일반적인 웹 디자인에서 자주 쓰이는 카드 호버 효과를 구현해보자.

<div class="card">
  <img src="image.jpg" alt="카드 이미지">
  <h3>제목</h3>
  <p>설명 텍스트</p>
</div>

.card {
  width: 300px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(0) scale(1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

이 코드는 카드에 마우스를 올리면 약간 위로 올라가면서 살짝 커진다. transform과 box-shadow 변화가 함께 일어나므로 시각적으로 매우 자연스럽다. 중요한 건 transform 변화만으로 전체 애니메이션이 이루어진다는 점이다. 페이지 레이아웃에는 전혀 영향을 주지 않는다.

transition은 속성 변화를 부드럽게 만들어주는 도구다. 시작 상태와 끝 상태만 정의하면 그 사이를 자동으로 채워준다. animation은 더 세밀한 제어가 가능하다. @keyframes를 사용해서 여러 중간 지점을 정의할 수 있고, 반복, 지연, 재생 방향 같은 옵션도 많다.

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.box {
  animation: slideIn 1s ease forwards;
}

이렇게 정의한 애니메이션은 처음에는 화면 왼쪽 밖에서 시작해서 점진적으로 보여지면서 제 위치로 들어온다. 0%, 50%, 100% 각 지점에서 정확히 뭘 해야 할지 정의했으므로 transition보다 훨씬 복잡한 움직임도 구현할 수 있다.

transform이 항상 완벽한 건 아니다. 몇 가지 주의할 점이 있다.

먼저 transform은 새로운 stacking context를 만든다. 이건 z-index 계산에 영향을 줄 수 있다. 또한 will-change 속성을 남용하면 오히려 메모리 사용량이 늘어난다. will-change는 꼭 필요한 요소에만 사용하자.

.box {
  will-change: transform, opacity, width, height, left, top;
}

이렇게 하면 브라우저가 불필요한 최적화를 준비하느라 메모리만 낭비한다.

.box {
  will-change: transform;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.1);
  will-change: auto;
}

필요한 속성만 명시하고, 애니메이션이 끝나면 will-change를 auto로 되돌린다.

복잡한 애니메이션이 많은 페이지에서는 개발자 도구의 Performance 탭으로 측정해보자. Chrome DevTools를 열고 Performance 탭으로 가서 기록(Record) 버튼을 누른 후 애니메이션을 실행한다. 그러면 프레임률, 각 단계의 소요 시간, 병목 구간을 한눈에 볼 수 있다.

60fps를 목표로 하면 각 프레임은 약 16ms 안에 완료되어야 한다. 만약 지속적으로 이를 초과한다면 transform을 사용하지 않은 속성들을 찾아내 수정해야 한다. 또한 큰 이미지나 복잡한 필터(blur, shadow 등)를 함께 애니메이션하면 성능이 급격히 떨어지므로 주의하자.

CSS 애니메이션의 성능은 작은 최적화가 모여서 큰 차이를 만든다는 점을 잊지 말자. margin이나 top 같은 레이아웃 속성 대신 transform을 쓰고, will-change는 필요할 때만 쓰고, 정기적으로 Performance 탭으로 측정한다. 이 세 가지 습관만 가져도 대부분의 웹사이트는 60fps를 유지할 수 있을 것이다. 지금 바로 프로젝트에서 margin 애니메이션을 찾아 transform으로 바꿔보자. 그 차이가 얼마나 극적인지 직접 느껴보면 왜 이걸 권하는지 이해할 수 있을 거다.