알림을 제공하는 UI는 다양하다.
그중 Snackbar / Toast Message의 차이에 대해 알아보자.
Alert의 개념
먼저 Alert 는 정보를 전달하고 주의를 끄는 역할을 하는 Snackbar, Toast Message, Dialog, Banner 등의 모든 형태를 포함하는 '상위 개념' 으로써 컴포넌트가 아닌 'Notification 구현 방법'이라고 볼 수 있겠다.
Alert은 '정말 삭제/저장하시겠습니까?'와 같은 확인 메시지를 위와 같은 Dialog 형태로 제공될 수도 있고
서비스 점검, 네트워크 연결 중단, 평가판 유효기한 등 서비스 이용과 관련된 다양한 정보를 제공하는 Banner 형식의 Alert으로도 제공될 수 있으며, 오늘 다룰 Snackbar와 Toast Message 뿐만 아니라 '이 필드는 필수 입력사항입니다.'와 같이 페이지나 화면의 특정 영역에 표시되며, 관련 콘텍스트와 밀접한 정보를 전달하는 In-line Alert 형태로도 제공될 수 있다.
이 다양한 Alert 컴포넌트 사이에서 유독 헷갈리는 두 가지가 있는데 그것이 바로 Snackbar와 Toast Message이다.
먼저, 스낵바부터 알아보자.
Snackbar
사용자에게 짧은 기간 동안 중요한 정보를 표시하지만, 즉각적인 액션이 반드시 필요하지 않을 때 사용하는 스낵바는 짧은 시간 등장했다 자동으로 사라진다는 점에서 토스트메시지와 헷갈릴 수 있다. 스낵바는 토스트메시지보다는 중요한 정보를 제공하며 일반적으로 사용자 행동에 대해 맥락(Context) 이 있는 피드백을 제공하는 데 사용된다. 따라서 토스트메시지보다는 좀 더 긴 시간 노출되며 '액션버튼'이 제공될 수 있다.
스낵바의 일반적인 위치는 화면 하단인데, 그 이유는 아래와 같다.
- 상단에 오는 다른 Alert UI와 부딪히는 것을 방지할 수 있다.
- 사용자의 시선은 화면 상단보다는 하단에 집중되기 때문에 사용자가 알림 메시지를 놓치지 않고 읽으면서도 작업 흐름을 계속 진행할 수 있는 위치이다.
- 주로 상단엔 내비게이션 바, 앱 헤더, 또는 상태 바 같은 중요한 UI 요소가 위치하므로, 상단에 Snackbar를 배치했을 경우의 시각적 혼란을 방지할 수 있다.
- 사용자의 손가락이 쉽게 닿는 위치로, 스낵바에 액션 버튼이 있는 경우 사용자가 쉽게 액션을 취할 수 있다.
물론, 이건 일반적으로 추천하는 위치기에 이유만 명확하다면 상단에 노출되도록 해도 무방하다.
Toast Message
토스트 메시지는 성공, 실패, 복사, 추가, 삭제 등 스낵바보다 덜 중요한 단순 피드백이나 즉각적인 시스템 변화 알림 등에 사용된다.
따라서 스낵바보다 지속시간이 짧고 순간의 주목도를 높이기 위해 컬러 등이 적극적으로 사용되기도 한다.
Snackbar와 Toast Message 의 차이점 한눈에 보기
Snackbar와 Toast Message의 주요 차이를 표로 정리해 보자면 아래와 같다.
| 구분 | Snackbar | Toast Message |
| 위치 | 화면 **하단(중앙 또는 좌우)**에 고정. 일반적으로 페이지의 컨텍스트와 연관됨. | 화면의 상단 또는 **하단(좌우)**에 나타남. 특정 위치 없음. |
| 사용 목적 | 컨텍스트가 있는 작업 피드백 제공. 예: "저장되었습니다. [실행 취소]" | 단순 피드백 제공. 예: "복사되었습니다." |
| 사용자 상호작용 여부 |
액션 버튼이 포함될 수 있어 사용자 상호작용 가능. | 상호작용 없이 단순히 나타났다 사라짐. |
| 시간 | 일반적으로 약간 더 긴 시간 동안 표시되며, 사용자가 직접 닫을 수 있음. | 매우 짧은 시간 동안만 표시되며 자동으로 사라짐. |
| 중요도 | 비교적 중요한 피드백을 전달. 사용자가 놓치면 안 되는 정보. | 비교적 덜 중요한 피드백. 예: 시스템 상태나 작업 완료 알림. |
글을 마무리 하며
하지만 형태도, 기능도 상당히 흡사하거나 같더라도 컴포넌트의 네이밍 정의는 디자인 시스템마다 다르게 정의되기도 한다.
아래 이미지처럼 사실상 스낵바와 토스트가 같은 기능과 구조를 가졌음에도 다른 이름으로 불릴 때가 있다.
서비스에서 스낵바와 토스트메시지 중 하나만 사용한다면 둘을 굳이 구분 짓거나 명칭을 크게 고민할 필요가 없겠지만 둘을 같이 쓰는 경우라면 위 내용을 참고하여 목적과 중요도에 맞춰 구분 지어 사용하면 될 것이다.