Snackbar

Nov 11

GUIDE

Snackbar 컴포넌트는 수행한 프로세스의 결과를 사용자에게 간단하게 알려주는 용도로 사용할 수 있습니다.  
기본적으로 하단에 노출되며, 동작과 관련된 짧은 텍스트와 액션 버튼이 포함됩니다.
Snackbar는 사용자의 이용 흐름을 방해하지 않는 선에서 메시지를 표시합니다.
시간이 지나면 자동으로 사라진다는 점에서 Toast와 비슷하지만, 특정 액션 버튼을 통해 사용자와 상호작용을 할 수도 있습니다.
따라서 Snackbar는 Modal보다 사용자에게 주는 영향이 적고, Toast보다 더 커스텀하게 이용할 수 있기 때문에 보다 다용도로 이용할 수 있습니다.
스낵바는 기본적으로 사용자가 특정 액션 버튼을 눌렀을 때 나타나지만, 이는 사용 맥락에 따라 다를 수 있습니다.

ANATOMY

스낵바의 정보가 잘 보이도록 강조된 색상을 사용하기 위해 되도록 칼라 가이드에 정해진 색상(bg/notification)을 사용하지만, 이는 각 도메인의 디자인 컨셉 및 UI 구성에 따라 달라질 수 있으니 디자인 QA가 요구될 수 있습니다.
메시지에 상징적인 의미가 포함된 경우, 이를 강조하고 싶을 때 사용합니다.
메시지의 핵심 내용을 간추려 보여줄 때 사용합니다.
메시지의 의미를 2줄 이내로 간결하게 작성합니다.
‘바로가기, 회원가입 등’ 다음 액션 실행에 대한 유도 메시지가 명확한 경우,  ‘실행 취소, 실행 중단 등’ 사용자들이 쉽게 자신들의 행동을 번복할 수 있게  다양한 케이스에 대비하여 짧은 텍스트로 액션 버튼을 제공합니다.
모든 스낵바는 별도의 액션 버튼을 누르지 않는 한 3초 뒤 자동으로 사라집니다.
선택 시 해당 페이지로 이동하는 액션이 실행됩니다.
모든 스낵바는 3초 뒤 자동으로 사라지지만, X버튼 클릭 시 해당 스낵바는 바로 제거됩니다. X 버튼은 상단에 고정되어 노출됩니다.
전체 화면에서 상위 레이어에 배치하기 때문에 컴포넌트 간의 시각적 충돌을 최소화 하고자 grey shadow를 적용합니다.
모델 파일과 같이 특정 이미지에 대해 보다 명확한 정보를 전달하고 싶을 경우 사용합니다.