Buttons
기능을 실행하기 위해 사용하는 컴포넌트입니다. 버튼의 형태가 제공하고자 하는 기능에 적절한지
확인해야 합니다.
일반적으로 버튼은 기능을 명확하게 전달하기 위해 세 가지 속성을 결합하여
사용합니다.
-
1. Style
크기, 색상 및 모양을 기반으로 하는 시각적인 요소를 의미합니다.
-
2. Content
목적을 전달하기 위해 버튼 내부에 표시하는 아이콘과 라벨을 의미합니다.
-
3. Types
버튼의 기능적 의미로 나누며, 기능에 따라 버튼의 스타일에 영향을 줍니다.
Anatomy
각 버튼에 포함되는 요소에 대한 정의입니다.
- 1. Icon (Optional)
- 2. Text label
- 3. Container
- 1. Text label
- 2. Time count
- 3. Container
- 1. Text label
- 2. Key Icon
- 3. Container
- 1. Icon
- 2. Container
States
각 버튼에 포함되는 요소에 대한 정의입니다. 모든 버튼 상태의 디자인은 정의된 토큰으로 동일하게 적용합니다.
-
1. Enabled
활성화 된 상태의 일반적인 버튼입니다.
-
2. Selected
사용자가 버튼을 선택한 상태입니다.
-
3. Focused
사용자가 버튼을 포커스한 상태입니다.
-
4. Disabled
비활성화 된 상태의 버튼입니다.
Types
버튼이 제공하는 요소에 따라 유형이 나뉩니다.
-
A. Common Button
가장 일반적인 버튼으로, 주요한 액션을 실행합니다.
-
B. Time mapping Button
버튼의 기능이 시간의 흐름과 연관되어 있을 때 사용됩니다.
-
C. Key Button
특정 리모콘 키에 대한 안내가 포함되어 있어야 할 때 사용됩니다.
-
D. Icon Button
화면 구성에 따라 직관적인 아이콘이 필요 시에 사용됩니다.
Style
모양과 크기의 조합을 통해 버튼의 스타일을 설정할 수 있습니다.
2가지 버튼 모양이 있으며 각각
3가지 크기로 제공됩니다. 모양과 크기의 각 조합은 서로 다른 수준의 시각적 중요성을 가집니다.
-
1. 모양
컨테이너의 모양으로 유형을 구분합니다. Square > Rounded 의 순으로 기능적 중요성을 가집니다.
-
2. 크기
버튼의 높이값에 따라 유형을 구분합니다. Large > Medium > Small 의 순으로 기능적 중요성을 가집니다.
Icon
의미를 명확하게 전달할 수 있는 아이콘만 사용합니다.
-
Layout
- 아이콘과 텍스트 라벨은 세로로 정렬하지 않습니다.
- 아이콘과 텍스트 라벨 사이의 여백은 8px으로 고정합니다.
- 하나의 버튼 안에는 하나의 아이콘만 사용합니다.
-
Color
- 아이콘 컬러는 단색으로 표현합니다.
- 상태에 따라 지정된 색으로 동일하게 표현합니다.
Container
버튼은 텍스트 라벨 주위에 컨테이너를 반드시 표시합니다. 컨테이너는 다양한 방식으로 표시될 수 있습니다.
-
Layout
- 가로폭은 텍스트 라벨의 길이에 따라 가변적으로 반응합니다.
- 좌/우에 최소 여백 값을 반드시 포함합니다. (버튼의 크기에 따라 여백 값은 상이합니다.)
- 구성 요소는 가운데 정렬로 위치합니다. (Time mapping, Key Button은 예외입니다.)
-
Color
- 버튼 컬러는 단색으로 표현합니다.
- 상태에 따라 지정된 색으로 동일하게 표현합니다.
Usage
버튼 내 아이콘과 텍스트 라벨을 조합하여 사용자가 버튼의 기능을 쉽게 이해할 수 있도록 도와줍니다.
-
간결한 텍스트 라벨이 아이콘보다 더 명확하게 전달되는 경우 텍스트 라벨을 사용하는 것이
좋습니다.
텍스트 라벨은 기능을 설명할 수 있는 명사형 단어로만 사용합니다.
간결한 텍스트 라벨을 사용합니다.
텍스트 라벨은 문장형으로 적지 않습니다.
텍스트 라벨에는 버튼의 기능에 부합하는 내용을 제공합니다.
부가 정보를 텍스트 라벨에 적지 않습니다.
사용자가 프로세스가 아직 진행중임을 인지할 수 있습니다.
사용자가 버튼 입력이 누락된 오류라고 생각할 수 있습니다.