Actionable Callout
사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다. 사용자가 누르는 것으로 액션이 발생합니다.
구조도
- Root
- Title
- Description
- Action Indicator
컴포넌트 미리보기
옵션
Outline
Outline Variant는 안내 및 단순 정보를 전달합니다. Normal Variant보다 주목도를 낮추고 싶을 때, 혹은 면분할이 많은 화면에서 다른 gray 토큰과의 충돌을 방지하고자 할 때 사용합니다.
Normal
Normal Variant는 시스템 안내 및 공지사항을 전달합니다. 특별한 강조나 경고가 필요하지 않을 때, 혹은 일상적인 상황을 제공합니다.
Info
Info Variant는 특정 기능이나 서비스의 부가 설명을 제공하는 데 사용합니다. Normal Variant보다 강조하여 메시지를 전달하고 싶을 때 사용합니다.
Warning
Warning Variant는 주로 경고나 주의사항을 전달합니다. 위험 요소가 낮으며 즉각적인 변화나 문제가 없는 경우, 조심해야 할 사항을 제공합니다.
Danger
Danger Variant는 심각한 위험 상황이나 조심해야 할 사항을 제공합니다. 데이터가 삭제될 가능성이 있거나, 오류 상황에도 사용할 수 있습니다.
Title / Description
Title은 Callout의 내용의 목적이나 핵심 메시지를 강조, 요약하여 전달합니다. Description은 유저에게 추가적인 컨텍스트와 부가 설명을 제공합니다.
옵션 테이블
| 속성 | 값 | 기본값 |
| variant | outline, normal, info, warning, danger | normal |
| title | text | |
| description | text |
상호작용
터치 / 마우스
마우스 클릭 또는 터치로 Actionable Callout과 상호작용할 수 있습니다.
키보드
Action
Space 또는 Enter키를 통해 Actionable Callout의 액션을 실행시킬 수 있습니다.
가이드라인
필요할 때만, 아껴서 쓰기
Actionable Callout은 화면에서 많은 면적을 차지하고, 유저의 주의를 끌기 때문에 중요한 정보에만 절제하여 사용합니다. 과도한 사용은 Actionable Callout의 강조 효과를 약화시킬 수 있습니다.
간결한 문구
Description은 2줄 이내로 간결하게 작성하여 유저가 빠르게 내용을 파악할 수 있도록 합니다.
Do / Don't
Do
Gray 컬러가 많은 화면에서는 Outline Variant를 사용하여 다른 요소와의 충돌을 피합니다.
Don't
면분할이 많은 화면에서의 사용을 주의합니다. 화면의 복잡도를 높여 유저에게 혼란을 줄 수 있습니다.
Don't
연결되는 Action이 예측 가능하도록 Description을 작성합니다.
Don't
마케팅 및 프로모션 용도로 사용하지 않습니다. 해당 용도에는 Banner를 사용합니다.
Do
의미에 맞는 Variant를 사용합니다. 각 Variant는 목적에 맞는 컬러를 가지기 때문에, 이를 무시하고 사용할 경우 유저에게 혼란을 줄 수 있습니다.
Don't
시각적인 효과만을 위해 특정 Variant를 사용하지 않습니다. 특히 위험 사항을 알리는 Warning과 Danger Variant는 목적에 맞게 유의하여 사용합니다.
Do
Text Field를 보조하는 경우, Text Field와의 시각적 구분이 명확한 Variant를 사용하거나, 간단한 메시지는 Description으로 대체합니다.
Don't
Text Field와 함께 Outline Variant를 사용하지 않습니다. 유사한 UI로 유저가 혼란을 느낄 수 있습니다.