Snackbar

Anatomy

• region
• root
• message
• prefix icon
• action

Options

Variants

Default

기본 스낵바입니다. 특별한 상태가 없는 일반적인 알림에 적합합니다.

Positive

성공적인 액션이나 프로세스 완료를 알릴 때 사용됩니다. Prefix icon으로 checkmark_circle_fill을 사용합니다.

Critical

오류나 주의가 필요한 상황을 알릴 때 사용됩니다. Prefix icon으로 exclamationmark_circle_fill을 사용합니다.

Message

스낵바의 핵심 내용을 담은 텍스트입니다. 간결하고 명확해야 합니다.

Action label (Optional)

사용자가 스낵바와 관련하여 취할 수 있는 액션의 라벨입니다.

Timeout

스낵바가 자동으로 사라지는 시간입니다. 기본값은 5초입니다.

Behaviors

자동 사라짐

스낵바는 기본적으로 Timeout 후 자동으로 사라집니다. 메시지 길이에 따라 노출 시간이 달라집니다.

애니메이션

진입과 퇴장 시 opacity와 scale 애니메이션을 적용합니다.

연속 표시

여러 개의 스낵바가 트리거되면 한 번에 하나씩만 표시됩니다. 첫 번째 스낵바가 사라진 후 두 번째 스낵바가 표시됩니다.

Text Overflow

텍스트가 영역에 비해 길면 다음 줄로 줄바꿈됩니다. 가능한 한 줄바꿈을 피하고 짧은 텍스트를 사용하는 것이 좋습니다.

Region

Region은 스낵바가 표시될 영역으로, 화면 가장자리 및 피해야 할 요소와의 간격을 정의합니다. Root는 Region 내에 배치됩니다.

Usage Guidelines

적절한 사용 사례:

• 사용자의 액션에 대한 즉각적인 피드백 제공
• 사용자가 방금 수행한 작업의 결과 확인
• 비중요 정보 전달 (예: "메시지가 전송되었습니다")

부적절한 사용 사례:

• 중요하거나 긴급한 알림
• 사용자 응답이 필수적인 메시지
• 시스템 주도적 알림 (사용자 액션에 응답하지 않는)

문구

Message:

• 명확하고 간결하게 작성 (이상적으로 3단어 이하)
• 명사 + 동사 패턴 사용
• 이미 발생한 일을 확인하는 방식으로 작성
• 마침표 없이 작성
• Good: "파일이 저장되었어요"
• Bad: "귀하의 파일이 성공적으로 저장되었습니다."

Action label:

• 동사로 시작 (예: "실행", "취소", "보기")
• 1-2단어로 간결하게 작성
• "취소" 같은 일반적인 단어보다 구체적인 액션 사용
• 메시지와 연결되는 용어 사용
• Good: "실행취소"
• Bad: "확인"

배치

• 화면 하단 중앙에 배치합니다.
• 하단 네비게이션 요소가 있다면 그 위에 배치합니다.
• 중요한 UI 요소나 자주 사용하는 터치 영역을 가리지 않도록 배치합니다. (예: FAB)

접근성

• 인지 및 시각 장애가 있는 사용자는 메시지 읽는 데 더 많은 시간이 필요할 수 있습니다.
• 중요한 정보는 스낵바 외에 다른 방법으로도 제공해야 합니다.
• 스크린리더 혹은 키보드로 Snackbar에 접근한 경우 사용자가 스스로 닫을 때까지 남아있어야 합니다.
• 스스로 닫을 수 있도록, Visually Hidden 처리된 닫기 버튼이 있어야 합니다.

링크

스펙

base

상태	슬롯	속성	값
enabled	region	paddingX	$dimension.x2
		paddingY	$dimension.x2
		offsetDuration	$duration.d4
		offsetTimingFunction	$timing-function.easing
	root	color	$color.bg.neutral-solid
		cornerRadius	$radius.r2
		minHeight	44px
		paddingX	$dimension.x4
		paddingY	$dimension.x2_5
		gap	$dimension.x2
		enterOpacity	0
		enterScale	0.8
		enterDuration	$duration.d3
		enterTimingFunction	$timing-function.enter
		exitOpacity	0
		exitScale	0.8
		exitDuration	$duration.d2
		exitTimingFunction	$timing-function.exit
	message	color	$color.palette.static-white
		fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.regular
	prefixIcon	size	24px
	actionButton	targetPaddingX	$dimension.x2
		targetMinHeight	44px
		color	$color.fg.brand
		fontSize	$font-size.t4
		lineHeight	$line-height.t4
		fontWeight	$font-weight.bold

variant=default

상태	슬롯	속성	값

variant=positive

상태	슬롯	속성	값
enabled	prefixIcon	color	$color.fg.positive

variant=critical

상태	슬롯	속성	값
enabled	prefixIcon	color	$color.fg.critical