Toast
사용자 작업에 대한 피드백을 시각적으로 알려주는 역할이며, 화면 하단에서 리워드(XP) 등의 정보를 보여줄때도 활용할 수 있습니다.
Toast
사용자 작업에 대한 피드백을 시각적으로 알려주는 역할이며, 화면 하단에서 리워드(XP) 등의 정보를 보여줄때도 활용할 수 있습니다.
Toast
사용자 작업에 대한 피드백을 시각적으로 알려주는 역할이며, 화면 하단에서 리워드(XP) 등의 정보를 보여줄때도 활용할 수 있습니다.
Anatomy
ESSENTIAL
1. 상태 아이콘
사용자 작업의 결과 상태(성공, 실패 등)를 시각적으로 전달하는 아이콘입니다.
2. 레이블
주요 메시지를 전달하는 텍스트로, 사용자에게 어떤 작업이 완료되었는지 전달합니다.
OPTIONAL
3. 디스크립션
레이블을 보완하는 부가 설명으로, 추가적인 정보나 안내 문구가 필요한 경우 사용됩니다.
4. 리워드 마크
작업 완료에 따른 보상 정보(XP 등)를 시각적으로 강조해 동기를 유도하는 역할입니다.
Anatomy
ESSENTIAL
1. 상태 아이콘
사용자 작업의 결과 상태(성공, 실패 등)를 시각적으로 전달하는 아이콘입니다.
2. 레이블
주요 메시지를 전달하는 텍스트로, 사용자에게 어떤 작업이 완료되었는지 전달합니다.
OPTIONAL
3. 디스크립션
레이블을 보완하는 부가 설명으로, 추가적인 정보나 안내 문구가 필요한 경우 사용됩니다.
4. 리워드 마크
작업 완료에 따른 보상 정보(XP 등)를 시각적으로 강조해 동기를 유도하는 역할입니다.
Anatomy
ESSENTIAL
1. 상태 아이콘
사용자 작업의 결과 상태(성공, 실패 등)를 시각적으로 전달하는 아이콘입니다.
2. 레이블
주요 메시지를 전달하는 텍스트로, 사용자에게 어떤 작업이 완료되었는지 전달합니다.
OPTIONAL
3. 디스크립션
레이블을 보완하는 부가 설명으로, 추가적인 정보나 안내 문구가 필요한 경우 사용됩니다.
4. 리워드 마크
작업 완료에 따른 보상 정보(XP 등)를 시각적으로 강조해 동기를 유도하는 역할입니다.
State
Control
description
right box
Control
description
right box
Control
description
right box
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Properties
breakpoint | PC, MO |
right box | false, true |
description | false, true |
Spec
 | Position: Top-centerTop: 9.4(PC) / 6.8(TB-MO) |
 | Position: Bottom-right• Bottom: 2.4(PC) / 1.6(TB-MO)
|
Spec
Position: Top-center
Top: 9.4(PC) / 6.8(TB-MO)
Position: Bottom-right
Bottom: 2.4(PC) / 1.6(TB-MO)
Right 3.2(PC) / 2.4(TB-MO)
Spec
| Position: Top-centerTop: 9.4(PC) / 6.8(TB-MO) |
| Position: Bottom-right• Bottom: 2.4(PC) / 1.6(TB-MO)
|
Usage
Do
문장은 짧고 간결하게 작성하고 마침표는 사용하지
않습니다.
Do
3가지 역할안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
Usage
Do
문장은 짧고 간결하게 작성하고 마침표는 사용하지
않습니다.
Do
3가지 역할안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
Usage
Do
문장은 짧고 간결하게 작성하고 마침표는 사용하지
않습니다.
Do
3가지 역할안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us