Switch

Switch (스위치)

스위치는 켜짐/꺼짐(on/off)처럼 상호 배타적인 두 옵션 중 하나를 선택하게 해 주는 요소예요. 스위치를 활성화하면 즉시 변경이 일어나죠. 설정을 한 번에 켜고 끄는 토글 방식이라고 생각하면 쉬워요.

변경을 적용하기 전에 제출 단계가 필요한 컴포넌트가 필요하거나, 불확정(indeterminate) 상태를 지정해야 한다면 checkbox를 시도해 보세요.

출처: React Switch 문서

본문

Layout (레이아웃)

대부분의 경우 라벨과 함께 스위치를 사용하세요. 라벨은 스위치 위쪽이나 양쪽에 나타날 수 있어요. 라벨 없이 스위치를 사용한다면, 그 맥락이 명확해야 해요. 예를 들어 스위치가 열 헤더로 표현되는 데이터 그리드에서처럼요.

Switch label

직관적인 연상을 위해 스위치 라벨을 충분히 가까이 두세요

Accessibility (접근성)

아이콘이 있는 스위치를 사용한다면, hidden 텍스트 라벨을 사용해 화면 낭독기에 스위치의 목적을 식별하게 하세요.

Content (콘텐츠)

Labels (라벨)

스위치 설정을 설명하는 라벨로는 명사나 짧은 명사구를 사용하세요. 시각적·프로그래밍된 단서와 함께 명사만 사용해도 상태를 추론하기에 충분한 경우가 많아요.

Switch noun label

명사가 어색하거나 애매하다면, 명확성을 위해 동사를 추가하세요. 동사는 항상 설정의 긍정적 상태를 설명해야 해요. 스위치 라벨에 "Turn on"이나 "Turn off"는 사용하지 마세요. 대신 설정이 활성화된 것이 무엇을 의미하는지 설명하는 구체적인 동사를 사용하세요.

Use specific verbs in switch labels if it helps clarity