핵심 비유
'엘리베이터 버튼' 비유 — 엘리베이터 버튼을 눌렀는데 불이 안 들어오면, 우리는 눌렸는지 몰라 계속 누른다. 반대로 누르자마자 불이 켜지면 안심하고 기다린다. 앱도 똑같다. 버튼이 손가락에 충분히 커야(터치 타겟) 정확히 누르고, 누른 즉시 반응이 와야(피드백) "됐구나" 하고 안심한다. 손가락은 마우스 커서보다 훨씬 굵다는 걸 잊으면 안 된다.
핵심 포인트
- 터치 영역 최소 48×48px — 손가락 끝 평균 크기. 24px 버튼은 자꾸 옆을 누르게 된다. 버튼 사이 간격 8px+.
- 작은 터치 타겟은 어린이·어르신·장갑 낀 손에게 사용 불가 — 접근성과 직결.
- 피드백 = 행동에 대한 즉각 반응 — 누르면 색이 변하고, 저장하면 "저장했어요" 토스트가 뜬다. 반응 시간 100ms 이내.
- 피드백이 없으면 "눌린 거 맞아?" 불안 → 같은 버튼 반복 클릭 → 신뢰 하락.
- 피드백은 다음에 뭘 할지도 알려준다(예: "전송 완료, 목록으로 돌아가기").
- 화면에 보이는 버튼 크기가 작아도 눌리는 영역은 48px로 넓힐 수 있다 — 아이콘은 24px이라도 그 주변 투명 영역까지 터치로 잡으면 오터치가 준다.
교사 팁
24px 버튼과 48px 버튼을 번갈아 눌러보게 해서 오타 빈도 차이를 직접 체감시킨다(design-sense touch-target classGuide). 피드백은 엘리베이터 버튼 비유로 — "불이 안 들어오면 계속 누르죠?"가 곧 피드백의 정의다(design-sense feedback classGuide). design-sense 이론 탭의 두 카드로 수치(48px·100ms)를 고정하고, 학생 폰에서 '눌러도 반응 없는 버튼'(나쁜 피드백)을 찾아오게 하면 현실 사례가 쌓인다.
좋은 예 vs 나쁜 예
- ✅ 48×48px 터치 + 8px 간격: 정확히 누름, 옆 버튼 안 눌림, 모든 연령 사용 가능. (design-sense
touch-target)
- ❌ 24×24px + 간격 없음: 자꾸 옆 누름, 어린이·어르신 불가.
- ✅ 버튼 → 색 변화 + 저장 토스트. ❌ 눌러도 아무 변화 없음 → 불안·반복 클릭. (design-sense
feedback)
- ✅ 인스타 하트: 누르면 즉시 빨갛게 차오르는 애니메이션 → "눌렸다"가 0.1초 안에 확인됨. ❌ '좋아요'를 눌러도 한참 뒤에 반영: 눌렸는지 몰라 또 누름.
실습·평가
- 실습: 종이/프로토타입으로 '주문하기' 버튼을 48px로 그리고, 누른 뒤 어떤 피드백(색 변화→토스트→다음 화면)이 순서대로 와야 하는지 흐름을 적기.
- O/X 퀴즈: "버튼은 작고 촘촘할수록 화면을 효율적으로 쓴다." → X (최소 48px·간격 8px, 작으면 오터치)