슬라이더의 종류, 알고 계셨나요?
슬라이더의 사용방법과 좋은 사례
슬라이더슬라이더
슬라이더는 사용자가 핸들을 드래그하여 값을 연속적으로 조정할 수 있는 입력 방식입니다. 시각적 피드백을 통해 현재 값을 즉시 확인할 수 있으며, 주로 음량, 밝기 등 범위 기반 설정에 사용됩니다. 더 많은 type의 슬라이더 유형, 사용법, 좋은 예시에 대해 알아보겠습니다.
슬라이더 구성
슬라이더는 값을 조절하는 핸들, 활성 및 비활성 영역의 트랙, 정지 인디케이터, 값으로 구성됩니다.
➊ Value (값)
➋ Active Track (활성 영역 트랙)
➌ Handle (핸들)
➍ Stop Indicator (정지 인디케이터)
➎ Inactive Track (비활성 영역 트랙)
슬라이더의 종류
Material Design에서 정의하는 수평 슬라이더의 종류는 4가지입니다.
➊ Continuous (연속형)
➋ Discrete (불연속형)
➌ Centered (중앙형)
➍ Range selection (범위 선택형)
Continuous (연속형)
연속형 슬라이더는 범위 내의 어떤 값으로든 자유롭게 이동시킬 수 있습니다.
Discrete (불연속형)
불연속형 슬라이더는 작은 점으로 표현된 정지 인디케이터에 스냅 됩니다. 그러므로 모든 값을 자유롭게 조정하는 것이 아닌(연속형), 정해진 값만 선택하게 할 수 있습니다.
Centered (중앙형)
중앙형 슬라이더는 핸들의 시작값을 슬라이더 중앙에 둡니다. 그러므로 슬라이더가 음수의 값을 가질 수 있습니다.
Range selection (범위 선택형)
범위 선택형 슬라이더는 범위의 최솟값과 최댓값을 설정하는 두 개의 핸들이 있습니다.
슬라이더 사용 시 고려사항
다음 내용은 슬라이더 사용 시 고려해야 할 사항입니다.
즉시 적용
슬라이더를 사용하여 변경한 내용은 즉시 적용되므로, 사용자는 슬라이더를 움직일 때 선택 사항의 효과(값의 변화)를 이해할 수 있어야 합니다.
트랙
트랙은 슬라이더에서 선택할 수 있는 값의 전체 범위를 보여줍니다. 활성 및 비활성 두 섹션이 있습니다. LTR(왼쪽에서 오른쪽) 언어의 경우 값은 왼쪽에서 오른쪽으로 증가합니다. RTL(오른쪽에서 왼쪽) 언어의 경우 반대입니다.
정지 인디케이터
개별 슬라이더에서 정지 인디케이터는 트랙을 따라 선택할 수 있는 값을 보여줍니다. 슬라이더는 가장 가까운 정지 인디케이터로 스냅 됩니다. 슬라이더에 정지 인디케이터가 너무 많으면 시각적으로 혼잡하고 값을 조정하기 어려울 수 있으니 지양해야 합니다.
값 표시
범위 슬라이더의 경우 한 번에 하나의 값만 표시해야 합니다.
추가 요소
값 레이블을 표시하는 대신, 슬라이더 외부에 별도의 텍스트 입력 필드를 추가할 수 있습니다. 이것이 추가되면, 이 텍스트 필드의 슬라이더 값은 실제 값과 서로 일치하도록 연동됩니다.
슬라이더 외부에 아이콘이나 텍스트를 추가하여 정지 인디케이터 대신 사용할 수 있습니다.
슬라이더의 좋은 사례
슬라이더 컴포넌트의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
MediumiOS의 얇은 트랙과 둥근 핸들을 가진 연속형 슬라이더의 모습입니다. 슬라이더 양 옆에 서로 다른 사이즈의 아이콘을 배치하여 직관적으로 밝기를 나타내고 있습니다.
Noom일반적인 바 형태의 슬라이더가 아닌, 측정 단위를 자의 직접적인 형태로 표현하여 재미난 슬라이더입니다. 자의 형태를 직접 표현했지만, 직관적인 숫자와 0.1 단위가 눈금으로 표현되어 정지 인디케이터를 대신하고 있습니다.
Gentler Streak슬라이더의 형태를 하고 있으나, 기분의 상태를 사용자에게 컬러를 통해 직관적으로 표현하고 있습니다. 각 단위는 정지 인디케이터를 통해 비연속적으로 스냅 되도록 하였습니다.
Riveo핸들의 위치가 중앙에 고정되고 슬라이더 트랙이 좌우로 이동되도록 하였습니다. 오른쪽에 선택한 값이 표시되어 직관적으로 값을 확인할 수 있습니다.
TikTok배속을 정지 인디케이터 간 5개의 간격을 두고 표현하였습니다. 0.1부터 10까지 실제로 동일한 간격은 아니지만, 각 눈금 위에 값을 표시하여 사용자에게 직관적으로 값을 전달하고 있습니다.
마치며
슬라이더 컴포넌트는 비교적 제작하기 쉬워 보이지만, 정지 인디케이터에 대한 인터랙션과 비연속적인 규칙, 아이콘과 같은 추가요소를 사용하는데 고려할 사항이 다소 존재합니다.
Noom의 사례처럼 슬라이더 자체가 주요한 기능이 될 경우 더욱 적극적인 메타포를 사용하여 표현하되, 직관적으로 값과 눈금을 확인할 수 있는 것이 가장 중요하겠습니다. iOS의 경우 시간 등에 사용되는 원 슬라이더를 사용하기도 하는데, 이는 다음 기회에 더 알아볼 수 있도록 하겠습니다.
슬라이더에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다!
