Design System
Foundation
디자인 시스템이란?
컬러
타이포그래피
그리드
아이콘
Component
GNB
Input
Form
Dropdown
Selection
Accordion
Card
Footer
Carousel
Badge
Switch
Notification
Tooltip
Breadcrumb
Buttons
사용자와 상호작용하는 가장 근본적인 컴퍼넌트입니다.
사용자의 행동을 유도하거나, 사용자로 하여금 다음 행동을 예상하게 만들어 사용성을 높일 수 있습니다.
Hierarchy of General Button
General Button은 각 사용성에 따라 총 4가지의 위계를 가집니다.
Primary Button
가장 높은 위계를 가진 버튼입니다.
해당 버튼은 주로 한 페이지 내에서 가장 중요한 행동을 유도하고자 할 때의 사용을 권장합니다.
로그인
로그인
로그인
1
2
3
1
Fill
2
Manual
2
Hugged
Base Button
Primary Button과 위계상으로는 동일한 위계를 가집니다.
단, 해당 버튼은 Primary와 다르게 해당 화면에서 꼭 행동을 유도하지 않아도 될 때 사용됩니다.
로그인
로그인
로그인
1
2
3
1
Fill
2
Manual
2
Hugged
Secondary Button
두 번째 위계를 가진 버튼으로 주로 Primary 버튼 또는 Base 버튼과 혼용되어 사용됩니다.
특수한 경우에는 단독적으로 사용이 가능합니다.
로그인
로그인
로그인
1
2
3
1
Fill
2
Manual
2
Hugged
Tertiary Button
Secondary와 기본적으로 같은 위계로 인식되지만,
Base Button과 혼용할 수 없는 버튼에 대한 정의입니다.
로그인
로그인
로그인
1
2
3
1
Fill
2
Manual
2
Hugged
Requirement of Buttons
각 버튼 컴퍼넌트를 어떻게 사용해야할지에 대한 필수 권장사항입니다.
General Button
General Button의 사용에 있어 가장 중요한 점은 해당 버튼을 눌러야 하는 이유를 충분히 전달해야합니다.
또한 사용성을 고려하여 위치에 대한 부분을 서비스 전반적으로 일관성 있게 표현해야합니다.
필수 사항
중요한 버튼을 오른쪽 또는 위쪽에 배치하도록 합니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Primary Action
Secondary
Do Not
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Do
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Do Not
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Primary Action
Secondary
Do
Action Button
말 그대로 어떤 행동이 일어나는 것을 시각적으로 보여주는 버튼입니다.
이 때 시각적인 정보는 아이콘을 통해 나타내기 때문에 행동과 매칭이 되는 아이콘을 사용해야합니다.
필수 사항
방향을 나타내는 꺽쇠 아이콘을 사용할 때는 오른쪽에 위치해야합니다.
Practice Questions
FREE
TestGlider’s AI system recommends question types that you need to work on the most. By comparing your test data to other peer users, it predicts what question types you are most likely to struggle with.
Recommended Question
Multiple Choice
위 유형의 문제 중 하나가 제공돼요.
Hieronymous Bosch
Multiple Choice
Completion
Identifying
Short Answer
Hieronymous Bosch
Multiple Choice
Completion
Identifying
Short Answer
More Questions
Do Not
Practice Questions
FREE
TestGlider’s AI system recommends question types that you need to work on the most. By comparing your test data to other peer users, it predicts what question types you are most likely to struggle with.
Recommended Question
Multiple Choice
위 유형의 문제 중 하나가 제공돼요.
Hieronymous Bosch
Multiple Choice
Completion
Identifying
Short Answer
Hieronymous Bosch
Multiple Choice
Completion
Identifying
Short Answer
More Questions
Do
Text Button
Text Button은 가장 특수한 상황에서 사용자가 필요가 될 때 사용성이 극대화 됩니다.
평상시에는 사용하지 않기 때문에 다른 컴퍼넌트와 어울러질 때 가장 낮은 시각 정보로 전달되어야합니다.
필수 사항
다른 버튼과 혼용하여 사용할 수 없습니다.
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Secondary
Primary Action
Do Not
Title Text Here
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Primary Action
Secondary
Do