범위 슬라이더 UI 디자인: 경곗값·정확한 입력·접근성

범위 슬라이더는 정해진 구간 안에서 값이나 범위를 탐색할 때 유용합니다. 하지만 정확한 숫자를 입력해야 하는데 원하는 위치에 맞추기 어렵거나, 어느 조절점을 움직이는지 구분되지 않거나, 선택을 마치기도 전에 결과가 바뀐다면 불편해집니다. 슬라이더에는 이름이 분명한 값 표시를 함께 두고, 최솟값·최댓값과 조정 단위를 정한 뒤 드래그 없이도 정확하게 입력할 방법을 제공하세요.

하루 대여료가 20달러부터 200달러까지인 장비 대여 사이트를 예로 들어보겠습니다. 사용자는 40~120달러인 상품을 찾으려 합니다. 이 작은 조작에도 두 값의 관계와 검색 결과를 바꿀 시점이라는 결정이 들어갑니다. Pixso의 UI 디자인 작업 공간에서 이 규칙을 먼저 구체화하면 개발자에게 화면 모양과 동작을 함께 전달할 수 있습니다.

모든 숫자 입력이 아니라 범위 탐색에 사용하기

슬라이더는 전체 구간에서 현재 값이 어디에 있는지 보여 줍니다. 소리를 작게 또는 크게 조절하거나, 기간을 늘리고 줄이거나, 가격대를 넓히고 좁히는 것처럼 상대적인 위치가 중요한 작업에 잘 맞습니다. 반면 이미 정확한 수치를 알고 있는 사람이 그 위치를 찾아 드래그해야 한다면 숫자 입력란보다 번거로울 수 있습니다.

장비 대여 예제에서 슬라이더는 예산에 맞는 가격대를 탐색하도록 돕고, ‘최저 가격’과 ‘최고 가격’ 입력란은 정해진 예산을 바로 입력하게 합니다. 두 표현이 따로 움직여서는 안 됩니다. 입력란을 수정하면 해당 조절점이 바뀌고, 조절점을 움직이면 입력란의 값도 바뀌어야 합니다.

‘하루 최대 대여료’처럼 값 하나만 정하는 작업에는 조절점 하나를 사용하세요. 양쪽 경계가 모두 중요할 때만 두 개를 둡니다. 대부분의 사용자가 ‘120달러 이하’를 찾는다면 불필요한 하한 조절점은 조작을 늘리고, 저렴한 상품을 실수로 제외하게 만들 수 있습니다.

의미 있는 선택지가 몇 개뿐이라면 버튼이나 라디오 버튼이 더 명확할 수 있습니다. ‘소형·중형·대형’은 범주이지, 반드시 연속적인 척도인 것은 아닙니다. 정확한 수량에는 숫자 입력란이나 증감 버튼이 더 잘 맞을 수 있습니다. 필터 패널에 남는 공간이 아니라 사용자가 내려야 하는 결정에 따라 요소를 고르세요.

막대를 꾸미기 전에 범위와 입력 단위 정하기

예제의 전체 가격 범위는 하루 20~200달러입니다. 라벨이나 값 옆에 단위를 표시해 주간 대여료나 환불 가능한 보증금으로 오해하지 않게 합니다. 현재 선택한 40~120달러와 선택 가능한 전체 구간인 20~200달러는 서로 다른 정보입니다.

이 예제에서는 1달러 단위로 조정하고 두 입력란 모두 정수 금액을 받습니다. 이는 해당 상품의 규칙이지 모든 슬라이더에 적용되는 원칙은 아닙니다. 소수점이 필요한 측정값에는 다른 정밀도가 필요합니다. 화면의 눈금이 성기다는 이유만으로 사용자가 입력한 값을 설명 없이 반올림하지 마세요.

한 번의 편집 과정에서는 전체 경계를 안정적으로 유지하세요. 최고 가격을 120달러로 끌어 내리는 즉시 막대의 상한까지 120달러가 되면, 같은 위치가 갑자기 다른 금액을 뜻하게 됩니다. 사용자가 범위를 다시 200달러까지 넓히려 해도 어떻게 되돌려야 하는지 알기 어렵습니다.

장비 종류를 바꾸는 등 실제로 선택 범위가 달라져야 할 때는 조정 내용을 알려 주세요. 새 종류의 최저 대여료가 60달러라면 변경된 하한과 그 이유를 표시합니다. 입력란에는 40달러가 남아 있는데 실제 검색은 60달러부터 적용되는 불일치를 만들면 안 됩니다.

다른 척도가 필요한 이유가 분명하지 않다면 선형 척도를 사용하세요. 20~200달러를 선형으로 표시하면 같은 거리의 이동이 같은 금액의 변화를 뜻합니다. 비선형 척도는 매우 넓은 범위를 탐색하는 데 도움이 될 수 있지만, 간격이 같은 라벨 때문에 값도 같은 폭으로 증가한다고 오해하게 해서는 안 됩니다.

두 조절점의 역할을 고정하기

하한 조절점은 ‘하루 최저 가격’, 상한 조절점은 ‘하루 최고 가격’을 뜻합니다. 두 조절점이 가까워졌다는 이유로 이름과 역할이 바뀌어서는 안 됩니다. 이 필터에서는 하한이 상한보다 클 수 없고, 한 조절점을 끌면 다른 조절점의 위치에서 멈추도록 정합니다.

그래도 두 값이 모두 80달러가 되는 경우는 따로 결정해야 합니다. 정확히 80달러인 상품을 찾는 것인지, 아니면 일정 폭 이상의 구간이 필요한 것인지 정하세요. 이 예제에서는 같은 값이 허용되며 정확히 80달러인 상품을 뜻합니다. 조절점이 겹쳐 보여도 두 입력란의 라벨은 각 값의 의미를 알려 줍니다.

W3C의 다중 조절점 슬라이더 패턴(영문)은 각각 포커스를 받을 수 있는 조절점, 다른 값에 따라 달라지는 허용 경계, 일정한 탭 이동 순서를 설명합니다. 두 조절점을 이름 없는 하나의 드래그 도형처럼 취급하지 말고 각각의 역할을 유지해야 합니다.

선택된 구간의 색만 바꾸지 말고 현재 조작하는 조절점에 키보드 포커스를 표시하세요. 조절점이 겹쳐도 각각에 접근하고 구별할 수 있어야 합니다. 시각적으로 겹친다는 이유로 하나를 키보드 이동 대상에서 제외해서는 안 됩니다.

직접 입력을 믿을 수 있는 대안으로 만들기

막대 아래에 ‘최저 가격’과 ‘최고 가격’ 입력란을 같은 좌우 순서로 배치하세요. 값을 입력한 뒤에도 라벨이 남아 있어야 합니다. ‘40’이라는 플레이스홀더만으로는 기본값인지, 예시인지, 현재 최저 가격인지 알 수 없습니다.

사용자가 최고 가격을 120달러로 둔 채 최저 가격을 40달러에서 140달러로 바꿨다고 가정해 보겠습니다. 입력한 값을 유지하고 ‘최저 가격은 120달러 이하여야 합니다’라고 설명하세요. 두 값을 자동으로 맞바꾸면 안 됩니다. 사용자는 양쪽 입력란을 차례로 바꾸는 중일 수 있습니다. 값이 유효해질 때까지 막대는 마지막으로 유효했던 범위를 유지할 수 있지만, 새 범위가 아직 적용되지 않았다는 점을 안내해야 합니다.

편집 중 입력란이 잠시 비어 있는 상태도 허용하세요. 입력란을 벗어나거나 ‘적용’을 누르는 시점처럼 적절한 시점에 검증합니다. 비우자마자 20달러를 다시 채워 넣으면 평범한 값 수정도 어려워집니다.

오류를 고치는 과정은 해당 입력 주변에서 끝나야 합니다. 최고 가격을 160달러로 바꾸면 140~160달러가 유효해지고 오류 안내도 사라집니다. 다른 필터를 초기화하거나 검색을 처음부터 다시 시작하게 할 필요는 없습니다.

선택한 범위를 결과에 적용할 시점 정하기

이 장비 대여 사이트는 ‘적용’ 버튼을 사용합니다. 필터 패널이 열려 있는 동안의 40~120달러는 편집 중인 선택입니다. ‘적용’을 누르기 전까지 배경의 상품 목록은 이전에 적용한 범위를 보여 줍니다. ‘취소’를 누르면 미완성 편집을 저장하는 대신 이전 적용값으로 돌아갑니다.

