사람들은 저런 거 잘 안 읽어

설문 화면의 배너 문구를 다듬고 있을 때 한 말이 이 글의 제목이다. 사람들은 저런 거 잘 안 읽어, 습관대로 바로 다음 누르지. 그 말을 하고 나서 문구를 더 다듬는 대신 버튼의 자리를 바꿨고, 그 김에 화면을 만들 때 지킬 규칙을 밖에서 들여왔다.

배경이 조금 필요하다. 내가 운영하는 오픽 모의고사 앱은 시험 전에 배경 설문을 받는다. 실제 시험처럼 직업, 거주 형태, 여가, 운동 같은 항목을 고르고 그 선택에 맞춰 문항이 나온다. 9월 중순에 이 설문을 실제 시험의 구조에 맞게 재편했는데, 실제 시험은 합계 12개 이상을 고르게 하고 우리 앱은 그동안 상한만 걸고 있었다. 그래서 저장된 설문이 12개에 못 미치게 된 사용자가 생겼고, 세어 보니 116명이었다. 그 사람들에게는 새로 고르는 편이 좋다.

문구로 유도하려 했다

설문 시작 화면에는 버튼이 두 개 있다. 저장된 설문으로 계속하기와 새로 선택하기. 저장분이 있는 사용자에게는 계속하기가 주버튼이었다. 당연한 배치다. 매번 다시 고르게 할 이유가 없으니까.

12개 미만인 사용자에게는 그 위에 배너를 하나 얹었다. 저장된 선택이 실제 시험 기준보다 적으니 새로 고르는 것을 권한다는 안내다. 그리고 그 문구를 다듬는 쪽으로 가고 있었다. 초안은 에이전트가 만들고 나는 보고 있었다.

그 초안을 보다가 내 입에서 나온 말이 위의 그 말이다. 나 자신이 앱을 쓸 때를 생각해 보면 안다. 익숙한 화면에서는 글자를 읽지 않고 버튼의 위치를 누른다. 배너가 아무리 잘 쓰여 있어도 그 아래의 주버튼은 여전히 계속하기였고, 손가락은 거기로 간다. 세 화면을 나란히 놓으면 이렇다. 실제 화면을 코드에서 그대로 옮겨 다시 그렸고, 오른쪽 위의 토글을 켜면 습관이 누르는 자리가 표시된다.

문구를 고치는 방향은 애초에 이길 수 없는 구조였다. 안내가 아무리 좋아져도 습관이 향하는 자리는 그대로이기 때문이다. 그래서 문구 대신 자리를 바꿨다. 저장된 설문이 12개 미만이면 새로 선택하기를 주버튼으로 올리고 계속하기를 보조 버튼으로 내렸다. 새로 선택하기에는 괄호로 권장이라고만 붙였다. 이제 문구가 일을 하는 게 아니다. 습관대로 눌러도 권장 동작이 실행된다.

규칙을 들여왔다

이 판단은 새로운 게 아니다. Rauno Freiberg 의 Invisible Details of Interaction Design 과 Devouring Details 에 같은 얘기가 있다. 습관은 설계 대상이고, 권장 동작이 기본 자리에 있어야 한다는 것. 이 블로그의 디자인 규칙도 같은 두 사이트에서 값을 재서 만든 것이라 모르던 글은 아니었고, 앱에만 적용을 안 하고 있었던 셈이다.

그래서 그 직후에 그 두 글을 이 앱의 규칙으로 삼기로 했다. 원문 요약에 그치지 않고 우리 화면의 어디에 해당하는지를 붙여서 문서로 만들고, UI 를 만질 때 체크리스트로 쓰도록 프로젝트 지침에 걸었다. 규칙은 열 개인데 여기서 전부 늘어놓지는 않겠다. 이 글에서 필요한 건 그 규칙으로 우리 화면을 다시 봤을 때 뭐가 보였는가다.

빈도가 기준이었다

제일 먼저 걸린 건 애니메이션이었다. 규칙은 이렇다. 자주 일어나는 인터랙션에서는 연출을 뺀다. 한 번 볼 때 좋은 전환이라도 반복되면 지연일 뿐이다.

우리 앱에서 제일 자주 일어나는 인터랙션은 시험 중 문항 전환이다. 시험 한 번에 12에서 15번이다. 그리고 문항마다 640ms 짜리 슬라이드 업 연출이 재생되고 있었다.

640ms 에 15문항이면 시험 한 번에 9.6초를 연출을 보는 데 쓴다. 그 연출은 첫 문항에서는 괜찮았을 것이고 아마 그래서 들어갔을 텐데, 열다섯 번째에는 기다림이다. 반대로 홈 대시보드는 하루에 몇 번 안 들어가니 거기서는 연출이 허용된다. 좋은 연출과 나쁜 연출이 따로 있는 게 아니고 빈도가 갈랐다.

