주별 결과
결정하거나 수정해야 할 정보는 건배보다 길어야 합니다.
토스트 디자인 시스템
작업을 방해하지 않고 작업 후 짧은 피드백.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
03
경험을 완성하세요
디자인을 활용하면서 놓치기 쉬운 디테일을 확인해보세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
주별 결과
"실행 취소" 버튼을 사용하여 "3개 항목을 아카이브로 이동했습니다."
변형 및 사용 사례
빨리 행동하라
사용자가 지금 편집하거나 이동할 수 있으면 알림에 유용한 작업을 배치하세요.
토스트가 사라지기 전에 키보드를 사용하여 실행 취소를 누르세요. 상태를 회복해야 합니다.
예시 문서를 저장한 후 알림에는 실행 취소 버튼이 있습니다.
변경사항이 저장되었습니다.
변경사항이 저장되었습니다.
변경사항이 저장되었습니다.
상태 아이콘
아이콘은 결과를 식별하지만 텍스트 내용은 발생한 작업을 명확하게 나타내야 합니다.
아이콘을 숨기고 토스트를 읽습니다. 사용자는 여전히 성공적인 저장과 실패한 전송을 구별합니다.
예시 "초안 저장됨"에는 확인 스탬프가 함께 제공됩니다.
변경사항이 저장되었습니다.
정보를 확인해주세요.
위치가 작업을 포함하지 않습니다.
토스트를 메인 버튼, 키보드 또는 독서 영역을 가리지 않고 눈에 잘 띄는 곳에 놓습니다.
키보드 및 모바일 탐색 표시줄을 엽니다. 토스트는 읽을 수 있어야 합니다.
예시 토스트는 안전한 영역이 있는 모바일 탭바에 위치해 있습니다.
변경사항이 저장되었습니다.
표시 시간
읽을 시간을 충분히 확보하십시오. 처리가 필요하거나 노드가 있는 정보는 너무 빨리 사라져서는 안 됩니다.
토스트 동작에 집중하세요. 마감 기한을 중단해야 하거나 검토할 수 있는 방법이 있습니다.
예시 실행 취소 토스트는 사용자가 실행 취소 버튼에 초점을 맞추고 있는 동안 유지됩니다.
변경사항이 저장되었습니다.
현재 작업을 방해하지 않는 짧은 알림.