brunch

매거진 UXUI

라이킷 12 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 조성봉 UXer Jan 31. 2024

UI 요소(component) 3

Slider, Picker

Slider, Picker는 직접 조작(Direct Manipulation)을 위한 UI 요소들이다. 다만 직접 실행으로 이어지는 Button과는 다르게 선택/설정이라는 조작 의미를 지니고 있다.

80년대 초반, 애플의 Lisa 프로젝트가 한창 진행중이던 시절, Graphic User Interface라는 새로운 컴퓨팅 방법의 등장은 Interaction Design이라는 새 학문을 만들어냈다. (Interaction Design은 20년후 UX Design으로 동화된다)

Interaction Design 기초를 세웠다고 평가받는 4명 중 한명인, Bill Verplank 교수는 사용자와 컴퓨터 간의 Interaction을 Know(인지, 계획), Do(조작), Feel(결과 확인, 판단)의 3단계로 명료하게 설명하면서 Do 단계에서의 직접 조작은 '현실 세계의 그것'을 얼마나 잘 반영하는지가 중요하다고 말한다. (지난 글 'UI 요소 1'에서 얘기한 바 있음)

Bill Verplank 교수가 Interaction Design을 설명한 그림 (출처: Designing Interaction)

당시의 UI 요소가 입력, 선택, 실행이라는 단순 조작과 데스크탑, 휴지통, 파일, 폴더 등의 기본적인 환경에 머무른데 비해 40여년의 세월이 흘러오면서 다양한 UI 요소들이 등장, 변화되어 왔다. 오늘 얘기하는 Slider, Picker가 그 대표적인 예시이다. Slider, Picker는 초창기 Interaction Design보다는 90년대 후반 인터넷의 붐과 더불어 나타난 UI 요소들이다.

('UI 요소 2'에서 살펴봤던) Form이나 Checkbox & Radio 버튼이 입력/선택과 관련된 요소들인데 비해 Slider, Picker는 조작이라는 행위에 더 가깝다. 조작 도구들은 기기/채널에 따라서 다소 다른 형태로 진화되어 왔다. 화면 사이즈가 큰 PC/키오스크는 누르는(pointing, tab) 조작 위주로, 손에 드는 모바일/테블릿/위치 등은 한 손 조작에 따른 미는(slide, swipe) 동작이 상대적으로 높은 편이다. 때문에 Slider는 PC나 키오스크보다는 모바일, 테블릿 등에서 많이 찾아볼 수 있는 데 비해 Picker는 어디서든 쉽게 발견할 수 있다.

McDonald’s kiosk ordering system — a UX case study (출처: UX Collective)

Slider

슬라이더는 특정 범위 내에서 원하는 값을 선택할 때 좋은 UI 요소이다. 범위가 정해져 있기 때문에 사용자는 본인이 선택할 수 있는 범위(어디~어디) 뿐만 아니라 몇 단위로 선택할 수 있는 지에 대한 척도(1~3, 1~5, 1~10)도 쉽게 확인할 수 있다.

Slider 디자인 원칙. (출처: 구글 Material Design)

thumb은 값을 선택하기 위해서 조작되는 점 형태를 말한다. thumb은 현재 상태와 일어날 변화를 동시에 보여준다. thumb에 현재 상태 값을 표시하거나 Tick mark로 이전 track과 다음 track을 구분하여 직관성을 높이기도 한다.

색깔과 Track의 굵기 변화를 통해서 조작시 경험을 더 북돋은 사례

Slider는 사용성 원칙 중 '반응성'이 중요하게 작용한다. 반응성이 떨어질 경우 (행위 측면에서의) UX 품질이 뚝 떨어지기 때문이다. '행동유도성'도 중요하다고 볼 수 있는데 조작시 사용자의 경험을 감안하여 thumb와 track 디자인에 특징을 부여하면 더 좋은 UX가 된다.

Slider는 선형적인 형태로 인해 진행상태를 표시하는 데에도 도움이 된다. 위 좌측 예시는 Slider의 형태를 띄고 있지만 사실은 조작이 불가능하며, 현재 상태(status)를 안내하는 것에 불과하다. Slider가 단독으로 사용되지 않고 다른 UI 요소와 결합되어 사용되는 경우도 존재한다. 위 우측 예시는 Slider와 밑의 4가지 선택값이 상호 연동된다. 계획의 1,2단계 중에서 1단계를 Slider가 2단계를 4가지 옵션이 담당하는 것이다.

듀얼 슬라이더는 원하는 값이 아니라, 원하는 구간을 선택할 수 있다. 최소값~최대값 범위 내에서 사용자가 특정 범위를 선택할 수 있는 것이다. 여행을 좋아하는 나는 호텔이나 항공편 예약시 듀얼 슬라이더를 이용해서 가격대나 출/도착시간대를 설정하는 경우가 많다. 듀얼 슬라이더 내에 정보를 표시하거나 척도를 생략하고무한대로 선택할 수 있는 것처럼 보이는 경우도 있다.

원형 슬라이더는 시간과 관련된 선택에서 주로 사용된다. (원은 순환을 의미하기 때문에 시간과 관련된 메타포로 주로 사용된다) 원형 슬라이더는 조작이 다소 어렵지만 시간과 관계되어 있기 때문에 시계나 시간이 순환된다는 개념에 의해서 원형 슬라이더를 사용하는 것을 자연스럽게 여이고, 불편함을 느끼지 않을 수 있다.

슬라이더 조작(input)과 그에 따른 결과(output)가 동 시점에서 나오는 경우도 있을 수 있다. 사용자가 슬라이더로 input을 변경하면서 그 결과를 실시간으로 확인할 필요가 있는 UX에서 이런 방식을 적용한다

Picker

날짜나 시간을 선택하는 Picker는 해당 경험에서의 '유효한 선택 범위'에 따라서 그에 걸맞는 UI가 접목될 수 있다. 가령 긴 기간 범위에 걸쳐서 날짜를 선택할 때에는 직접입력이, 1년 이내인 경우에는 캘린더가, 2~3달 안팎인 경우에는 'date picker'가, 일주일 이내인 경우에는 직접 노출이 좋다