A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.
슬라이더는 사람들이 최소값과 최대값 사이에서 조정할 수 있는 엄지손가락이라는 컨트롤이 있는 수평 트랙입니다.
As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color. A slider can optionally display left and right icons that illustrate the meaning of the minimum and maximum values.
슬라이더 값이 변경되면 최소값과 손가락 사이의 트랙 부분이 색상으로 채워집니다. 슬라이더에는 최소값과 최대값의 의미를 나타내는 왼쪽 및 오른쪽 아이콘이 선택적으로 표시될 수 있습니다.
Customize a slider’s appearance if it adds value. You can adjust a slider’s appearance — including track color, thumb image and tint color, and left and right icons — to blend with your app’s design and communicate intent. A slider that adjusts image size, for example, could show a small image icon on the left and a large image icon on the right.
값을 추가하는 경우 슬라이더의 모양을 맞춤설정하세요. 트랙 색상, 썸 이미지 및 색조 색상, 왼쪽 및 오른쪽 아이콘 등 슬라이더의 모양을 조정하여 원하는 것과 조화를 이룰 수 있습니다. 앱의 디자인을 파악하고 의도를 전달합니다. 예를 들어, 이미지 크기를 조정하는 슬라이더는 왼쪽에 작은 이미지 아이콘을 표시하고 오른쪽에 큰 이미지 아이콘을 표시할 수 있습니다.
Use familiar slider directions. People expect the minimum and maximum sides of sliders to be consistent in all apps, with minimum values on the leading side and maximum values on the trailing side (for horizontal sliders) and minimum values at the bottom and maximum values at the top (for vertical sliders). For example, people expect to be able to move a horizontal slider that represents a percentage from 0 percent on the leading side to 100 percent on the trailing side.
익숙한 슬라이더 방향을 사용하세요. 사람들은 슬라이더의 최소 및 최대 측면이 모든 앱에서 일관되기를 기대하며, 앞쪽에 최소값이 있고 뒤쪽에 최대값(수평 슬라이더의 경우)이 있습니다. 하단의 최소값과 상단의 최대값(수직 슬라이더의 경우)입니다. 예를 들어, 사람들은 앞쪽의 0%에서 뒤쪽의 100%까지 백분율을 나타내는 수평 슬라이더를 이동할 수 있을 것으로 기대합니다.
Consider supplementing a slider with a corresponding text field and stepper. Especially when a slider represents a wide range of values, people may appreciate seeing the exact slider value and having the ability to enter a specific value in a text field. Adding a stepper provides a convenient way for people to increment in whole values. For related guidance, see Text fields and Steppers.
Not supported in tvOS.
tvOS에서는 지원되지 않습니다.
Don’t use a slider to adjust audio volume. If you need to provide volume control in your app, use a volume view, which is customizable and includes a volume-level slider and a control for changing the active audio output device. For guidance, see Playing audio.
오디오 볼륨을 조정하는 데 슬라이더를 사용하지 마세요. 앱에서 볼륨을 조절해야 할 경우 볼륨 뷰를 사용하세요. 이는 사용자가 커스터마이징할 수 있으며 볼륨 레벨 슬라이더와 활성 오디오 출력 장치를 변경하는 컨트롤이 포함되어 있습니다. 가이드는 '오디오 재생'을 참조하세요.지침은 오디오 재생을 참조하세요.
역자첨언
Sliders in macOS can also include tick marks, making it easier for people to pinpoint a specific value within the range.
macOS의 슬라이더에는 눈금 표시도 포함될 수 있으므로 사람들이 범위 내에서 특정 값을 더 쉽게 찾아낼 수 있습니다.
역자첨언
In a linear slider without tick marks, the thumb is round, and the portion of track between the minimum value and the thumb is filled with color. In a linear slider with tick marks, the thumb is directional — pointing toward the tick marks — and the track isn’t tinted. A linear slider often includes supplementary icons that illustrate the meaning of the minimum and maximum values.
눈금 표시가 없는 선형 슬라이더에서는 썸이 둥글고 최소값과 썸 사이의 트랙 부분이 색상으로 채워집니다. 눈금 표시가 있는 선형 슬라이더에서는 엄지 손가락이 눈금 표시를 향하는 방향으로 움직이며 트랙에 색조가 적용되지 않습니다. 선형 슬라이더에는 최소값과 최대값의 의미를 설명하는 보조 아이콘이 포함되는 경우가 많습니다.
In a circular slider, the thumb appears as a small circle. Tick marks, when present, appear as evenly spaced dots around the circumference of the slider.
원형 슬라이더에서는 엄지 손가락이 작은 원으로 나타납니다. 눈금 표시가 있는 경우 슬라이더 원주 주위에 균일한 간격의 점으로 나타납니다.
Linear slider without tick marks
눈금 표시가 없는 선형 슬라이더
Linear slider with tick marks
눈금 표시가 있는 선형 슬라이더
Circular slider
원형 슬라이더
Consider giving live feedback as the value of a slider changes. Live feedback shows people results in real time. For example, your Dock icons are dynamically scaled when adjusting the Size slider in Dock settings.
슬라이더 값이 변경되면 실시간 피드백을 제공하는 것이 좋습니다. 실시간 피드백은 사람들에게 결과를 실시간으로 보여줍니다. 예를 들어 Dock 설정에서 크기 슬라이더를 조정하면 Dock 아이콘의 크기가 동적으로 조정됩니다.
Choose a slider style that matches peoples’ expectations. A horizontal slider is ideal when moving between a fixed starting and ending point. For example, a graphics app might offer a horizontal slider for setting the opacity level of an object between 0 and 100 percent. Use circular sliders when values repeat or continue indefinitely. For example, a graphics app might use a circular slider to adjust the rotation of an object between 0 and 360 degrees. An animation app might use a circular slider to adjust how many times an object spins when animated — four complete rotations equals four spins, or 1440 degrees of rotation.
사람들의 기대에 맞는 슬라이더 스타일을 선택하세요. 고정된 시작점과 끝점 사이를 이동할 때는 수평 슬라이더가 이상적입니다. 예를 들어 그래픽 앱은 개체의 불투명도 수준을 0~100%로 설정하기 위한 가로 슬라이더를 제공할 수 있습니다. 값이 무한정 반복되거나 계속되는 경우 원형 슬라이더를 사용합니다. 예를 들어 그래픽 앱은 원형 슬라이더를 사용하여 0도에서 360도 사이에서 개체의 회전을 조정할 수 있습니다. 애니메이션 앱은 원형 슬라이더를 사용하여 애니메이션 시 개체가 회전하는 횟수를 조정할 수 있습니다. 즉, 4번의 완전한 회전은 4번의 회전, 즉 1440도 회전과 같습니다.
Consider using a label to introduce a slider. Labels generally use sentence-style capitalization and end with a colon. For guidance, see Labels.
Use tick marks to increase clarity and accuracy. Tick marks help people understand the scale of measurements and make it easier to locate specific values.
명확성과 정확성을 높이려면 눈금 표시를 사용하세요. 눈금 표시는 사람들이 측정 척도를 이해하고 특정 값을 더 쉽게 찾을 수 있도록 도와줍니다.
Consider adding labels to tick marks for even greater clarity. Labels can be numbers or words, depending on the slider’s values. It’s unnecessary to label every tick mark unless doing so is needed to reduce confusion. In many cases, labeling only the minimum and maximum values is sufficient. When the values of the slider are nonlinear, like in the Energy Saver settings pane, periodic labels provide context. It’s also a good idea to provide a tooltip that displays the value of the thumb when people hold their pointer over it.
명확성을 높이기 위해 눈금 표시에 라벨을 추가하는 것을 고려해 보세요. 라벨은 슬라이더 값에 따라 숫자 또는 단어가 될 수 있습니다. 혼란을 줄이기 위해 필요한 경우를 제외하고는 모든 눈금 표시에 라벨을 지정할 필요가 없습니다. 대부분의 경우 최소값과 최대값에만 라벨을 지정하는 것으로 충분합니다. 에너지 절약 설정 창에서와 같이 슬라이더 값이 비선형인 경우 주기적인 레이블이 컨텍스트를 제공합니다. 사람들이 엄지손가락 위에 포인터를 놓으면 엄지손가락의 값을 표시하는 도구 설명을 제공하는 것도 좋은 생각입니다.
Prefer horizontal sliders. It’s generally easier for people to gesture from side to side than up and down.
수평 슬라이더를 선호합니다. 일반적으로 사람들이 위아래로 동작하는 것보다 좌우로 동작하는 것이 더 쉽습니다.
A slider is a horizontal track — appearing as a set of discrete steps or as a continuous bar — that represents a finite range of values. People can tap buttons on the sides of the slider to increase or decrease its value by a predefined amount.
슬라이더는 유한한 값 범위를 나타내는 일련의 개별 단계 또는 연속 막대로 표시되는 수평 트랙입니다. 사람들은 슬라이더 측면에 있는 버튼을 탭하여 미리 정의된 양만큼 값을 늘리거나 줄일 수 있습니다.
If necessary, create custom glyphs to communicate what the slider does. The system displays plus and minus signs by default.
필요한 경우 슬라이더의 기능을 전달하는 맞춤 글리프를 만듭니다. 시스템에는 기본적으로 더하기 및 빼기 기호가 표시됩니다.
Slider — SwiftUI
UISlider — UIKit
NSSlider — AppKit
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/11/13 | 하니 | 초기 번역 |
2023/12/25 | 하니 | 배포 |