듀레이션

움직임을 주문하는 말이 자연스럽게였던 시절에는 값이 사람마다 달랐습니다. 화면을 만드는 사람이 그때그때 감으로 넣었고, 명세에는 부드럽게 열린다는 문장만 적혔습니다. 같은 제품 안에서 창이 열리는 시간과 서랍이 밀려 나오는 시간이 세 배씩 벌어지는 일이 그렇게 생깁니다.

페이지덱에서 민서가 화면 열한 개를 훑어 보니 같은 종류의 움직임에 값이 여섯 가지로 들어가 있었습니다. 어떤 창은 0.5초 동안 열려서 기다리는 느낌을 주고, 어떤 창은 0.15초에 끝나 그냥 나타난 것처럼 보였습니다.

듀레이션은 그 시간을 감이 아니라 값으로 적어 두는 자리입니다. 값을 표로 만들어 두면 이 창이 왜 이 속도인지가 논쟁 대상에서 참조 대상으로 바뀝니다.

움직이는 면적과 거리에 비례해 값을 정합니다. 넓게 움직이는 것에는 더 긴 시간을, 제자리에서 살짝 바뀌는 것에는 짧은 시간을 줍니다.

1. 쓸 수 있는 값을 미리 정해 둡니다. 100·200·300·400 네 단계면 대개 충분하고, 그 사이의 250 같은 값은 쓰지 않습니다. 중간값을 허용하면 표가 있어도 값이 다시 흩어집니다.
2. 작은 요소에는 100에서 200을 씁니다. 버튼 색이 바뀌거나 체크 표시가 그려지는 자리이고, 조작에 바로 붙는 마이크로 인터랙션이 여기 해당합니다.
3. 화면 일부가 움직이는 것에는 200에서 300을 씁니다. 서랍이 옆에서 밀려 나오거나 카드가 펼쳐지는 움직임입니다.
4. 화면이 통째로 바뀌는 것에는 300에서 400을 씁니다. 면적이 넓으니 같은 시간을 주면 급하게 지나가 보입니다.
5. 사라지는 쪽은 나타나는 쪽보다 짧게 줍니다. 이미 볼 일이 끝난 것을 오래 보여 줄 까닭이 없습니다.

양쪽 끝에 벽이 있습니다. 0으로 두면 변화가 일어난 과정이 보이지 않아 무엇이 어디서 왔는지 알 수 없고, 500을 넘기면 사람이 기다린다고 느낍니다. 하루에 스무 번 하는 조작이라면 0.5초짜리 움직임이 하루 10초가 됩니다. 움직임을 줄여 달라고 설정해 둔 사용자에게는 이 값을 0에 가깝게 내려 줍니다.

"이 창은 0.5초예요. 300으로 줄입시다. 지금은 열릴 때까지 기다리게 돼요."

시간을 인상이 아니라 값으로 놓고 조정하는 말입니다.

"250으로 넣지 말고 표에 있는 200이나 300 중에서 고르세요."

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

"나갈 때는 들어올 때보다 짧게 주세요. 이미 볼 일이 끝난 화면이에요."

들어오는 움직임과 나가는 움직임의 목적이 다르다는 지적입니다.

민서는 네 단계 표를 만들고 화면 열한 개의 값을 거기에 맞췄습니다. 그 뒤로 이 움직임이 느린지를 두고 오가던 이야기가 이 자리는 어느 단계인지 확인하는 일로 바뀌었습니다.