빈도 말고도 같은 날 코드를 전수로 훑었더니 숫자가 나왔다. infinite 로 도는 애니메이션이 87개였고, 하우스 기준은 0이다. prefers-reduced-motion 을 존중하는 CSS 애니메이션은 84개 중 2개였다. 제일 심한 곳이 시험 문항 화면이었다. 정지된 화면에서도 배경 블롭 여섯 개가 돌고 있었다. 사용자는 말을 하고 있는데 뒤에서 블롭이 8초, 10초, 12초 주기로 모양을 바꾸고 그걸 블러로 한 번 더 합성한다. 아무도 보지 않는 곳에서 배터리를 쓰고 있었다.

이미 겪은 실패에 이름이 붙었다

규칙 중 하나는 즉시 반응하고 확정은 나중에 하되, 확정이 실패하면 UI 를 실제 상태로 되돌리라는 것이다. 이 규칙을 읽고 7월의 일이 떠올랐다.

7월 말에 1점 리뷰가 하나 달렸다. 마이크 테스트에서 자기 목소리가 안 들리는데 앱은 정상 작동이라고 했고, 결과 화면에는 자기가 하지 않은 답변이 자기 답변으로 나와 있다는 내용이었다. 사기 아니냐는 말로 끝났다. 원인은 무음이었다. 마이크가 소리를 안 잡는 상태에서 앱은 녹음 중이라고 표시했고, 무음 파일을 그대로 AI 에 보냈고, AI 는 정상 분량의 답변을 지어냈다. 그때는 음량 측정과 무음 차단을 네 겹으로 넣어서 막았다.

9월 초에 같은 구조가 한 번 더 나왔다. Safari 가 백그라운드 전환이나 통화 때 레코더를 혼자 멈추는데, 화면의 녹음 중 상태는 React state 라 그대로 남았다. 사용자는 끊긴 줄 모르고 계속 말한다. 멈춤과 재개 처리가 레코더의 실제 상태를 보지 않고 React state 만 믿고 있었다.

두 번 다 규칙을 몰라서 생긴 일은 아니다. 다만 두 번을 각각 다른 버그로 고쳤지, 같은 부류라고 이름 붙인 적은 없었다. 규칙 문서가 그 이름을 줬다. UI 가 보여주는 상태와 기기의 실제 상태가 갈라졌을 때 예외를 삼키면 안 되고, 상태를 실제에 맞추고 사용자에게 말해야 한다.

크레딧 쪽에도 비슷한 게 하나 있었다. 크레딧이 0 이 되면 AI 채점 버튼이 조용히 룰베이스 채점으로 바뀌었다. 버튼은 그대로 있고 눌리는데 결과가 다른 것이다. 사용자 입장에서는 AI 채점을 눌렀는데 다른 결과가 나온다. 맥락에서 의도를 읽으라는 규칙의 정반대 사례라 이건 고쳤다.

감사는 계획대로 되지 않았다

규칙을 채택한 날 다음 과제로 적어둔 건 이 기준으로 전수 감사를 하고 전부 고치는 것이었다. 솔직히 그 형태의 감사는 하지 않았다.

대신 같은 날 앱 전면 리디자인이 시작됐고, 규칙은 그 안으로 흡수됐다. 문항 화면은 시험관과의 대화 스레드 구조로 바뀌어서 문항 전환이 말풍선 하나가 추가되는 일이 됐다. 그러면 전환 연출이 없어도 어색하지 않다. 첫 번째 규칙을 애니메이션을 지우는 대신 구조를 바꿔서 지킨 셈인데, 이쪽이 더 낫다고 생각한다. 확인 대화는 전부 바텀 시트로 갔고, 권장 동작이 아래쪽의 넓은 주버튼이 됐다. 설문 화면에서 배운 그 배치가 앱 전체의 기본이 된 것이다. 리디자인 브랜치에서 코드를 grep 으로 다시 재 봤을 때 shimmer 와 spin 류의 무한 루프, 그라데이션, 미디어쿼리 없는 hover 는 전부 0 이었다.

그러니 지금 상태는 이렇다. 규칙은 문서로 있고, 새로 만든 화면은 대체로 그 위에서 만들어졌고, 옛 화면을 규칙 하나하나로 대조한 표는 없다. 리디자인이 옛 화면을 거의 다 갈아엎어서 그 표가 필요 없어졌다고 믿고 싶은데, 확인한 건 아니다.

주버튼 반전이 실제로 재선택률을 올렸는지도 아직 재지 않았다. 반전 전후로 새로 선택하기를 누른 비율을 비교하면 되는데 그 로그를 아직 안 봤다. 문구로는 안 된다는 판단은 맞았다고 생각하지만, 자리를 바꾸면 된다는 쪽은 아직 믿음이다.

끝