이징

화면 요소를 움직일 때 가장 손이 덜 가는 방법은 속도를 처음부터 끝까지 같게 두는 것입니다. 그렇게 만든 움직임은 기계가 물건을 밀어 옮기는 것처럼 보입니다. 현실의 물체는 출발할 때 천천히 붙었다가 멈출 때 서서히 잦아드는데, 속도가 일정한 움직임에는 그 시작과 끝이 없습니다.

페이지덱에서 민서가 서랍이 밀려 나오는 움직임을 두 가지로 만들어 나란히 보여 준 적이 있습니다. 하나는 속도를 일정하게 뒀고 다른 하나는 빨리 출발해 천천히 멈추게 했습니다. 참가자 다섯 명이 모두 뒤쪽을 더 빠르다고 답했는데 두 움직임에 준 시간은 같았습니다. 값이 아니라 곡선이 체감 속도를 만든 것입니다.

이징은 시간과 별개로 그 시간 안의 속도 변화를 정하는 값입니다. 얼마나 오래 움직일지와 어떻게 움직일지를 나눠 적어 두는 셈입니다.

정해진 시간을 처음부터 끝까지로 두고, 그 안에서 언제 빠르고 언제 느릴지를 곡선으로 적습니다. 실무에서는 이름이 붙은 몇 가지를 돌려 씁니다.

1. 화면에 들어오는 것에는 ease-out을 씁니다. 빨리 출발해 천천히 멈추는 곡선이라, 나타나는 순간이 즉각적으로 느껴지면서 멈출 때는 부드럽습니다.
2. 화면에서 나가는 것에는 ease-in을 씁니다. 천천히 출발해 빠르게 사라집니다. 이미 볼 일이 끝난 것을 오래 붙잡아 둘 까닭이 없습니다.
3. 화면 안에서 자리만 옮기는 것에는 ease-in-out을 씁니다. 양쪽 끝이 다 부드러워서 이동하는 도중이 눈에 남습니다.
4. 속도가 일정한 linear는 진행률 표시나 계속 도는 표시처럼 기계적인 움직임에만 씁니다. 사람이 만지는 요소에는 쓰지 않습니다.
5. 곡선의 종류를 늘리지 않습니다. 셋을 정해 두고 어디에 무엇을 쓸지 규칙으로 적어 두는 쪽이 제품 전체의 인상을 고르게 만듭니다.

시간과 곡선 대신 무게나 뻣뻣함 같은 물리값으로 움직임을 기술하는 방법도 있습니다. 스프링 애니메이션이 그쪽이고, 끌다가 손을 놓는 동작처럼 도중에 목표가 바뀌는 자리에 맞습니다.

"여기는 속도가 일정해서 기계가 미는 것처럼 보여요. 들어오는 곡선으로 바꿉시다."

같은 시간에도 곡선을 바꾸면 인상이 달라진다는 말입니다.

"열 때랑 닫을 때 같은 곡선을 쓰고 있어요. 닫는 쪽은 나가는 곡선으로 가야 합니다."

방향에 따라 곡선이 갈린다는 지적입니다.

"곡선을 새로 만들지 말고 정해 둔 셋 중에서 고르세요."

값의 종류를 늘리지 말라는 요청입니다.

민서는 곡선 세 개와 각각을 쓰는 자리를 문서에 적어 두고 태오는 구현할 때 그 이름을 그대로 가져다 썼습니다. 화면마다 손으로 숫자를 넣던 일이 사라지고, 같은 시간인데 전보다 빠르게 느껴진다는 말이 팀 안에서 나왔습니다.