마이크로 인터랙션

화면이 조용하면 사용자는 자기 손이 닿았는지를 확인할 방법이 없습니다. 눌렀는데 아무것도 변하지 않으면 사람은 대개 한 번 더 누릅니다.

페이지덱에서 실제로 그 일이 있었습니다. 공유 버튼에 눌린 표시가 없어서 같은 문서가 두 번 공유됐습니다. 받은 쪽에는 같은 알림이 두 개 갔고, 문의가 들어오고 나서야 원인을 찾았습니다. 버튼은 제대로 동작했고 빠진 것은 눌렸다는 신호뿐이었습니다.

이 신호를 피드백이라고 부릅니다. 지금 무슨 일이 벌어졌는지를 사용자에게 알려 주는 모든 반응을 가리키는데, 조작 하나에 붙는 가장 작은 단위가 마이크로 인터랙션입니다.

조작이 닿았다는 사실을 그 자리에서 알려 주는 일을 합니다. 하트 버튼을 누르면 살짝 커졌다 제자리로 돌아오고, 토글 스위치를 켜면 동그라미가 반대편으로 미끄러집니다.

정하는 것은 셋입니다. 무엇이 변하는지, 얼마나 오래 변하는지, 그 사이의 속도가 어떻게 바뀌는지입니다. 변하는 것은 크기와 색과 위치와 투명도 가운데 하나나 둘이면 충분합니다. 넷을 한꺼번에 움직이면 작은 반응이 연출처럼 보입니다.

길이를 정하는 값은 듀레이션이고 이 자리에서는 100에서 200밀리초를 씁니다. 짧은 이유가 있습니다. 400밀리초를 주면 누른 뒤에 반응을 지켜보는 시간이 생겨서, 알려 주려던 것이 기다림으로 바뀝니다. 하루에 스무 번 누르는 버튼이라면 그 차이가 하루 몇 초로 쌓입니다.

속도가 변하는 모양은 이징이 정합니다. 속도를 처음부터 끝까지 일정하게 두면 기계가 미는 것처럼 보입니다. 현실의 물체는 멈출 때 천천히 멈추기 때문입니다.

빼야 하는 경우도 있습니다. 모션 감소 설정을 켠 사용자에게는 튀거나 크게 움직이는 반응을 빼고 색이 바뀌는 정도만 남깁니다. 알려 주는 기능은 지키면서 어지럼을 일으키는 움직임만 걷어 내는 쪽입니다.

"이 버튼 눌렸는지 모르겠어요. 100밀리초라도 반응을 붙입시다."

신호가 아예 없어서 사용자가 두 번 누를 수 있다는 지적입니다.

"400밀리초는 길어요. 알려 주려던 게 기다림이 됐습니다."

길이가 이 단위의 목적을 넘어섰다는 뜻입니다.

"모션 감소가 켜져 있으면 튀는 움직임은 빼고 색 변화만 남깁시다."

같은 신호를 움직임 없이 전달하자는 제안입니다.

태오는 공유 버튼에 눌린 상태를 더하면서 값을 시스템에 이미 있던 짧은 시간으로 잡았습니다. 민서가 크기 변화와 색 변화 중 색만 남기자고 했고, 같은 문서가 두 번 공유되는 문의는 그 뒤로 들어오지 않았습니다.