[개념정리] Popover vs Dialog: 상황에 맞는 UI 선택하기

Popover란?

• 특정 요소 근처에 가볍게 띄워지는 작은 창
• 사용자가 현재 보고 있는 맥락을 그대로 유지하면서, 추가적인 옵션이나 정보를 보여줄 때 적합

Dialog와 차이

Dialog(모달)의 특징

• 화면 중앙 고정 + 보통 어두운 Overlay를 동반함
• 사용자의 현재 흐름을 끊고 별도의 작업에 집중하도록 만듦
• 예시 : 회원가입/로그인, 알림 모달

Popover의 특징

• 특정 요소(버튼, 아이콘 등) 근처에 바로 붙어서 뜸
• Overlay는 선택적 → 대부분은 바로 열고 닫는 가벼운 UI
• 사용자의 맥락은 그대로 유지하면서 보조 동작을 제공
• 예시 : 알림 메뉴, 옵션 메뉴(케밥 메뉴), 작은 툴팁

Dialog vs Popover 한눈에 비교

• Dialog: 전체 맥락 전환이 필요할 때 → 사용자가 집중해서 입력/확인해야 하는 작업
• Popover: 현재 맥락 안에서 빠른 인터랙션 → 간단히 옵션이나 정보를 보여줄 때