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