팝업 & 알림 관련 UI 용어

🔹 팝업 & 알림 관련 요소

• 툴팁 (Tooltip)
  • 설명: 사용자가 특정 요소에 마우스를 올리거나 포커스를 맞추면 해당 요소에 대한 간단한 설명이나 힌트를 표시하는 작은 팝업입니다.
  • 사용 예시: 버튼 위에 마우스를 올리면 버튼의 기능을 설명하는 텍스트가 나타남
  • 특징: 마우스를 올리거나 클릭할 때 표시되며, 간단한 정보나 힌트를 제공하여 사용자의 이해를 돕습니다.

• 대화상자 (Dialog Box)
  • 설명: 사용자와의 상호작용을 요구하는 팝업으로, 메시지나 확인을 받기 위한 창입니다. 사용자가 선택하거나 응답해야 합니다.
  • 사용 예시: "정말 삭제하시겠습니까?"와 같은 확인 대화상자
  • 특징: 중요하거나 긴급한 알림을 전달할 때 사용되며, 보통 사용자의 응답을 요구합니다.

• 라이트박스 (Lightbox)
  • 설명: 이미지를 확대하여 보여주기 위해 사용하는 팝업입니다. 페이지 내에서 콘텐츠를 가리지 않도록 배경을 어둡게 처리하여 사용자에게 포커스를 맞추게 합니다.
  • 사용 예시: 갤러리에서 이미지를 클릭하면 그 이미지가 확대되어 나타남
  • 특징: 콘텐츠를 강조하고, 사용자 경험을 향상시킵니다. 보통 이미지나 비디오 콘텐츠에 사용됩니다.

• 모달 (Modal)
  • 설명: 페이지 상에 표시되는 팝업으로, 사용자가 모달 외부를 클릭하지 않는 한 다른 상호작용을 할 수 없게 만듭니다. 주로 사용자에게 중요한 정보를 전달할 때 사용됩니다.
  • 사용 예시: 로그인 폼, 가입 양식, 알림
  • 특징: 페이지를 차단하는 형태로, 사용자가 작업을 완료하거나 모달을 닫을 때까지 다른 작업을 하지 못하게 합니다.

• 토스트 팝업 (Toast Popup)
  • 설명: 짧은 시간 동안 화면에 표시되며, 사용자가 화면을 떠나지 않도록 간단한 메시지를 제공합니다. 보통 알림 메시지나 상태 업데이트를 알릴 때 사용됩니다.
  • 사용 예시: "작업이 성공적으로 완료되었습니다!" 같은 메시지
  • 특징: 일반적으로 화면 하단에 나타나며, 시간이 지나면 자동으로 사라집니다. 사용자의 주의를 끌지 않으면서 빠른 정보를 전달합니다.

• 노티피케이션 (Notification)
  • 설명: 시스템이나 애플리케이션에서 발생한 알림을 사용자에게 전달하는 팝업입니다. 주로 중요한 업데이트나 메시지를 알려주는 데 사용됩니다.
  • 사용 예시: 새로운 메시지가 도착했다는 알림
  • 특징: 사용자가 인식할 수 있도록 알림을 전달하고, 클릭하거나 상호작용하여 세부 사항을 확인할 수 있습니다.

• 코치마크 (Coach Mark)
  • 설명: 새로운 사용자나 기능을 안내하기 위한 팝업으로, 인터페이스의 특정 부분을 강조하고 사용자가 어떻게 상호작용할 수 있는지 안내합니다.
  • 사용 예시: 새 기능을 처음 사용할 때 "여기를 클릭하세요"와 같은 안내
  • 특징: 주로 튜토리얼이나 교육적인 목적으로 사용되며, 사용자가 처음 경험할 때 유용한 힌트를 제공합니다.

---

팝업 & 알림 요소 비교표

요소	설명	사용 예시	특징
툴팁 (Tooltip)	마우스를 올리거나 포커스를 맞추면 표시되는 간단한 팝업	버튼, 링크 위에 마우스를 올리면 설명이 나타남	사용자가 요소에 대한 이해를 돕는 간단한 정보 제공
대화상자 (Dialog Box)	사용자의 응답을 요구하는 팝업	"삭제하시겠습니까?" 확인 메시지	사용자의 결정을 요구하는 중요한 알림 제공
라이트박스 (Lightbox)	이미지를 확대하여 보여주는 팝업	갤러리에서 이미지를 클릭하여 확대	배경을 어두워지게 하여 콘텐츠를 강조
모달 (Modal)	페이지 상에서 작업을 차단하는 팝업	로그인 창, 알림 창	다른 작업을 차단하여 사용자에게 중요한 정보 제공
토스트 팝업 (Toast Popup)	짧은 시간 동안 화면에 표시되는 간단한 메시지 팝업	"업데이트가 완료되었습니다" 알림	빠르게 나타나고 사라지며, 간단한 정보를 전달
노티피케이션 (Notification)	시스템에서 발생한 알림을 전달하는 팝업	새로운 메시지 알림	사용자가 인식할 수 있도록 알림을 제공
코치마크 (Coach Mark)	새로운 기능이나 인터페이스를 안내하는 팝업	"여기를 클릭하세요"와 같은 기능 설명	사용자가 새로운 기능을 배울 수 있도록 도움