Snackbar
사용자의 행동에 대한 간결한 피드백을 제공하는 일시적인 알림입니다. 주로 화면 하단에 나타나 사용자의 작업 흐름을 방해하지 않으며, 실행 취소 같은 단순한 상호작용 버튼을 포함할 수 있습니다.
기본 높이는 54px로 내부 콘텐츠에 따라 높이가 결정됩니다. Heading은 최대 한 줄, Description은 최대 두 줄로 작성하는 것을 권장합니다. 최대 너비는 420px로 제한합니다.
Close button을 추가해 사용자가 직접 요소를 닫을 수 있는 방법을 제공할 수 있습니다. 즉시 메시지를 닫아야 하는 경우거나 노출 지속 시간을 길게 설정한 경우 사용할 수 있습니다.
화면 하단에 표시되며 기본 4초(4000ms) 후 자동으로 사라집니다. 단, 메시지가 길거나 사용자의 액션이 필요한 경우 내용을 충분히 인지할 수 있도록 16초(16000ms) 동안 노출할 수 있습니다.
Leading content 영역에 아이콘 대신 이미지나 아바타를 사용할 수 있습니다. 메시지의 내용을 시각적으로 암시해, 보다 직관적으로 이해할 수 있도록 돕습니다.
화면 좌우에 20px의 여백을 두는 것을 기본으로 합니다. 화면 너비가 넓어질 경우, Snackbar는 최대 너비(420px)를 유지하며 화면 중앙에 위치합니다. 화면 하단 UI 요소와의 상호작용을 방해하지 않도록 다음과 같이 사용하는 것을 권장합니다.
- Default: Safe area 영역을 제외하고 20px 위에서 노출합니다.
- Bottom navigation이 있는 경우: Bottom navigation으로부터 20px 위에 노출합니다.
- Action area가 있는 경우: Extra 영역을 제외한 Action area 영역 바로 위에 붙어서 노출합니다.
화면 좌우에 20dp의 여백을 두는 것을 기본으로 합니다. 화면 너비가 넓어질 겨우, Snackbar는 지정된 최대 너비를 유지하며 화면 중앙에 위치합니다. Android OS 가이드라인에 따라 다음 기준에 맞춰 사용하는 것을 권장합니다.
- Default: Safe Area 영역을 제외하고 16dp 위에서 노출합니다.
- Bottom navigation이 있는 경우: Bottom navigation으로부터 16dp 위에서 노출합니다.
- Action area가 있는 경우: Safe area 영역을 제외하고 16dp 위에서 노출합니다.
화면 좌우에 20px의 여백을 두는 것을 기본으로 합니다. 화면 너비가 넓어질 경우, Snackbar는 지정된 최대 너비를 유지하며 화면 중앙에 위치합니다. 모바일 웹에서 화면 하단 UI 요소와의 상호작용을 방해하지 않도록 다음과 같이 사용하는 것을 권장합니다.
- Default: Safe area 영역을 제외하고 20px 위에서 노출합니다.
- Bottom navigation이 있는 경우: Bottom navigation으로부터 20px 위에 노출합니다.
- Action area가 있는 경우: Extra 영역을 제외한 Action area 영역 바로 위에 붙어서 노출합니다.
