topic★★★★★난이도
Modal
라틴어 'modus'(모드)에서 유래, 현재 모드를 바꾸는 대화 상자.
#modal#모달#대화상자
Modal(모달)은 라틴어 'modus'(방법, 양식, 모드)에서 파생된 형용사 'modal'에서 왔다. 컴퓨터에서 'modal'은 '현재 모드를 바꾸는'이라는 뜻이다. Modal 대화 상자가 열리면 사용자는 '새로운 모드'에 진입하며, 이 대화 상자를 닫기 전에는 뒤의 콘텐츠와 상호작용할 수 없다. 1984년 매킨토시의 Alert Dialog가 시초로 여겨진다.
| 실제 사물 | UI 패턴 |
|---|---|
| 문을 잠그면 방 안에서만 활동 | Modal이 열리면 그 안에서만 조작 |
| 잠금을 풀어야 밖으로 나감 | 닫기/확인을 눌러야 원래 화면으로 복귀 |
| 중요한 대화는 방을 닫고 함 | 중요한 결정은 Modal로 집중시킴 |
사용 가이드라인: 확인/취소 결정, 경고, 폼 입력 등 '반드시 사용자의 응답이 필요한' 상황에 쓴다. 남용하면 사용자 흐름을 심각하게 방해한다. ESC 키와 배경(backdrop) 클릭으로 닫을 수 있어야 한다. 접근성을 위해 포커스 트랩(focus trap)과 aria-modal 속성을 반드시 적용한다.