kimtoma

UI를 여행하는 디자이너를 위한 안내서 - 스위치 (Switches)

디지털 세계에서 사용되는 사용자 인터페이스 중 스위치에 대한 모든 것을 알아봅시다.

스위치 UI의 역사

history-of-button

  • 아날로그 스위치 → 디지털 스위치
  • 아날로그 세계에서는 전기의 흐름을 제어하는 데 주로 사용 되는 스위치로 전등을 켜고 끌 때 사용하는데 디지털 세계에서도 상태 값(ON/OFF)을 조절할 때 사용됨 (조절 값은 별도의 저장 과정 없이 즉시 적용됨)

버튼 UI의 구성요소

element-of-button

  • 썸(Thumb): 토글, 토글키, Toggle key, 토글 버튼이라고도 함
  • 트랙(Track): 배경, 빽그라운드, 백그라운드, 삐지(BG)라고도 함
  • 라벨(Label): 스위치의 현재 상태를 표시해주는 문구, 최근에는 컬러로 표시하고 없애는 추세임

스위치 UI의 상태

states-of-button

  • 꺼짐 (Off): 오프, 끄기라고도 함
  • 켜짐 (On): 온, 켜기라고도 함
  • 호버 (Hover): 마우스오버(Mouse Over)라고도 함, 마우스나 커서를 버튼에 올렸을 때 상태 변화를 알려 줌, 주로 그림자나 크기 변화로 표현함, 디지털 UI에서만 사용됨
  • 비활성 (Disabled): 설정 값을 바꾸지 못하는 상태의 스위치 상태

스위치 UI 디자인 잘 하는 법

  • 토글 키의 위치는 ON은 오른쪽, OFF는 왼쪽을 지켜라
  • ON/OFF 상태를 나타내는 별도의 텍스트와 함께 사용하지 말아라 (버튼 안에 사용하거나 표기 안함)
  • 스위치로 수정한 값은 바로 반영되게 해라 (별도의 저장하는 액션 필요 없음)
  • 체크박스와 구별해서 사용해라
    • 스위치 : ON/OFF 설정 시 사용, 설정 값 바로 적용
    • 체크박스 : YES/NO 설정 시 사용, 설정 값 저장 필요
  • 비활성화 스위치는 되도록 쓰지 마라

참고자료