토스트
방금 한 일의 결과를 한 줄로 알려주고 2.4초 뒤 사라지는 띠. 성공은 사라지고, 오류는 사용자가 닫을 때까지 남습니다. 토스트로 질문하지 않습니다.
리포트를 제출했습니다 · 검토 대기
정의
화면 하단 중앙에 뜨는 짧은 알림입니다. 기본(짙은 잉크)·성공·오류·안내 네 톤이 있고, 다크 테마에서는 surface-highest 위 글자로 바뀝니다. 한 번에 하나만 보이며 새 토스트가 오면 교체합니다.
언제 쓰고 언제 쓰지 않나
- 저장·제출·승인·서명 등록처럼 사용자가 방금 한 일의 결과.
- 답을 요구하면 모달, 계속 봐야 하면 배너, 새 사건(경보)은 배너 + 알림.
- 같은 일을 반복할 때마다 띄우지 않는다(자동 저장은 조용히).
해부도
리포트를 제출했습니다 · 검토 대기
- 컨테이너라운드 12 · 패딩 .85em 1.6em · 최대 폭 min(90vw, 520) · toast 그림자
- 메시지 13/700한 줄, 결과 + (선택) 다음 상태. 줄바꿈은
\n로 2줄까지
변형
서명을 등록했습니다
리포트를 승인했습니다
처리 실패 · 네트워크를 확인하고 다시 시도하세요
경보 확인 권한이 없습니다 (품질관리자 이상)
기록을 저장했습니다
저장 실패 · 네트워크를 확인하고 다시 시도하세요
상태
| 상태 | 표현 |
|---|---|
| 등장 | 불투명도 0 → 1, 250ms. 위치 이동 없음 |
| 표시 | 성공·기본·안내 2.4초 · 오류는 닫을 때까지(닫기 ✕ 또는 탭) |
| 교체 | 새 토스트가 오면 즉시 내용 교체, 타이머 리셋 |
| 퇴장 | 불투명도 1 → 0, 250ms |
치수
| 항목 | 값 |
|---|---|
| 위치 | 하단 26 (하단 탭 있으면 탭 위 8) · 가로 중앙 |
| 최대 폭 | min(90vw, 520) |
| 글자 | 13 / 700 (큰글씨 16) |
| 패딩 | .85em 1.6em |
| 라운드 | 12 |
| z-index | 99 |
| 표시 시간 | 2.4s (오류 무제한) |
Do · Don't
리포트를 제출했습니다 · 검토 대기
Do 결과 + 다음 상태
저장할까요?
Don't 토스트로 질문 · 버튼 넣기
서명 등록 실패 · 이미지가 너무 큽니다 (2MB 이하)
Do 오류는 원인 + 조치, 닫을 때까지 유지
오류가 발생했습니다!
Don't '오류가 발생했습니다' · 성공에 느낌표
접근성
- 성공·안내는
role="status"(polite), 오류는role="alert"(assertive). - 오류 토스트는 자동으로 사라지지 않고 닫기 버튼(44px)을 갖는다 — WCAG 2.2.1 시간 제한.
- 포커스를 뺏지 않는다. 토스트 내용은 화면의 상태 변화(배지·목록)로도 반영된다.
- 대비: 라이트 text 배경 위 흰 글자 14.9:1, 성공 #166534 위 흰 글자 7.4:1, error #ba1a1a 위 흰 글자 6.3:1.
문구
| 상황 | 문구 |
|---|---|
| 저장 | 기록을 저장했습니다 |
| 제출 | 리포트를 제출했습니다 · 검토 대기 |
| 검토·승인 | 검토를 완료했습니다 · 리포트를 승인했습니다 |
| 반려 | 반려했습니다 |
| 경보 처리 | 경보를 확인하고 조치를 기록했습니다 |
| 권한 | 처리 권한이 없습니다 (품질관리자 이상) |
| 실패 | 처리 실패 · 네트워크를 확인하고 다시 시도하세요 |
과거형 "~했습니다"로 끝내고, 마침표·느낌표 없이, 보조 정보는 가운뎃점(·) 뒤에.
코드
<div class="fna-toast fna-toast--success" role="status" id="toast">기록을 저장했습니다</div>
<script>
function toast(msg, tone){ const t=document.getElementById('toast'); t.className='fna-toast'+(tone?' fna-toast--'+tone:''); t.textContent=msg; t.classList.add('is-show');
clearTimeout(t._h); if(tone!=='error') t._h=setTimeout(()=>t.classList.remove('is-show'),2400); }
</script>
/* RN */ Toast.show({type:'pass'|'error', text}) (src/ui/Toast)안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-toastComponents · FNA 디자인 시스템 v1.0