Toast

토스트 UI는 화면에 잠시 표시되어 사용자에게 알림이나 정보를 전달하는 요소입니다. 일반적으로 화면 하단에 자동으로 나타나며, 사용자가 별도로 닫지 않아도 일정 시간 후 자동으로 사라집니다. 주로 성공, 오류, 경고 등 다양한 상태를 시각적으로 구분하여 사용자 경험을 향상시킵니다.

Anatomy

Anatomy

  • Container
  • Text area

Spec

Spec

  • Bottom(mo)
  • Center(pc)

Placement

  • Bottom

    Bottom

    화면 너비를 기준으로 하단에서 12px, 좌/우에서 20px 떨어진 곳에 중앙 정렬로 배치합니다. 노출 높이는 하단 내비게이션의 존재 여부에 따라 달라질 수 있습니다.

  • Center

    Center

    pc에서 사용하는 경우, 화면을 기준으로 상하좌우 중앙 정렬로 배치합니다.

  • Interaction

    토스트 메시지의 지속시간은 사용자가 메시지를 읽고 이해할 수 있는 충분한 시간을 제공해야 합니다. 또한, 화면을 지나치게 오래 차지하지 않도록 4초 후 fade out합니다. 메시지 내용이 길 경우 6초 이상으로 지속시간을 연장할 수 있지만, 사용자가 혼란을 느끼지 않도록 메시지 길이를 조정해야 합니다. 인터렉션 애니메이션은 Dissolve로 진행합니다.

© KYOBO BOOK CENTRE교보문고 바로가기