토스트 메시지란? 스낵바·바텀시트와의 차이와 사용 예시

안녕하세요. 사랑받는 IT 프로덕트의 첫걸음, 똑똑한개발자입니다.

UI에서 토스트 메시지(Toast message)는 사용자의 작업 결과나 현재 상태를 짧게 알려주는 알림입니다. 링크를 복사한 뒤 나타나는 “복사했습니다”, 설정을 바꾼 뒤 보이는 “저장했습니다”가 대표적인 예입니다. 보통 잠시 표시된 뒤 사라지며, 사용자는 알림을 닫지 않고도 하던 작업을 계속할 수 있습니다.

토스트와 함께 자주 등장하는 UI로는 스낵바와 바텀시트가 있습니다. 스낵바는 짧은 안내에 실행 취소 같은 동작을 제공할 수 있고, 바텀시트는 선택지나 추가 정보를 담는 패널입니다. 세 가지의 특징과 사용 예시를 살펴보겠습니다.

토스트 메시지란 무엇인가요?

토스트 메시지는 화면의 일부 영역에 잠깐 나타나는 안내입니다. 새 페이지를 열거나 사용자의 확인을 기다리지 않고 작업 결과를 전달할 때 쓰입니다.

예를 들어 공유 링크를 복사하면 “링크를 복사했습니다”라는 메시지가 나타납니다. 사용자는 복사가 끝났다는 사실을 확인한 뒤 다른 앱에 링크를 붙여 넣을 수 있습니다. 알림 자체에서 추가로 선택할 내용은 없습니다.

다만 토스트라는 이름의 사용 범위는 플랫폼과 라이브러리에 따라 다릅니다. 안드로이드의 기본 Toast는 사용자의 조작을 요구하지 않는 짧은 알림입니다. 웹 UI 라이브러리에서는 닫기 버튼이나 액션이 있는 알림도 toast라고 부르기도 합니다. 따라서 이름과 함께 실제 동작을 살펴보면 이해하기 쉽습니다.

스낵바란 무엇인가요?

UI에서 스낵바(Snackbar)는 현재 작업에 대한 짧은 피드백을 보여주는 컴포넌트입니다. 주로 화면 아래쪽에 나타나며, 메시지와 함께 “실행 취소”나 “다시 시도” 같은 액션을 제공할 수 있습니다.

목록에서 항목을 지운 뒤 “삭제했습니다”와 “실행 취소”를 함께 보여주는 화면이 한 예입니다. 사용자는 삭제 결과를 확인하고, 실수였다면 같은 알림에서 되돌리기를 선택할 수 있습니다.

스낵바에 항상 버튼이 있는 것은 아닙니다. 메시지만 표시하는 경우도 있습니다. 토스트와 스낵바의 차이를 설명할 때 버튼 유무를 많이 언급하지만, 버튼 하나만으로 모든 UI를 구분하기는 어렵습니다. 사용하는 디자인 시스템의 정의와 동작 방식도 함께 보면 좋습니다.

바텀시트란 무엇인가요?

바텀시트(Bottom sheet)는 화면 아래에서 올라오는 패널입니다. 간단한 알림뿐 아니라 목록, 옵션, 설명, 입력 요소 등 여러 콘텐츠를 담을 수 있습니다.

사진을 공유할 앱을 고르거나, 상품 목록의 정렬 방식을 선택하거나, 지도에서 장소의 상세 정보를 보는 화면에 자주 사용됩니다. 짧게 결과를 알려주는 토스트·스낵바와 달리 사용자가 내용을 읽고 선택하는 공간에 가깝습니다.

바텀시트에는 뒤쪽 화면의 조작을 막는 모달형과 배경 콘텐츠와 함께 사용할 수 있는 형태가 있습니다. 닫기 버튼, 바깥 영역 터치, 아래로 끌기 등의 지원 여부는 구현에 따라 달라집니다.

토스트·스낵바·바텀시트 차이 한눈에 보기

세 가지 모두 현재 화면 위에 나타날 수 있지만, 전달하는 정보의 양과 사용자가 할 수 있는 일이 다릅니다. “처리가 끝났어요”라는 결과는 짧은 알림으로 전달할 수 있습니다. “어떤 항목을 선택할까요?”처럼 여러 선택지가 있으면 바텀시트 같은 패널이 쓰입니다.

