알림·피드백·메시징
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
토스트 Toast
주 흐름을 막지 않고 잠시 나타나는 간단한 상태 메시지입니다.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
이 예시는 동작 버튼이 없습니다. 스낵바 예시는 실행 취소를 포함합니다. 제품별 용어 차이는 있습니다.
스낵바 Snackbar
작업 결과와 선택적 후속 동작을 짧게 보여주는 비모달 메시지입니다.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
여기서는 삭제 후 실행 취소 버튼을 넣어 단순 토스트 예시와 구분합니다.
배너 알림 Banner
화면 상단이나 콘텐츠 영역에 넓게 배치하는 공지형 메시지.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
인라인 알림 Inline Notification
관련 작업 영역 안에 표시하여 맥락을 유지하는 알림.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
경고·알림 Alert
위험·오류·주의·중요 정보 등 사용자 인지가 필요한 메시지.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
성공 메시지 Success Message
저장·전송·처리 완료를 알려주는 긍정적 피드백.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
경고 메시지 Warning Message
손실 가능성이나 주의가 필요한 상황을 알리는 메시지.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
오류 메시지 Error Message
실패 원인과 가능한 해결 방향을 알리는 메시지.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
정보 메시지 Info Message
결과와 무관한 맥락·상태 정보를 전달.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
알림 센터 Notification Center
여러 알림을 모아 보관하고 확인하는 공간.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
상태 점 Status Dot
온라인·오프라인·경고 같은 상태를 작은 점으로 표시.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
메시지 바 Message Bar
영역 전체 폭을 사용해 중요 상태를 안내하는 가로 메시지.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
콜아웃 Callout
본문에서 중요한 맥락이나 참고사항을 지속적으로 강조.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
플래그 알림 Flag Notification
화면 가장자리에 뜨는 비차단형 피드백 메시지.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
액션형 알림 Actionable Notification
메시지 안에 이동·승인·복구 등 실행 동작을 포함.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
실시간 영역 안내 Live Region Announcement
화면 변화 내용을 보조기기에 자동 전달하는 접근성 피드백.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
햅틱 피드백 Haptic Feedback
진동과 촉각 신호로 동작 수행·상태를 전달.
알림·피드백·메시징에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Notifications, Feedback & Messaging
Open an entry for its visual reference, comparisons and source-language text.
Toast 토스트
A brief nonblocking status message.
Specifying notification, feedback, and messaging interfaces and states.
This example has no action. The snackbar example includes Undo; terminology varies across systems.
Snackbar 스낵바
A brief nonmodal message with an optional contextual action.
Specifying notification, feedback, and messaging interfaces and states.
This example includes Undo after deletion, distinguishing it from the plain toast example.
Banner 배너 알림
A wide announcement placed at the top of a screen or within the content area.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Inline Notification 인라인 알림
A notification placed within the relevant work area to retain context.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Alert 경고·알림
A message calling attention to a risk, error, warning, or other important information.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Success Message 성공 메시지
Positive feedback confirming that saving, sending, or processing has finished.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Warning Message 경고 메시지
A message about a potential loss or a situation requiring caution.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Error Message 오류 메시지
A message explaining a failure and possible ways to resolve it.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Info Message 정보 메시지
A message providing contextual or status information rather than an outcome.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Notification Center 알림 센터
A dedicated area for collecting, retaining, and reviewing notifications.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Status Dot 상태 점
A small dot representing a state such as online, offline, or warning.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Message Bar 메시지 바
A horizontal message spanning an area to communicate an important state.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Callout 콜아웃
A persistent emphasis on important context or supporting information within content.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Flag Notification 플래그 알림
A non-blocking feedback message displayed near the edge of the screen.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Actionable Notification 액션형 알림
A notification containing an action, such as navigation, approval, or recovery.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Live Region Announcement 실시간 영역 안내
Accessible feedback that automatically announces interface changes to assistive technology.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Haptic Feedback 햅틱 피드백
Vibration or other tactile signals communicating an action or state.
Specifying notification, feedback, and messaging interfaces and states.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.