Switch

선택된 항목을 시각적으로 강조 되는 형태의 구조로 같은 콘텐츠 영역 내에서 보기 방식이나 필터를 변경할 때 사용될 수 있습니다.

Design

Web

iOS

Android

Anatomy

높이 24px, 32px를 기준으로 Small, Medium을 구분하여 사용합니다.

Web과 Android는 커스터마이징한 Switch를 사용하며 iOS는 플랫폼에서 제공하는 순정 Toggle을 사용합니다.

Switch는 Label을 포함하지 않은 Control을 터치 영역으로 사용하도록 권장합니다. 단, 컴포넌트 별로 터치 영역이 다르기 때문에 용도와 사용 가이드에 따라 적절한 컴포넌트를 선택 적용하여 사용합니다.

시스템의 전체 설정과 같이 중요도가 높은 옵션을 컨트롤 하거나 정밀하게 컨트롤할 수 없는 모바일 환경에서는 가급적Medium 사이즈 사용을 권장합니다.

테이블이나 리스트 등 반복적으로 노출되는 컴포넌트의 내부에 사용되거나 데스크톱 위주의 밀도 높은 UI를 구성할 때 Small사용을 권장하고 있습니다.

중요도가 높은 요소에 배치할 시 Medium을 사용하여 사용성을 올립니다.

Don’t

사용성을 위해 Control 요소를 좌측에 두고 사용하지 않습니다.