모달

정의

모달은 지금 보던 화면 위에 한 겹 떠올라, 사용자의 주의를 그 안으로 강하게 모으는 대화상자입니다. 열리면 뒤쪽 배경을 반투명한 스크림(scrim)으로 덮어 어둡게 만들고, 그 아래 요소들은 클릭조차 되지 않게 막습니다. 그래서 사용자는 모달 안의 일, 즉 중요한 확인을 하거나 꼭 필요한 값을 입력하는 일을 마치기 전에는 다른 곳으로 새어 나갈 수 없습니다. '정말 삭제하시겠습니까?' 같은 확인 창이나 짧은 로그인 폼이 대표적인 모달입니다. 즉 모달은 지금 이 결정이 다른 무엇보다 먼저라고 화면 전체로 선언하는 장치입니다.

왜 중요한가

모달의 힘은 흐름을 끊는다는 데 있고, 약점도 정확히 같은 곳에 있습니다. 배경을 막고 앞으로 튀어나오기 때문에 놓쳐선 안 될 확인이나 되돌릴 수 없는 작업을 붙잡아 두기에는 더없이 효과적입니다. 하지만 바로 그 강제성 때문에 남용하면 사용자는 하려던 일마다 창이 가로막는 답답함을 느낍니다. 그래서 모달은 정말 흐름을 멈춰 세울 만한 순간에만 아껴 써야 하는 강한 도구입니다. 또한 모달은 스크림으로 배경을 가리고, 다른 요소보다 위에 뜨도록 고도를 높이고, 열려 있는 동안 키보드 초점을 그 안에 가둬 두는 여러 원리가 한꺼번에 맞물려 작동하는 종합 패턴이기도 합니다. 이 요소들이 함께 움직여야 모달이 비로소 제 역할을 합니다.

흔한 실수

• 사소한 알림까지 모달로 띄우는 것입니다. 저장 성공처럼 그냥 알려만 주면 되는 일에 모달을 쓰면 사용자가 매번 확인 버튼을 눌러 창을 닫아야 하니, 이런 가벼운 소식은 토스트나 인라인 메시지에 맡기는 편이 낫습니다. 모달을 남발할수록 사용자는 창을 닫는 데 지쳐 정작 중요한 확인마저 대충 넘기게 됩니다.
• 닫는 방법을 하나만 두거나 아예 빠뜨리는 것입니다. 특히 바깥 클릭이나 ESC 키가 막혀 있으면 사용자는 갇힌 느낌을 받고, 실수로 연 창에서 빠져나올 길이 없어 당황하게 됩니다.
• 삭제 같은 위험한 작업의 확인 버튼을 평범한 버튼과 똑같이 만드는 것입니다. 색과 위치가 구분되지 않으면 사용자가 무심코 파괴적인 쪽을 눌러 되돌릴 수 없는 실수를 하기 쉽습니다.

실무 팁

• 모달은 흐름을 끊는 강한 장치이니 꼭 필요할 때만 쓰고, 닫는 방법은 항상 여러 개, 즉 X 버튼과 바깥 영역 클릭, ESC 키를 함께 제공하세요. 사용자가 원할 때 언제든 빠져나올 수 있어야 갇힌 느낌이 들지 않습니다.
• 삭제처럼 되돌릴 수 없는 작업은 확인 버튼을 위험을 뜻하는 색으로 뚜렷이 구분하세요. 색만으로 구분이 부족하면 버튼 글자도 '삭제'처럼 무슨 일이 벌어질지 분명히 밝혀 두세요.
• 모달이 열리면 키보드 초점을 그 안에 가두고, 닫으면 원래 눌렀던 자리로 초점을 돌려보내세요. 이 처리 하나로 키보드와 스크린 리더 사용자의 경험이 크게 달라집니다.

관련 개념