GitHub은 더 이상 Toasts를 사용하지 않음

• Toast 알림 UI는 접근성 문제로 인해 GitHub에서 더 이상 권장되지 않음
• 자동으로 사라지는 일시적 알림 구조가 시각적·기능적 접근성 기준(WCAG)을 위반할 위험 존재
• GitHub은 배너(banner) , 다이얼로그(dialog) 등 지속적이고 접근 가능한 피드백 방식을 대안으로 제시
• Toast는 큰 화면, 멀티태스킹, 배너 무시 현상 등 사용성 문제도 다수 포함
• 접근성과 일관된 사용자 경험을 위해 Primer 디자인 시스템 전반에서 Toast 사용 중단

Toasts 개요

• Toast는 화면 하단 모서리에 잠시 나타나는 작은 직사각형 알림 창으로, 사용자 또는 시스템 동작에 의해 트리거됨
• 일정 시간이 지나면 자동으로 사라지는 구조로, 접근성과 사용성 문제가 내재함
• GitHub은 이러한 이유로 보다 안정적이고 접근 가능한 커뮤니케이션 방식을 권장함

Toast 대체 방안

• 사용 목적에 따라 적절한 UI 선택 필요
  • 단순 성공 알림은 별도 피드백 없이 결과 화면 자체로 확인 가능
  • 복잡한 작업은 배너나 점진적 콘텐츠 표시로 성공 상태 전달
  • 실패한 작업은 배너 또는 다이얼로그를 통해 오류 정보 제공
• 폼 제출의 경우 단순 폼은 별도 확인 불필요, 복잡한 폼은 중간 확인 페이지나 배너 사용
• 입력 검증은 Primer의 기존 폼 검증 컴포넌트 활용
• 장시간 작업은 배너 또는 이메일·푸시 알림 등 다른 채널을 통해 완료 상태 전달
• 세션 비동기화 발생 시 다이얼로그나 배너로 새로고침 필요성 안내

접근성 고려사항 (Accessibility Considerations)

• Toast UI는 여러 WCAG 성공 기준을 위반할 가능성 있음
  • 2.2.1 Timing Adjustable (A) : 사용자가 직접 닫기 전까지 유지되어야 함
  • 1.3.2 Meaningful Sequence (A) : DOM 순서와 시각적 순서 불일치로 보조기술 사용 시 혼란 발생
  • 2.1.1 Keyboard (A) : 키보드로 토스트 내 인터랙션 제어 가능해야 함
  • 4.1.3 Status Messages (AA) : 보조기술에 비방해적으로 존재를 알려야 함
• 추가로 위반 가능성이 있는 기준
  • 1.4.4 Resize text (AA) : 텍스트 크기 조정 시 화면 가림 또는 오버플로 발생 위험
  • 1.4.10 Reflow (AA) : 수평 스크롤 시 키보드 접근성 확보 필요
  • 2.4.3 Focus Order (A) : 포커스 순서 혼란 가능성
  • 3.2.4 Consistent Identification (AA) : 코드 일관성 유지 필요

사용성 고려사항 (Usability Considerations)

• 대형 화면에서는 토스트가 시야 밖에 위치해 인식되지 않을 수 있음
• 자동 해제 시 사용자가 다른 작업 중이면 메시지를 놓칠 위험 존재
• UI 가림 현상: 토스트가 하단 버튼 등 중요한 요소를 덮을 수 있음
• 화면 확대 사용자는 확대 영역 밖의 토스트를 보지 못할 수 있음
• 작업 기억 문제: 자동 사라짐으로 정보 재확인 불가
• 배너 무시 현상: 과도한 사용으로 사용자가 무시하는 경향
• 위치 불일치: 트리거된 UI와 토스트의 물리적 거리로 인한 연관성 혼란
• 잘못된 닫기 동작: Esc 키로 다른 UI까지 함께 닫히는 문제 발생 가능

추가 참고 자료

• Notification messaging - Primer
• A toast to an accessible toast… - Scott O’Hara
• Defining ‘Toast’ Messages - Adrian Roselli
• The problem with toast messages and what to do instead - Adam Silver