Callout

Anatomy

• root
• prefix icon
• title
• description
• link
• suffix icon

Options

Tone

Callout 컴포넌트는 다양한 톤을 통해 다른 의미와 중요도를 전달할 수 있습니다.

Neutral (중립)

[이미지: 회색 배경의 중립적인 Callout 예시로, 아이콘과 제목, 설명 텍스트를 포함]

• 관련 정보를 전달하는 데 사용됩니다.
• 종종 정적인 정보를 표시할 때 적합합니다.

Informative (정보)

[이미지: 파란색 배경의 정보 Callout 예시로, 정보 아이콘과 제목, 설명 텍스트를 포함]

• 추가 주의가 필요한 정보를 전달할 때 사용합니다.
• 중립 variant보다 더 주목을 끌어야 할 때 사용합니다.

Warning (경고)

[이미지: 주황색 배경의 경고 Callout 예시로, 경고 아이콘과 제목, 설명 텍스트를 포함]

• 원치 않는 결과를 피하거나 예상치 못한 동작이나 결과를 알릴 때 사용합니다.
• 가능한 문제, 대처 방법, 조치를 취하지 않을 경우 결과를 설명해야 합니다.

Critical (위험)

[이미지: 빨간색 배경의 위험 Callout 예시로, 오류 아이콘과 제목, 설명 텍스트를 포함]

• 페이지의 특정 섹션이나 전체 페이지에 적용되는 오류를 전달할 때 사용합니다.
• 즉각적인 조치가 필요한 상황에 적합합니다.

Magic (특별한 경험)

[이미지: 보라색 배경의 Magic Callout 예시로, 특별한 아이콘과 제목, 설명 텍스트를 포함]

• 주로 AI 관련 기능을 소개할 때 사용합니다.

Prefix Icon

[이미지: 다양한 Callout 예시에서 왼쪽에 위치한 아이콘들]

• 전달하고자 하는 메시지의 맥락을 보충하는 아이콘을 사용합니다.
• 적절한 아이콘은 색맹 사용자가 tone을 구별하는 데 도움을 줍니다.

Title

[이미지: Callout 컴포넌트의 제목 부분을 강조하는 예시]

• Callout의 핵심 메시지를 간결하게 전달합니다.

Description

[이미지: Callout 컴포넌트의 설명 텍스트 영역을 강조하는 예시]

• 주요 내용이나 Callout의 설명을 포함합니다.
• 제목에 있는 정보를 반복하지 않아야 합니다.

Link

[이미지: Callout 내에 링크가 포함된 예시]

• 사용자가 다른 페이지에서 조치를 취해야 하거나 추가 정보가 필요할 때 포함됩니다.

Suffix Icon

[이미지: 닫기 버튼이 있는 Callout 예시]

• 사용자가 Callout을 닫을 수 있게 해줍니다.
• 시스템이나 계정의 지속적인 상태를 전달하지 않거나 사용자가 정보에 접근할 수 있는 다른 방법이 제공될 때 추가할 수 있습니다.

Interaction

Callout은 Actionable 혹은 Dismissible 인터랙션 중 하나를 사용하거나, 인터랙션을 사용하지 않을 수 있습니다.

Actionable

• 사용자가 클릭 시 다른 페이지로 이동하는 등 조치를 취할 수 있도록 합니다.
• Suffix icon에 ChevronRight 아이콘을 함께 사용합니다.

Dismissible

• 사용자가 Callout을 닫을 수 있도록 합니다.
• Suffix icon에 Xmark 아이콘을 함께 사용합니다.

Behaviors

Text Overflow

[이미지: 제목이나 설명 텍스트가 너무 길어 여러 줄로 표시되는 Callout 예시]

• Callout의 제목이나 설명 텍스트가 가용 가로 공간보다 길 경우, 텍스트는 자동으로 여러 줄로 표시됩니다.
• Prefix icon 및 Suffix icon은 전체 영역 기준 세로 가운데 정렬을 유지합니다.

Usage Guidelines

중요 정보 강조하기

[이미지: 페이지에서 중요한 정보를 강조하는 Callout 예시]

• Callout은 페이지에서 중요한 정보를 강조하는 데 사용합니다.
• 시스템 수준의 문제를 알리는 데는 Inline Alert를 사용합니다.

명확하고 간결한 내용 작성하기

[이미지: 간결한 제목과 설명이 있는 Callout 예시]

• 제목은 간결하면서도 문제의 핵심을 전달해야 합니다.
• 설명 텍스트에서는 제목의 정보를 반복하지 마세요.
• 완전한 문장에는 마침표를 사용하세요.

여러 Callout 사용 피하기

[이미지: 페이지에 여러 Callout이 배치된 예시]

• 한 화면에 너무 많은 Callout을 사용하지 마세요. 중요한 메시지의 효과가 감소할 수 있습니다.

Dismissible 고려하기

[이미지: 닫기 버튼이 있는 Callout 예시]

• 사용자가 정보에 접근할 수 있는 다른 방법이 제공되는 경우, Dismissible을 사용하는 것을 고려해야 합니다.

오류 메시지 작성 시 고려사항

[이미지: 오류 정보를 담은 Critical Callout 예시]

• Critical tone을 사용할 때는 문제, 해결 방법, 다음 단계에 대한 명확한 지침을 제공하세요.

개요

옵션 테이블

링크

스펙

base

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x3_5
		paddingY	$dimension.x3_5
		gap	$dimension.x3
		cornerRadius	$radius.r2_5
		minHeight	50px
	prefixIcon	size	$dimension.x4
	title	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.bold
	description	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.regular
	link	fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.regular
	suffixIcon	size	$dimension.x4
		targetSize	$dimension.x10

tone=neutral

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
	prefixIcon	color	$color.fg.neutral
	title	color	$color.fg.neutral
	description	color	$color.fg.neutral
	link	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral
pressed	root	color	$color.bg.neutral-weak-pressed

tone=informative

상태	슬롯	속성	값
enabled	root	color	$color.bg.informative-weak
	prefixIcon	color	$color.fg.informative-contrast
	title	color	$color.fg.informative-contrast
	description	color	$color.fg.informative-contrast
	link	color	$color.fg.informative-contrast
	suffixIcon	color	$color.fg.informative-contrast
pressed	root	color	$color.bg.informative-weak-pressed

tone=warning

상태	슬롯	속성	값
enabled	root	color	$color.bg.warning-weak
	prefixIcon	color	$color.fg.warning-contrast
	title	color	$color.fg.warning-contrast
	description	color	$color.fg.warning-contrast
	link	color	$color.fg.warning-contrast
	suffixIcon	color	$color.fg.warning-contrast
pressed	root	color	$color.bg.warning-weak-pressed

tone=critical

상태	슬롯	속성	값
enabled	root	color	$color.bg.critical-weak
	prefixIcon	color	$color.fg.critical-contrast
	title	color	$color.fg.critical-contrast
	description	color	$color.fg.critical-contrast
	link	color	$color.fg.critical-contrast
	suffixIcon	color	$color.fg.critical-contrast
pressed	root	color	$color.bg.critical-weak-pressed

tone=magic

상태	슬롯	속성	값
enabled	root	color	$color.bg.magic-weak
	prefixIcon	color	$color.fg.magic-contrast
	title	color	$color.fg.magic-contrast
	description	color	$color.fg.magic-contrast
	link	color	$color.fg.magic-contrast
	suffixIcon	color	$color.fg.magic-contrast
pressed	root	color	$color.bg.magic-weak-pressed