웹 개발 기본 & 디자인

[UI 디자인] 사용자 정보 전달 UI: 다이얼로그, 배너, 스낵바

Data Jun 2025. 12. 13. 09:57

서비스를 사용하다 보면
저장, 삭제, 추가, 알림 같은 즉각적인 피드백 UI를 자주 마주하게 됩니다.
이때 가장 많이 쓰이는 컴포넌트가 바로
다이얼로그(Dialog), 배너(Banner), 스낵바(Snackbar/Toast) 입니다.

 

1. 다이얼로그 (Dialog)

1️⃣ 특징

  • 화면 중앙에 표시
  • 사용자의 행동을 반드시 요구
  • 다른 UI와의 상호작용을 일시적으로 차단

2️⃣ 활용

  • 삭제 / 로그아웃 / 결제 확인
  • 되돌릴 수 없는 중요한 액션

핵심: “사용자의 명확한 선택이 필요한 상황”

다이얼로그 예시

 

 

2. 배너 (Banner)

1️⃣ 특징

  • 화면 상단 또는 하단에 노출
  • 콘텐츠 흐름을 완전히 방해하지 않음
  • 비교적 지속적으로 표시 가능

 2️⃣ 활용

  • 새 앨범 출시 알림
  • 시스템 공지
  • 이벤트 안내

핵심: “중요하지만 당장 응답이 필요하지 않은 정보”

배너 예시

 

3. 스낵바 / 토스트 팝업 (Snackbar / Toast)

1️⃣ 특징

  • 화면 하단에 잠깐 노출
  • 자동으로 사라짐
  • 사용 흐름을 거의 방해하지 않음

2️⃣ 활용

  • 재생목록에 곡 추가
  • 저장 완료
  • 간단한 상태 알림

 핵심: “행동에 대한 즉각적인 결과 피드백”

스낵바 예시

 

 

 

정리하면

 

컴포넌트 사용자 개입 사용 목적
다이얼로그 필수 중요한 결정
배너 선택 정보 전달
스낵바 불필요 즉각적 피드백

좋은 피드백 UI는
사용자 흐름을 끊지 않으면서도,
필요한 메시지를 정확히 전달한다.

 

  • 반드시 선택이 필요하면 → 다이얼로그
  • 조용히 알려주고 싶다면 → 배너
  • 행동 결과만 전달하면 → 스낵바

이 기준만 지켜도 UI는 훨씬 자연스러워집니다.