웹 UI 디자인 기본 문법 - 체크박스 (Checkbox)

 

 

아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다. 

 

 

 

체크박스 (Checkbox)

 

체크박스는 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.

사각형의 아이콘과 레이블로 구성되어 있다.

 

체크박스 예시 (사각형 아이콘과 레이블 구성)

 

 

클릭하면 선택(✔)되고, 다시 클릭하면 해제(☐)된다.

 

체크박스 선택 예시

 

 

하나 또는 여러 개의 옵션을 선택할 수 있다.

 

체크박스 여러 개의 옵션 선택 예시

 

 

1개의 체크박스를 사용할 수 있다.

여러 개를 함께 사용할 수도 있다.

 

1개의 체크박스(왼쪽), 여러 개의 체크박스(오른쪽)

 

 

체크박스는 왜 사용할까?

 

일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다.

 

 

옵션이 정해지지 않으면

사용자로부터 의도치 않은 다양한 응답을 수집할 수 있다.

 

인풋 응답 결과 예시 (사용자마다 다른 응답 결과)

 

 

따라서 일정한 입력 값이 필요한 경우,

정해진 옵션을 사용자에게 제공해야 한다.

 

체크박스와 인풋의 응답 결과 비교 예시

 

그럼, 체크박스는 언제 사용할까?

 

1. 다중 선택이 가능할 때

 

체크박스를 사용하면 여러 개의 옵션을 선택할 수 있다.

여러 옵션이 한눈에 보이고 바로 선택할 수 있다.

 

체크박스 다중 선택 예시

 

 

만약 사용자가 하나의 옵션만 선택하도록 제한하고 싶다면 라디오 버튼 사용을 권장한다.

라디오 버튼은 하나의 옵션만 선택할 수 있기 때문이다.

 

라디오 버튼 선택 예시

 

사용자가 옵션을 선택하면, 기존에 선택된 옵션에서 새로운 옵션으로 선택이 변경된다.

 

 

 

2. 진위형 옵션이 필요할 때

 

하나의 체크박스로 진위(True/False)를 선택할 수 있다.

예/아니오, 표시/숨기기, 켜짐/꺼짐 등의 진위를 선택할 수 있다.

 

진위형 체크박스 예시

 

 

체크박스는 선택하지 않을 시 기본적으로 False를 의미한다.

그런데 사용자가 이를 인지하지 못할 수도 있다.

 

진위형 체크박스 선택 예시

 

 

만약 예/아니오의 두 옵션을 동일한 중요도로 인지시켜야 한다면 라디오 버튼을 사용하는 것이 좋다.

라디오 버튼을 사용하면 "예"와 "아니오" 중 하나를 반드시 선택하도록 유도할 수 있다.

 

진위형 라디오 버튼 선택 예시

 

 

또한 켜짐/꺼짐, 표시/숨기기와 같은 설정 옵션에는 스위치(toggle) 사용이 더 직관적일 수 있다.

토글은 UI의 활성/비활성 상태 변화가 더 직관적으로 표현되기 때문이다.

 

토글 스위치 사용 예시

 

 

 

3. 선택이 필수가 아닐 때

 

체크박스는 기본적으로 선택하지 않아도 무방하다.

체크하지 않으면 기본적으로 선택되지 않은 상태(False)로 제출된다.

 

체크박스 선택하지 않고 제출한 예시

 

 

체크박스가 없다면 어떻게 될까?

 

라디오 버튼으로 체크박스를 대체한 예시

 

라디오 버튼은 하나만 선택할 수 있다.

그런데 사용자가 이 중 한 개 이상의 SNS를 사용한다면 선택하기 어려울 수 있다.

 

 

이럴 때 체크박스를 사용한다면?

 

체크박스 사용 예시

 

사용자는 사용하는 여러 SNS를 쉽게 선택할 수 있다.

 

 

 

요약하면,

 

체크박스는 언제 사용할까?

(일정한 입력 값을 응답받아야 하는 상황에서)

 

1. 여러 개의 옵션을 선택할 수 있을 때
2. 진위형(예/아니오) 선택이 필요할 때

 

체크박스를 안 쓰면?

 

1. 옵션 중 하나만 선택이 가능하다면 라디오 버튼 사용을 권장한다.
2. 예와 아니오를 동일하게 인지시켜야 한다면 라디오 버튼을 사용하는 것이 좋다.
3. 꺼짐/켜짐과 같은 설정 옵션에는 토글 스위치가 더 직관적일 수 있다.

UI 디자인, 웹 UI 디자인, 체크박스 UI, UI 컴포넌트, 라디오 버튼과 체크박스 차이