라디오 버튼과 체크박스, 뭐가 다르냐고 물으면 곧바로 답할 수 있나요? 매일 누르면서도 막상 이름을 대라면 머뭇거리게 됩니다.
화면을 쓰는 건 쉬운데, 그 부품들의 이름은 의외로 아무도 알려주지 않아요. 그런데 기획서를 받아 들거나 앱 설정을 만질 때, 이름을 모르면 대화가 자꾸 막힙니다. "그 동그란 거요"라고 말하는 순간 서로 답답해지죠.
그래서 오늘은 화면에서 값을 고르고 넣는 입력 컨트롤(Input Control) 8가지를 초등학생도 알아들을 수 있게 정리했습니다. 먼저 전체 지도부터 펼쳐 볼게요.
입력 컨트롤은 크게 두 가지 일을 합니다. 하나는 고르기(선택), 다른 하나는 넣기(입력)예요. 지금부터 하나씩, 언제 쓰는 물건인지까지 짚어 드리겠습니다.
1. 라디오 버튼 (Radio Button)
여러 선택지 중 딱 하나만 고르게 하는 둥근 버튼. 옛날 라디오에서 채널 버튼 하나를 누르면 나머지가 툭 튀어나오던 것과 똑같아요.
동그라미를 하나 켜면 같은 묶음의 나머지는 자동으로 꺼집니다. 그래서 '이것 아니면 저것'처럼 서로 겹칠 수 없는 답을 받을 때 씁니다. 이름도 실제 라디오의 채널 선택 버튼에서 그대로 따왔어요.
이럴 때 써요: "배달 / 포장 중 하나 고르기", "성별 선택", "결제 수단 하나 정하기"처럼 답이 하나뿐일 때.
2. 체크박스 (Checkbox)
네모칸에 체크 표시를 켜고 끄는 컨트롤. 여러 개를 각각 고를 수 있어요. 장바구니에 담고 싶은 걸 여러 개 툭툭 담는 느낌이죠.
라디오 버튼과 가장 헷갈리는 친구입니다. 차이는 딱 하나예요. 라디오는 '하나만', 체크박스는 '여러 개 동시에'. 각 칸이 서로 독립적이라, 세 개를 다 켜도 되고 하나도 안 켜도 됩니다.
이럴 때 써요: "받고 싶은 알림 모두 선택", "관심 분야 여러 개 고르기", "약관 동의 체크".
3. 토글 (Toggle)
켜짐(ON)과 꺼짐(OFF), 두 상태를 바로 바꾸는 스위치. 방의 전등 스위치를 딸깍 누르는 것과 똑같아요.
손잡이가 오른쪽으로 가면 켜짐, 왼쪽으로 가면 꺼짐. 누르는 즉시 결과가 반영된다는 점이 중요합니다. 그래서 '저장' 버튼을 따로 누르지 않아도 되는 설정에 잘 어울려요.
이럴 때 써요: "와이파이 켜기/끄기", "다크 모드 전환", "진동 알림 사용 여부".
4. 드롭다운 (Dropdown)
평소엔 접혀 있다가 누르면 목록이 주르륵 펼쳐지는 선택 상자. 서랍을 열어 안에서 하나 꺼내는 모습과 닮았어요.
선택지가 많아 라디오 버튼으로 다 늘어놓으면 화면이 복잡할 때 씁니다. 접어 두면 자리를 거의 안 차지하니까요. 대신 눌러서 펼쳐야 뭐가 있는지 보인다는 게 단점입니다.
이럴 때 써요: "국가·지역 선택", "연도 고르기", "카테고리 선택"처럼 항목이 많을 때.
5. 슬라이더 (Slider)
막대(트랙) 위의 손잡이를 좌우로 밀어 값을 조금씩 조절하는 컨트롤. 오디오의 볼륨 다이얼을 손으로 밀어 올리는 느낌이에요.
0과 100 사이처럼 '중간 값'이 많을 때 편합니다. 숫자를 일일이 입력하지 않고 감각적으로 맞출 수 있으니까요. 정확한 숫자가 꼭 필요하다면 옆에 숫자 입력칸을 같이 두기도 합니다.
이럴 때 써요: "밝기 조절", "볼륨 조절", "가격 범위 필터".
6. 데이트 피커 (Date Picker)
달력을 띄워 날짜를 콕 집어 고르게 하는 입력창. 벽에 걸린 달력에 동그라미 치는 것과 같아요.
날짜를 직접 타이핑하면 사람마다 형식이 제각각이라 오류가 나기 쉽습니다(2026/7/31, 26.07.31…). 데이트 피커는 달력에서 고르게 해서 이런 실수를 막아 줘요. 예약·항공권처럼 날짜가 중요한 화면의 단골입니다.
이럴 때 써요: "예약 날짜 선택", "생년월일 입력", "여행 기간 고르기".
7. 플레이스홀더 (Placeholder)
입력칸에 옅게 미리 적혀 있는 예시 문구. 시험지 답안란에 연필로 살짝 써 둔 예시 같은 거예요. 쓰기 시작하면 사라집니다.
"이름을 입력하세요"처럼 무엇을 넣어야 할지 알려 주는 힌트입니다. 한 가지 주의할 점. 플레이스홀더는 안내일 뿐, 항목 이름표(라벨)를 대신하면 안 됩니다. 입력을 시작하면 사라져서, 내가 뭘 적는 칸이었는지 잊어버리기 쉽거든요.
이럴 때 써요: "예: 010-1234-5678", "검색어를 입력하세요"처럼 입력 형식을 살짝 귀띔할 때.
8. CTA (Call To Action)
사용자의 다음 행동을 부르는 가장 눈에 띄는 버튼. 갈림길에 세워 둔 '이쪽으로 오세요' 안내판이라고 보면 됩니다.
'콜 투 액션', 말 그대로 '행동을 불러오는' 버튼이에요. "무료로 시작하기", "지금 구매", "가입하기"처럼요. 그래서 색을 진하게, 크기를 크게 해서 화면에서 딱 하나만 도드라지게 만듭니다. 버튼이 여러 개면 어디를 눌러야 할지 헷갈리니까요.
이럴 때 써요: 랜딩 페이지에서 "가장 원하는 행동 하나"를 눌러 주길 바랄 때.
자주 묻는 질문
라디오 버튼과 체크박스, 결국 어떻게 구분하나요?
답이 하나면 라디오 버튼, 여러 개면 체크박스입니다. "성별처럼 하나만 골라야 하는가, 관심사처럼 여러 개 골라도 되는가"를 떠올리면 쉬워요. 모양도 라디오는 동그라미, 체크박스는 네모라 눈으로도 구분됩니다.
토글과 체크박스는 뭐가 다른가요?
둘 다 켜고 끄지만, 토글은 누르는 즉시 설정이 바뀌고, 체크박스는 보통 마지막에 '저장'이나 '동의' 버튼을 눌러야 반영됩니다. 그래서 설정 화면에는 토글, 약관 동의나 목록 선택에는 체크박스가 자주 쓰여요.
플레이스홀더만 있으면 항목 이름은 없어도 되나요?
아니요. 플레이스홀더는 입력을 시작하면 사라지기 때문에, 그것만 믿으면 사용자가 "내가 지금 뭘 적는 칸이지?"를 잊을 수 있어요. 칸 위나 옆에 항목 이름표(라벨)를 따로 두는 것이 안전합니다.
마치며
어떤가요, 이제 화면 속 부품들의 이름이 조금은 손에 잡히시나요? 이름을 알면 기획서도, 앱 설정 화면도 훨씬 만만해집니다. 오늘 배운 8가지 중 하나라도 "아, 이게 그거였구나" 싶으셨다면 충분해요.
다음 편에서는 화면이 무언가 일하는 중일 때 보여 주는 로딩 UI 4가지, 스피너·스켈레톤·프로그레스 바·스플래시를 다룹니다. 빙글빙글 도는 그 동그라미의 진짜 이름, 궁금하지 않으세요?
이 시리즈의 다른 글
- 메뉴 아이콘 이름 4가지 — 햄버거·케밥·미트볼·도너, 왜 다 음식일까요?
- 알림 UI 용어 6가지 — 팝업·모달·얼럿·토스트·스낵바·바텀시트 뜻
- 화면 영역 용어 6가지 — 헤더·푸터·GNB·LNB·탭바·브레드크럼 뜻
- 로딩 UI 용어 4가지 — 스피너·스켈레톤·프로그레스바·스플래시 뜻