본문으로 건너뛰기

Modal UI

A modal is a small window or popup that appears over the current screen in a web page or app to display information or options.

It's common to prevent interaction with other parts of the main screen until the user completes the tasks within the modal.


When to Use It?

Modals are typically used in the following situations:

  • Providing Information: When offering additional information or details requested by the user.

  • Confirmation Messages: When showing confirmation or warning messages regarding actions performed by the user.

  • Input Request: When asking the user for additional input or to submit a form.

  • Settings and Options: When providing an interface for the user to change settings or options.


Characteristics of Modals

  • User Attention: Modals are designed to focus user attention. Therefore, the user must first acknowledge and address the content of the modal.

  • User Interaction: Modals appear temporarily and disappear after the user completes the necessary tasks.

  • Background Blocking: When a modal is active, the content in the background becomes temporarily inaccessible. This is usually visually represented through a blurred background or an 'Overlay'.


Points of Caution When Using

Since modals can interrupt the user's workflow, they must be used carefully.

  • Be cautious not to make them appear unnecessarily often.

  • The content within the modal should be concise and clear.

  • Ensure there is a clear 'Close' button or icon so that the user can easily close the modal.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!