brunch

You can make anything
by writing

C.S.Lewis

by 두블링 한윤석 Dec 16. 2023

체크박스 vs 라디오 버튼

체크박스 버튼과 원형 버튼의 차이점은???

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

이번에는 회사에서 디자인을 하면서 제가 실수 했던 부분과 평소에 관심있기 생각하지 않았지만 업무를 하면서 고민해보았던 내용들에 대해 이야기 해보려고합니다.

이번 내용은 체크박스 버튼과 라디오 버튼입니다.



체크박스와 라디오 버튼


차이점은 무엇인가요?

체크박스

UI 디자인에서, 체크박스는 화면에 작은 정사각형 상자로 표시됩니다. 그것은 두 가지 상태가 있다: 체크와 체크되지 않은 상태. 체크하면, 사각형은 체크 표시로 채워질 것 입니다.

체크박스는 사용자에게 다양한 옵션을 제공하는 데 사용되며, 사용자는 작업을 완료하기 위해 원하는 수의 옵션을 선택할 수 있습니다. 확인란 그룹 내에서 각각은 개별적으로 작동하므로 사용자는 옵션을 독립적으로 선택하거나 선택 해제할 수 있습니다.

일반적으로 체크박스는 하나만 체크하는게 아니라 복수체크가 가능하도록 만들어진 ui 인 것 같습니다.


라디오 버튼

라디오 버튼은 화면에 작은 원으로 표시됩니다. 그것은 또한 두 개의 버튼상태를 가지고 있으며, 선택되면, 원은 꽉찬 개로 채워집니다.

체크박스 그룹과 달리, 라디오 버튼 그룹은 단일 컨트롤로 작동하며 사용자의 선택을 제공된 범위에서 하나의 옵션으로 제한합니다.



체크박스 디자인의 예시

제안을 수락하거나 거부할 때

이메일 비밀번호를 입력하고 어떤 제안을 거부하거나 수락할때 체크박스를 이용합니다.



라디오 버튼 디자인의 예시

라디오 버튼은 주로 여러개의 선택지 중 하나를 선택하고 확인을 누를 때 사용합니다.

배달의 민족에서 음식 옵션(여러개가 아닌 한개만 선택할 수 있는 옵션)을 선택하거나 결제 수단을 선택할 때 등에서 라디오 버튼이 사용됩니다.

매거진의 이전글 디자이너가 알아야할 CRUD

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari