슬라이더

범위가 있는 값을 숫자로만 받으면 사용자는 두 가지를 모른 채 답합니다. 어디부터 어디까지 넣을 수 있는지와, 지금 넣은 값이 그 범위에서 어디쯤인지입니다. 칸에 60이라고 적혀 있어도 높은 쪽인지 낮은 쪽인지는 알 수 없습니다.

페이지덱의 문서 내보내기 화면이 그랬습니다. 이미지 품질을 1에서 100 사이 숫자로 받는 칸 하나가 있었는데, 대부분의 사용자가 기본값 80을 그대로 두고 내보냈습니다. 어떤 사용자는 더 좋게 만들려고 200을 넣었다가 오류 문구를 봤습니다. 민서가 기록을 훑어 보니 품질 값을 바꾼 사람이 전체의 3퍼센트였습니다. 칸이 답을 받기만 하고 무엇을 넣어야 하는지는 알려 주지 않은 결과입니다.

슬라이더는 그 범위를 눈에 보이게 만든 입력 요소입니다. 막대의 왼쪽 끝이 최솟값이고 오른쪽 끝이 최댓값이라, 손잡이가 놓인 자리 하나로 지금 값이 어디쯤인지가 전해집니다. 범위를 벗어난 값을 넣는 일도 생기지 않습니다. 끌 수 있는 구간 밖으로는 손잡이가 나가지 않기 때문입니다.

막대 위의 손잡이를 끌면 그 위치가 값으로 바뀌는 방식입니다. 화면에 보이는 부분은 넷입니다.

1. 막대 — 값이 놓일 수 있는 구간 전체입니다. 양 끝에 최솟값과 최댓값을 적어 두면 범위를 짐작하는 단계가 없어집니다.
2. 손잡이 — 지금 값의 자리이면서 사용자가 끄는 대상입니다. 손가락으로 쓰는 화면에서는 닿는 영역을 가로세로 44픽셀 이상으로 잡습니다. 그보다 작으면 끌려다 놓치는 일이 잦아집니다.
3. 채워진 구간 — 최솟값부터 손잡이까지를 다른 색으로 칠합니다. 이 색이 지금 값이 범위의 어느 쯤인지를 숫자 없이 전합니다.
4. 현재 값 — 손잡이 위나 막대 옆에 숫자로 함께 보여 줍니다. 끄는 동안에만 띄우는 방식과 계속 띄우는 방식이 있는데, 값을 남에게 말해야 하는 화면이라면 계속 띄웁니다.

만들 때 정하는 값은 셋입니다. 최솟값, 최댓값, 그리고 한 번에 움직이는 간격입니다. 간격이 1이면 1에서 100 사이가 100단계가 되고, 5로 잡으면 20단계가 됩니다. 단계가 너무 잘면 원하는 값에 멈추기 어려워지고, 너무 굵으면 원하는 값이 단계 사이에 끼어 아예 고를 수 없게 됩니다.

조작은 끌기만으로 끝나지 않습니다. 막대의 빈 자리를 누르면 손잡이가 그 지점으로 옮겨 가고, 손잡이에 초점이 있을 때 방향키로 한 단계씩 움직일 수 있어야 합니다. 키보드로 조작되는지는 접근성 점검에서 가장 먼저 걸리는 항목입니다. 접근성은 장애나 상황에 상관없이 제품을 쓸 수 있게 만드는 일을 가리킵니다. 화면을 읽어 주는 프로그램이 지금 값과 범위를 함께 읽도록 표시하는 것도 같은 자리에서 정합니다.

손잡이를 두 개 두면 구간을 정하는 슬라이더가 됩니다. 가격 필터에서 최소와 최대를 함께 잡는 자리가 그렇습니다. 두 손잡이가 서로를 넘지 못하게 막고, 겹쳤을 때 어느 쪽이 잡혔는지 알 수 있게 해야 합니다.

