UI 가이드요소
토스트Toast
토스트는 화면 가장자리(주로 우하단)에 잠깐 나타났다가 자동으로 사라지는 비차단 알림입니다. 저장 완료, 전송 성공처럼 사용자의 작업을 멈출 필요가 없는 피드백에 씁니다.
- 이렇게 생겼습니다
- 구석에 잠깐 떴다가 사라지는 작은 알림 상자.
- 프롬프트에 쓰는 이름
- Toast · 다른 이름: 스낵바, Snackbar, 알림 배너
토스터에서 빵이 톡 튀어나오는 모양에서 붙은 이름입니다. 핵심 성질은 비차단입니다. 사용자가 하던 일을 막지 않고, 몇 초 뒤 알아서 사라집니다.
언제 쓰나요
작업의 결과를 알려주되 확인 버튼을 강요할 필요가 없을 때 씁니다. 저장 완료, 링크 복사됨, 메일 전송됨 같은 것들입니다. 반대로 사용자의 결정이 필요한 순간(삭제 확인, 에러 복구)에 토스트를 쓰면 놓치기 쉽습니다. 그건 모달의 일입니다.
실행취소(Undo) 버튼을 함께 넣는 패턴이 특히 유용합니다. "정말 삭제할까요?"라고 미리 묻는 대신 일단 실행하고 토스트로 되돌릴 기회를 주면, 흐름이 끊기지 않으면서 안전합니다.
AI에게 시키기
저장 성공 시 우하단에 토스트 알림을 3초간 표시해줘.
- 들어오고 나갈 때 부드러운 트랜지션
- "실행취소" 버튼 포함
- 여러 개가 겹치면 세로로 쌓고, 최대 3개
- 화면을 가리거나 클릭을 막으면 안 됨
"알림 띄워줘"라고만 하면 AI는 십중팔구 alert()를 씁니다. 토스트라는 이름과 비차단·자동 소멸이라는 성질을 말해야 원하는 결과가 나옵니다.
혼동 주의
- 모달: 화면을 막고 응답을 요구합니다. 토스트의 정반대입니다.
- 스낵바(Snackbar): 사실상 같은 것입니다. Material Design(구글) 쪽 이름이라 안드로이드 문서에서는 스낵바로 나옵니다.
- 배너(Banner): 화면 상단에 고정되어 사라지지 않는 알림입니다. 오프라인처럼 지속되는 상태에 씁니다.
