brunch

You can make anything
by writing

C.S.Lewis

by Lawn Apr 06. 2024

[HIG] Slider

수평 컨트롤 슬라이더

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

슬라이더는 엄지(thumb)라고 하는 컨트롤이 있는 수평 트랙으로, 사용자가 최솟값과 최댓값 사이에서 조정할 수 있습니다.

슬라이더의 값이 변경되면 최솟값과 엄지(thumb) 사이의 트랙 부분이 색상으로 채워집니다. 슬라이더에 최솟값과 최댓값의 의미를 나타내는 아이콘을 선택적으로 좌측과 우측에 표시할 수 있습니다.

Best practices

슬라이더의 모양을 사용자 지정하여 슬라이더의 기능을 강조할 수 있습니다. 트랙 색상, 엄지(thumb) 이미지 및 색조 색상, 왼쪽 및 오른쪽 아이콘 등 슬라이더의 모양을 조정하여 앱의 디자인과 조화를 이루고 기능을 효과적으로 사용자에게 전달할 수 있습니다. 예를 들어 이미지 크기를 조정하는 슬라이더는 왼쪽에 작은 이미지 아이콘을, 오른쪽에 큰 이미지 아이콘을 표시할 수 있습니다.

사용자에게 익숙한 컨트롤 방향을 사용하는 것이 좋습니다. 사람들은 앱에서 가로 슬라이더의 앞에 최솟값이 뒤에 최댓값이 위치하고, 세로 방향의 슬라이더 컨트롤의 경우 아래에 최솟값 위에 최댓값이기를 바랍니다. 예를 들어, 사용자들은 백분율을 나타내는 가로 슬라이더를 앞쪽의 0퍼센트에서 뒤쪽의 100퍼센트까지 지정하여 사용하기를 바랍니다.

슬라이더를 텍스트 필드(text field)와 스텝퍼(stepper)로 보완하는 것이 좋습니다. 특히 슬라이더가 광범위한 값을 나타내는 경우 사람들은 정확한 슬라이더 값을 보고 텍스트 필드에 특정 값을 입력할 수 있는 기능을 원할 수 있습니다. 스텝퍼를 추가하면 전체 값을 편리하게 증가시킬 수 있습니다. 관련 가이드라인은 텍스트 필드(Text fields) 및 스텝퍼(Steppers)를 참고하세요.

Platform considerations

Not supported in tvOS.

iOS, iPadOS

슬라이더를 사용하여 오디오 볼륨을 조절하지 마세요. 앱에서 볼륨 제어 기능을 제공해야 하는 경우 볼륨 레벨 슬라이더와 활성 오디오 출력 장치를 변경할 수 있는 컨트롤이 포함된 사용자 지정 가능한 볼륨 뷰를 사용하세요. 자세한 가이드라인은 Playing audio를 참고하세요.

macOS

macOS의 슬라이더에는 눈금 표시도 포함되어 있어 범위 내에서 특정 값을 쉽게 찾을 수 있습니다.

눈금 표시가 없는 선형 슬라이더에서는 엄지(thumb)가 둥글고 최솟값과 엄지손가락 사이의 트랙 부분이 색상으로 채워집니다. 눈금선이 있는 선형 슬라이더에서는 엄지(thumb)가 눈금선을 가리키는 방향성이며 트랙에 색상이 지정되지 않습니다. 선형 슬라이더에는 최솟값과 최댓값의 의미를 설명하는 보조 아이콘이 포함되는 경우가 많습니다.

원형 슬라이더에서는 엄지(thumb)가 작은 원으로 나타납니다. 체크 표시를 활성화하면 슬라이더 둘레에 균일한 간격의 점으로 표시됩니다.

슬라이더의 값이 변경될 때 실시간 피드백을 제공하는 것을 고려하세요. 실시간 피드백은 사람들에게 실시간으로 결과를 보여줍니다. 예를 들어, 독 설정에서 크기 슬라이더를 조정하면 독 아이콘의 크기가 동적으로 조정됩니다.

사람들의 기대에 맞는 슬라이더 스타일을 선택하세요. 고정된 시작점과 끝점 사이를 이동할 때는 가로 슬라이더를 사용하는 것이 좋습니다. 예를 들어, 그래픽 앱에서는 개체의 불투명도를 0~100% 사이로 설정하기 위해 가로 슬라이더를 제공할 수 있습니다. 값이 무한히 반복되거나 계속되는 경우 원형 슬라이더를 사용합니다. 예를 들어, 그래픽 앱에서는 원형 슬라이더를 사용하여 개체의 회전을 0도에서 360도 사이로 조정할 수 있습니다. 애니메이션 앱에서는 원형 슬라이더를 사용하여 애니메이션이 적용될 때 객체가 회전하는 횟수를 조정할 수 있습니다(4회 완전 회전은 4회 회전, 즉 1440도 회전).

슬라이더를 도입할 때 레이블을 사용하는 것이 좋습니다. 레이블은 일반적으로 문장 스타일의 대문자(sentence-style capitalization)를 사용하며 콜론으로 끝납니다. 가이드라인은 Labels을 참고하세요.

눈금 표시를 사용하여 명확성과 정확성을 높입니다. 눈금 표시는 사람들이 측정값의 눈금을 이해하고 특정 값을 더 쉽게 찾을 수 있도록 도와줍니다.

눈금표에 레이블을 추가하면 더욱 명확하게 표시할 수 있습니다. 슬라이더의 값에 따라 레이블을 숫자나 단어로 지정할 수 있습니다. 혼란을 줄이기 위해 필요한 경우가 아니라면 모든 눈금선에 레이블을 지정할 필요는 없습니다. 대부분의 경우 최솟값과 최댓값에만 레이블을 지정하는 것으로 충분합니다. 에너지 절약 설정 창에서처럼 슬라이더 값이 비선형인 경우에는 주기적으로 레이블을 지정하여 콘텍스트를 제공합니다. 또한 사람들이 포인터를 엄지 손가락 위에 올려놓으면 엄지 손가락의 값을 표시하는 도움말 태그(help tag)를 제공하는 것도 좋은 방법입니다.