트랜스폼

정의

트랜스폼은 요소의 실제 자리는 그대로 둔 채, 겉으로 보이는 모습만 옮기고 키우고 돌리는 기능입니다. 대표적으로 위치를 옮기는 translate(이동), 크기를 바꾸는 scale(확대), 각도를 돌리는 rotate(회전)가 있습니다. 여기서 핵심은 '실제 자리는 그대로'라는 점입니다. 트랜스폼으로 요소를 오른쪽으로 밀거나 두 배로 키워도, 옆에 있는 요소들은 원래 위치에 가만히 있습니다. 즉 화면에는 움직여 보이지만 레이아웃 계산상으로는 아무 일도 일어나지 않은 것처럼 처리됩니다. 이 특성 덕분에 트랜스폼은 움직임을 만들 때 가장 자주 쓰는 도구가 됩니다.

왜 중요한가

화면 요소를 움직이는 방법이 트랜스폼만 있는 것은 아닙니다. left나 top 같은 위치 속성을 바꿔도 요소는 이동합니다. 하지만 이 방식은 브라우저가 매 순간 다른 요소들의 위치까지 다시 계산하게 만들어, 움직임이 끊기거나 버벅이기 쉽습니다. 반면 트랜스폼은 레이아웃을 건드리지 않고 주로 GPU가 그림만 따로 옮겨 주기 때문에 훨씬 부드럽고 가볍게 처리됩니다. 그래서 실무의 움직임은 대부분 트랜스폼으로 만듭니다. 예를 들어 카드에 마우스를 올렸을 때 살짝 떠오르는 효과는 translateY로 위로 조금 올려 주는 것이고, 눌리는 느낌은 scale로 아주 조금 줄여 주는 것입니다. 성능이 좋으니 저사양 기기나 모바일에서도 안정적으로 동작해, 사용자 경험을 두루 지켜 줍니다. 그래서 움직임을 만들 때 어떤 속성을 바꿀지 고민된다면, 먼저 트랜스폼으로 표현할 수 있는지부터 떠올려 보는 습관이 큰 도움이 됩니다.

흔한 실수

• 움직임을 left와 top으로 만드는 것입니다. 정지 상태의 위치 조정에는 괜찮지만, 이 값을 애니메이션으로 계속 바꾸면 화면이 버벅이기 쉽습니다. 이동은 translate로 만드는 편이 대부분 더 부드럽습니다.
• scale로 요소를 키운 뒤 글자가 흐릿해지는 것을 놓치는 경우입니다. 트랜스폼은 이미 그려진 그림을 늘리는 방식이라, 크게 확대하면 텍스트나 아이콘이 뿌옇게 번져 보일 수 있습니다.
• 트랜스폼을 걸 요소의 기준점을 신경 쓰지 않는 것입니다. 회전이나 확대는 어느 지점을 중심으로 삼느냐에 따라 결과가 완전히 달라져서, 의도와 다른 방향으로 튀어 나가기 쉽습니다.

실무 팁

• 움직임은 되도록 트랜스폼으로 만드세요. 특히 호버 시 살짝 위로 뜨는 효과는 translateY로, 눌리는 느낌은 아주 작은 scale로 표현하면 left나 top 같은 위치 속성보다 훨씬 부드럽고 성능도 좋습니다. 이동과 크기 변화가 얽힌 복잡한 움직임일수록 이 차이가 크게 벌어집니다.
• 트랜스폼은 대체로 트랜지션과 짝을 이룹니다. 트랜스폼이 바꿀 목표 모습을 정하고, 트랜지션이 그 변화를 시간에 걸쳐 부드럽게 이어 준다고 생각하면 둘의 역할이 선명하게 나뉩니다.
• 값은 아주 작게 시작하세요. 호버에 translateY로 몇 픽셀만 올려도 충분히 떠오르는 느낌이 나고, scale은 1에서 살짝만 벗어나야 자연스럽습니다. 과하게 키우거나 돌리면 장난스러워 보이기 쉽습니다.

관련 개념