Design System
Foundation
디자인 시스템이란?
컬러
타이포그래피
그리드
아이콘
Component
GNB
Input
Form
Dropdown
Selection
Accordion
Card
Footer
Carousel
Badge
Switch
Notification
Tooltip
Breadcrumb
Dialog
사용자의 특정 행동이 Trigger 가 되어 발생하는 컴퍼넌트입니다.
일방적으로 정보를 전달하거나, 특수한 경우 사용자로 부터 정보를 받을 때 사용됩니다.
Architecture
각 사용성에 따라 총 3가지로 구분됩니다.
Alert Dialog
단순한 정보를 전달하거나, 단순한 행동을 야기해야할 때 사용됩니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary Action
Primary Action
7
1
3
4
2
6
5
1
Container
2
Icon (Optional)
3
Title
4
Description (Optional)
5
Button for Secondary Action (Optional)
6
Button for Primary Action
7
Scrim
Image Dialog
사용자의 특정 행동이 트리거가 되어 작동합니다.
반복적인 결과가 나타나지만, 특정 시간(기간) 동안 닫을 수 있습니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
확인하러 가기
3일 동안 보지 않기
8
1
2
4
3
5
6
7
1
Container
2
Icon Button
3
Graphic
4
Title
5
Description (Optional)
6
Button for Primary Action
7
Text Button (Optional)
8
Scrim
왜 Main 버튼이 하나만 있나요?
사용자가 해당 Dialog를 통해 전달 받는 내용에 대해 반응할 수 있는 확률을 높이기 위해
행동에 대한 범위를 좁혀 유도하기 위한 목적으로 버튼을 하나만 적용합니다.
Custom Dialog
특정 영역에 대해 자유롭게 필요한 컴퍼넌트와 혼합하여 사용할 수 있습니다.
주로 사용자로부터 특정 데이터를 받아야할 경우에 사용됩니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Previous
Next
7
1
2
6
5
3
4
1
Container
2
Icon Button
3
Title
4
Description (Optional)
5
Button for Secondary Action (Optional)
6
Button for Primary Action
7
Scrim