Components/Sheets

Sheets

1.0.026 Aug, 2021
Design/ContentsCompleted
CodeNot Started
시트(Sheets)는 페이지를 이탈하지 않고 집중이 필요한 중요 정보를 표시하거나 복잡한 정보 입력을 요청할 시 사용 하는 대화 상자의 대안이며 활성화되면 사용자는 페이지의 컨텐츠에서 차단되어 시트 작업을 완료하거나 시트을 닫을 때 까지 이전 페이지로 돌아갈 수 없기 때문에 꼭 필요한 상황에서만 사용할 수 있도록 해야 합니다.
Sheets

Components

Sheet는 용도에 따라 A.Basic과 B.Nudging으로 구분됩니다.

  • A
    A
  • B
    B
A. BasicB. Nudging

Basic Modal Bottom Sheet

Basic Modal Bottom Sheet은 페이지를 이탈하지 않고 현재 작업과 관련된 복잡하고 다양한 컨텐츠를 담을 수 있습니다.

Basic Modal Bottom Sheet

Anatomy

Anatomy
1. Container2. Title (Option)3. Close Button

Variants

Type

Basic Modal Bottom Sheet는 용도에 따라 Fixed와 Draggable로 나뉘며 Draggable은 자유로운 축소/확장 뷰 전환으로 컨텐츠를 보다 유연하게 탐색할 수 있습니다.

TypeType
View

Fixed의 View 높이는 컨텐츠 양에 따라 자유롭게 대응 가능하며 최대 높이를 Full 또는 Half로 선택할 수 있습니다. Draggable의 View 높이는 Half를 Default로 하며 Hadle을 위로 또는 컨텐츠 스크롤 시 Full로 확장 가능합니다.

ViewView
Title

Title은 생략 또는 최대 한줄까지 표기 가능하며 링크 또는 카운트 표기 추가가 가능합니다. 링크 선택 시 Sheet가 닫히고 해당 페이지로 이동합니다.

TitleTitle
Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
TypeFixed, DraggableFixed
TitleDefault, Link, CountDefault
ViewFull, HalfFull

Usage Guidelines

Do : Fixed의 View 높이는 컨텐츠에 따라 최대 높이까지 자유롭게 조정 가능

Fixed Modal Bottom Sheet의 View 높이는 컨텐츠에 따라 최대 높이(Full/Half)까지 자유롭게 조정 가능합니다.

Do : Fixed의 View 높이는 컨텐츠에 따라 최대 높이까지 자유롭게 조정 가능
Do : Fixed의 최대 View 높이는 Full 또는 Half만 가능

Fixed Modal Bottom Sheet의 최대 View 높이는 Full 또는 Half로 지정하여 사용 가능합니다. 컨텐츠가 최대 View 높이를 넘어갈 시 스크롤 발생 됩니다.

Do : Fixed의 최대 View 높이는 Full 또는 Half만 가능
Do : Draggable의 View 높이는 Full/Half 전환만 가능

Draggable modal bottom sheet의 View 높이는 Full/Half 전환만 가능하며 컨텐츠가 View 높이를 넘어갈 시 스크롤 발생 됩니다.

Do : Draggable의 View 높이는 Full/Half 전환만 가능Do : Draggable의 View 높이는 Full/Half 전환만 가능
Do : Sheet 레이어 위에는 버튼 요소만 위치 가능

Sheet 레이어 위에는 버튼 요소만 위치할 수 있으며 컨텐츠 스크롤 시 버튼은 고정으로 플로팅 됩니다.

Do : Sheet 레이어 위에는 버튼 요소만 위치 가능
Don’t : 버튼 요소를 제외한 다른 요소는 Sheet레이어 위에 위치 불가능

Sheet 레이어 위에는 버튼 요소만 위치할 수 있으며 다른 요소는 위치할 수 없습니다.

Don’t : 버튼 요소를 제외한 다른 요소는 Sheet레이어 위에 위치 불가능
Do : 필요시 Header에 Secondary 버튼 추가 가능

Title과 관련하여 별도의 링크가 필요할 시 Header에 Secondary 버튼을 추가할 수 있습니다. (Header 레이어 그룹에 Button 눈을 켜서 사용 가능합니다.)

Do : 필요시 Header에 Secondary 버튼 추가 가능
Don’t : Header에는 Secondary 버튼 외에 추가 불가능

Sheet 레이어 Header에는 Link, Count, Secondary 버튼 외 요소는 추가할 수 없으며 기능이 중복되는 버튼을 넣지 않도록 주의해야 합니다.

