토스트 알림, 어떻게 사용해야할까.

토스트 얼럿을 어떻게 사용하면 좋을지 찾아보다 간략하게 정리를 잘 한 아티클을 발견해 한국어로 번약했습니다.

 

 

 

소프트웨어 애플리케이션의 성공은 사용자 경험에 크게 좌우되며, 사용자 경험이란 애플리케이션의 멋진 외관과 느낌이라고 잘못 이해하는 경우가 많습니다. 실제로, 사용자 경험의 개념은 애플리케이션의 사용성과 사용자 친화성을 향상시키는 것에 중점을 둡니다. 여기에는 다양한 측면과 요소들이 포함되며, 그 중 하나가 토스트 알림(Toaster Notification)입니다.

토스트 알림(Toaster Notification)/토스트(Toast)이란 무엇인가요?

토스트 알림은 사용자가 특별한 주의를 기울이지 않고도 확인할 수 있는 알림 메커니즘으로, 주로 다양한 사용자 정보를 전달하거나

상태를 표시하는 데 사용됩니다. 

 

예를 들어, 오류나 성공 상태를 보여주거나

특정 작업을 수행하도록 유도할 수 있습니다.

색상 코딩이나 적절한 아이콘을 추가하면 알림을 더 효과적으로 전달할 수 있습니다.

언제 표시해야 하나요?

주의를 많이 요하지 않는 메시지를 전달할 때, 단일 상태 업데이트를 제공하는 데 적합합니다. 그러나 이 메커니즘은 일반적으로 시간이 제한되어 있으므로 주요 알림 방법으로 사용해서는 안 됩니다.

배치(위치)

토스트 알림을 어디에 띄워야할지 위치에 대해 고민하게 되는데, 토스트의 배치는 사용 사례와 표시하려는 정보의 종류에 따라 다릅니다. 예를 들어, 윈도우와 맥은 서로 다른 접근 방식을 취합니다. 두 시스템 모두 Law of Proximity 법칙을 따라 상태 표시줄과 가까운 위치에 알림을 배치하여 상태 표시줄과 토스트 알림 사이의 관계를 이해하기 쉽게 합니다. 반면에 피그마(Figma)는 화면의 하단 중앙에 알림을 표시하여 중요한 정보를 가리지 않도록 합니다.

접근성

사용자에게 단어당 500밀리초의 시간을 주는 것이 좋습니다. 짧은 알림의 경우 최대 10단어를 4000밀리초 + 1000밀리초 버퍼로 처리할 수 있습니다(모든 사용자가 영어를 모국어로 사용하는 것은 아니기 때문입니다). 텍스트가 140자(영어로 20-35단어) 이상인 경우, 알림 시간을 설정하지 않는 것이 좋습니다. 알림의 배치가 애플리케이션의 중요한 부분을 가리지 않도록 해야 합니다. UX 글쓰기와 색상 코딩을 사용하여 정보를 최적화할 수 있습니다.

애니메이션 조정

• 400ms — 인워드 애니메이션: 사용자가 화면을 보고 있을 때 주의를 기울이는 데 걸리는 시간입니다.
• 1800ms — 아웃워드 애니메이션: 사용자가 알림이 화면에서 사라지는 것을 관찰할 수 있는 충분한 시간입니다.
• 호버-스테이 추가: 사용자가 토스트 알림 위에 커서를 올리면 알림이 화면에 유지됩니다(정보에 따라 다름).

크기 조정

토스트 알림은 일정한 너비를 유지하며, 높이는 알림 메시지의 길이에 따라 조정됩니다. 내용 지침에 따라, 토스트 알림은 최대 두 줄의 텍스트로 제한하는 것이 좋습니다.