깊게 보기 · 02
같은 질문인데
컨트롤이 다섯 개입니다
“지역을 고르게 해주세요” — 이 한마디에 쓸 수 있는 컨트롤이 최소 다섯 개입니다. 아무거나 고르면 안 되는 이유를 직접 눌러보며 확인합니다.
몇 개 중에 고르나요?
개수가 컨트롤을 정합니다. 아래를 눌러 비교해보세요.
세그먼티드 컨트롤 또는 라디오 버튼. 선택지가 전부 보이는 게 가장 빠릅니다. 숨길 이유가 없습니다.
라디오 버튼. 여전히 전부 보여주는 게 낫습니다. 셀렉트로 감추면 클릭이 한 번 더 필요합니다.
셀렉트. 이 정도부터 목록을 접는 게 낫습니다. 단 브라우저 기본 셀렉트는 디자인을 못 바꿉니다 — 시안대로 뽑으려면 직접 만들어야 하고, 그건 별도 공수입니다.
콤보박스. “은”만 쳐보세요. 수십 개를 스크롤하는 것보다 타이핑이 빠릅니다. 다만 구현 난도가 셀렉트보다 훨씬 높습니다.
선택지가 적을수록 펼쳐두고, 많을수록 접거나 검색을 붙입니다. 그리고 접는 순간(셀렉트·콤보박스) 공수가 올라간다는 걸 견적에 반영하세요.
언제 반영되나요?
생김새는 비슷하지만 동작이 완전히 다릅니다. 두 개를 각각 바꿔보세요.
스위치 즉시 반영
변경하면 바로 저장됩니다
체크박스 저장해야 반영
설정 화면을 체크박스로 만들어놓고 저장 버튼을 안 넣었습니다. 사용자는 체크했으니 됐다고 생각하고 나갑니다 → “설정이 저장이 안 돼요” 문의 폭주.
바꾸는 즉시 반영돼야 하면 스위치, 여러 개를 한 번에 제출하는 폼이면 체크박스 + 저장 버튼.
스위치는 즉시, 체크박스는 저장 후. 이 한 줄이 QA 이슈의 상당수를 없앱니다. 시안을 넘길 때 어느 쪽인지 반드시 적어주세요.
중복 선택이 되나요?
동그라미(라디오)는 하나만, 네모(체크박스)는 여러 개. 모양이 곧 규칙이라 사용자는 누르기 전에 이미 압니다.
라디오 하나만
한 번 고르면 아무것도 선택 안 한 상태로 되돌릴 수 없습니다. 그래서 “선택 안 함”을 넣어줘야 할 때가 있습니다.
체크박스 여러 개
전부 해제할 수 있습니다. 0개 선택도 유효한 상태인지 기획에서 정해야 합니다.
모양을 바꾸지 마세요. 라디오를 네모로, 체크박스를 동그라미로 만들면 사용자는 중복 선택 가능 여부를 잘못 예측합니다.
틀렸다는 걸 어디에 알려주나요?
같은 오류를 두 방식으로 보여줍니다. 각각 눌러보세요.
토스트 ✗ 나쁨
어느 칸이 문제인지 알 수 없습니다. 게다가 곧 사라져서 다시 볼 수도 없습니다.
인라인 ✓ 좋음
문제가 있는 자리에 붙어 있고, 무엇을 하면 되는지까지 알려줍니다.
오류는 언제나 문제가 발생한 위치에 붙입니다. 그리고 “오류가 발생했습니다”가 아니라 “무엇을 어떻게 고치면 되는지”를 쓰세요.
한 장으로 정리
고민될 때 이 표를 보세요.
| 상황 | 쓸 컨트롤 | 주의 |
|---|---|---|
| 2~3개 중 하나 | 세그먼티드 · 라디오 | 전부 펼쳐두기 |
| 4~7개 중 하나 | 라디오 | 기본값을 미리 선택 |
| 8~20개 중 하나 | 셀렉트 | 기본 셀렉트는 디자인 변경 불가 |
| 수십 개 이상 | 콤보박스 · 자동완성 | 구현 난도↑ · 디바운스 필요 |
| 여러 개 동시 선택 | 체크박스 · 필터 칩 | 저장 버튼 필요 여부 결정 |
| 켜기/끄기 즉시 반영 | 스위치 | 저장 버튼 없이 바로 저장 |
| 수량 조절 | 숫자 스텝퍼 | 직접 타이핑도 가능해야 함 |
| 범위 지정 | 레인지 슬라이더 | 손잡이 2개는 별도 구현 |
| 날짜 | 데이트 피커 | 기간이면 레인지 피커 |
컨트롤 선택은 취향이 아니라 선택지 개수 × 저장 시점 × 중복 가능 여부로 결정됩니다.
이제 이렇게 요청하세요
알림 설정 화면입니다. 항목마다 스위치(토글)로 만들고, 변경 즉시 저장되게 해주세요. 저장 버튼은 없습니다.
약관 동의는 체크박스로 하고 [가입하기] 버튼을 눌렀을 때 한 번에 제출되게 해주세요. 필수 항목을 체크하지 않으면 버튼을 비활성으로 두되, 왜 비활성인지 아래에 안내 문구를 넣어주세요.
은행 선택은 항목이 20개가 넘으니 셀렉트 대신 콤보박스(검색 가능한 선택)로 만들어주세요. 입력 후 0.3초 디바운스를 걸어 후보를 좁혀주세요.
폼 오류는 토스트가 아니라 해당 입력칸 아래 인라인으로 표시해주세요. 검사 시점은 입력칸에서 포커스가 벗어날 때로 해주세요.
전화번호 입력칸에 마스킹을 넣어주세요. 사용자가 숫자만 입력해도 010-1234-5678 형태로 자동 정리되게 해주세요.
요청에 ①컨트롤 이름 ②저장 시점 ③검사 시점이 들어 있으면 다시 만들 일이 거의 없습니다.
WHY THIS MATTERS
컨트롤 하나가
기능 전체를 바꿉니다.
체크박스를 스위치로 바꾸면 저장 로직이 달라지고, 셀렉트를 콤보박스로 바꾸면 공수가 몇 배가 됩니다. “이거 골라주세요”가 아니라 “이 컨트롤로 해주세요”라고 말할 수 있어야 합니다.