제대로 알고 쓰자! - Toast와 Snack bar (& Dialog, Alert)

이미지 출처 : Pixabay

제대로 알고 쓰자!
웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.
모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.
이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.
헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다.

 

첫 번째 포스팅 대상은 정보 전달의 목적으로 정말 자주 사용되는 Toast와 Snack bar.

그리고 같은 목적(정보 전달)을 가진 컴포넌트 Dialog와 시스템의 Alert에 대해서도 간단하게 다뤄보려고 한다.

사용자에게 간단한 정보를 전달하기 위한 여러 컴포넌트들을 종합적으로 분석해보자.

 

다음과 같은 구성으로 진행된다.

1. 간단한 정보 전달을 위한 컴포넌트
2. Toast / Snack bar의 특징과 차이 (+Dialog, Alert)
3. 요약하기

---

1. 간단한 정보 전달을 위한 컴포넌트

이름	설명	사용 예시
Toast	잠깐 나타났다가 자동으로 사라지는 가벼운 알림 메시지	파일 저장 완료, 네트워크 연결 성공
Snack bar	Toast와 유사 + 상호작용 버튼을 포함할 수 있는 메시지	메시지 전송 완료 후 취소 기능
Dialog	사용자의 중요한 상호작용을 위한 웹 페이지 내부에서 생성되는 컴포넌트	삭제 확인, 정보 입력, 경고 메시지
Alert	사용자에게 경고나 중요한 알림을 전달하는 시스템 또는 커스터마이징 창	필수 입력 값 누락 경고, 오류 메시지
Tooltip	마우스 호버 시 나타나는 작은 정보 창으로 특정 요소에 대한 설명	버튼 설명, 아이콘 의미 설명
Popover	특정 요소 근처에 나타나는 추가 정보 제공 또는 간단한 상호작용 창	더 보기 옵션, 계정 정보 표시

Tooltip과 Popover의 모습

 

정보 전달을 목적으로 하는 컴포넌트들은 물론 더 많지만, 위의 표에 정리한 컴포넌트는 모두 공통적으로

사용자의 어떤 액션을 통해 나타나며 일정 시간이 지나거나 이벤트가 발생하면 화면에서 다시 보이지 않게 된다.

즉 '잠깐' 나타나서 가벼운 정보를 전달하기에 적합하다는 특징이 있다.

 

---

2. Toast / Snack bar의 특징과 차이

위의 표에서도 확인할 수 있지만 둘의 공통점은 "짧은 알림", 차이점은 사용자의 "상호작용" 가능 여부이다.

Toast와 Snack bar의 각각의 특징에 대해 우선 알아보자.

 

[Toast]

화면 하단이나 상단에 잠깐 나타나는 메시지로, 사용자에게 가벼운 피드백을 주거나 알림을 전달하는 데 사용된다.

사용자가 별도로 상호작용을 하지 않고 일정 시간이 지난 뒤 사라진다.

• 사용 사례: 저장 완료, 네트워크 연결 성공, 간단한 상태 업데이트 등에 대한 짧은 알림
• 디자인 요소: 간단한 텍스트, 아이콘 등을 포함
• 장점: 사용자 경험을 방해하지 않고 빠르게 정보를 제공
• 단점: 너무 빠르게 사라지면 사용자가 놓칠 수 있음

[Snack bar]

Toast와 비슷하지만, 더 긴 피드백 메시지 또는 액션 버튼을 포함할 수 있다.

화면 하단에 나타나는 것이 일반적이며, 사용자에게 잠깐의 정보와 선택적 상호작용(예: 취소, 실행)을 제공한다.

• 사용 사례: 메시지 전송 성공, 작업 취소 옵션에 대한 사용자의 액션
• 디자인 요소: 메시지와 함께 간단한 상호작용 버튼을 포함
• 장점: 추가적인 상호작용을 제공하면서도 사용자 경험을 방해하지 않음
• 단점: 사용자가 무시하거나 버튼을 눌러야 할 때 놓칠 가능성 있음

 

