[UIUX] 컴포넌트 종류별 분석 정리 #2 컨트롤(체크박스, 라디오 컴포넌트)

컴포넌트를 분석하고 공부할 땐 컴포넌트의 형태가 아니라 정의와 뜻에 집중하기

 

* 아이콘, 체크박스, 라디오는 24px * 24px로 디자인하는 것이 개발자/디자이너에게 모두 편리!

 

컨트롤 컴포넌트

여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소

체크박스, 라디오, 스위치(토글), 슬라이더

 

컨트롤 컴포넌트의 특징

 

1. 컨트롤 요소는 대부분 라벨과 같이 쓰인다.

2. 컨트롤 요소와 라벨을 좀 더 깔끔하게 정렬하려면 두 요소의 세로를 같게 디자인하기.

라인 하이트와 일치하게 컨트롤 컴포넌트 디자인

3. 컨트롤 요소의 최소 터치 영역은 라벨과 함께 잡기.

 

 

 

 

체크박스 컴포넌트

여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트

 

* 체크박스 컴포넌트를 만들 때에는, 전체 프레임 내에 Container를 넣어서 그 Container 안에 체크 아이콘 삽입!

("역할 분리", "정렬 안정성", "상태 관리"를 쉽게 하려는 디자인 시스템 상의 전략적인 설계)

이렇게!

 

라디오 컴포넌트

여러 선택지 중 1개만 선택할 때 사용하는 컨트롤 컴포넌트

- 동시 선택 불가

 

* 라디오 컴포넌트를 만들 때에도, 전체 프레임 내에 Container를 넣어서 그 Container 안에 체크 아이콘 삽입!

("역할 분리", "정렬 안정성", "상태 관리"를 쉽게 하려는 디자인 시스템 상의 전략적인 설계)

이렇게!