피드백

물건에는 반응이 딸려 있었습니다. 전등 스위치를 올리면 딸깍 소리와 불빛이 같이 오고, 문손잡이를 돌리면 손끝에 걸리는 느낌이 옵니다. 눌렸는지 안 눌렸는지를 따로 배울 필요가 없었습니다.

화면 위의 버튼에는 그런 것이 없습니다. 소리도 무게도 없고, 설계자가 일부러 만들어 붙이지 않으면 눌러도 아무 일이 일어나지 않은 것처럼 보입니다. 초기 웹에서 가장 흔했던 사고가 여기서 나왔습니다. 결제 버튼을 눌렀는데 화면이 그대로여서 한 번 더 누르고, 결제가 두 번 잡힌 뒤에야 처음 누른 것도 처리되고 있었다는 사실을 알게 되는 장면입니다.

같은 일이 지금도 일어납니다. 문서를 저장하고 표시가 없어 다시 누르는 사람, 파일을 올려놓고 올라가는 중인지 실패한 것인지 몰라 삼 분을 기다리는 사람, 신청서를 넣고 접수됐다는 말이 없어 다음 날 전화하는 사람이 전부 같은 자리에 서 있습니다. 조작은 끝났는데 사람 쪽에는 그 사실이 도착하지 않은 상태입니다.

사람이 무언가를 조작한 뒤 알고 싶어 하는 것은 네 가지이고, 순서가 정해져 있습니다.

1. 받았는가 — 누른 손이 떨어지기 전에 답해야 하는 질문입니다. 버튼이 눌린 모양으로 잠깐 바뀌는 UI 상태 변화가 이 자리를 맡습니다. 요소가 상황에 따라 달라지는 모습을 미리 정해 두는 일인데, 기본 상태만 그려 둔 시안에서는 이 단계가 통째로 빠집니다.
2. 진행 중인가 — 결과가 곧바로 나오지 않을 때 필요합니다. 돌고 있는 표시나 진행률 막대, 내용이 들어올 자리를 회색 뼈대로 먼저 그려 두는 스켈레톤 UI가 이 로딩 상태를 나타냅니다.
3. 끝났는가 — 무엇이 어떻게 됐는지 알립니다. 잠깐 떴다 사라지는 토스트로 충분한 경우도 있고, 결과가 화면에 남아 있어야 하는 경우도 있습니다.
4. 왜 안 됐는가 — 실패했을 때는 실패했다는 사실만으로 부족합니다. 무엇이 문제였고 다음에 무엇을 하면 되는지가 같은 자리에 있어야 합니다. 올리지 못했다는 말만 띄우면 사람은 같은 파일을 다시 올리고, 20메가를 넘어 막혔다고 알리면 파일을 줄여서 다시 옵니다.

시간 기준이 하나 있습니다. 도허티 임계라고 부르는 0.4초인데, 그 안에 답이 오면 사람이 하던 생각을 놓지 않는다는 기준입니다. 0.4초를 넘길 작업이면 2번을 반드시 붙이고, 10초를 넘기면 진행률처럼 얼마나 남았는지까지 보여 줍니다.

세기는 되돌릴 수 있는 정도에 맞춥니다. 자동 저장처럼 되돌릴 일이 없는 동작은 구석에 작은 글씨로 알리고, 문서를 영구히 지우는 것처럼 되돌릴 수 없는 동작은 화면 한가운데서 한 번 더 묻습니다. 이 둘을 바꿔 놓으면 아무 일도 아닌 것에 확인 창이 뜨고 정작 위험한 동작은 조용히 지나갑니다. 확인 창이 잦아지면 사람은 읽지 않고 누르는 습관을 들이고, 그 습관은 진짜 위험한 자리에서도 똑같이 작동합니다.

같은 인터랙션 원리 안에서도 맡는 구간이 다릅니다. 어포던스와 시그니파이어는 누르기 전에 작동하고, 피드백은 누른 다음에 작동합니다. 앞의 둘이 누를 수 있겠다는 짐작을 만든다면 이쪽은 눌렸다는 사실을 확인해 줍니다. 앞이 없으면 사람이 시도하지 않고, 뒤가 없으면 시도한 뒤에 헤맵니다.

실제로 붙는 자리는 네 종류로 모입니다. 버튼과 토글처럼 즉시 끝나는 조작, 입력 칸을 벗어날 때 형식이 맞는지 알려 주는 검증, 업로드와 저장처럼 시간이 걸리는 작업, 그리고 삭제와 결제처럼 되돌리기 어려운 동작입니다. 뒤로 갈수록 반응을 크고 오래 남겨야 합니다. 토글 하나를 켰을 때는 색이 바뀌는 것으로 끝나지만, 결제 버튼을 누른 뒤에는 승인됐다는 문장이 화면에 남고 영수증까지 따라옵니다.

작은 조작에 붙는 짧은 반응만 따로 마이크로 인터랙션이라고 부르기도 합니다. 좋아요를 눌렀을 때 하트가 살짝 커지는 0.2초짜리 움직임이 그것인데, 장식처럼 보여도 실제로 하는 일은 눌렸다는 사실을 전하는 것입니다.

"저장은 되는데 저장됐다는 표시가 없어요. 사용자는 안 된 줄 알고 또 누릅니다."

동작은 맞는데 그 결과가 사람에게 도착하지 않는다는 지적입니다.

"이건 토스트 말고 화면에 남겨 주세요. 지나가면 못 봅니다."

몇 초 뒤 사라지는 알림으로는 부족하고, 사용자가 다시 확인할 수 있어야 하는 결과라는 뜻입니다.

"여기 0.4초 넘어가니까 로딩 표시 하나 넣읍시다."

응답이 늦어지는 구간이라 기다리는 중이라는 신호가 필요하다는 말입니다.

페이지덱의 문서 저장 버튼이 이 이야기가 가장 자주 오가는 자리입니다. 민서가 시안에 기본 상태만 그려 넘겼더니 태오가 구현하면서 눌린 직후와 저장 중과 실패했을 때를 각자 판단해 채웠고, 그 결과 같은 제품 안에서 어떤 화면은 저장 후 토스트가 뜨고 어떤 화면은 아무것도 뜨지 않았습니다.

지금은 네 가지 상태를 시안에 함께 그려 넘깁니다. 늘어난 그림 수만큼 검수에서 되돌아오는 항목이 줄었습니다.

피드백을 알림과 같은 말로 읽는 경우가 가장 많습니다. 눈에 띄는 형태가 토스트라서 그렇게 묶이기 쉽습니다. 하지만 알림은 제품이 먼저 말을 거는 것이고 피드백은 사용자가 건 말에 답하는 것입니다. 이 구분을 놓치면 사용자가 한 일에는 아무 답이 없는 제품이 되고, 사용자가 하지 않은 일에 대한 안내만 자꾸 뜹니다. 저장 버튼에는 아무 반응이 없으면서 새 기능을 소개하는 말풍선은 사흘에 한 번씩 뜨는 제품이 그렇게 만들어집니다.

많을수록 좋다고 읽는 것도 흔합니다. 반응이 있는 편이 없는 편보다 낫다는 생각에서 모든 동작에 표시를 붙이게 됩니다. 그런데 화면에 띄운 것이 열 개가 되면 사람은 열 개를 다 무시합니다. 글자를 하나 지울 때마다 저장됐다는 말이 뜨는 화면에서는 결제 실패 문구도 같은 자리에 같은 모양으로 떠서 그대로 지나갑니다. 사용자가 이미 아는 것에는 조용히 답하고, 모르는 것과 잘못된 것에 자리를 내줍니다.