트랜지션

화면이 즉시 바뀌면 앞 화면과의 관계가 남지 않습니다. 눌렀다는 사실과 새 화면 사이에 아무것도 없어서 사용자는 두 화면을 이어진 하나로 보지 못합니다.

페이지덱 문서 목록에서 그 일이 있었습니다. 카드를 누르면 문서 화면이 순간적으로 나타났습니다. 문제는 되돌아올 때였습니다. 뒤로 가기를 누르면 목록이 다시 뜨는데 눌렀던 카드를 다시 찾아야 했습니다. 목록이 스무 건이면 눈으로 훑는 시간이 매번 들었습니다.

움직임으로 두 화면을 이으면 관계가 남습니다. 카드가 커지면서 문서 화면이 되는 모습을 보면, 지금 보는 것이 그 카드에서 나왔다는 사실과 뒤로 가면 그 카드로 돌아간다는 사실이 함께 전달됩니다.

바뀌기 전과 후 사이를 움직임으로 잇습니다. 정할 것이 넷입니다.

1. 무엇이 변하는지. 위치와 크기와 투명도 셋으로 대부분을 만듭니다. 카드가 제자리에서 커지며 화면을 채우거나, 오른쪽에서 밀려 들어오는 식입니다.
2. 얼마나 오래. 움직임이 이어지는 시간인 듀레이션은 0.2~0.3초가 보통이고, 면적이 넓을수록 조금 더 깁니다. 0.5초를 넘기면 알려 주려던 것이 기다림으로 바뀝니다.
3. 그 사이의 속도. 속도가 어떻게 변하는지 정한 곡선을 이징이라 합니다. 들어오는 것에는 빨리 출발해 천천히 멈추는 곡선을, 나가는 것에는 천천히 출발해 빨리 사라지는 곡선을 씁니다.
4. 되돌아가는 길. 뒤로 갈 때 반대로 움직여야 관계가 양쪽으로 성립합니다. 나오는 길을 즉시 전환으로 두면 사용자는 어디로 돌아왔는지를 다시 찾습니다.

명세에는 시간만 적지 않고 무엇이 얼마나 움직이는지를 함께 적습니다. 화면 전체가 올라오는 움직임과 카드 하나가 조금 커지는 움직임에 같은 0.25초를 주면, 앞은 급하고 뒤는 늘어져 보입니다.

운영체제의 모션 감소 설정이 켜져 있으면 큰 이동과 확대는 빼고 옅어졌다 나타나는 정도만 남깁니다. 전부 지우면 무엇이 바뀌었는지 알려 주는 기능까지 사라집니다.

"카드에서 문서로 넘어갈 때 트랜지션 넣읍시다. 뒤로 왔을 때 위치를 잃어요."

두 화면의 관계를 움직임으로 남기자는 제안입니다.

"0.6초는 너무 깁니다. 0.25초로 줄이죠."

알려 주는 시간이 기다리는 시간이 됐다는 지적입니다.

"들어가는 건 있는데 나오는 게 없어요."

되돌아가는 움직임이 빠졌다는 말입니다.

페이지덱에서는 민서가 값을 정해 두고 화면마다 새로 고르지 않습니다. 화면이 통째로 바뀌는 자리에 0.25초, 작은 요소가 자리를 옮기는 자리에 0.15초를 씁니다. 태오는 그 값을 한곳에 모아 둡니다. 모션 감소 설정이 켜지면 큰 이동 값만 0에 가깝게 내리는 처리를 한 번에 걸 수 있기 때문입니다.