UI - 체크 박스, 라디오 버튼, 토글의 차이

무언가를 선택할 때 쓰이는 Check box와 Radio button, Toggle

UI를 제작하다 보면 차이가 무엇인지 어느 상황에서 써야하는지 헷갈릴 수도 있습니다.

간단하게 알아보아요.

​

1. Check box

체크박스는 말그대로 네모난 상자를 클릭하면 체크 표시가 표출되는 UI입니다.

체크 박스는

• 확인, 동의 했다는 의미일 때
• 중복으로 값을 선택할 수 있을 때
• 값이 없어도 될 때 (선택 사항)

쓰입니다. 예를 들면 약관동의에서 약관을 보았고, 여기에 동의한다라는 의미로 쓰이고, 쇼핑몰의 상품 카테고리

중에 여러가지를 동시에 고를 수 있을 때 쓰이곤 합니다.

​

2. Radio button​

라디오 버튼은 동그란 UI 컴포넌트입니다.

라디오 버튼은

• 옵션 중 하나 선택
• 값이 없는 상태가 존재하면 안될 때
• 선택지 중 하나만 골라야 할 때

쓰인다. 라디오 버튼은 보통 동그라미 안에 색이 칠해지는 형태입니다. 다른 형태로는 카드처럼 되어있는

한 가지만 고를 수 있는 버튼이 있는데 기능으로 따지면 이 형태로 라디오 버튼이라고 할 수 있습니다.

​

3. Toggle

토글은 스위치라는 물리적인 요소에서 따온 UI 컴포넌트 입니다.

토글은

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

사용합니다. 쉬운 예로 들면 화면의 라이트 모드 - 다크 모드를 설정할 때 쓰이는 토글을 생각하실 수 있습니다.

하지만 요즘은 양자택일 상황에서도 토글을 많이 사용합니다. 눈에 보이지 않아도 상태가 변경된다고 볼 수 있는

두 가지 중 하나를 고를 때 쓰입니다.

​

UI 컴포넌트는 생각하는 사람의 관점에 따라 알고있는 거에 따라 조금씩 섞어가며 다르게 사용할 수 있습니다.

본질은 알아도, 서로간의 협업을 통해서 융통성있게 제작하는 것이 필요하지 않을까 생각합니다.

‍