Modal?

Modal

  컴퓨터 프로그램을 다루다보면 프로그램 메인 화면에 별도의 창이 뜰 때가 있다. 이것을 보통 Modal 혹은 Dialog 라고 부른다. 그런데 자세히 생각해보면 어떤 Modal은 화면에 잠깐 떴다가 사라지고, 또 다른 Modal은 사용자가 확인을 누를 때까지 다른 작업을 수행할 수 없게 한다. 이러한 특징을 고려하여 Modal이라고 알고있었던 UI요소들을 분류해보자.

 

  Modal은 프로그램을 계속 진행하기 위해 사용자의 동작을 요구하는 창이다. 즉, Modal이 열려있는 동안 사용자는 다른 작업을 수행할 수 없으며, 다른 작업을 수행하기 위해선 Modal과의 상호작용을 통해 Modal이 닫히도록 만들어야 한다. 예를 들어 어떤 작업의 시작 전에 경고 Modal을 띄워서 작업 관련 설정을 하게할 때 쓸 수 있다. 이 경우 작업을 시작하기 위해선 Modal에서 반드시 작업 관련 설정을 해야하며, 그렇지 않으면 Modal의 취소버튼을 눌러 Modal을 닫히게 만들어야 한다.

 

  Modeless는 화면에 유지되고 언제든지 사용할 수 있지만, 사용자의 다른 동작을 막지 않는 창이다. 즉, Modeless 창이 띄워져 있는 동안 사용자는 다른 작업을 수행할 수 있다. 예를 들어 Gmail에서 편지쓰기를 눌러보자. 편지를 쓰기위한 새로운 창이 떴지만 사용자는 해당 창을 유지한채 다른 작업을 수행할 수 있다.

 

  Tooltip은 사용자가 단어, 아이콘에 마우스를 가져갈 때(hover) 마우스가 위치한 요소에 대한 짧은 텍스트로된 설명을 표시하는 역할을 수행한다. 따라서 사용자와의 인터렉션이 불가능하다.

 

  PopOver는 Tooltip과 유사하지만 Tooltip보다는 더 긴 텍스트이거나, 제목, 링크, 이미지, 버튼 등의 요소가 포함될 수 있다. 즉, Tooltip은 요소에 대한 추가적인 정보를 제공하기 위한 목적으로, 간단한 상호작용도 가능하다. 또한 hover가 아닌, 클릭으로도 popOver를 열 수 있으며 마우스가 요소 밖으로 이동할 때도 열린 상태로 유지된다. 따라서 사용자의 의도에 의해 닫는 것도 가능하다.

 

  Toast는 화면 하단에 나타났다가 몇 초 후 저절로 사라지는 작은 메시지 창이다. Toast는 특정 컴포넌트에 속하지 않으며, 사용자와의 인터렉션이 불가능하다. 주로 시스템 메시지를 제공할 때 사용된다.

 

  SnackBar는 Toast와 유사하게 주로 화면 하단에서 나타났다가 몇 초 후 저절로 사라지는 작은 메시지 창이다. 그러나 Toast와 달리 정보 제공 외에 Dismiss, Cancel과 같은 단일 작업을 포함할 수 있다. SnackBar는 주로 프로그램이 수행했거나 수행할 프로세스를 사용자에게 알려주는 용도로 사용한다.

 

 

 

---

modal vs modeless: https://docs.microsoft.com/en-us/cpp/mfc/modal-and-modeless-dialog-boxes?view=msvc-160

popover vs tooltip: https://stackoverflow.com/questions/9843249/twitter-bootstrap-popover-vs-tooltip

Toast Notification: https://uxplanet.org/toast-notification-or-dialog-box-ae32ad53106d

SnacBar: https://material.io/components/snackbars#usage