모달창 (Modal Window)
쉽게 풀면
화면 위에 갑자기 뜨는 작은 창으로, 이걸 닫기 전까지는 다른 걸 못 누르게 막는 것이다.
왜 중요한가
모달 창은 나머지 화면을 비활성화하고 사용자의 응답을 요구하는 대화 상자로, 삭제 확인처럼 되돌릴 수 없는 행동 전에 주의를 강제하거나 맥락을 떠나지 않고 짧은 작업을 마치게 합니다. 사용자의 흐름을 의도적으로 끊는 강력한 장치이기 때문에 언제 써야 하는지가 인터페이스 설계의 자주 논의되는 판단 지점입니다. 모달이 열리면 화면 스크롤을 잠그는 것이 일반적인데, 이를 빠뜨리면 배경 콘텐츠가 모달 뒤에서 스크롤되어 두 레이어가 서로 다른 위치에서 움직이는 어색한 충돌이 생긴다.
논문에서는 이렇게 쓰입니다
중요한 작업 전 확인 창을 띄운 것이 실수 방지에 미친 효과를 검증한 연구이다.
이는 모달창이 사용자의 주의를 특정 작업에 집중시켜 실수를 줄이는 인터페이스 장치로 기능함을 보여주는 서술이다.
조금 더 깊게 보면
모달은 남용이 문제입니다. 뉴스레터 구독 요청이나 쿠키 동의처럼 사용자 과업과 무관한 모달은 짜증과 이탈을 낳고, 특히 진입 즉시 뜨는 모달은 광고 차단과 규제(EU의 동의 팝업 지침)의 대상이 되었습니다. 스크린리더에서 포커스가 모달에 갇히지 않으면 배경 콘텐츠를 읽어 혼란을 주므로 포커스 트랩과 ESC 닫기, 열기 전 요소로 포커스 복귀가 접근성 요건입니다. 모바일에서는 전체 화면으로 전환되어 모달과 페이지의 경계가 흐려지며, 긴 폼을 모달에 넣는 것은 스크롤과 유효성 검사 문제로 권장되지 않습니다. 비모달 대안(토스트, 인라인 확장)을 먼저 검토하는 것이 원칙입니다. 모달은 배경을 어둡게 하는 오버레이가 있는 진짜 모달과, 배경 조작을 막지 않고 화면 위에 겹쳐 보이기만 하는 논모달(팝오버)로 나뉘며, 둘을 혼용하면 사용자가 배경을 조작할 수 있는지 여부를 예측하기 어려워진다.
주의할 점
모달창을 과도하게 사용하면 사용자의 작업 흐름을 방해하고 피로감을 유발할 수 있다. 모달 안에 또 다른 모달을 중첩해 여는 설계는 사용자의 맥락 파악을 크게 어렵게 만들어 대부분의 인터페이스 가이드라인에서 지양하도록 권고된다.