#
서비스 기획
2022-12-21

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

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

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

간단하게 알아보아요.

1. Check box

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

체크 박스는

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

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

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

2. Radio button​

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

라디오 버튼은

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

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

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

3. Toggle

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

토글은

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

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

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

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

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

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

유익했다면! 이어서 읽어보기:)
패스워드리스

패스워드리스

알아두면 쓸데있는 기획용어 - GNB, LNB, SNB, FNB

기획용어에 대해서 알아볼까요?

메인페이지를 통해 살펴보는 쿠팡/마켓컬리 차이점

쿠팡과 마켓컬리 메인페이지는 무슨 차이가 있을까요?

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.