즉시 반영하는 방식도 가능하지만 조정 중 어떤 일이 일어나는지 분명해야 합니다. 포인터가 조금씩 움직일 때마다 무거운 요청을 보내 목록이 깜박이거나 늦게 반응하게 만들지 마세요. 드래그를 놓았을 때, 잠시 멈췄을 때, 또는 다른 명확한 시점에 결과를 바꿀지 제품팀과 개발팀이 정해야 합니다.

적용한 뒤에는 결과 가까이에 선택한 가격대를 표시하세요. 일치하는 상품이 없더라도 범위는 유지하고 적절하게 넓힐 방법을 제공합니다. 요청 실패와 검색에 성공했지만 결과가 0개인 경우는 다릅니다. 네트워크 문제를 고치기 위해 예산을 높이라고 안내해서는 안 됩니다.

필터 UI 디자인 가이드(영문)는 적용된 필터와 선택 규칙을 더 넓게 다룹니다. 슬라이더가 맡을 일은 그보다 구체적입니다. 다른 조건과 함께 적용되기 전에 숫자 범위를 이해하고 수정할 수 있게 만드는 것입니다.

키보드·터치·좁은 화면까지 설계하기

W3C의 슬라이더 패턴(영문)은 방향키 조정과 Home·End 키를 통한 허용 경계 이동을 설명합니다. 터치 기반 보조 기술은 실제 기기에서 시험해야 한다는 주의사항도 제시합니다. 드래그할 수 있어 보이는 원을 그렸다는 것만으로 접근 가능한 구현이 완성되지는 않습니다.

조절점의 원이 작더라도 주변에 충분한 조작 영역을 확보하세요. 숫자 입력란을 누르다가 조절점이 움직일 만큼 막대와 가깝게 배치하지 마세요. 휴대전화에서는 숫자 키보드가 열린 상태, 길어진 번역 라벨, 두 값이 같은 끝부분에 몰린 상태를 함께 확인합니다.

드래그 중 나타나는 값 말풍선은 도움이 될 수 있지만 손가락이 조작하는 곳을 가리거나 선택값을 보여 주는 유일한 수단이 되어서는 안 됩니다. 말풍선이 사라진 뒤에도 입력란에서 범위를 읽을 수 있어야 합니다. 조절점이 막대 끝에 도달했을 때 끝값 라벨이 잘리는지도 확인하세요.

Pixso에서 같은 대여료 필터 구성하기

대여 상품 결과 화면과 열린 필터 패널을 만듭니다. 가격 조절 요소에는 막대, 선택된 구간, 두 조절점, 라벨이 있는 두 입력란을 배치하세요. 입력란의 모양은 재사용 가능한 컴포넌트로 만들고, 주변 라벨·조절 요소·메시지 묶음에는 Auto Layout을 활용합니다.

유효한 40~120달러, 최저 가격이 더 큰 140~120달러, 이를 수정한 140~160달러 세 버전을 나란히 둡니다. 별도의 적용 결과 화면에서도 필터 요약에 같은 구간을 표시하세요. ‘Min’, ‘Max’ 같은 일반적인 플레이스홀더로는 보이지 않던 규칙의 차이가 구체적인 값에서 드러납니다.

프로토타입에서 ‘적용’과 ‘취소’를 의도한 화면에 연결하세요. 동료에게 120달러 이하 상품을 찾은 뒤 최저 가격을 140달러로 바꾸고 오류를 해결해 달라고 요청합니다. 안내 문구를 이해하는지, 현재 결과에 적용된 범위가 무엇인지 구별하는지 살펴보세요.

컴포넌트 옆에 전체 경계, 입력 단위, 양쪽 값이 같을 때의 규칙, 결과 반영 시점을 적어 둡니다. 프로토타입은 이러한 결정을 전달하는 자료이며, 구현된 슬라이더에는 키보드·터치·보조 기술 시험이 필요합니다. 좋은 범위 조절 요소는 탐색을 쉽게 하면서도 정확한 값을 정할 권한을 사용자에게 남겨 둡니다.