잘 맞는 자리는 정확한 숫자보다 대략의 위치가 중요한 값입니다. 이미지 품질, 소리 크기, 화면 밝기처럼 사용자가 78과 80의 차이를 구분하지 못하는 값이 여기 듭니다. 끌면서 결과가 바로 바뀌는 화면이면 더 잘 맞습니다. 품질을 낮추는 동안 미리보기가 함께 흐려지면 사용자는 숫자가 아니라 결과를 보고 멈춥니다.

안 맞는 자리는 넷입니다.

1. 정확한 값이 필요할 때 — 금액이나 인원 수는 인풋으로 받습니다. 인풋은 글자를 직접 입력받는 요소입니다. 37명을 슬라이더로 맞추려면 손이 한참 떨립니다.
2. 선택지가 적을 때 — 낮음·보통·높음 세 단계라면 라디오 버튼으로 펼쳐 두는 쪽이 빠릅니다. 여럿 중 하나만 고르는 요소인데, 세 칸이 다 보이면 한 번의 조작으로 끝납니다.
3. 범위가 아주 넓을 때 — 1에서 10만까지를 화면 폭 300픽셀에 담으면 1픽셀이 333을 움직입니다. 이때는 셀렉트로 구간을 나눠 고르게 하거나 숫자 칸을 함께 둡니다.
4. 날짜 — 달력 위에서 고르는 데이트 피커가 따로 있습니다.

켜고 끄는 두 상태만 있는 값도 슬라이더로 만들지 않습니다. 그 자리는 토글입니다. 모양이 비슷해도 토글은 두 상태를 오가는 스위치이고 슬라이더는 연속된 범위를 다룹니다.

"이 값은 슬라이더로 바꾸죠. 정확한 숫자보다 어느 쪽에 가까운지가 중요해요."

범위 안의 위치를 보여 주는 편이 낫다는 제안입니다.

"간격을 5로 잡읍시다. 1단위로 두면 원하는 값에 못 멈춰요."

한 번에 움직이는 폭을 조정하자는 요청입니다.

"슬라이더 옆에 숫자 입력 칸도 같이 넣어 주세요."

정확한 값을 넣고 싶은 사용자에게 길을 하나 더 두자는 뜻입니다.

민서가 품질 칸을 슬라이더로 바꿨습니다. 범위는 1에서 100으로 두되 간격을 10으로 잡아 열 단계로 만들고, 손잡이를 끄는 동안 미리보기가 함께 바뀌게 했습니다. 막대 오른쪽에는 예상 파일 크기를 띄웠습니다.

바꾼 뒤 품질 값을 건드린 사용자가 3퍼센트에서 21퍼센트로 늘었고 범위 오류 문구는 사라졌습니다. 대신 인쇄용으로 정확히 95를 맞추고 싶다는 문의가 새로 들어왔고, 민서는 옆에 숫자 칸을 하나 더 붙였습니다.

슬라이더가 숫자 칸보다 언제나 쓰기 쉽다고 보는 경우가 가장 많습니다. 끌기만 하면 되니 그렇게 보입니다. 하지만 값을 정확히 맞춰야 하는 순간에는 반대가 됩니다. 손가락으로 300픽셀짜리 막대에서 정확히 95를 짚는 일은 숫자 두 글자를 치는 것보다 오래 걸리고, 몇 번 빗나가면 사용자는 그 화면을 다시 열지 않습니다. 고를 값이 흐릿할 때 쉽고 또렷할 때 어렵다는 것이 이 요소의 성질입니다.

눈금을 넣으면 정확도 문제가 해결된다고 보는 것도 흔합니다. 막대 아래 10 단위로 선을 그어 두면 그 자리에 잘 멈출 것 같습니다. 실제로는 눈금이 있어도 손가락이 닿는 넓이는 그대로라서, 눈금 사이가 30픽셀이면 여전히 옆 칸에 붙습니다. 정확도가 필요하면 눈금이 아니라 숫자 칸을 함께 두거나 간격 자체를 굵게 잡습니다. 그대로 두면 화면은 정밀해 보이는데 실제로 맞출 수 있는 값은 늘지 않습니다.