Sheets
Components
Sheet는 용도에 따라 A.Basic과 B.Nudging으로 구분됩니다.
- A
- B
Basic Modal Bottom Sheet
Basic Modal Bottom Sheet은 페이지를 이탈하지 않고 현재 작업과 관련된 복잡하고 다양한 컨텐츠를 담을 수 있습니다.
Anatomy
Variants
Type
Basic Modal Bottom Sheet는 용도에 따라 Fixed와 Draggable로 나뉘며 Draggable은 자유로운 축소/확장 뷰 전환으로 컨텐츠를 보다 유연하게 탐색할 수 있습니다.
View
Fixed의 View 높이는 컨텐츠 양에 따라 자유롭게 대응 가능하며 최대 높이를 Full 또는 Half로 선택할 수 있습니다. Draggable의 View 높이는 Half를 Default로 하며 Hadle을 위로 또는 컨텐츠 스크롤 시 Full로 확장 가능합니다.
Title
Title은 생략 또는 최대 한줄까지 표기 가능하며 링크 또는 카운트 표기 추가가 가능합니다. 링크 선택 시 Sheet가 닫히고 해당 페이지로 이동합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | Fixed, Draggable | Fixed |
| Title | Default, Link, Count | Default |
| View | Full, Half | Full |
Usage Guidelines
Do : Fixed의 View 높이는 컨텐츠에 따라 최대 높이까지 자유롭게 조정 가능
Fixed Modal Bottom Sheet의 View 높이는 컨텐츠에 따라 최대 높이(Full/Half)까지 자유롭게 조정 가능합니다.
Do : Fixed의 최대 View 높이는 Full 또는 Half만 가능
Fixed Modal Bottom Sheet의 최대 View 높이는 Full 또는 Half로 지정하여 사용 가능합니다. 컨텐츠가 최대 View 높이를 넘어갈 시 스크롤 발생 됩니다.
Do : Draggable의 View 높이는 Full/Half 전환만 가능
Draggable modal bottom sheet의 View 높이는 Full/Half 전환만 가능하며 컨텐츠가 View 높이를 넘어갈 시 스크롤 발생 됩니다.
Do : Sheet 레이어 위에는 버튼 요소만 위치 가능
Sheet 레이어 위에는 버튼 요소만 위치할 수 있으며 컨텐츠 스크롤 시 버튼은 고정으로 플로팅 됩니다.
Don’t : 버튼 요소를 제외한 다른 요소는 Sheet레이어 위에 위치 불가능
Sheet 레이어 위에는 버튼 요소만 위치할 수 있으며 다른 요소는 위치할 수 없습니다.
Do : 필요시 Header에 Secondary 버튼 추가 가능
Title과 관련하여 별도의 링크가 필요할 시 Header에 Secondary 버튼을 추가할 수 있습니다. (Header 레이어 그룹에 Button 눈을 켜서 사용 가능합니다.)
Don’t : Header에는 Secondary 버튼 외에 추가 불가능
Sheet 레이어 Header에는 Link, Count, Secondary 버튼 외 요소는 추가할 수 없으며 기능이 중복되는 버튼을 넣지 않도록 주의해야 합니다.
Spec
Size
Sheet의 Header 높이는 48 고정이며 가로폭은 디바이스에 맞춰 대응합니다. Title은 Header 가운데 정렬이며 버튼 영역을 제외하고 최대 한줄까지 표기 가능합니다.
Title 생략 시 Fixed는 Header높이 48 영역 그대로 유지되며 Draggable은 Header높이 48 영역이 사라지고 Handle 영역 24높이만 남습니다.
Spacing
Full 높이는 Stauts Bar로 부터 Fixed는 48/ Draggable은 간격 8까지 확장 가능하며 Half 높이는 Fixed / Draggable 모두 Status Bar를 포함한 전체 화면의 60%입니다.
Behaviors
Fixed
Fixed Modal Bottom Sheet는 페이지 아래에서 위로 올라오며 닫기 버튼 또는 Dimmed 영역 터치 또는 페이지를 아래로 스크롤 시 Sheet를 닫을 수 있습니다.
Draggable
Draggable modal bottom sheet는 페이지 아래에서 위로 Half 높이만큼 올라오며 Handle 또는 페이지를 위로 스크롤 시 Full로 확장됩니다. Handle 또는 페이지를 아래로 스크롤 시 Sheet를 Half 또는 닫을 수 있으며 Half에서 Dimmed 영역 터치 Sheet를 닫을 수 있습니다.
Nudging Modal Bottom Sheet
Nudging Modal Bottom Sheet는 고객에게 유익한 정보 제공 또는 행동을 유도할때 사용합니다. 간소화된 텍스트와 이미지만을 사용해 빠른 메세지 전달이 가능합니다.
Anatomy
Variants
Type
Nudging Modal Bottom Sheet의 Type은 Basic과 Image로 분류됩니다. Image는 Top 또는 Bottom으로 배치 가능합니다.
Button
Button은 최대 2개까지 사용 합니다. 우선순위가 높은 Button이 위에 위치하며 컬러는 Primary를 기본으로 사용합니다. 필요 시 Smileclub/CTA 컬러로 변경 가능합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | Basic, Image Top, Image Bottom | Default |
| Button | 1 Button, 2 Button | 1 Button |
Usage Guidelines
Do : 필요시 우선순위가 높은 버튼을 아래 배치 가능
이전 페이지와의 흐름 등의 이유로 우선순위가 높은 버튼의 위치 변경이 필요할 시 아래로 배치할 수 있습니다.
Don’t : Primary/CTA/Brand color 버튼은 함께 사용 불가능
2 버튼을 사용 시 Primary/CTA/Brand color 버튼은 우선순위가 높은 1개의 버튼에만 사용할 수 있으며 Secondary 버튼과 조합하여 사용 가능합니다.
Do : 1개의 버튼은 반드시 Primary/CTA/Brand color를 사용
1개의 버튼 사용 시 버튼의 컬러는 반드시 Primary/CTA/Brand color를 사용해야 하며 Secondary 버튼은 2개의 버튼 조합시에만 사용 가능합니다.
Don’t : 이미지 사용 시 닫기 버튼과 이미지가 겹치지 않도록 주의
이미지 사용 시 오른쪽 상단 닫기 버튼을 충분히 인지할 수 있도록 이미지가 겹치지 않게 주의해서 사용해야 합니다.
Spec
Size
Sheet의 가로폭은 디바이스에 맞춰 가변 대응하며 높이는 컨텐츠에 따라 디바이스 하단에서 위로 가변 대응합니다. Image의 가로폭은 360, 높이는 최소 80에서 최대 160까지 사용 가능하며 가로세로 비율 고정으로 디바이스 가로폭에 맞춰 가변 대응합니다.
