트랜지션 & 이징

정의

트랜지션은 어떤 값이 A에서 B로 바뀔 때 그 변화를 한순간에 끝내지 않고 시간에 걸쳐 부드럽게 이어 주는 장치입니다. 여기서 정할 것은 크게 두 가지입니다. 하나는 얼마나 오래 걸릴지를 뜻하는 지속 시간(duration)이고, 다른 하나는 그 시간 동안 어떤 리듬으로 움직일지를 뜻하는 이징(easing)입니다. 이징은 처음부터 끝까지 같은 속도로 갈지, 빠르게 출발했다가 서서히 멈출지 같은 '속도의 곡선'을 결정합니다. 이 둘만 잘 다뤄도 화면의 움직임은 훨씬 자연스럽고 정돈되어 보입니다.

왜 중요한가

사람의 눈은 갑자기 툭 바뀌는 것보다 흐름을 따라 이어지는 변화를 훨씬 편하게 받아들입니다. 버튼 색이 순식간에 바뀌면 눈이 놀라지만, 짧은 트랜지션이 끼면 변화가 부드럽게 연결되어 지금 무엇이 달라졌는지 뇌가 따라잡을 시간을 얻습니다. 특히 이징은 움직임의 인상을 좌우합니다. 현실의 물체는 정지 상태에서 서서히 속도를 붙였다가 부드럽게 멈추기 때문에, 그 리듬을 흉내 낸 곡선이 화면에서도 자연스럽게 느껴집니다. 반대로 처음부터 끝까지 속도가 똑같으면 어딘가 기계적이고 뻣뻣한 느낌을 줍니다. 잘 고른 이징은 같은 지속 시간이라도 훨씬 세련된 인상을 만들어 냅니다. 결국 좋은 트랜지션은 화면을 화려하게 만드는 장식이 아니라, 변화를 사용자가 놓치지 않도록 돕는 조용한 배려에 가깝습니다.

흔한 실수

• 지속 시간을 지나치게 길게 잡는 것입니다. 500ms를 넘어가는 움직임이 여기저기 쌓이면 화면 전체가 느려 터진 것처럼 답답하게 느껴지고, 사용자는 다음 동작을 하려고 애니메이션이 끝나기를 하염없이 기다려야 합니다. 움직임은 존재를 알릴 만큼만 짧게 두는 편이 대체로 낫습니다.
• 모든 변화에 기본값인 linear나 ease를 아무 고민 없이 그냥 쓰는 것입니다. 상황에 맞는 이징을 골라 주지 않으면 움직임이 밋밋하거나 부자연스러워지고, 특히 요소가 들어올 때와 나갈 때 같은 곡선을 쓰면 어색하게 느껴집니다.
• 한 화면 안에서 트랜지션의 속도와 리듬이 제각각인 것입니다. 어떤 버튼은 빠르고 어떤 카드는 느리게 움직이면 통일감이 사라져, 아무리 개별 움직임이 좋아도 화면 전체가 어수선해 보입니다.

실무 팁

• 대부분의 UI 변화에는 빠르게 출발해 부드럽게 멈추는 ease-out을 기본으로 삼으세요. linear는 로딩 스피너처럼 일정한 속도가 어울리는 곳에만 쓰고, 살짝 튕겨 생동감을 주는 spring 계열은 정말 강조하고 싶은 한두 곳에만 아껴서 쓰면 됩니다.
• 지속 시간은 변화의 크기에 맞추세요. 화면이 크게 진입하는 움직임은 200~300ms, 색이나 그림자가 살짝 바뀌는 작은 변화는 150ms 안팎이 대체로 편안합니다. 이 값을 팀에서 몇 개로 정해 두면 화면마다 리듬이 흔들리지 않습니다.
• 의미 없는 곳까지 전부 움직이게 만들지 마세요. 정말 강조하고 싶은 변화에만 트랜지션을 걸어야 그 움직임이 눈에 들어오고, 나머지는 조용히 두어야 화면이 산만해지지 않습니다.

관련 개념