「논증형 교안 슬라이드 포맷」으로 제작. 한 질문을 끝까지 따라가는 하나의 논증으로 D1~D4(터치·상태·로딩·에러)를 엮었습니다. 슬라이드마다 강사가 읽고 그대로 말할 수 있는 설명 산문을 넣었고, 모든 수치·연구는 1차 자료로 확인했습니다(날조 없음).
이 장은 네 가지 인터랙션 기법(터치·상태·로딩·에러)을 따로 나열한 게 아니라, 하나의 목표를 향한 단계로 엮는다. 그 목표는 A장에서 배운 '평가의 간극'을 좁히는 것 — 즉 사용자가 매 순간 "내가 한 일이 통했다"는 확신을 갖게 하는 일이다. 본론에 들어가기 전, 우리가 지나갈 길을 먼저 펼쳐 둔다.
확신은 '제대로 눌렀다'는 데서 시작한다. 그런데 마우스 커서는 1px도 찍지만, 손가락 끝은 그보다 훨씬 굵다. 작은 버튼은 자꾸 옆을 누르게 되고, 그때마다 사용자는 "내가 잘못했나?" 자책하며 흐름이 끊긴다. 1954년 심리학자 폴 피츠는 이 현상을 법칙으로 정리했다 — 대상에 닿는 시간은 '거리'와 '크기'로 정해진다.
"대상에 닿는 데 걸리는 시간은 대상까지의 거리와 대상의 크기의 함수다." 즉 타깃이 클수록·가까울수록 더 빠르고 정확하게 누른다. 그래서 터치 버튼은 충분히 크고, 서로 충분히 떨어져 있어야 한다.
버튼이 손톱만 하고 다닥다닥 붙어 있으면, 누르려던 층 대신 옆 층을 누른다. 화면도 같다 — 24px 아이콘을 다닥다닥 붙여 놓으면 오터치(잘못 누름)가 쏟아지고, 그때마다 확신은 무너진다.
피츠의 법칙을 현장 규칙으로 굳힌 것이 디자인 표준이다. 구글 머티리얼 디자인은 터치 타깃 최소 48×48dp를, 애플 HIG는 44×44pt를 권한다(손가락 끝 평균 크기 근거). 핵심 반전은 이것이다 — 아이콘은 24px로 작아도, 눌리는 영역은 투명 여백까지 넓혀 48px로 만들 수 있다. 보이는 크기와 눌리는 크기는 다른 문제다.
A장의 평가의 간극("했는데 됐는지 모르겠다")이 가장 적나라하게 터지는 곳이 바로 여기다. 엘리베이터 버튼을 눌렀는데 불이 안 들어오면 우리는 눌렸는지 몰라 계속 누른다. 앱도 똑같다 — 누른 즉시 반응(색 변화·토스트)이 오면 "됐구나" 안심하지만, 반응이 없으면 같은 버튼을 또 눌러 중복 결제·중복 전송까지 일으킨다. 그래서 피드백은 친절이 아니라 확신의 최소 조건이다.
"디자인은 지금 무슨 일이 일어나는지를, 적절한 피드백으로 합리적 시간 안에 늘 사용자에게 알려야 한다." 닐슨의 10대 휴리스틱 1번 — 즉 첫 번째 원칙이 '상태를 보여줘라'다.
NN/g 반응시간 3한계 — 0.1초 이내면 "즉각 반응한다"고 느낀다. 인스타 하트가 누르자마자 빨갛게 차오르는 이유. 늦으면 "눌린 거 맞아?" 불안이 시작된다.
신호등은 색으로 '지금 상태'를 말한다 — 빨강=멈춤, 초록=가도 됨. 버튼도 똑같이 모습으로 자기 상태를 구분해줘야 한다. 모든 상태가 똑같이 생기면, 사용자는 눌러보고 나서야 "아, 이건 안 되는 거였네"를 안다(= 또 하나의 평가의 간극). 머티리얼은 한 요소가 가지는 상태를 enabled·hover·focus·pressed·disabled 등으로 규정한다.
메뉴를 안 담으면 회색(비활성), 담으면 청록(활성)으로 또렷이 바뀐다 — 모습만 보고 "지금 눌러도 되는지"를 안다.
빈 장바구니인데 주문 버튼이 멀쩡히 활성처럼 보이면, 눌렀다가 "담긴 게 없다"는 에러를 만난다. 비활성을 숨기면 '기능이 없다'고 오해한다.
누를 수 있고, 눌렀고, 상태도 보였다. 그런데 결과가 바로 안 나오는 대기 구간이 남는다. 여기서 확신이 가장 크게 흔들린다 — "주문이 들어가긴 한 거야?" IBM의 도허티 임계(1982)는 그 분기점을 숫자로 못박았다 — 시스템 응답이 400ms(0.4초) 이내면 사람과 컴퓨터 중 누구도 서로를 기다리지 않아 생산성과 몰입이 치솟는다.
400ms는 사람이 '반응이 즉각적'이라 느끼는 경계다. 이 아래면 작업이 끊김 없이 흐르고, 넘어가면 주의가 흩어지기 시작한다. 하지만 모든 응답을 400ms로 만들 순 없다 — 네트워크·서버는 우리 통제 밖이다. 그래서 다음 장이 중요해진다: 실제 속도를 못 줄일 때, '체감 속도'는 디자인으로 줄인다.
식당에서 "5분 뒤 나와요"라는 한마디가 같은 기다림을 견딜 만하게 만든다. 로딩도 똑같다 — 빈 화면에 스피너만 돌면 고장 같지만, 곧 나올 콘텐츠의 윤곽(스켈레톤)을 회색 박스로 미리 보여주면, 사용자는 "곧 여기 뜨겠구나" 예측하며 머릿속 그림을 미리 그린다. 그래서 실제 시간이 같아도 더 짧게 느껴진다(체감 성능). 기다림의 핵심은 속도가 아니라 정보다.
영상 목록이 뜨기 전 회색 썸네일·제목 자리가 먼저 깔린다 → "곧 여기 뜬다"는 예측이 생겨 대기가 짧게 느껴지고, 포기하지 않는다. 전체 화면 로딩에 특히 적합.
얼마나 기다릴지 모르고 "고장났나" 의심 → 대기가 길게 느껴지고 이탈. 단, 아주 짧은 작업(1초 미만)엔 스피너가 번쩍 사라져 화면이 깜빡이니 오히려 안 넣는 게 낫다.
아무리 잘 만들어도 사용자는 실패한다 — 잘못 입력하고, 인터넷이 끊긴다. 확신이 가장 크게 흔들리는 이 순간이 마지막 보루다. 길을 잘못 들었을 때 "그쪽 아닙니다"라고만 하면 막막하지만, "여기서 우회전하면 됩니다"라고 하면 바로 해결한다. 닐슨 휴리스틱 #9는 못박는다 — 에러 메시지는 코드가 아니라 평이한 말로, 문제를 정확히 짚고, 해결책을 건설적으로 제안해야 한다.
뭐가 틀렸는지·어떻게 고치는지 알 수 없다. 사용자는 막다른 길에 갇혀 앱을 꺼버린다. 정확한 코드가 친절한 게 아니다 — 읽어도 할 일을 모른다.
에러를 친절하게 알리는 것도 중요하지만, 닐슨은 그 위에 #5 에러 방지를 둔다 — "좋은 에러 메시지도 중요하지만, 최고의 디자인은 애초에 문제가 생기지 않게 미리 막는다." 여기서 이 장 전체가 하나로 묶인다 — 에러 방지는 결국 앞의 세 단계(터치·상태·로딩)를 잘하는 일이기 때문이다.
| 예방 기법 | 무엇을 미리 막나 | 연결 |
|---|---|---|
| 안 되는 선택지 비활성화 | 못 고르는 날짜·조건 미충족 버튼을 흐리게(못 누르게) | D2 상태 |
| 입력 규칙을 칸 옆에 미리 | "8자 이상" 안내를 입력 전에 보여줌 | D2 상태 |
| 충분한 터치 타깃 | 오터치 자체를 줄여 실수 발생을 차단 | D1 터치 |
| 중요 행동엔 확인 | '삭제' 전 한 번 더 물어 되돌릴 수 없는 실수를 방지 | 평가의 간극 |
이 장은 네 기법을 모은 게 아니라, A장의 '평가의 간극'을 메우는 하나의 추론이었다. 출발점은 "사용자는 무엇을 믿고 누르나?"였고, 도착점은 "좋은 인터랙션은 매 순간 '내가 한 일이 통했다'는 확신을 준다"였다. 터치·상태·로딩·에러는 그 확신을 네 지점에서 떠받치는 서로 다른 손길이다.