얼럿 Alert
확인 버튼 하나. "읽었어요"만 받아요.
알림 · 창
화면 위에 '띄우는 것들'. 띄워 보기를 누르면 진짜로 떠요.
팝업 Popup
'튀어나오는 것' 전부를 부르는 넓은 말. 뜻이 넓어서 AI에게 말할 땐 아래 이름으로 콕 집어 말하세요.
다이얼로그 Dialog
사용자에게 말을 거는 창. 질문하고, 대답(버튼)을 받아요.
모달 Modal
닫기 전까지 뒤 화면을 막는 방식. 그래서 대부분의 다이얼로그는 '모달 다이얼로그'예요.
뒤 화면을 막는 것
모달 계열 · 어두운 막(딤)이 깔려요컨펌 다이얼로그 Confirm dialog
"할까요?" 하고 둘 중 하나를 고르게 해요.
모달 Modal
가운데 창을 띄우고, 닫기 전엔 뒤를 못 만지게 해요.
바텀시트 Bottom sheet
아래에서 쑥 올라오는 판. 휴대폰에서 많이 써요.
드로어 Drawer
옆에서 미끄러져 나오는 판. 주로 메뉴.
라이트박스 Lightbox
사진을 화면 가득 크게 보여 주는 모달.
코치마크 Coach mark
처음 온 사람에게 "여기를 눌러요" 하고 짚어 주는 안내.
뒤 화면을 막지 않는 것
떠 있어도 뒤를 계속 쓸 수 있어요토스트 Toast
잠깐 떴다가 저절로 사라지는 짧은 알림. 버튼 없음.
스낵바 Snackbar
토스트에 버튼 하나(실행 취소 등)가 붙은 것.
배너 · 인라인 알림 Banner
페이지 안에 끼어들어 내용을 밀어내요. 닫기 전까지 남아요.
논모달 다이얼로그 Non-modal dialog
창이 떠 있어도 뒤 화면을 그대로 쓸 수 있어요.
레이어 팝업 Layer popup
사이트에 들어가면 뜨는 공지·이벤트 창. "오늘 하루 보지 않기".
새 창 팝업 Popup window
브라우저 창이 하나 더 열려요. 차단되기 쉬워 요즘은 드물어요.
푸시 알림 Push notification
앱 밖, 휴대폰 화면 위에서 내려오는 알림. (흉내 내기)
툴팁 Tooltip
마우스를 올리면 뜨는 짧은 설명. 글자만 있어요.
이게 툴팁이에요
팝오버 Popover
누르면 버튼 옆에 붙어 뜨는 작은 창. 안에 버튼이 있어요.
정렬
한눈에 비교
줄을 누르면 띄워져요| 이름 | 뒤 화면 | 어떻게 사라지나 | 버튼 | 어디에 |
|---|---|---|---|---|
| 얼럿 | 막음 | 확인을 눌러야 | 1개 | 가운데 |
| 컨펌 다이얼로그 | 막음 | 하나를 골라야 | 2개 | 가운데 |
| 모달 | 막음 | 닫기 · 바깥 · ESC | 여러 개 | 가운데 |
| 바텀시트 | 막음 | 끌어내리기 · 바깥 | 여러 개 | 아래 |
| 드로어 | 막음 | 닫기 · 바깥 | 메뉴 | 옆 |
| 라이트박스 | 막음 | 닫기 · ESC | 넘기기 | 화면 가득 |
| 코치마크 | 막음 | 다음 · 건너뛰기 | 1~2개 | 짚는 곳 옆 |
| 토스트 | 안 막음 | 저절로 | 없음 | 아래 가운데 |
| 스낵바 | 안 막음 | 저절로 · 버튼 | 1개 | 아래 |
| 배너 | 안 막음 | 닫기 전까지 남음 | 닫기 | 페이지 맨 위 |
| 논모달 다이얼로그 | 안 막음 | 닫기 | 여러 개 | 구석 |
| 레이어 팝업 | 사이트마다 | 닫기 · 오늘 하루 보지 않기 | 2개 | 가운데·위 |
| 새 창 팝업 | 안 막음 | 창 닫기 | — | 별도 창 |
| 푸시 알림 | 안 막음 | 저절로 · 밀기 | 누르면 앱 열림 | 화면 맨 위 (앱 밖) |
| 툴팁 | 안 막음 | 마우스를 떼면 | 없음 | 요소 바로 옆 |
| 팝오버 | 안 막음 | 바깥을 누르면 | 여러 개 | 요소 바로 옆 |
헷갈리는 짝
둘 다 띄워 보면 차이가 보여요모달vs논모달
둘 다 띄운 다음 아래 '뒤 화면 버튼'을 눌러 보세요. 모달이 떠 있으면 안 눌려요.
얼럿vs컨펌
얼럿은 '알려 주기'(확인 하나), 컨펌은 '물어보기'(취소/확인 둘).
토스트vs스낵바
토스트는 말만 하고 사라져요. 스낵바는 '실행 취소' 같은 버튼이 있어요.
토스트vs배너
토스트는 위에 떠서 저절로 사라지고, 배너는 페이지를 밀어내며 남아 있어요.
툴팁vs팝오버
툴팁은 '올리면' 뜨는 글자, 팝오버는 '누르면' 뜨는 작은 창.
글자만 잠깐
공유
레이어 팝업vs새 창 팝업
레이어 팝업은 페이지 안에 겹쳐 그린 상자, 새 창 팝업은 진짜 브라우저 창.
바텀시트vs드로어
바텀시트는 아래에서, 드로어는 옆에서 나와요.
