핵심 비유
'신호등' 비유 — 신호등은 색으로 '지금 상태'를 말한다. 빨강=멈춤, 초록=가도 됨, 노랑=곧 바뀜. 버튼도 마찬가지다. 누를 수 있는지(Default), 손을 올린 상태인지(Hover), 누르는 중인지(Active), 지금은 못 누르는지(Disabled)를 모습으로 구분해줘야 한다. 모든 상태가 똑같이 생기면, 사용자는 눌러보고 나서야 "아, 이건 안 되는 거였네"를 알게 된다.
핵심 포인트
- 한 요소는 최소 4가지 상태를 가진다 — Default(기본) / Hover(손 올림) / Active(누르는 중) / Disabled(비활성).
- 각 상태는 시각적으로 달라야 한다 — Disabled는 opacity 40%로 흐리게, Focus는 ring(테두리), Hover는 색 변화.
- 상태가 안 보이면 사용자는 '예측'을 못 한다 — 비활성 버튼을 눌러보고서야 안 되는 걸 안다.
- 로딩·성공·에러도 '상태'다 — 지금 무슨 일이 일어나는지 화면이 항상 말해줘야 한다(D3·D4와 연결).
- 상태 표시는 사용자에게 통제감을 준다 — "내가 지금 뭘 할 수 있는지" 명확해짐.
- 모바일은 마우스가 없어 Hover가 없다 — 폰에서는 Default·눌림(Active)·비활성(Disabled)·선택됨 상태가 더 중요하다. PC용 Hover 효과만 믿으면 안 된다.
교사 팁
신호등 비유로 시작 — "빨간불=Disabled, 초록불=Default, 노란불=Loading"으로 상태를 매핑하면 단번에 이해한다(design-sense state-display classGuide). 잘 만든 버튼의 4상태를 나란히 보여주고, 학생에게 "지금 이 버튼은 눌러도 될까?"를 모습만 보고 판단하게 한다. design-sense 이론 탭으로 opacity 40%(Disabled)·ring(Focus) 규칙을 확인하고 퀴즈 탭으로 즉시 점검.
좋은 예 vs 나쁜 예
- ✅ Default → Hover → Active → Disabled 구분: 현재 상태 명확, 사용 가능 여부 즉시 판단. (design-sense
state-display)
- ❌ 모든 상태가 동일한 모습: 버튼인지 텍스트인지 구분 불가, 비활성인지 눌러봐야 앎.
- ✅ 배민 '주문하기': 메뉴를 안 담으면 회색(비활성), 담으면 청록색(활성)으로 또렷이 바뀜. ❌ 빈 장바구니인데도 주문 버튼이 멀쩡히 활성처럼 보임: 눌렀다가 "담긴 게 없다"는 에러를 만남.
실습·평가
- 실습: '제출하기' 버튼 하나를 4상태(기본/호버/누름/비활성)로 그리거나 색을 지정 → 짝에게 "어떤 게 비활성?"을 모습만 보고 맞히게 하기.
- O/X 퀴즈: "비활성(못 누르는) 버튼도 활성 버튼과 똑같이 보여도 된다." → X (opacity 40% 등으로 구분 필수)