Help Bubble

Anatomy

Help Bubble은 Title, Description, Close Button을 제공합니다.

Properties

Placement Property

Help Bubble은 Trigger 되는 요소를 기준으로 적절한 위치 옵션을 제공합니다. Placement Prop은 {Side} - {Alignment} 조합으로 구성됩니다.

Show Close Button Property

Close Button 사용 여부를 제공합니다. Close Button은 내부에 터치 영역을 보장하기 위한 프레임이 포함되어 있습니다.

Close Button Target Size: 38*38

Show Description

디자이너는 필요한 경우 Description을 사용하지 않고 Help Bubble을 표현할 수 있습니다.

Description만 사용하는 것은 권장하지 않습니다.

Help Bubble Arrow 위치 조정

Help Bubble의 Arrow는 화면에서 적절한 위치를 찾기 위해서 조정할 수 있습니다. 조정시 최소 14px의 공간을 유지해야 합니다.

Guidelines

Help Bubble 넓이

Help Bubble은 기본으로 설정된 최대 넓이가 없습니다. 사용할 때 Help Bubble이 사용되는 위치와 내용에 따라서 적절한 최대 넓이를 고려해서 사용해주세요.

Help Bubble와 Trigger 요소 간격

Help Bubble은 Trigger 요소와 최소 4px의 간격을 유지해야 합니다. 사용처는 상황에 따라서 유연하게 간격을 조정할 수 있습니다.

화면을 기준으로 Overflow 되는 경우

Help Bubble은 Trigger 위치나 화면내 의도한 위치에 따라서 화면의 사방면 끝에 위치할 수 있습니다. 이런 경우 Help Bubble 구현 로직에 따라서 Help Bubble의 위치가 조정됩니다.

Arrow는 기본적으로 Trigger 요소의 중앙에 위치됩니다. 따라서 Arrow 위치를 조정하는 경우는 시각 보정이나 명확한 의도가 있어야 합니다.

Help Bubble 표시하기, 닫기

Help Bubble은 Trigger 요소를 탭했을 때 표시되거나, 처음부터 표시된 상태로 존재할 수 있습니다.

Close Button을 표시하지 않는 Help Bubble은 Trigger 및 Help Bubble 바깥 영역을 탭했을 때 닫히는 등, 적절한 시점에 닫혀야 합니다.

Close Button을 표시하는 Help Bubble은 Close Button을 탭했을 때 닫혀야 하며, 바깥 영역을 탭했을 때 닫힐지 여부는 Help Bubble에서 제공하는 내용의 중요도에 따라 직접 결정할 수 있습니다.

Help Bubble V3 변경점

• 여백과 라운드 값을 전반적으로 조정했습니다.
• 다크 테마의 컬러를 조정하여 불필요한 시각적 강조를 줄였습니다.
• Modal Variant는 더 이상 제공하지 않습니다. 필요한 경우 디자인 코어팀에 문의해주세요.

Specification

base

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-inverted
		cornerRadius	$radius.r3
		paddingX	$dimension.x3
		paddingY	$dimension.x2_5
		enterScale	0.9
		enterOpacity	0
		enterDuration	$duration.d4
		enterTimingFunction	$timing-function.enter
		exitScale	1
		exitOpacity	0
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.easing
	arrow	color	$color.bg.neutral-inverted
		width	12px
		height	8px
		cornerRadius	2px
		gutter	4px
		padding	14px
	title	color	$color.fg.neutral-inverted
		fontSize	$font-size.t3
		fontWeight	$font-weight.bold
		lineHeight	$line-height.t3
	description	color	$color.fg.neutral-inverted
		fontSize	$font-size.t3
		fontWeight	$font-weight.regular
		lineHeight	$line-height.t3
	closeButton	color	$color.fg.neutral-inverted
		fromRight	12px
		fromTop	12px
		size	14px
		targetSize	32px