알림 UI 용어 6가지 — 팝업·모달·얼럿·토스트·스낵바·바텀시트 뜻

앱을 쓰다 보면 화면 위로 크고 작은 창이 쉴 새 없이 뜹니다. "저장됐어요" 하고 살짝 스쳐 가는 알림도 있고, "정말 삭제할까요?" 하고 앞을 딱 막아서는 창도 있죠. 다 같은 팝업처럼 보이지만, 사실 이름도 역할도 제각각입니다.

기획서나 개발자와의 대화에서 "여기 모달로 띄워 주세요" "그건 토스트가 낫겠는데요" 같은 말이 나오면 살짝 움츠러들지 않으셨나요? 오늘은 화면에 뜨는 알림 UI 여섯 가지를 초등학생도 알아듣게 풀어 드릴게요.

여섯 용어를 관통하는 질문은 딱 하나입니다. "이 알림이 사용자를 멈춰 세우나, 아니면 그냥 지나가나?" 이 기준만 잡고 읽으면 헷갈릴 일이 없어요. 그럼 하나씩 만나 볼까요?

1. 팝업 (Popup)

화면 위에 겹쳐 뜨는 창을 두루 부르는 넓은 말. 웹서핑 중 "잠깐요!" 하고 끼어드는 쪽지 같은 겁니다.

팝업은 특정한 한 가지 모양을 가리키는 말이 아닙니다. 화면 위에 새로 겹쳐 뜨는 요소 전체를 부르는 넓은 이름이에요. 그래서 아래에 나올 모달도, 토스트도 크게 보면 다 팝업의 한 종류입니다. 원래는 브라우저가 새로 띄우는 창을 뜻했지만, 지금은 앱 안에서 겹쳐 뜨는 것들을 두루 가리키는 말로 쓰여요.

이럴 때 써요: "신규 회원한테 이벤트 팝업 하나 띄워서 쿠폰 알려 주자."

2. 모달 (Modal)

뒤 화면을 어둡게 가리고, 답하기 전엔 못 지나가게 막는 창. "이거 먼저 정하고 지나가세요" 하는 검문소죠.

모달의 핵심은 '막는다'입니다. 뒤 배경을 어둡게 덮어(딤 처리) 사용자의 시선과 손가락을 그 창에만 묶어 둬요. 닫거나 무언가를 고르기 전에는 뒤 화면을 만질 수 없습니다. 그래서 삭제 확인이나 로그인처럼 꼭 짚고 넘어가야 할 순간에 씁니다. 다만 너무 자주 띄우면 사용자가 답답해하니 아껴 써야 해요.

이럴 때 써요: "결제 넘어가기 전에 약관 동의 모달 한 번 띄웁시다."

3. 얼럿 (Alert)

확인을 눌러야만 넘어가는, 가장 단순하고 강한 경고 창. "정말 삭제할까요?" 하고 마지막으로 되묻는 관문입니다.

얼럿은 모달 중에서도 가장 짧고 단호한 형태예요. 제목과 한 줄짜리 문구, 그리고 버튼 한두 개(확인·취소)만 있습니다. 되돌릴 수 없는 행동을 하기 직전, 마지막으로 한 번 더 묻는 용도죠. 아이폰이나 안드로이드가 기본으로 제공하는 시스템 경고창이 바로 이 얼럿입니다. 습관처럼 남발하면 사용자가 내용도 안 읽고 확인을 눌러 버려요.

이럴 때 써요: "계정 삭제는 되돌릴 수 없으니 얼럿으로 한 번 더 확인받읍시다."

4. 토스트 (Toast)

잠깐 떴다가 저절로 사라지는 짧은 알림. 토스터에서 빵이 '톡' 올라왔다 쏙 들어가는 모습을 떠올리면 됩니다.

토스트는 화면 구석에 몇 초 떠 있다가 자동으로 사라집니다. 누를 필요도 없고, 사용자의 흐름을 막지도 않아요. "저장됐어요" "복사됐어요"처럼 가벼운 결과를 알릴 때 딱 맞습니다. 대신 버튼이 없어서 놓치면 다시 볼 수 없으니, 꼭 확인해야 하는 중요한 내용에는 쓰지 않는 게 좋아요.

