체크박스와 라디오 버튼

컨트롤 컴포넌트의 개념

• 다른 선택지를 특정할 수 있도록 하는 요소
• 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 도움

컨트롤 컴포넌트의 종류

• 체크박스: 중복 선택 가능
• 라디오 버튼: 한가지만 선택
• 스위치(토글)
• 슬라이더

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

 

- 컨트롤 요소의 터치 영역은 그 주변의 최소 크기로 만들어야 됨

- 또한 라벨(텍스트)와 같이 쓰이므로 라벨과 같이 컨트롤 요소를 묶어서 사용

- 간격을 충분히 줘야됨

컨트롤 요소와 라벨의 높이값을 같게 해야됨 - 24px 추천

라벨(텍스트) = 폰트값x행간

ㄴ 폰트 16px, 행간 150% = 24px

 

체크박스

체크 박스를 24px로 하기로 했다면 실제 클릭 범위는 24px, 체크박스의 이미지 크기는 20px로 시각적 보정을 해야함

ㄴ 라벨(텍스트)과 시각적 크기 차이가 나기 때문 / 라벨(텍스트)의 시각적 높이값는 16px(폰트값)

 

라디오버튼

- 라디오는 여러개 동시 선택 불가

- 반드시 선택되어 있어야 함

ㄴ 기본값을 유저가 가장 선호하는 버튼으로 선택해 둠

 

버튼의 형태는 다양하게 존재하지만, 우리는 버튼의 형태보다는 기능에 집중해야 한다.

버튼을 버튼으로 인식하게 하기 위한 어포던스가 중요함