스낵바, 토스트의 차이점
스낵바와 토스트가 다른 건가요?
스낵바(Snackbar)는 화면 하단에 일시적으로 나타나는 메시지 컴포넌트로, 사용자에게 중요한 피드백을 제공하며 작업을 방해하지 않는 방식으로 동작합니다. 이와 비슷한 토스트(Toast)라는 컴포넌트도 알고 계실 텐데요, 이 둘의 차이점은 무엇이고 어떻게 사용해야 하는지 알아보겠습니다.
스낵바의 구성
먼저 스낵바는 주로 화면 하단에 위치하며, 메시지를 통해 피드백을 제공하는 동시에 액션버튼을 통해 사용자가 조작할 수 있습니다.
❶ Container (컨테이너)
❷ Supporting text (텍스트)
❸ Action (액션 버튼, 선택사항)
❹ Close button (닫기 버튼, 선택사항)
스낵바와 토스트의 차이
Material Design 1과 같은 가이드에서는 이 둘을 다른 컴포넌트로 정의하고 있습니다. 둘의 차이는 다음과 같습니다.
❶ Snackbar (스낵바)
유래: 간식을 먹으면서 가벼운 행동을 취하는 것과 같이 가볍게 제공되는 정보라는 의미에서 유래
노출 위치: 주로 화면 하단
사용 목적: 간단한 피드백 제공 + 사용자 조작
지속 시간: 길거나 조작 시 유지될 수 있음
❷ Toast (토스트)
유래: 토스트가 구워졌다 사라지는 모습과 같이 잠깐 나타났다 사라지는 방식에서 유래
노출 위치: 화면 상단 또는 하단
사용 목적: 간단한 피드백 제공
지속 시간: 2-3초 정도로 짧음
둘의 가장 큰 차이는 사용자가 조작할 수 있는 버튼의 유무에 있습니다. 그렇기에 버튼이 없는 토스트의 경우 짧은 시간 노출되었다가 사라지게 됩니다.
스낵바에서 버튼이 사라지면 토스트인가요?
이는 가이드에 따라 다르다고 답할 수 있을 것 같습니다. 우선 스낵바와 토스트는 서로 다른 컴포넌트입니다. 사용자 입장에서는 둘의 차이를 느끼기 어려울 수 있지만, 둘의 목적과 용법이 다르기 때문입니다.
그러나 Material Design 1에는 스낵바와 토스트를 별도로 구분한 것과 반대로, Material 2와 3에서는 토스트를 별도로 구분하지 않고 있습니다. 버튼이 없는 토스트와 같은 형태도 스낵바로 소개하고 있습니다.
정리하자면 둘은 서로 다른 컴포넌트이지만, 디자인 시스템에서 정의하기에 따라 스낵바로 동일하게 취급하기도 한다는 것입니다. 기술적·디자인적 차원에서는 다르지만, 실무에서는 문맥에 따라 유사하게 사용된다고 할 수 있습니다.
스낵바의 사용방법
스낵바의 사용방법에 대해 이어서 알아보도록 하겠습니다.
스낵바는 앱이 수행했거나 수행할 프로세스를 사용자에게 알려줍니다. 사용자는 스낵바와 상호 작용할 필요 없이 페이지 콘텐츠를 탐색할 수 있습니다.
또한 한 번에 하나의 스낵바만 표시될 수 있습니다. “닫기” 또는 "취소”와 같은 단일 작업이 포함될 수 있으며 이는 선택 사항입니다.
모바일에서는 텍스트 레이블을 최대 두 줄까지 작성 가능하며, 가능한 한 줄로 유지하는 것을 권장합니다.
아이콘 사용을 지양하며, 필요한 경우 배너나 다이얼로그와 같은 다른 컴포넌트를 고려할 수 있습니다. 또한 복잡해 보일 수 있는 링크를 사용하는 대신, 버튼을 추가할 수 있습니다.
스낵바 컨테이너는 콘텐츠와 대조되도록 그림자가 있는 단색 배경색을 사용을 지향합니다.
텍스트와 버튼에 같은 색상을 사용하면 안 됩니다. 스낵바 내부에 Filled 버튼을 사용할 경우 많은 주의를 끌기 때문에 지양합니다.
넓은 레이아웃에서는 더 긴 텍스트 레이블을 수용하기 위해 컨테이너 너비를 확장합니다.
텍스트를 명확하게 읽을 수 있다면, 컨테이너 배경에 약간의 투명도를 적용할 수 있습니다. 스낵바 컨테이너의 모양을 크게 변경하는 것을 지양합니다.
액션 버튼의 레이블이 길면 세 번째 줄에 표시할 수 있습니다. 사용자가 선택사항을 되돌릴 수 있도록 '실행 취소' 버튼을 표시할 수 있습니다.
스낵바는 기본적으로 스스로 사라지므로, 닫기 버튼은 불필요합니다.
스낵바는 FAB(플로팅 액션 버튼) 위에 나타나야 합니다. (본 이미지의 FAB은 다소 커 보이긴 합니다.) 사용자는 FAB과 여전히 상호작용 할 수 있어야 하므로, FAB 앞이나 뒤에 스낵바를 배치하면 안 됩니다.
스낵바가 연속되어 나타날 경우, 한 번에 하나씩 나타나야 하며 위에 쌓을 수 없습니다. 또한 스낵바와 함께 다른 컴포넌트(예: FAB 버튼이 스낵바와 함께 위로 올라감)를 움직이면 안 됩니다.
스낵바는 별도의 경고 없이 발생하며, 사용자는 페이지 콘텐츠와 동시에 상호작용 할 수 있습니다. 액션이 없는 스낵바는 플랫폼에 따라 4~10초 후에 자동으로 닫힐 수 있습니다. 액션이 있는 스낵바의 경우, 사용자가 동작을 취하거나 닫기 전까지 화면에 남아있어야 합니다.
모달, 배너와 스낵바의 차이
스낵바는 짧은 정보를 전달하거나 액션을 요구한다는 점에서 모달이나 배너와도 유사한 역할을 가지고 있습니다. 이들과의 차이점은 다음과 같습니다.
❶ Modal / Dialog
사용 목적: 즉각적인 경고, 중요 정보 전달
화면 차지: 화면을 일부 또는 전체를 덮음
조작 여부: 필요(버튼 또는 닫기)
자동 해제 여부: 사용자가 직접 닫아야 함
예시: “삭제하시겠습니까?”와 같은 확인 요청
❷ Banner
사용 목적: 지속적인 정보 제공
화면 차지: 화면 상단 / 하단 고정
조작 여부: 일반적으로 필요 없음
자동 해제 여부: 일반적으로 자동 해제되지 않음
예시: “파일이 업로드되었습니다"와 같은 작업 완료 알림
❸ Snackbar
사용 목적: 간단한 피드백 제공 + 사용자 조작
화면 차지: 주로 화면 하단
조작 여부: 버튼이 있는 경우 조작
자동 해제 여부: 버튼이 없을 시 자동 해제 (4~10초)
예시: “파일이 휴지통으로 이동되었습니다."와 같은 작업 완료 알림 + “되돌리기"와 같은 동작
❹ Toast
사용 목적: 간단한 피드백 제공
화면 차지: 화면 상단 또는 하단
조작 여부: 없음
자동 해제 여부: 자동 해제 (짧음, 2~3초)
예시: “복사되었습니다"와 같은 짧은 피드백
마치며
스낵바는 사용자에게 간결하면서도 즉각적인 피드백을 제공하는 중요한 UI 요소입니다. 짧은 시간 동안 화면에 머물며 중요한 정보를 전달하지만, 과하게 사용하면 오히려 사용자 경험을 해칠 수 있습니다.
따라서 스낵바는 적절한 상황에서, 명확한 메시지와 필요한 액션 버튼을 포함하여 신중하게 활용하는 것이 중요합니다. 스낵바의 궁극적인 목적은 사용자 흐름을 방해하지 않으면서도 유용한 정보를 제공하는 것이니까요.
글 - 김현준
출처 - 브런치