Snack bar의 경우 Toast의 기능에서 확장되었기 때문에 많은 라이브러리에서 Snack bar을 기본으로 제공하고 있다.

Toast를 띄우고 싶다면 Snack bar에서 상호작용 버튼을 제거하고 사라지는 시간을 더 짧게 하면 된다.

간단한 정보를 짧게 표시하기 위해서라면 Toast, 사용자의 추가 행동이 필요하다면 Snack bar을 사용한다.

 

사용자의 액션이 필수적이거나 많은 정보를 보여줘야 한다면 Dialog나 Alert 컴포넌트를 사용하는 것이 바람직하다.

 

[Dialog]

 

Dialog(또는 Modal)은 사용자에게 중요한 정보를 전달하거나 즉각적인 선택을 요구할 때 사용된다.

주로 화면 위에 떠서 배경을 흐리게 하여 사용자에게 집중을 요구하고, 상호작용이 끝나기 전까지 사라지지 않는다.

새 창을 띄우는 팝업과의 차이점에 대해서는 다음 포스팅에서 다뤄보고자 한다.

• 사용 사례: 중요한 정보나 즉각적인 결정을 요구(예: 항목 선택, 사용자 정보 입력)
• 디자인 요소: 보통 타이틀, 본문, 확인/취소 버튼을 포함
• 장점: 중요한 정보에 대한 사용자 주의 집중을 유도
• 단점: 잘못 사용하면 사용자 경험을 방해할 수 있음

[System Alert]

System Alert는 운영 체제 수준에서 제공되는 기본적인 경고 창이다.

브라우저 또는 OS가 사용하는 네이티브 방식으로 개발자가 직접 스타일을 커스터마이징하기는 어렵다는 단점이 있다.

따라서 스타일 변경을 위해 Dialog 컴포넌트를 응용하여 System Alert처럼 작동하도록 변경할 수도 있으며

Alert 컴포넌트를 별도로 제공하는 라이브러리도 많이 찾을 수 있다.

사용자가 응답하지 않으면 DOM 내 다른 요소들에 접근할 수 없기 때문에 가장 집중도가 높다.

• 사용 사례: 보안 경고, 사용자 확인이 꼭 필요한 경우
• 디자인 요소: OS에 따라 기본적으로 제공
• 장점: 사용자의 주의를 확실히 끌며 즉각적인 상호작용을 요구함
• 단점: 브라우저에 따라 다르기 때문에 UI 일관성이 떨어지고, 사용자 경험을 방해할 수 있음

 

Toast와 Snack bar에 대해서는 실제 예시를 보면 더 이해하기 쉬울 것이다.

https://www.w3schools.com/howto/howto_js_snackbar.asp

W3Schools.com

https://mui.com/material-ui/react-snackbar/

React Snackbar component - Material UI

Google의 Material Design에서 제공하는 문서도 참고하면 좋을 것 같다.

더 나은 사용자 경험을 위한 아이콘의 사용 여부, 위치나 액션 버튼 등에 대한 종합적인 가이드를 설명한다. 

https://m3.material.io/components/snackbar/guidelines

Snackbars – Material Design 3

---

3. 요약하기

특징	Dialog (Modal)	Toast	Snackbar	System Alert
목적	중요한 정보나 상호작용	가벼운 정보 제공	정보 제공 + 상호작용 선택 가능	필수 상호작용 요구
상호작용	필수	없음	상호작용 선택	필수
커스터마이징	높음	높음	높음	낮음 (시스템에 의해 고정)
주의 집중도	매우 높음	낮음	중간	매우 높음

 

Snackbar는 사용자에게 간단한 정보를 전달하고, 필요에 따라 추가적인 상호작용을 받지만 반드시 응답할 필요는 없다.

반면에, Alert는 중요한 정보를 전달하고 사용자에게 즉각적인 반응을 요구한다.

사용자가 응답하지 않으면 다른 작업을 진행할 수 없다.

모두 각자의 역할이 존재하는 컴포넌트인 만큼, 사용자 경험을 고려하여 상황에 맞게 적절히 사용하면 좋겠다.

---