Toast Usage

사용자가 취한 액션에 대한 즉각적인 피드백을 간결한 메시지로 알려줍니다.

Layout

Toast는 화면 우측 하단에 32px의 간격을 두고 배치합니다.

Toast Layout Placement

Toast를 통한 알림의 핵심은 즉각적이고 휘발성있는 피드백이라는 것에 있습니다. 사용자가 취한 액션에 대한 피드백을 간결한 메시지로 알려줍니다.

✓DoRequired

현재 맥락에서 간결하고 휘발성 있는 피드백 제공 목적으로 사용합니다.

⚠CautionRecommended

중요한 정보를 담고 있거나 사용자 플로우에 갑작스러운 변경이 생길 수 있는 경우 주의해서 사용합니다.

✓DoRecommended

중요한 정보 전달이나 사용자 확인이 필요한 경우 dialog를 대신 활용합니다.

항목의 추가, 삭제, 수정, 상태 변화 등의 맥락에서 사용할 수 있습니다. 일정 시간 후 자동으로 종료됩니다.

항목의 생성 또는 특정 액션의 수행을 위한 프로세싱이 완료된 경우에 사용할 수 있습니다. 일정 시간 후 자동으로 종료됩니다.

사용자의 주의가 필요한 경우에 사용할 수 있습니다. 자동으로 종료되지 않으며 사용자가 close icon button을 통해 직접 종료할 수 있습니다.

Toast Content Types Warning

처리에 대한 실패 또는 오류로 사용자 과업이 의도한 결과대로 수행될 수 없을 때 사용될 수 있습니다. 자동으로 종료되지 않으며 사용자가 close icon button을 통해 직접 종료할 수 있습니다.

Toast Content Types Error

공통 메시지 패턴에 대한 작성 가이드라인입니다. 처리 대상을 기준으로 수동태로 작성합니다.

대상에 대한 직접적인 처리: The [object] was [past participle].
대상에 대한 간접적인 처리 (for countable nouns): 1 [object-sg.] was [past participle]. / # [object-pl.] were [past participle].

Action	Format	Example
To create	The [object] was created.	The dataset was created.
To import	1 [object-sg.] was imported. # [object-pl.] were imported.	1 image was imported. 3 images were imported.
To add	The [object] was added.	The user was added.
To edit	The [object] was edited.	The project was edited.
To delete	The [object] was deleted. 1 [object-sg.] was deleted. # [object-pl.] were deleted.	The model was deleted. 1 model was deleted. 3 models were deleted.
To register	The [object] was registered.	The inspector was registered.
To deploy	The [object] was deployed.	The model was deployed.

특정 액션의 수행을 위한 프로세싱이 이루어지는 경우 등 success 성격의 메시지를 전달하는 상황에서는 successfully를 넣어 사용자에게 긍정적인 경험을 강조하여 전달할 수 있습니다.

Action	Format	Example
To inspect	1 [object-sg.] was successfully inspected. # [object-pl.] were successfully inspected.	1 image was successfully inspected. 100 images were successfully inspected.
To train	The [object] was successfully trained.	The model was successfully trained.

필요할 경우 사용자의 이해를 돕기 위해 대상에 대한 직접적인 명시를 할 수 있습니다.

대상 목적지 등 특정 위치에 대한 명시가 필요한 경우 함께 표기할 수 있습니다.

대상 및 위치에 대한 명시: The [object] "[object-name]" was [past participle] [preposition] "[location-name]".

Action	Format	Example
To duplicate	The [object] “[object-name]” was duplicated.	The project “seg-test” was duplicated.
To train	The [object] “[object-name]” was successfully trained.	The model “seg-model” was successfully trained.
To export	The [object] “[object-name]” was exported to “[location-name]“. 1 [object-sg.] was exported to “[location-name]”. # [object-pl.] were exported to “[location-name]“.	100 images were exported to project “seg-test”.
To merge	The [object] “[object-name]” was merged into the [destination] “[destination-name]”.	The class “Class A” was merged into the class “Class B”.

버튼을 이용한 다양한 인터랙션을 수행할 수 있습니다. 버튼을 클릭하면 해당 액션이 실행되며 toast가 종료됩니다.

버튼을 클릭하면 액션을 실행합니다.

Toast Behaviors Interactions Execution

실행된 액션을 취소합니다.

Toast Behaviors Interactions Undo

다른 페이지로 이동합니다.

Toast Behaviors Interactions Link