Bottom Sheet

Anatomy

Bottom Sheet는 Backdrop, Container, Header, Close button, Footer가 조합되어 제공됩니다.

Properties

Header Layout Property

Header는 Title과 Description으로 구성되며 콘텐츠에 따라 위치를 변경할 수 있습니다.

Show Handle Property

Bottom Sheet를 드래그로 닫거나, 스냅 포인트를 설정해 확장 및 축소할 수 있는 Handle을 표시할 수 있습니다. Handle은 Enabled와 Pressed 상태를 가집니다.

Show Close Button Property

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

Close Button의 Target Size는 40*40입니다.

Show Description Property

Header를 사용할 경우 Title은 반드시 포함되어야 하고, Description은 부가 설명을 위해 추가할 수 있습니다.

Show Footer Property

Footer 사용 여부를 제공합니다.

Bottom Sheet Content

Bottom Sheet Container 내부에는 디자인 편의를 위해서 Bottom Sheet에 자주 활용되는 케이스를 제공합니다. 이 옵션은 디자인 편의를 위해 Figma에서만 제공합니다.

Guidelines

Bottom Sheet의 Content Area

Bottom Sheet는 콘텐츠의 양과 사용 가능한 공간에 따라 유연하게 크기가 조정되고 모든 요소들을 담을 수 있습니다.

Content Area의 크기는 내부에 담긴 요소들이 차지하는 공간에 따라 결정됩니다.

Figma tip: Content Area는 Slot을 활용해 표현할 수 있어요

Bottom Sheet 최대 너비

Bottom Sheet는 화면 너비 최대 480px까지 보여집니다.

Bottom Sheet의 닫기 동작

Bottom Sheet는 기본적으로 아래로 드래그하거나 바깥을 누르면 닫힙니다. 필요에 따라 상단이나 하단 CTA에 닫는 동작을 추가할 수 있습니다.

복잡한 양식을 작성하거나 결제할 때처럼 실수하면 안 되는 중요한 작업이나, Bottom Sheet 안에서 화면이 바뀔 때는 상단에 닫기 버튼을 넣는 것이 좋습니다. 이런 경우에는 핸들을 제거해서 실수로 닫히는 것을 방지하는 것을 권장합니다.

Snap Point 사용하기

Bottom Sheet에 Snap Point를 추가하여 시트의 높이를 확장하거나 축소할 수 있습니다.

스냅 포인트는 최소 2개(최대, 중간) 설정해야 하며, 필요한 경우 3개(최대, 중간, 최소)까지 설정할 수 있습니다.

스냅 포인트의 기본값은 최대(화면의 90%), 중간(50%), 최소(10%)로 설정되어 있습니다. 화면 비율(%)이나 픽셀(px) 단위로 지정할 수 있습니다.

Snap Point를 추가하는 경우 Handle을 반드시 표시해야 합니다.

Bottom Sheet 최대 높이

Bottom Sheet의 최대 높이는 화면 전체 높이의 90%를 넘지 않는 것을 권장합니다.

Bottom Sheet의 콘텐츠가 많아 화면 전체 높이의 90%를 넘는 경우 스크롤보다는 페이지로 표현하는 것을 권장합니다.

스크롤 시

Bottom Sheet의 콘텐츠가 많거나 해상도 등으로 인해 화면 전체 높이의 90%를 넘는 경우 스크롤이 발생합니다. 스크롤은 content area 내에서 발생합니다.

스크롤이 발생되는 경우, 하단에 콘텐츠가 더 있다는 것을 알려주는 시각적 장치로 Scroll Fog가 나타납니다.

Title, Description의 길이

Don’t

글이 너무 길어지지 않도록 주의해주세요.

글이 너무 길어지지 않도록 주의해주세요.

키보드가 나타날 경우

Bottom Sheet에서 텍스트 필드 등의 요소를 통해 키보드를 활성화해야 하는 경우, 키보드가 sheet 하단에 나타납니다.

Bottom Sheet V3 변경점

• V3 Foundation Color, Radius 토큰을 적용하며 배경과 아이템의 색상을 조정했습니다.
• Overlay 속성은 제거하고 Backdrop 레이어를 기본으로 포함합니다.
• Figma에서만 제공하던 OS Indicator 속성을 삭제했습니다. OS Indicator 사용은 가이드를 참고해주세요.
• 전반적인 여백과 타이틀 크기, 라운드 값을 조정했습니다.
• Instance Swap 기능을 활용해 내용을 쉽게 수정할 수 있도록 구조를 개선했습니다.
• 닫기 버튼의 스타일을 조정하고, Touch Area를 포함해 접근성을 높였습니다.

Specification

Bottom Sheet

base

상태	슬롯	속성	값
enabled	backdrop	color	$color.bg.overlay
		enterDuration	$duration.d6
		enterTimingFunction	$timing-function.enter
		enterOpacity	0
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.exit
		exitOpacity	0
	content	color	$color.bg.layer-floating
		maxWidth	640px
		topCornerRadius	$radius.r6
		enterDuration	$duration.d6
		enterTimingFunction	$timing-function.enter-expressive
		exitDuration	$duration.d4
		exitTimingFunction	$timing-function.exit
	header	gap	$dimension.x2
		paddingTop	$dimension.x6
		paddingBottom	$dimension.x4
	body	paddingX	$dimension.spacing-x.global-gutter
	footer	paddingX	$dimension.spacing-x.global-gutter
		paddingTop	$dimension.x3
		paddingBottom	$dimension.x4
	title	color	$color.fg.neutral
		fontSize	$font-size.t8
		lineHeight	$line-height.t8
		fontWeight	$font-weight.bold
	description	color	$color.fg.neutral-muted
		fontSize	$font-size.t5
		lineHeight	$line-height.t5
		fontWeight	$font-weight.regular
	closeButton	fromTop	$dimension.x5
		fromRight	$dimension.x5

headerAlignment=left

상태	슬롯	속성	값
enabled	header	paddingLeft	$dimension.spacing-x.global-gutter
		paddingRight	50px

headerAlignment=center

상태	슬롯	속성	값
enabled	header	paddingLeft	50px
		paddingRight	50px

Bottom Sheet Handle

base

상태	슬롯	속성	값
enabled	root	fromTop	6px
		width	36px
		height	4px
		color	$color.palette.gray-400
		borderRadius	9999px
		colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing
	touchArea	width	44px
		height	44px
pressed	root	color	$color.palette.gray-500

Bottom Sheet Close Button

base

상태	슬롯	속성	값
enabled	root	color	$color.bg.neutral-weak
		cornerRadius	$radius.full
		targetSize	44px
		size	28px
	icon	color	$color.fg.neutral
		size	14px
pressed	root	color	$color.bg.neutral-weak-pressed