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

대체 이 상황엔 무슨 버튼을 써야 하는 걸까?

컴포넌트로 만들어 놓은 selection 친구들.

1. Check box

2. Radio button

3. Toggle

막상 우리 서비스에 적용하려고 보니 여기는 체크 박스가 맞는데.. 그럼 이건 토글인가? 하면서 헷갈리기 시작했다. 그래서 각 선택 도구들이 어떤 상황에 쓰이는지 정리해 보았다.

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

     언제 사용하는가?

     - 체크, 동의 혹은 확인했다는 의미일 때

     - 중복으로 값을 선택할 수 있을 때

     - 값이 없어도 될 때 (중립 표시처럼 하나의 값을 꼭 선택하지 않아도 됨)

    예시)

    1. 약관 동의 - 약관을 보았고, 여기에 동의한다라는 의미를 담고 있다.

    

마켓컬리 앱 - 회원가입

    

    

    2. 필터 중복 선택 - 상품 카테고리 중에 여러가지를 동시에 고를 수 있다.

    

지그재그 앱 - 카테고리

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

    언제 사용하는가?

     - 값이 없는 상태가 존재하면 안될 때

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

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

    예시)

    옵션 중 하나 선택

Google Material Design

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

    언제 사용하는가?

     - 즉각적으로 변화가 눈에 보일 때

     - 두 가지 중 하나의 상태를 설정할 때

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

    예시)

    ON/OFF

밀리의 서재

---

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