패스트캠퍼스

UI 컴포넌트 - 체크 박스, 라디오 버튼, 토글 차이

1. Check box (체크 박스) : 말 그대로 네모난 상자 + 체크 표시 ✅

언제 사용하는가?

- 체크, 동의 혹은 확인했다는 의미일 때
- 중복으로 값을 선택할 수 있을 때
- 값이 없어도 될 때 (중립 표시처럼 하나의 값을 꼭 선택하지 않아도 됨)

예시)
1. 약관 동의 - 약관을 보았고, 여기에 동의한다라는 의미를 담고 있다.
2. 필터 중복 선택 - 상품 카테고리 중에 여러가지를 동시에 고를 수 있다.

2. Radio button (라디오 버튼) : 라디오의 물리적 버튼에서 따온 컴포넌트

언제 사용하는가?

- 값이 없는 상태가 존재하면 안 될 때
- 선택지 중 하나만 골라야 할 때 (라디오 버튼은 하나 누르면 다른 것이 튀어나온다는 걸 떠올리자!)

라디오 버튼은 보통 아래 예시처럼 동그라미 안에 색이 칠해지는 형태다.
생김새는 카드처럼 되어있는 한 가지만 고를 수 있는 버튼이 있는데(구글에 UX/UI 디자인 사례 O,X 이미지로 많이 돌아다닌다.)
기능으로 따지면 이들 또한 라디오 버튼이라고 할 수 있다.

예시) 옵션 중 하나 선택

3. Toggle (토글) : 스위치라는 물리적 요소에서 따온 컴포넌트

언제 사용하는가?

- 즉각적으로 변화가 눈에 보일 때 - 두 가지 중 하나의 상태를 설정할 때

* 라이트 모드 - 다크 모드 변경하는 스위치는 바로 변화가 눈에 보인다. 하지만 요즘은 꼭 이런 경우가 아니라 양자택일의 상황에서 토글을 많이 사용한다. 눈에 보이지 않더라도 상태가 변경된다고 볼 수 있는 두 가지 중 하나를 고를 때 쓰인다.

예시)
ON/OFF

사실 UI 컴포넌트는 공부를 해도 해도 어렵다. 특히 인터넷에서 관련 UI디자인 사례를 찾아보면 오히려 더 혼란스럽다. 실제로는 '여긴 이게 맞는데 저긴 이렇게도 쓰고 있고' 있기도 하다. 그럴 때일수록 컴포넌트의 유래나 처음 정의된 기능에 집중해야 한다. 점점 그 경계도 많이 허물어져서 각자의 영역을 조금씩 침범하며 유동적으로 사용되고 있다. 본질은 알되, 협업하는 담당자들 간의 소통과 사용자에게 불편을 주지 않는 선에서의 융통성 있는 UI 디자인이 필요하지 않을까 생각한다.

출처
람다님의 브런치 글을 동의 하에 업데이트 하였습니다.
UI 컴포넌트 - 체크 박스, 라디오 버튼, 토글 차이