모달 대화상자

흐름을 멈추는 강한 도구

모달은 사용자의 모든 주의를 한곳으로 모으는 강력한 도구예요. 래스킨(2000)은 '모드'가 사용자의 실수를 부른다고 경고했고, 베일리와 콘스탄(2006)은 작업 중 방해가 수행 시간과 오류, 불안을 늘린다는 것을 실험으로 보였어요. 페센던(2017)은 모달을 되돌릴 수 없는 행동, 꼭 필요한 정보 입력, 중요한 경고처럼 정말 멈춰야 할 때만 쓰라고 정리해요. 덜 중요한 결과 알림은 토스트 메시지, 보조 선택은 바텀 시트가 더 가벼운 대안이에요.

확인창 남용과 타이밍

쿠퍼와 동료들(2014)은 '정말 하시겠습니까?' 같은 확인창이 반복되면 사용자가 읽지 않고 습관적으로 '확인'을 누르게 된다고 비판해요. 실행 취소를 제공하는 편이 대부분 더 안전해요. 타이밍도 중요해요. 아담치크와 베일리(2004)는 하위 작업이 끝나는 경계 시점에 방해할 때 피해가 가장 적다고 보고했어요. 앱을 열자마자 뜨는 평점 요청이나 글을 쓰는 도중 뜨는 이벤트 팝업은 최악의 타이밍이에요. 마투르와 동료들(2019)이 기록한 '아니요, 저는 할인이 싫어요' 같은 죄책감 유발 문구는 다크 패턴이니 피하세요.

초점 관리와 모바일

WCAG 2.2(W3C, 2023)에 따라 모달이 열리면 초점을 모달 안으로 옮기고, 닫히면 원래 위치로 돌려줘야 해요. 모달 안에서 초점이 갇히는 것은 의도된 것이지만 Esc 키나 닫기 버튼으로 반드시 빠져나올 수 있어야 해요. 모바일 작은 화면에서는 가운데 모달이 키보드에 가려지기 쉬우니, 입력이 필요하면 전체 화면이나 바텀 시트를 고려하세요. 닫기 버튼은 엄지가 닿고 충분히 큰 크기로 두세요.

자주 묻는 질문

모달과 팝업은 같은 건가요?

팝업은 넓은 말이고, 모달은 응답 전까지 뒤의 화면 조작을 막는 팝업을 뜻해요.

삭제 확인은 꼭 모달이어야 하나요?

되돌릴 수 있다면 '실행 취소' 토스트가 더 나은 경우가 많고, 영구 삭제처럼 되돌릴 수 없을 때만 모달을 쓰세요.

출처 검토일: 2026-10-27

참고문헌

1. Fessenden, T. (2017, April 23). Modal & nonmodal dialogs: When (& when not) to use them. Nielsen Norman Group. 모달을 써야 할 때와 피해야 할 때를 정리한 글이라, 사용 판단 기준으로 참고하면 도움이 돼요.
2. Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: The essentials of interaction design (4th ed.). Wiley. 불필요한 확인 대화상자를 '흐름을 끊는 방해'로 비판해, 확인창을 줄일 때 참고하면 도움이 돼요.
3. Raskin, J. (2000). The humane interface: New directions for designing interactive systems. Addison-Wesley. 모드가 오류를 만든다는 고전적 논의라, 모달이 왜 조심스러워야 하는지 설명할 때 참고하면 도움이 돼요.
4. Bailey, B. P., & Konstan, J. A. (2006). On the need for attention-aware systems: Measuring effects of interruption on task performance, error rate, and affective state. Computers in Human Behavior, 22(4), 685–708. 방해가 수행 시간·오류·불안을 늘린다는 실험이라, 갑작스러운 팝업의 비용을 설명할 때 참고하면 도움이 돼요.
5. Adamczyk, P. D., & Bailey, B. P. (2004). If not now, when? The effects of interruption at different moments within task execution. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 271–278). ACM. 작업의 경계 시점에 방해하면 피해가 줄어든다는 연구라, 모달을 띄울 타이밍을 정할 때 참고하면 도움이 돼요.
6. Mathur, A., Acar, G., Friedman, M. J., Lucherini, E., Mayer, J., Chetty, M., & Narayanan, A. (2019). Dark patterns at scale: Findings from a crawl of 11K shopping websites. Proceedings of the ACM on Human-Computer Interaction, 3(CSCW), 1–32. '아니요, 할인은 싫어요' 같은 죄책감 유발 문구를 포함한 다크 패턴 조사라, 모달 문구를 점검할 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 초점 순서(2.4.3)와 키보드 함정 금지(2.1.2) 기준이 있어, 모달의 초점 관리를 점검할 때 참고하면 도움이 돼요.