본문 바로가기
웹과 모바일

토글 토큰이 체크박스보다 나은 이유

by mindfree 2019. 11. 13.

체크박스. 뭔가를 선택하는 항목을 나열할 때 사용하는 가장 기본적인 UI 형태이다. 동시에 직관적이기도 한데, 이건 이 UI 요소가 아주 오래되었기 때문. 종이 형태로 된 서류에도 "해당하는 항목에 체크하시오" 같은 지시문과 함께 체크박스를 사용해왔다. 

웹 폼이 등장하면서도 체크박스는 다중 선택 UI의 상징처럼 사용됐다. 그러다 모바일 시대가 시작되면서 '이게 최선인가?' 하는 의문과 함께 다른 UI에 대한 고민이 시작.

체크박스의 대안을 얘기하는 글이 있어 소개한다.

원문링크; https://uxmovement.com/forms/why-toggle-tokens-are-a-better-alternative-to-checkboxes/

 

Why Toggle Tokens Are a Better Alternative to Checkboxes

What interface component would you use for selecting options from a large list? For most designers, checkboxes come to mind.

uxmovement.com

체크박스의 단점

  • 공간을 차지한다.
  • 타겟 영역이 좁다.(특히 모바일에서)
  • 시각적 요소가 늘어난다.

체크박스와 토글 토큰의 비교

그럼 토글 토큰(Toggle Token)은?

체크박스의 단점을 해소한다. 공간도 적게 차지하고 터치 공간도 크고, 레이블과 터치 대상이 일치하니 시각 요소도 줄어든다. 한 번 탭(클릭)하면 선택, 다시 탭(클릭)하면 선택 해제. 

하지만 체크박스가 더 나은 때도 있음

체크박스가 더 나을 때도 있다

위 예시처럼 레이블이 여러 행으로 될만큼 길어질 때는 체크박스가 더 적절하다.

원문에서는 "토글 토큰"이라는 이름이 체크박스만큼 직관적이라고 주장한다. 토큰처럼 생겼고, 토글 방식으로 작동 하니까. 이건 영어권 저자의 생각이고, 사실 한국어 화자 입장에서는 토큰이나 토글이나 와닿지 않기는 똑같다. 체크박스가 훨씬 더 잘 와닿지.