Overlay Patterns
Dialog, AlertDialog, HelpBubble를 언제 나눠 쓰는지 비교해요.
Overlay는 화면 위에 잠시 떠서 흐름을 바꾸거나 보조 정보를 보여주는 패턴이에요. 이 문서는 Dialog, AlertDialog, HelpBubble가 각각 언제 잘 맞는지, 무엇이 다른지 한눈에 비교하기 위해 만들었어요. 셋 다 떠 있는 표면이지만 사용 목적과 닫히는 방식, 필요한 사용자 결정의 정도가 달라요.
빠르게 고르기
| 패턴 | 언제 쓰나요 | 사용자가 해야 하는 일 | 닫는 방식 |
|---|---|---|---|
Dialog | 잠시 별도 콘텐츠에 집중해야 할 때 | 읽거나 조작한 뒤 닫아요 | 닫기 버튼, Escape, 경우에 따라 바깥 클릭 |
AlertDialog | 결과가 크거나 되돌리기 어려운 결정을 확인할 때 | 취소와 확인 중 하나를 분명하게 선택해요 | 하단 액션으로 닫아요 |
HelpBubble | 현재 흐름을 유지한 채 짧은 도움말을 볼 때 | 가볍게 읽고 닫아요 | 바깥 클릭, Escape, 필요하면 닫기 버튼 |
선택 기준
Dialog를 고르면 좋은 경우
설정, 보조 폼, 상세 정보처럼 화면 흐름을 잠시 멈추고 별도 표면 안에서 읽거나 조작해야 할 때 사용해요. 사용자가 닫기 버튼으로 빠져나와도 괜찮고, 내용 자체가 선택을 강요하지 않는다면 Dialog가 가장 자연스러워요.
AlertDialog를 고르면 좋은 경우
삭제, 저장하지 않은 변경사항 이탈, 초기화처럼 사용자가 결과를 알고 직접 선택해야 하는 상황에 사용해요. 이런 경우에는 우측 상단 닫기 버튼보다 취소와 확인 액션을 분명하게 두어요.
HelpBubble을 고르면 좋은 경우
폼 설명, 단축키 안내, 가벼운 보조 정보처럼 지금 보고 있던 화면을 벗어나지 않고 짧게 확인하면 되는 내용에 사용해요. Trigger 근처에서 열리고 읽은 뒤 바로 닫아도 되는 설명에는 HelpBubble을 사용해요.
헷갈리기 쉬운 경우
Dialog와 AlertDialog
둘 다 화면 흐름을 잠시 멈추게 하지만 목적이 달라요. Dialog는 콘텐츠를 보여주거나 조작하게 하는 패턴이고, AlertDialog는 사용자가 명시적으로 결정해야 하는 패턴이에요. 설명보다 사용자의 선택이 더 중요하면 AlertDialog를 사용해요.
Dialog와 HelpBubble
둘 다 보조 정보를 보여줄 수 있지만, HelpBubble은 Trigger 근처에서 짧게 맥락을 보완할 때 사용해요. 내용이 길어지거나 별도 조작이 필요하면 Dialog를 사용해요.
HelpBubble과 AlertDialog
둘 다 짧은 텍스트를 담을 수 있지만 목적이 달라요. HelpBubble은 읽고 지나가도 되는 보조 정보에, AlertDialog는 사용자가 반드시 이해하고 결정해야 하는 상황에 사용해요.
다음에 읽으면 좋은 문서
- 일반적인 모달 콘텐츠는 Dialog에서 자세히 볼 수 있어요.
- 되돌리기 어려운 확인은 AlertDialog에서 자세히 볼 수 있어요.
- 짧은 보조 설명은 HelpBubble에서 자세히 볼 수 있어요.