Don’t : Header에는 Secondary 버튼 외에 추가 불가능

Spec

Size

Sheet의 Header 높이는 48 고정이며 가로폭은 디바이스에 맞춰 대응합니다. Title은 Header 가운데 정렬이며 버튼 영역을 제외하고 최대 한줄까지 표기 가능합니다.

SizeSize

Title 생략 시 Fixed는 Header높이 48 영역 그대로 유지되며 Draggable은 Header높이 48 영역이 사라지고 Handle 영역 24높이만 남습니다.

SizeSize
Spacing

Full 높이는 Stauts Bar로 부터 Fixed는 48/ Draggable은 간격 8까지 확장 가능하며 Half 높이는 Fixed / Draggable 모두 Status Bar를 포함한 전체 화면의 60%입니다.

SpacingSpacing

Behaviors

Fixed

Fixed Modal Bottom Sheet는 페이지 아래에서 위로 올라오며 닫기 버튼 또는 Dimmed 영역 터치 또는 페이지를 아래로 스크롤 시 Sheet를 닫을 수 있습니다.

FixedFixed
Draggable

Draggable modal bottom sheet는 페이지 아래에서 위로 Half 높이만큼 올라오며 Handle 또는 페이지를 위로 스크롤 시 Full로 확장됩니다. Handle 또는 페이지를 아래로 스크롤 시 Sheet를 Half 또는 닫을 수 있으며 Half에서 Dimmed 영역 터치 Sheet를 닫을 수 있습니다.

DraggableDraggable

Nudging Modal Bottom Sheet

Nudging Modal Bottom Sheet는 고객에게 유익한 정보 제공 또는 행동을 유도할때 사용합니다. 간소화된 텍스트와 이미지만을 사용해 빠른 메세지 전달이 가능합니다.

Nudging Modal Bottom Sheet

Anatomy

Anatomy
1. Container2. Body Text (Optional)3. Title4. Image (Optional)5. Close Button6. Button

Variants

Type

Nudging Modal Bottom Sheet의 Type은 Basic과 Image로 분류됩니다. Image는 Top 또는 Bottom으로 배치 가능합니다.

Type
TypeType
Button

Button은 최대 2개까지 사용 합니다. 우선순위가 높은 Button이 위에 위치하며 컬러는 Primary를 기본으로 사용합니다. 필요 시 Smileclub/CTA 컬러로 변경 가능합니다.

ButtonButton
Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
TypeBasic, Image Top, Image BottomDefault
Button1 Button, 2 Button1 Button

Usage Guidelines

Do : 필요시 우선순위가 높은 버튼을 아래 배치 가능

이전 페이지와의 흐름 등의 이유로 우선순위가 높은 버튼의 위치 변경이 필요할 시 아래로 배치할 수 있습니다.

Do : 필요시 우선순위가 높은 버튼을 아래 배치 가능
Don’t : Primary/CTA/Brand color 버튼은 함께 사용 불가능

2 버튼을 사용 시 Primary/CTA/Brand color 버튼은 우선순위가 높은 1개의 버튼에만 사용할 수 있으며 Secondary 버튼과 조합하여 사용 가능합니다.

Don’t : Primary/CTA/Brand color 버튼은 함께 사용 불가능
Do : 1개의 버튼은 반드시 Primary/CTA/Brand color를 사용

1개의 버튼 사용 시 버튼의 컬러는 반드시 Primary/CTA/Brand color를 사용해야 하며 Secondary 버튼은 2개의 버튼 조합시에만 사용 가능합니다.

Do : 1개의 버튼은 반드시 Primary/CTA/Brand color를 사용
Don’t : 이미지 사용 시 닫기 버튼과 이미지가 겹치지 않도록 주의

이미지 사용 시 오른쪽 상단 닫기 버튼을 충분히 인지할 수 있도록 이미지가 겹치지 않게 주의해서 사용해야 합니다.

Don’t : 이미지 사용 시 닫기 버튼과 이미지가 겹치지 않도록 주의

Spec

Size

Sheet의 가로폭은 디바이스에 맞춰 가변 대응하며 높이는 컨텐츠에 따라 디바이스 하단에서 위로 가변 대응합니다. Image의 가로폭은 360, 높이는 최소 80에서 최대 160까지 사용 가능하며 가로세로 비율 고정으로 디바이스 가로폭에 맞춰 가변 대응합니다.

Size
SizeSize

담당자권기석@gikwon

다음글
Slides