이럴 때 써요: "링크 복사되면 '복사됐어요' 토스트만 살짝 띄워 줍시다."

5. 스낵바 (Snackbar)

토스트에 버튼 하나가 붙은 하단 알림 바. "삭제됨 — 되돌릴까요?" 하고 만회할 기회를 한 번 주는 쪽지예요.

스낵바는 구글 머티리얼 디자인에서 나온 용어입니다. 짧은 안내 문구에 '되돌리기' 같은 액션 버튼을 하나 얹은 형태죠. 화면 아래쪽에서 떠올랐다가 잠시 뒤 사라지는 건 토스트와 비슷하지만, 버튼이 있어 사용자가 한 번 반응할 수 있다는 점이 다릅니다. 토스트보다 한 단계 더 대화가 되는 알림인 셈이에요.

이럴 때 써요: "메일 삭제하면 '되돌리기' 스낵바로 실수를 만회하게 해 줍시다."

6. 바텀시트 (Bottom Sheet)

화면 아래에서 위로 스윽 올라오는 패널. 서랍을 아래에서 당겨 여는 느낌이라고 보면 됩니다.

바텀시트는 화면 하단에 붙어 위로 올라오면서 옵션 목록이나 공유 메뉴, 상세 정보를 담습니다. 살짝만 올라오는 것부터 화면을 거의 꽉 채우는 것까지 높이가 다양해요. 특히 모바일에서 엄지손가락이 닿기 쉬운 아래쪽에서 뜨기 때문에, 공유하기나 설정 선택 같은 상황에 아주 자주 쓰입니다.

이럴 때 써요: "공유 버튼 누르면 바텀시트로 공유 대상 목록을 올려 줍시다."

자주 묻는 질문

팝업과 모달은 같은 말인가요?

완전히 같지는 않습니다. 팝업은 화면 위에 겹쳐 뜨는 창 전체를 부르는 넓은 말이고, 모달은 그중에서 '뒤 화면을 막는' 방식을 가리켜요. 그래서 모든 모달은 팝업이지만, 모든 팝업이 모달인 것은 아닙니다. 뒤를 막지 않는 팝업도 많거든요.

토스트와 스낵바는 뭐가 다르죠?

버튼이 있느냐 없느냐가 가장 큰 차이입니다. 토스트는 그냥 알리고 조용히 사라져요. 스낵바는 '되돌리기' 같은 액션 버튼이 하나 붙어서, 사용자가 그 자리에서 한 번 반응할 수 있습니다. 만회할 기회를 주고 싶다면 스낵바가 낫습니다.

얼럿은 왜 되도록 적게 쓰라고 하나요?

얼럿은 사용자를 멈춰 세우고 "확인"을 강제하기 때문입니다. 자주 뜨면 피로해지고, 나중엔 내용도 안 읽고 확인을 눌러 버려요. 그러면 정작 중요한 경고까지 흘려보내게 됩니다. 그래서 정말 되돌릴 수 없는 순간에만 아껴 쓰는 게 원칙이에요.

마치며 — 이제 회의가 조금 덜 무섭지 않나요?

여섯 용어를 다시 한 줄로 묶어 볼게요. 팝업은 겹쳐 뜨는 창의 통칭, 모달은 막는 창, 얼럿은 확인을 강제하는 경고, 토스트는 스쳐 가는 알림, 스낵바는 버튼이 붙은 토스트, 바텀시트는 아래에서 올라오는 패널. 결국 "사용자를 멈춰 세우나, 그냥 지나가나"만 기억하면 됩니다.

다음 편에서는 '화면 영역' 용어를 다뤄 볼게요. 헤더·푸터·GNB·LNB·탭바·브레드크럼처럼, 화면의 뼈대를 이루는 여섯 가지를 쉽게 풀어 드리겠습니다. 오늘도 한 걸음 더 가까워지셨어요.

이 시리즈의 다른 글