모달 윈도
모달 윈도(Modal Window) 또는 모달 창은 사용자 인터페이스 디자인 개념에서 종속된 윈도에서 메인 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 시각적 제어 요소를 말한다. 메인 윈도에 종속된 그래픽 인터페이스로, 응용 프로그램에서 메인 윈도의 작업 흐름을 방해한다. 일반적으로 모달 대화상자로 불리는데, 그 이유는 대화상자를 부를 때 흔히 사용되기 때문이다. 우리가 자주 사용하는 파일 열기/저장 대화상자를 생각하면 이해하기 쉽다.
모달 창들은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용된다. 웹에서는 이미지 작업을 예로 든다면 이미지를 자세하게 볼 때 자주 사용된다.
사용자 인터페이스는 일반적으로 모달 창을 사용하여 사용자 인식을 명령하고 비상 상태를 표시하지만 상호 작용 디자이너는 이러한 용도로는 효과적이지 않다고 주장한다.[1] 모달 창은 모드 오류가 발생하기 쉽다.[1][2][3]
웹에서 모달 윈도는 라이트박스 라이브러리에 의해 구현된 것과 같이 이미지를 상세히 보여주거나, 플로팅 광고를 위해 자주 사용된다.[4][5]
모달의 반대는 모델리스(modeless)이다. 모델리스 창은 메인 창을 차단하지 않으므로, 사용자는 창 사이에서 포커스를 전환하며 이를 팔레트 창처럼 다룰 수 있다.
관련성 및 용도
[편집]사용 사례
[편집]모달 윈도의 빈번한 용도는 다음과 같다:
- 중요한 정보 조각에 주의를 집중시킨다. 이 용도는 사용자에게 너무 많은 대화 상자가 쏟아지고, 사용자가 메시지를 읽거나 이해하지 않고 단순히 "닫기", "취소" 또는 "확인"을 클릭하는 데 습관화되어 효과적이지 않다는 비판을 받아왔다.[6][7][8]
- 로그인 과정에서의 비밀번호와 같이 계속하는 데 필요한 정보가 입력될 때까지 애플리케이션 워크플로를 차단한다. 또 다른 예로는 애플리케이션에서 파일을 열고 저장하기 위한 파일 대화 상자가 있다.
- 중앙 집중식 대화 상자에서 애플리케이션 설정 옵션을 수집한다. 이러한 경우 일반적으로 대화 상자를 닫을 때 변경 사항이 적용되며, 편집이 이루어지는 동안 애플리케이션에 대한 접근은 비활성화된다.
- 현재 작업의 효과가 되돌릴 수 없음을 경고한다. 이는 모달 대화 상자의 빈번한 상호작용 디자인 패턴이지만, 일부 사용성 전문가들은 습관화로 인해 의도된 용도(파괴적인 작업의 오류 방지)에 효과적이지 않다고 비판한다. 그들은 대신 작업을 되돌릴 수 있게("실행 취소" 옵션 제공) 만들 것을 권장한다.[1]
Mac OS X의 모달 시트
[편집]일반적으로 모달 윈도로 표현되는 많은 기능이 Mac OS X에서는 "시트(Sheets)"[9]라고 불리는 모달 일시적 패널로 구현된다. 일시적 창은 모달 윈도와 유사하게 동작한다 – 항상 부모 창의 위에 있으며 창 목록에 표시되지 않지만, 애플리케이션의 다른 창 사용을 비활성화하지는 않는다. 시트는 창의 제목 표시줄에서 미끄러져 나오며, 대개 사용자가 해당 창에서 작업을 계속하기 전에 닫아야 하지만 애플리케이션의 나머지 부분은 계속 사용할 수 있다. 따라서 시트는 이를 포함하는 창 내부에는 모드를 생성하지만, 애플리케이션의 나머지 부분에 대해서는 모델리스이다.
상호작용 흐름 제어
[편집]모달 윈도는 사용자 워크플로를 안내하기 위해 GUI 위젯 툴킷에서 흔히 사용된다. 앨런 쿠퍼는 사용자가 중요한 문제에 주의를 기울이도록 요구하는 것의 중요성이 사용자의 자유를 제한하는 것을 정당화하며, 대안이 오히려 사용자의 좌절감을 높일 것이라고 주장한다.[10]
예기치 않은 중단
[편집]예기치 않은 경고 대화 상자는 잠재적으로 심각한 결과를 초래할 수 있는 모드 오류[1]의 주요 원인이다. 사용성 실무자들은 위험한 작업은 가능한 한 실행 취소할 수 있어야 한다고 규정한다. 예기치 않게 나타나거나 습관화에 의해 닫히는 경고 상자는 위험한 작업으로부터 보호해주지 못한다.[11] 모델리스 정보 바는 사용자의 활동을 방해하지 않고 사용자가 자신의 시간에 맞춰 추가 정보를 읽을 수 있게 해주기 때문에 대화 상자보다 선호되는 추세이다.
제안된 한 가지 접근 방식은 모든 입력 요소를 전체 애플리케이션의 전역 상태가 아니라 고유한 특정 요구 사항에 따라 안내되는 독립적이고 과업 중심적인 상호작용으로 설계하는 것이다. 예를 들어, 필수 요소 앞에는 별표를 붙이고, 잘못된 데이터가 있는 요소에는 빨간색 테두리를 입히는 식이다. 이 방식을 통해 사용자는 실제로 많은 입력 요소를 한 번에 보는 이점을 누린다. 즉, 미리 정의된 데이터 입력 순서가 완료될 때까지 다른 모든 관련 없는 요소가 차단되는 대신, 자신에게 의미 있는 방식으로 데이터를 입력할 수 있다.
문제점
[편집]모달 윈도는 사용자가 다른 창을 조작할 수 있도록 허용하는 모델리스 대화 상자와 대조적으로, 모달 윈도가 닫힐 때까지 최상위 프로그램의 다른 모든 워크플로를 차단한다.[12] 모달 윈도는 사용자의 온전한 주의를 끌기 위해 의도되었다.[13] 사용자는 모달 윈도가 자신의 주의를 요구한다는 것을 인식하지 못할 수 있으며, 이로 인해 메인 창이 응답하지 않는 것으로 혼동하거나 메인 창을 대상으로 한 사용자의 데이터 입력이 손실될 수 있다(모드 오류 참조). 심각한 경우, 모달 윈도가 동일한 프로그램에 의해 제어되는 다른 창 뒤에 나타나, 모달 윈도를 수동으로 찾을 때까지 프로그램 전체가 응답하지 않는 것처럼 보일 수 있다.
그러나 많은 인터페이스 디자이너들은 최근 창 뒤의 배경을 어둡게 하거나 모달 윈도 외부를 마우스로 클릭하면 강제로 창이 닫히도록 하는 디자인(라이트박스라고 불림[5])을 통해 모달 윈도를 더 분명하게 만드는 조치를 취함으로써 이러한 문제를 완화했다. 야코브 닐슨은 모달 대화 상자의 장점으로 사용자 인식을 향상시킨다는 점을 꼽았다. "무언가 수정이 필요할 때, 사용자가 그 사실을 확실히 알게 하는 것이 좋다." 이 목표를 위해 라이트박스 디자인은 나머지 시각적 요소들 위에 대화 상자의 강력한 시각적 대비를 제공한다. 라이트박스 기술은 현재 웹사이트 디자인에서 흔히 쓰이는 도구이다.
모달 윈도는 해당 창을 이동, 최소화, 아이콘화하거나 뒤로 미는 가능성을 차단하는 방식으로 구현되는 경우가 많으며, 입력 포커스를 독점하여 시스템의 잘라내기, 복사, 붙여넣기 기능 사용을 방해하기도 한다. 이는 동일한 애플리케이션 내의 다른 창과 데이터에 대한 접근을 차단함으로써 부모 애플리케이션의 사용을 방해할 수 있으며, 특히 모달 윈도가 가려진 창 중 하나에서만 확인할 수 있는 정보를 사용자에게 입력하도록 요구하는 경우에 더욱 그렇다.
실제 화면보다 큰 가상 작업 영역을 사용하는 사용자의 경우, 모달 윈도는 현재 디스플레이에 없는 가상 화면 부분에 생성되거나, 사용자가 작업하던 화면에서 전혀 다른 섹션으로 갑자기 전환되는 등 바람직하지 않은 동작을 유발할 수 있다.
모달 윈도는 텍스트 입력, 특히 다른 프로그램을 대상으로 입력하던 내용을 갑자기 가로채는 경향이 있다. 또한, 모달은 대개 엔터 키의 작동(또는 드문 경우 붙여넣은 입력의 새줄 문자)을 입력을 수락하고 처리하라는 신호로 해석하거나, 갑자기 가려진 다른 애플리케이션을 대상으로 한 마우스 클릭을 가로챌 수 있다. 이러한 가로채기를 포커스 스틸링(focus stealing)이라고 하며, 이는 프라이버시와 보안 관행을 손상시킬 뿐만 아니라 문맥에 맞지 않는 부적절한 입력을 캡처하여 모달 윈도를 생성한 프로그램에서 정의되지 않은 임의의 결과를 초래할 수 있다.
구현의 세부 사항에 따라 모달 윈도는 최소 놀람 원칙을 위반할 수 있다.
권장 사항
[편집]모달 대화 상자는 작업 흐름의 일부이며, 해당 흐름에서 포커스가 있는 곳에 배치하라는 권장 사항이 있다. 예를 들어, 창은 활성화를 트리거한 그래픽 제어 요소 근처에 배치될 수 있다.[14]
반투명한 어두운 배경을 사용하면 메인 창의 정보를 가릴 수 있으므로, 해당 정보가 주의를 산만하게 할 때만 사용하는 것이 가장 좋다. 반투명 배경은 배경 영역 전체가 닫기 버튼 기능을 하게 함으로써 덜 강압적으로 만들 수 있다. 이는 대부분의 모바일 운영 체제에서 표준이며, 사용자가 갇힌 기분을 느끼지 않게 하고 모달 윈도가 악성 팝업처럼 느껴지지 않게 한다.
디자인은 프로그램이 실행 중인 플랫폼의 공통 관행을 따라야 한다. 마이크로소프트 윈도우는 모달 창 대화 상자를 위해 표준 컨트롤을 사용하며, 패널의 오른쪽 하단에 긍정적인 작업 버튼을 배치한다. Mac OS X는 모달 시트를 사용하며 긍정적인 작업 버튼이 가장 오른쪽에 위치한다.[15]
각주
[편집]- 1 2 3 4 “Never Use a Warning When you Mean Undo”. 《alistapart.com》. 2015년 10월 9일에 확인함.
- ↑ Raskin, Jef (2000). 《The Humane Interface》. United States: Addison Wesley. ISBN 0-201-37937-6.
- ↑ “Nitpicker / The Humane Interface”. 《nitpicker.pbworks.com》. Rule 1a. 2015년 10월 9일에 확인함.
- ↑ Quince UX patterns explorer. “Modal Panel”. 2010년 2월 27일에 원본 문서에서 보존된 문서. The popular Lightbox JavaScript library uses a modal panel approach for showing the images
- 1 2 Jakob Nielsen, Alertbox. “10 Best Application UIs”.
- ↑ 조엘 스포스키, User Interface Design for Programmers: Designing for People Who Have Better Things To Do With Their Lives
- ↑ 레이먼드 첸, The Old New Thing: The default answer to every dialog box is "Cancel"
- ↑ 제프 앳우드, Coding Horror: Teaching Users to Read
- ↑ “Sheets - Presentation - Components - Human Interface Guidelines - Design - Apple Developer”. 《Apple Developer》. 2022년 9월 7일에 확인함.
- ↑ Cooper, Alan (2003년 3월 17일). 《About Face 2.0: The Essentials of Interaction Design》. Wiley. ISBN 0-7645-2641-3.
- ↑ Raskin, Jef (2000). 《The Humane Interface》. Addison Wesley. ISBN 0-201-37937-6.
- ↑ “How to Use Modality in Dialogs”. 오라클 (기업).
- ↑ “Modal Panel”. 《quince.infragistics.com》. 2013년 5월 6일에 원본 문서에서 보존된 문서.
- ↑ “Modal Panel - Implementation”. 《quince.infragistics.com》. 2013년 5월 6일에 원본 문서에서 보존된 문서.
- ↑ Apple Inc. “Themes - macOS - macOS - Human Interface Guidelines - Apple Developer”. 《developer.apple.com》. 2018년 9월 18일에 확인함.