🍬
스낵바 (Snackbar)
토스트 메세지
🔗 참고 :
https://m3.material.io/components/snackbar/overview
https://rae-gi.tistory.com/79
스낵바 (Snackbar)
사용자에게 앱의 처리 과정에 대해 알려주고 일시적으로 화면의 하단에 등장한다.
📐 주의
UX를 방해해서는 안 되고 스낵바와의 상호작용 없이도 페이지를 훑어볼 수 있어야한다.
한 번에 한 스낵바만 보여야하고 ‘취소’ 혹은 ‘되돌리기’와 같은 하나의 행동만 추가될 수 있다.
스스로 사라지거나 사용자가 행동을 취할 때까지 화면에 남아있을 수 있다.
중요한 메세지를 보여주는 비슷한 컴포넌츠로는 배너와 다이얼로그 등이 있고 메세지의 중요도에 따라 선택하여 사용하면 된다.
배너는 행동을 취할 것을 추천하고 다이얼로그는 즉각적인 행동을 요구하는 차이점도 있다. 또한 스낵바는 배너와 다이얼로그에 비해 낮은 중요도를 가져서 주로 자동적으로 사라진다.
웹 접근성을 향상시키기 위한 방법
1. 행동을 취했을 시 즉시 피드백을 더한다.
ex. ‘저장’ 버튼을 클릭했다면 ‘저장됨’으로 변경되고 ‘저장되었습니다’ 메세지를 띄움
2. 행동가능한 스낵바를 만든다.
스낵바에서 사용자가 행동을 취할 수 있도록 하여 자동으로 사라지지 않게 만든다.
구성
- 텍스트 라벨
수행된 내용을 직접적으로 알려줘야한다.
가능하면 한 줄에 끝나는게 좋지만 작은 사이즈의 화면일 경우, 두줄까지도 가능하다.
아이콘은 포함하고 싶다면 배너나 다이얼로그를 사용한다.
복잡해질 수 있기 때문에 스타일이 적용된 텍스트나 인라인 링크를 포함하지 않는다. 링크를 포함해야한다면 버튼을 더하거나 다른 컴포넌트를 사용한다.
- 컨테이너
스낵바는 주로 불투명한 회색 배경에 직사각형 컨테이너로 보여진다.
컨텐츠와 분리되기 위해 그림자를 추가할 수 있다.
넓은 사이즈의 화면에서는 컨테이너 너비를 확장시킨다.
- 행동
스낵바 컴포넌트는 사용자가 앱의 진행에 대한 행동을 취할 수 있는 하나의 텍스트 버튼을 포함한다.
텍스트 라벨과 텍스트 버튼이 같은 색상으로 적용되면 안 된다.
둘을 분리하기 위해 텍스트 버튼에만 색상을 지정한다.
솔리드 버튼이나 위로 올라온 버튼은 주의를 너무 많이 끌기 때문에 스낵바 컨테이너 내부에서는 사용하지 않는다.
텍스트 버튼의 길이가 길다면 줄바꿈을 하여 위치해도 된다.
위치
UI의 하단, 메인 컨텐츠의 앞쪽에 위치해야한다.
때로는 FAB와 앱 바와 같은 컴포넌트와 겹치는 것을 방지하기 위해 FAB가 더 상단에 위치할 수 있다.
키보드 사용자들을 위한 웹 접근성을 향상시키기 위해 행동가능한 요소를 완전히 덮어버리도록 위치시키지 않는다.
(요소를 덮어버리는 것은 무엇이 포커스되고 선택되었는지 아는 것을 어렵게 한다.)
스낵바는 화면의 전체 너비만큼 차지할 수 있지만 내비게이션이나 FAB같은 다른 중요한 UI 요소보다 앞에 위치해서는 안 된다.
( FAB와 같은 선상에 있으면 안 되고 위에 위치해야한다. )
반응형 레이아웃
작은 사이즈의 화면에서는 리딩,트레일링 요소와 화면의 가장자리와의 고정된 거리를 유지하며 높이가 48dp - 64dp 로 한 두 줄의 텍스트를 포함해야한다.
중간 혹은 확장된 크기의 화면에서는 더 긴 텍스트를 포함할 수 있고 40-60글자 정도의 텍스트가 적당하다.
화면의 너비에 따라 유동적으로 적용될 수 있다.
중간 크기의 화면에서는 한 줄에 텍스트와 추가적인 버튼을 포함하고 넓은 크기의 화면에서는 화면 하단의 같은 부분에 일관되게 위치한다면 왼쪽 혹은 중앙 정렬이 될 수 있도록 한다.
연이은 스낵바가 등장한다면 옆으로 오지 않게 해야한다.
효과
- 등장과 퇴장
플랫폼에 따라 행동이 없는 스낵바는 4-10초 뒤에 자동으로 사라진다.
웹에서는 즉시 처리되는 피드백이 없을 경우 자동으로 사라지는 것을 피한다.
행동을 포함하는 스낵바는 사용자가 스낵바에서 행동을 취하거나 사라지게 할 때까지 화면에 유지되도록 한다.
- 연이은 스낵바
연이은 스낵바는 한 번에 하나씩 등장해야한다.
계속 업데이트 되는 스낵바는 이전의 것을 즉시 대체한다.
포커스
스낵바가 등장했다면 메세지를 알리되 포커스를 움직이지는 않는다.
자동으로 포커스를 옮기지 않는다.
스낵바에 포커스를 계속 잡아두지 않고 사용자가 자유롭게 포커스를 이동할 수 있도록 한다.
웹에서는 사용자가 단축키를 사용하여 포커스를 움직일 수 있도록 하고 도움말에 그 단축키를 명시한다.
스낵바에 유도되었던 포커스는 스낵바가 사라졌다면 다시 포커스가 위치했던 요소로 돌아가는 것이 좋다.
그 외 참고
스낵바가 등장할 때는 방해하지 않고 알려야한다.
행동이 가능한 스낵바라면 포커스를 움직여도 된다.
보조 기술을 사요앟여 스낵바에서 행동을 취할 수 있게 한다.
행동이 가능한 스낵바는 사용자가 자신의 속도에 맞춰 읽고 상호작용할 수 있도록 자동으로 사라지지 않게 한다.
행동이 불가능한 스낵바는 충분한 시간이 흐른 뒤에 자동으로 사라지게 할 수 있지만 추가적인 피드백 없이 웹에서는 접근이 불가능할 수도 있다.
스낵바의 지속 시간은 플랫폼에 따라 다르지만 주로 4-10초가 일반적이다.
UI요소들보다 더 눈에 띄기 위한 색상을 적용한다.
토스트 메세지
토스트 메세지와 스낵바는 텍스트와 함께 화면 하단에 나타나는 공통점이 있지만 차이점을 나눠보자면
토스트 메세지
주로 짧은 메세지를 표시하는 작은 팝업
정보 제공 혹은 간단한 안내 메세지를 표시하기 위해 사용
사용자의 추가적인 행동을 유도하지 않는다.
주로 짧은 시간 후 자동으로 사라진다.
스낵바
텍스트와 함께 사용자에게 행동을 유도하는 버튼이 함께 표시된다.
ex. '실행 취소', '다시 시도'
유저가 작업을 수행하거나 닫기 버튼을 누를 때까지 메세지가 남아있는다.
실습
📍만드는 방법
- 텍스트 레이어 두개 생성하여 텍스트라벨과 버튼 입력
(버튼은 예시에 없었지만 내가 추가함) - 한 번에 선택해서 오토 레이아웃 적용 후 여백, 둥글기, 그림자 적용
(스낵바가 직사각형이긴 해도 모서리를 약간 둥글려 준다.) - 텍스트 라벨과 버튼에 텍스트 프로퍼티 적용
- 추가적으로 버튼에 토글 프로퍼티 적용
