모달은 언제 쓰고 언제 피해야 할까

먼저 던질 질문

모달은 사용자의 집중을 돕는가, 탐색을 막는가

핵심 관점

모달은 작은 창이 아니라 사용자의 흐름을 강제로 멈추는 장치다. 그래서 집중이 필요한 순간에는 유용하지만, 탐색과 비교가 필요한 순간에는 비용이 크다.

회복 가능성이 보이는 장면

짧은 삭제 확인처럼 현재 맥락에서 결정을 내려야 하는 경우 Dialog를 사용한다.

간단한 설정 편집처럼 현재 페이지를 유지하면서 보조 작업을 할 때 Drawer를 사용한다.

위험이 커지는 흐름

긴 회원가입 폼을 모달 안에 넣어 모바일에서 입력과 스크롤이 불편해진다.

도움말 내용을 모달로 띄워 원래 화면과 비교하기 어렵게 만든다.

행동 보호 사례와 근거

모달은 사용자의 작업 흐름을 의도적으로 멈춘다

WAI-ARIA Dialog 패턴은 모달이 열리면 외부 콘텐츠가 inert 상태가 되고 키보드 포커스가 내부에 머물러야 한다고 설명한다. 모달은 가벼운 장식이 아니라 주의를 강제로 모으는 구조다.

결제 최종 확인, 권한 부여, 저장되지 않은 변경 사항 경고처럼 지금 결정을 내려야 다음 흐름으로 갈 수 있는 순간에는 적합하다. 단순 도움말이나 부가 설명은 인라인 안내나 별도 페이지가 나을 수 있다.

실무 해석

좋은 모달은 초기 포커스, Escape 닫기, 명시적 닫기 버튼, 닫힌 뒤 포커스 복귀를 갖춰야 한다. 이 중 하나라도 빠지면 키보드 사용자는 쉽게 갇힌다.

위험 판단 기준

• 현재 흐름을 멈춰야 할 만큼 중요한지 판단한다
• 입력량과 탐색 깊이가 모달에 맞는지 본다
• Dialog, Drawer, Page, Inline UI의 비용을 비교한다

자주 빠지는 함정

모달은 만들기 쉬워서 남용되기 쉽다. 하지만 사용자가 정보를 비교하거나 긴 작업을 해야 한다면 모달은 가장 좁은 작업 공간이 된다.

추가로 비교할 회복 흐름

• 결제 설정 Drawer, 위험 액션 Confirm Dialog, 모바일 Bottom Sheet 사례를 비교한다
• 긴 폼을 모달에 넣어 불편한 사례를 찾는다
• 모달 대신 페이지 전환이 더 나은 설정 흐름을 모은다

위험 설계 질문

• Dialog, Drawer, Page, Inline UI의 선택 기준이 구체적인가
• 모바일과 접근성 조건을 함께 다뤘는가

출처

• WAI-ARIA APG, Dialog Modal Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
• Material Design 3, Dialogs: https://m3.material.io/components/dialogs/overview
• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• Nielsen Norman Group, 10 Usability Heuristics for User Interface Design: https://www.nngroup.com/articles/ten-usability-heuristics/