Toast

Written By Heesun .

GUIDE

Toast는 동작에 대한 간단한 피드백을 텍스트 형태로 제공하는 작은 popup 형태의 ui입니다.

액션 또는 변경의 결과로 인한 시스템 상태 변화를 사용자에게 알리기 위해 사용해야 하며,
중요한 것은 사용자의 현재 작업 흐름을 방해하지 않는다는 것입니다.

  • 사용자에게 방해(클릭 요구 등) 없이 정보 메시지를 전달합니다.

  • 일시적으로 나타나고 사용자 개입이 필요 없이 스스로 사라집니다.

  • 간단하고 단순한 정보를 보여줍니다.

 

ANATOMY

COMPONENT TYPE

Toast의 구성은 다음과 같습니다.

 

  1. Toast-overlay type

    • 화면 정중앙에 위치합니다.

    • 배경색에 투명도가 적용됩니다.

2. Toast-alert

  • 화면 중앙 윗 부분에 위치합니다.

  • 2개 이상의 alert 메시지가 동시에 노출될 수 있습니다.

SIZE / PLACEMENT

Toast-overlay

  • 모바일, pc 모두 동일한 사이즈를 가집니다.

  • overlay fade-out duration : 0.5seconds

Toast-alert

Width

min width : 200px
max width : 400px


  • 가능하다면 1줄 이내로 메시지를 작성합니다. 


  • 최대 길이를 초과할 경우 높이를 늘리지만, 3줄이 넘어갈 경우 디자인 QA가 요구됩니다.

Placement

모바일~pc : 상단 16px
1920 이상 : 상단 32px

  • overlay fade-out duration : 0.5seconds

  • 주변 컴포넌트로 인해 화면 문맥에 따라 위치가 변동될 수 있으니 이에 대한 디자인 QA가 요구될 수도 있습니다.

2개 이상의 alert가 동시 발생 시 기존 컴포넌트가 
아래로 8px간격으로 내려가며 opicity가 적용됩니다. 
(100%>90%>70%> 40%>0%)

Heesun .
Previous

Tooltip
Next

Input Field