[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)를 제공하는 것도 좋은 방법입니다.
visionOS
수평 슬라이더를 선호합니다. 일반적으로 사람들은 위아래로 제스처를 하는 것보다 좌우로 제스처를 더 선호합니다.
watchOS
슬라이더는 불연속적인 단계 집합 또는 연속 막대로 표시되는 수평 트랙으로, 유한한 범위의 값을 나타냅니다. 슬라이더의 측면에 있는 버튼을 탭 하여 미리 정의된 양만큼 값을 늘리거나 줄일 수 있습니다.
필요한 경우 사용자 지정 글리프를 만들어 슬라이더의 기능을 전달할 수 있습니다. 시스템에서는 기본적으로 플러스 및 마이너스 기호를 표시합니다.
Resources
Related
Developer documentation
Slider — SwiftUI
UISlider — UIKit
NSSlider — AppKit
Change Log
Date, June 21, 2023 | Changes, Updated to include guidance for visionOS.