안드로이드와 웹에서도 같은 의미인가요?

안드로이드에서는 Toast와 Snackbar가 각각 제공되는 UI 구성 요소입니다. 안드로이드 공식 Toast 문서는 Toast를 잠시 표시된 뒤 자동으로 사라지는 작은 팝업으로 설명합니다. 앱이 화면에 활성화된 상태에서는 Snackbar 사용을 고려하도록 안내합니다.

웹에서는 라이브러리마다 이름과 기능이 조금씩 다릅니다. 같은 toast라는 이름을 쓰더라도 표시 위치, 버튼 지원, 자동 종료 여부가 다를 수 있습니다. 다른 플랫폼의 화면을 참고할 때도 명칭뿐 아니라 표시 시간과 상호작용을 함께 살펴보면 차이를 이해하기 쉽습니다.

삭제 후 실행 취소는 어떻게 동작하나요?

삭제 후 스낵바의 “실행 취소”를 누르면 방금 처리한 작업을 되돌리는 방식입니다. 예를 들어 문서를 보관함으로 옮긴 뒤 취소 버튼을 누르면 원래 목록으로 돌아오게 할 수 있습니다.

이때 스낵바는 복구 기능을 보여주는 화면이고, 실제 복구는 서비스의 데이터 처리 방식에 따라 이루어집니다. 잠시 삭제를 보류하는 방식도 있고, 휴지통이나 보관함에서 원래 상태로 옮기는 방식도 있습니다. 이미 영구 삭제한 데이터라면 같은 방식으로 되돌릴 수 없을 수 있습니다.

결제 실패나 입력 오류처럼 계속 확인할 필요가 있는 정보는 짧게 사라지는 메시지만으로 전달하면 놓치기 쉽습니다. 입력란 옆의 오류 설명이나 화면에 남아 있는 상태 안내를 함께 제공하는 사례가 많은 이유입니다.

UI 명세에는 어떤 내용이 들어가나요?

알림 UI를 설명할 때는 발생 조건, 표시 문구, 버튼 동작, 종료 조건을 함께 적습니다. 예를 들어 “링크 복사에 성공하면 ‘링크를 복사했습니다’를 표시하고 일정 시간 뒤 닫힌다”처럼 작성할 수 있습니다.

표시 시간은 모든 메시지에 동일하게 정해져 있지는 않습니다. 문구 길이, 액션 유무, 플랫폼의 기본 동작, 접근성 설정에 따라 달라집니다. 버튼이 있는 알림은 내용을 읽는 시간과 버튼을 선택하는 시간을 함께 고려합니다.

이처럼 토스트는 짧은 상태 안내, 스낵바는 작업 피드백과 선택적 액션, 바텀시트는 추가 정보와 선택 공간으로 이해하면 기본적인 차이를 구분하기 쉽습니다. 실제 제품에서는 사용하는 UI 라이브러리의 정의와 서비스의 동작 방식에 따라 세부 형태가 달라집니다.

참고: Android Snackbar 안내, Android 바텀시트 안내

사용하기 편한 화면을 함께 만들어갑니다

저장이 끝났다는 짧은 안내, 실수로 누른 삭제를 되돌리는 버튼처럼 작은 UI도 서비스를 쓰는 경험에 영향을 줍니다. 화면을 만들다 보면 이런 세부적인 동작까지 함께 고민하게 되는데요.

똑똑한개발자는 UX/UI 디자인부터 웹·앱 개발까지 함께하며, 화면의 모습과 실제 동작을 연결합니다. 디자인 시스템을 정리할 때도 디자이너와 개발자가 같은 구성 요소를 같은 이름으로 이해할 수 있도록 돕고 있습니다.

직장인들이 정보와 지식을 나누는 패스트파이브의 커뮤니티 OOM에서도 UX/UI 디자인과 개발을 함께했습니다. 사람들이 콘텐츠를 읽고 자신의 이야기를 공유하는 공간을 만든 프로젝트입니다.

만들고 있는 서비스의 화면이나 UI를 두고 고민하고 계신가요? 작은 불편을 개선하는 일부터 디자인 시스템을 정리하는 일까지, 필요한 내용을 아래 똑똑한개발자 링크에 편하게 남겨주세요. 함께 살펴보겠습니다. 감사합니다. :)