피드백을 제공하는 컴포넌트, Toast/Snackbar
잘 써먹기 위해 정리하는 UI 5편
벌써 다섯 번째 글을 쓴다. 4편 Popover 컴포넌트를 정리하면서도 많이 어려웠는데, 이번에 정리할 컴포넌트는 더 어려운 것 같다. 좋아하는 분야이고 실무 경험도 가지고 있어 잘하는 분야라 생각했는데, 한 편 한 편씩 글을 써보니 모르고 지나친 것들이 참 많다.
이번 5편은 사용자에게 작업 결과 또는 피드백을 전달하는 Toast와 Snackbar 컴포넌트를 정리해 본다. 먼저 네이버 사전에 정의된 피드백의 뜻을 살펴보면, '(교육) 학습자의 학습 행동에 대하여 교사가 적절한 반응을 보이는 일', '(심리) 진행된 행동이나 반응의 결과를 본인에게 알려주는 일'의 의미를 지닌다. 적절한 반응을 보이는 일, 결과를 본인에게 알려주는 일과 같이 Toast와 Snackbar 컴포넌트는 사용자에게 적절한 반응과 결과를 제공하는 기능을 한다.
1. 간결한 피드백 메시지, Toast
Toast 컴포넌트는 팝업 형태의 한 종류로, 화면 하단에 위치하여 나타났다 사라지는 작은 메시지이다. 사용자가 요청한 작업에 대한 결과를 빠르게 피드백하기 위해 사용한다. 선택 사항으로 닫기 버튼(Close icon)을 추가하여 수동으로 해제할 수 있지만, 기본 형태는 닫기 버튼 없이 2~3초가량 유지되었다 자동으로 사라지는 인터랙션을 갖는다. 그래서 Toast는 일시적이며, 강조가 적은 컴포넌트이다. 중요도가 낮은 간결한 피드백을 전달하기에 적합하다고 할 수 있다.
- 언론사 구독 해지되었습니다.
- 장바구니에 상품을 담았습니다.
- 재생목록에 1곡이 추가되었습니다.
Toast 컴포넌트는 주로 작업 결과가 성공적인 경우에 사용한다. '인터넷 연결이 불안정합니다.' 등과 같이 중요도가 낮은 실패를 제외하고, 실패 또는 오류에 대한 결과는 사용자의 인지가 꼭 필요하다는 점에서 일시적이 아닌 지속적으로 제공할 수 있는 Banner, Dialog 컴포넌트를 고려해야 한다.
Toast 컴포넌트의 위치는 플랫폼 규모에 따라 다르다. PC에서는 넓은 화면으로 상단 중앙, 상단 우측, 하단 중앙, 하단 우측으로 4가지 배치가 가능하며, 모바일은 하단에 위치한다. 무엇보다도 사용자의 작업을 방해하지 않고, 사용자가 안정적으로 피드백 메시지를 탐색할 수 있도록 일관된 위치에서 제공되어야 한다.
또한, Toast 컴포넌트는 짧은 시간에 여러 개가 표시될 수 있다. 동시에 너무 많은 Toast가 제공되지 않도록 설계해야 한다. 부득이하게 동시에 나타날 경우 여러 겹으로 겹쳐지는 형태가 아닌, 위로 밀어내며 순차적으로 나타났다 사라지는 형태여야 한다.
2. 액션을 제공하는 피드백 메시지, Snackbar
Snackbar는 구글의 Material Design에서 정의하고 있는 컴포넌트로, 안드로이드 OS에서 기본적으로 사용하는 시스템 컴포넌트이다. Snackbar와 Toast 컴포넌트 모두 짧고 간결한 피드백을 제공한다는 점에서 동일하지만, Snackbar가 Toast와 달리 액션을 함께 제공할 수 있다는 점에서 좀 더 활용도가 높은 컴포넌트라 할 수 있다. 이때 액션은 1개의 액션만 제공할 수 있다.
- 1개의 메일을 삭제하였습니다. (액션 : 실행취소)
- OOO파일이 OOO(으)로 이동하였습니다. (액션 : 실행취소)
- 품절을 제외한 1개의 상품이 장바구니에 추가되었습니다. (액션 : 이동)
Snackbar 컴포넌트는 플랫폼의 규모와 상관없이 하단에 위치한다. 하단 내비게이션이나 자주 사용하는 터치 요소와 겹쳐서는 안되며, 하단의 고정 UI가 없을 때만 전체 너비로 채워 사용할 수 있다. 좀 더 정확한 이해를 위해 구글 Material Design 가이드를 읽어보면 좋을 것 같다.
3. Toast 컴포넌트와 Snackbar 컴포넌트의 유사점
(1) 짧고 간결한 피드백 메시지를 전달한다.
(2) 화면 하단에서 나타났다 자동으로 사라지는 일시적인 컴포넌트이다.
(3) 사용자가 안정적으로 메시지를 탐색할 수 있도록 일관된 위치에서 제공한다.
4. Toast 컴포넌트와 Snackbar 컴포넌트의 차이점
(1) Toast 컴포넌트는 피드백 메시지만 전달하며, Snackbar 컴포넌트는 피드백 메시지뿐만 아니라 액션을 추가하여 제공할 수 있다. 이때 액션은 1개의 액션을 말하며, 2개 이상의 액션을 제공해야 할 경우 다른 컴포넌트를 고려해야 한다.
(2) Toast 컴포넌트는 선택 사항으로 닫기 버튼(Close icon)을 제공할 수 있지만, Snackbar 컴포넌트는 닫기 버튼을 제공하지 않는다. Snackbar에서 제공하는 액션은 '닫기'보다는 '실행취소', '이동'과 같은 사용자의 리액션을 받을 수 있는 특정 액션이어야 한다.
(3) Toast 컴포넌트는 PC에서 다양한 위치에 배치할 수 있지만, Snackbar 컴포넌트는 플랫폼 규모와 상관없이 하단에 위치한다.
(4) Toast 컴포넌트는 짧은 시간 사이에 여러 개가 나타날 수 있지만, Snackbar 컴포넌트는 한 번에 하나씩만 표시된다.
Toast와 Snackbar 컴포넌트를 한 편으로 정리하려니 부족한 부분이 많은 것 같다. 아래의 참고 자료도 함께 읽어보길 권한다. 영어로 되어 있지만, 이미지만 봐도 충분히 이해가 된다. 가이드에 적절한 예시와 부적절한 예시를 이미지와 모션으로 잘 정리되어 있어 읽으면 컴포넌트를 이해하는데 많은 도움이 될 것 같다:)
[참고자료]
1. Toast vs Snackbar – Difference Between Toast and Snackbar by Chara Yadav
2. Adobe Spectrum - Toast
3. Google Material Design - Snackbars
[레퍼런스 서비스]
네이버
이마트
지니뮤직
네이버 메일
구글 드라이브
쿠팡
