안녕하세요 피피팀 시원
입니다.
입니다.이번 주에는 UI 컴포넌트 중 자주 쓰이지만 혼동하기 쉬운, 스낵바와 토스트바의 차이를 알려드릴게요.
주니어 디자이너라면 헷갈릴 수밖에 없는 요소이기도 한데요, 사실 저도 처음 실무에 들어왔을 때는 두 개가 뭐가 다른 건지 정말 헷갈렸어요.
두 컴포넌트 모두 사용자의 액션에 반응해 잠깐 나타났다가 사라지는 ‘가벼운 알림’이라는 공통점이 있지만, 의도와 사용 방식은 조금씩 다르답니다.
Snackbar (스낵바)
스낵바는 조금 더 맥락 있는 상황 피드백을 주기 위한 컴포넌트예요. 예를 들어 ‘이메일이 삭제되었습니다’와 함께 ‘되돌리기’ 버튼이 함께 뜬다든지요.
즉, 단순한 알림에 그치지 않고, 사용자에게 선택지를 제공할 수 있다는 점이 가장 큰 차이입니다.
보통 화면 하단에 나타나고, 버튼이 포함되어 있어 직접적인 상호작용이 가능해요. Toast (토스트바)
토스트는 보통 사용자가 어떤 행동을 했을 때 결과를 간단히 알려주는 용도로 사용돼요. 예를 들면 ‘저장 완료’, ‘복사됨’ 같은 메시지죠.
특징은 사용자가 직접 조작할 수 없고, 그냥 일정 시간이 지나면 자동으로 사라진다는 점이에요.
또한 화면 상단 또는 중앙에 짧게 나타나며, 인터페이스 흐름을 거의 방해하지 않습니다.결국, 스낵바는 행동을 유도할 수 있는 상호작용형 피드백, 토스트는 알림에 집중된 단방향 정보 전달이라고 기억하시면 좋습니다.
다음 편에서는 ‘모달과 팝업의 차이’에 대해 다뤄볼게요.
오늘도 유익한 하루 보내세요 :)
