이번 시간은 '선택'과 관련된 UI요소들에 대한 이야기를 들고 왔습니다. 체크박스와 라디오 버튼 그리고 토글 디자인까지 지금부터 천천히 살펴보실까요? <br/><strong>'토글(toggle)'</strong>이라는 단어는 두 가지 서로 다른 상태 사이에서 하나를 활성화시킬 수 있도록, 선택할 수 있는 짧은 손잡이 모양의 스위치를 말합니다. 여러분이 어떤 것의 '스위치'를 켤 때 볼 수 있는 것이죠. <strong>'라디오 버튼(radio button)'</strong>이라는 단어는 자동차의 라디오 다이얼 밑에 달려 있어, 즐겨 듣는 채널을 저장해두었다가 쉽게 다른 방송국 채널로 바꿀 수 있게 해주는 여러 개의 버튼에서 유래했습니다. 버튼을 하나 누르면, 다른 버튼이 눌리기 전까지는 그 상태가 유지됩니다.<img class="size-full wp-image-18381 aligncenter" src="https://www.wishket.com/media/newscenter/532/01.jpeg" alt="" width="540" height="215" /> <strong>체크박스(Checkbox)</strong> 하나 혹은 다수의 독립적인 옵션이 있고, 사용자들이 몇 개든 선택할 수 있게 하는데 사용됩니다. <strong>라디오 버튼</strong> 두 가지 이상의 옵션 목록이 있을 때, 사용자가 단 한 가지의 선택만을 할 수 있게 합니다. <strong>토글스위치</strong> 두 가지의 옵션이 있고, 그중에서 하나의 선택을 해야 하는 경우에 사용됩니다. 토글스위치로 선택하면 그 효과가 즉시 나타납니다.<img class="size-full wp-image-18382 aligncenter" src="https://www.wishket.com/media/newscenter/532/02.jpeg" alt="" width="540" height="329" /> <strong>Choice Chips</strong>는 라디오 버튼 대신에 쓸 수 있는 간편한 방식입니다. 최소 두 가지의 옵션이 주어졌을 때, 사용자들이 선택할 수 있는 옵션 하나마다 한 가지의 칩(Chip)으로 표시됩니다. <strong>Multi-select chips</strong>는 체크 박스 대신에 쓸 수 있는 간편한 방식입니다. 사용자는 여러 가지의 옵션을 선택할 수 있으며, 주로 모바일에서 필터링을 하는데 사용됩니다. <strong>Selection control</strong>은 사용자 인터페이스(UI)에서 오랫동안 사용되어 왔기 때문에, 사람들은 이런 모양을 보면 어떻게 작동할지를 잘 알고 있습니다. 다음은 어떤 상황에서 어떤 유형을 사용하는 것이 좋은지 참고할 수 있는 표입니다.<img class="size-full wp-image-18383 aligncenter" src="https://www.wishket.com/media/newscenter/532/03.jpeg" alt="" width="540" height="301" /> <strong>상태(States)</strong> 체크박스와 라디오 버튼을 선택하거나 해제할 수 있고, 토글을 끄거나 켤 수 있습니다. 이 모두는 활성 상태, 비활성화 상태, 호버(hover) 상태, 포커스(focus) 상태, 누름(pressed) 상태를 가지고 있습니다. 상태의 종류가 많아 보이지만 확실한 인터렉션을 위해서는 모든 상태를 만드는 것이 좋습니다.<img class="size-full wp-image-18384 aligncenter" src="https://www.wishket.com/media/newscenter/532/04.jpeg" alt="" width="540" height="481" /> <strong>미확정 상태(indeterminate states)</strong> 선택을 한 것도 아니고, 그렇다고 선택하지 않은 것도 아닌 경우를 위한 체크박스입니다. 이 상태는 아직 완전히 확정된 것이 아니기 때문에, 미확정 상태라고 부르는데요. 상위의 체크 항목 아래에 여러 개의 하위 항목이 있는 경우를 처리하기 위해 만들어집니다. 몇 가지는 선택하고, 나머지는 선택하지 않을 수도 있습니다.<img class="size-full wp-image-18385 aligncenter" src="https://www.wishket.com/media/newscenter/532/05.jpeg" alt="" width="540" height="296" /> <strong>잘못된 토글 사용</strong> 토글을 계층 구조로 만들면 안 됩니다. 산만해 보일 뿐만 아니라, 모든 하위 옵션들이 한꺼번에 켜지거나 꺼질 수도 있다는 잘못된 인상을 줄 수 있습니다.<img class="size-full wp-image-18386 aligncenter" src="https://www.wishket.com/media/newscenter/532/06.jpeg" alt="" width="540" height="306" /> <strong>즉시 효과가 나타나게 하고 싶다면 토글.</strong> 토글스위치는 On/Off 둘 중에서 하나만 선택하는 스위치입니다. 토글스위치로 선택된 동작은 그 즉시 효과가 나타나게 됩니다. 만약 그런 경우가 아니라면, 토글스위치를 한 개의 체크박스로 바꾸는 것이 더 좋습니다.<img class="size-full wp-image-18387 aligncenter" src="https://www.wishket.com/media/newscenter/532/07.jpeg" alt="" width="540" height="351" /> <strong>일반적이지 않은 스타일은 혼란을 야기한다.</strong> 여러분이 디자인 한 플랫폼에서 일반적인 표준으로 여겨지지 않는 모든 요소들은 사용자에게 혼란만 가중시킬 수 있습니다. 체크박스를 동그라미로 만든다면 분명 사용자들은 라디오 버튼으로 착각하고 말 겁니다.<img class="size-full wp-image-18388 aligncenter" src="https://www.wishket.com/media/newscenter/532/08.jpeg" alt="" width="540" height="313" /> <strong>세로방향의 리스트는, 스캔하기 쉽다.</strong> 왼쪽으로 정렬된 컨트롤과 라벨은 가장 효과가 좋습니다. 선택을 더욱 빠르게 할 수 있도록 돕고, 실수를 줄여주죠. 오른쪽으로 정렬된 컨트롤은 라벨과 그에 해당하는 버튼을 멀리 떨어트려 놓을 수 없기 때문에, 모바일 환경에 적합합니다. 버튼을 오른쪽 끝에 배치하면, 한 손으로 기기를 들고 있을 때에도 손가락이 보다 쉽게 닿을 수 있습니다. 그리고 선택을 할 때도 손가락으로 라벨의 내용을 가리지 않습니다.<img class="size-full wp-image-18389 aligncenter" src="https://www.wishket.com/media/newscenter/532/09.jpeg" alt="" width="540" height="301" /> <strong>세로 방향을 쓸 수 없다면, 칩(Chips)을 이용하라.</strong> 어떤 컨트롤을 선택했는지 확인하기 어려운 상황을 막아야 합니다. 버튼과 라벨들 사이에 간격을 두세요. 여러 옵션들이 시각적으로 확실하게 구분되게 하고 싶다면, 칩(chip)을 사용하는 것이 좋습니다.<img class="size-full wp-image-18390 aligncenter" src="https://www.wishket.com/media/newscenter/532/10.jpeg" alt="" width="540" height="336" /> <strong>가능하면 드롭다운 메뉴 대신 라디오 버튼을 사용하라.</strong> 모든 옵션을 항시적으로 보여주면, 사용자들이 모든 경우를 쉽게 비교할 수 있기 때문에, 양식의 내용을 잘 파악하는 데 도움이 됩니다.<img class="size-full wp-image-18391 aligncenter" src="https://www.wishket.com/media/newscenter/532/11.jpeg" alt="" width="540" height="308" /> <strong>비슷한 옵션이 있거나 옵션의 수가 많을 때는 드롭다운을 사용하라.</strong> 옵션의 수가 6~7가지가 넘는다면 모든 옵션을 드롭다운 안에 넣는 것이 좋습니다. 사용자들이 모든 내용을 한 번에 인지하기가 어렵기 때문입니다. 예측 가능하거나, 비슷하거나 점차적으로 수치가 증가하는 옵션에도 드롭다운 방식을 적용할 수 있습니다.<img class="size-full wp-image-18392 aligncenter" src="https://www.wishket.com/media/newscenter/532/12.jpeg" alt="" width="540" height="308" /> <strong>라디오 버튼은 한 가지 옵션이 디폴트로 선택되어 있는 게 좋다.</strong> 라디오 버튼을 이용하면, 사용자들이 선택된 라디오 버튼을 해제해서 다시 이전의 상태로 되돌릴 수 없습니다. 만약 사용자들이 해당하는 사항이 없는 경우가 필요하다면, '없음'이라는 라벨의 라디오 버튼을 추가하시기 바랍니다.<img class="size-full wp-image-18393 aligncenter" src="https://www.wishket.com/media/newscenter/532/13.jpeg" alt="" width="540" height="300" /> <strong>라벨의 의미는 명확하게 작성하고, 부정문을 사용하지 않을 것.</strong> 사용자들이 어떤 일이 일어나지 않게 하기 위해, 체크 항목에 표시하는 상황이 없도록 해야 합니다.<img class="size-full wp-image-18394 aligncenter" src="https://www.wishket.com/media/newscenter/532/14.jpeg" alt="" width="540" height="249" /> <strong>선택된 옵션을 강조해, 사용자들의 주의 끌기</strong> 선택된 옵션을 다른 항목들과 시각적으로 다르게 보여주세요. 특히 표로 된 데이터에서 선택된 가로열을 강조해서 보여주는 것이 중요합니다.<img class="size-full wp-image-18395 aligncenter" src="https://www.wishket.com/media/newscenter/532/15.jpeg" alt="" width="540" height="300" /> <strong>전체 선택과 해제를 지원하라.</strong> 사용자들이 한 번에 여러 개의 항목을 선택하거나 해제하는 작업이 간편해야 합니다.<img class="size-full wp-image-18396 aligncenter" src="https://www.wishket.com/media/newscenter/532/16.jpeg" alt="" width="540" height="300" /> <strong>클릭할 수 있는 영역을 충분히.</strong> 버튼과 라벨 모두를 클릭할 수 있는 영역에 포함시키세요. 피츠의 법칙(Fitt's Law)에 의하면, 대상 영역의 크기가 가장 중요한 역할을 합니다. 체크박스와 라디오 버튼은 일반적으로 크기가 작기 때문에, 모바일에서는 특히나 터치하기가 어려울 수 있습니다.<img class="size-full wp-image-18397 aligncenter" src="https://www.wishket.com/media/newscenter/532/17.jpeg" alt="" width="540" height="300" /> <h3>전문적인 UI디자이너를 만나보고 싶지 않으신가요?</h3>위시켓에는 여러분의 UI프로젝트를 도와줄 8만 이상의 디자인업체, 디자이너들이 활동하고 있습니다. 프로젝트를 위한 전문 디자이너 모집부터 미팅과 계약서 작성 그리고 체계적인 매니징 시스템까지! 안전하고 빠른 외주를 경험하실 수 있을겁니다. 지금 바로 무료로 프로젝트를 등록해보세요. <a href="https://www.wishket.com/?referer_type=23200907"><img class="size-full wp-image-18398 aligncenter" src="https://www.wishket.com/media/newscenter/532/무료등록CTA.png" alt="" width="368" height="112" /></a> <a href="https://www.wishket.com/?referer_type=23200907"><img class="size-large wp-image-18399 aligncenter" src="https://www.wishket.com/media/newscenter/532/클라이언트_풀.png" alt="" width="837" height="408" /></a> <p style="text-align: center;"><a href="https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546">> 이 글은 'Selection controls — UI component series'를 각색하여 작성되었습니다.</a></p>