[HIG] Toggles
상반되는 두 가지 상태 중 선택할 수 있는 토글
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
토글(toggle)을 사용하면 On, Off와 같이 서로 반대되는 두 가지 상태 중 선택할 수 있으며, 각 상태를 나타내는 형태를 다르게 보여줄 수 있습니다.
토글에는 스위치, 체크박스 등 다양한 스타일이 있을 수 있으며 플랫폼마다 이러한 스타일을 다른 방식으로 사용할 수 있습니다. 자세한 내용은 플랫폼 고려 사항(Platform considerations)을 참고하세요.
토글 외에도 모든 플랫폼은 각 상태에 대해 다른 모양을 사용하여 토글처럼 작동하는 버튼도 지원합니다. 개발자 가이드는 토글 스타일(ToggleStyle)을 참고하세요.
Best practices
콘텐츠나 화면의 상태에 영향을 주는 두 개의 반대되는 값 중에서 선택할 수 있도록 토글(toggle)을 사용하세요. 토글(toggle)은 항상 어떠한 상태를 관리할 수 있도록 하기 때문에 항목 목록에서 선택하는 것과 같은 다른 유형의 작업을 활성화해야 하는 경우에는 pop-up button 같은 다른 유형의 구성 요소를 사용합니다.
토글(toggle)에 영향을 받는 설정, 화면 또는 콘텐츠를 분명하게 하세요. 일반적으로 주변 컨텍스트는 사용자가 무엇을 켜거나 끄는지 이해하기에 충분한 정보를 제공합니다. 경우에 따라 주로 macOS 앱에서는 토글(toggle) 제어 상태를 설명하는 레이블을 제공할 수도 있습니다. 토글(toggle)처럼 작동하는 버튼을 사용한다면 일반적으로 그 목적을 전달하는 인터페이스 아이콘을 사용하며, 현재 상태에 따라 주로 배경을 변경하여 형태를 업데이트합니다.
토글(toggle) 상태의 시각적인 차이를 분명하게 나타내세요. 예를 들어 색상 추가 또는 제거나 배경 모양 표시 또는 제거, 체크표시나 점으로 표시되는 내부 정보를 번경하여 토글(toggle)이 켜져 있거나 꺼져있는지 표시합니다. 상태를 전달하기 위해 단순히 색상만 변경하는 것은 모든 사람이 그 차이를 인지할 수 있는 것은 아니기 때문에 피하는 것이 좋습니다.
Platform considerations
No additional considerations for tvOS, visionOS, or watchOS.
iOS, iPadOS
스위치 토글(toggle) 스타일은 목록 행에서만 사용하세요. 행의 내용은 스위치가 제어하는 상태의 컨텍스트를 제공하기 때문에 레이블을 지정할 필요가 없습니다.
스위치의 기본 컬러는 필요한 경우에만 변경하도록 하세요. 대부분의 경우 기본 녹색이 적합한 편이지만 앱의 악센트 색상을 사용할 수도 있습니다. 무채색 외관과 충분한 대비를 주는 색상을 사용하여 사용자들이 인지할 수 있도록 하세요.
목록 이외에는 스위치가 아닌 토글(toggle)처럼 동작하는 버튼을 사용합니다. 버튼의 용도를 설명하는 라벨을 제공하지 않는 것이 좋습니다. 대체 가능한 배경을 조합한 인터페이스 아이콘은 버튼의 기능을 이해하는데 도움이 됩니다. 개발자 가이드라인은 changesSelectionAsPrimaryAction를 참고하세요.
macOS
macOS는 스위치 토글(toggle) 스타일과 함께 체크박스 스타일을 지원하며 유사한 동작을 제공하는 라디오 버튼도 정의합니다.
창의 프레임이 아닌 창의 본문에서 스위치와 체크박스, 라디오 버튼을 사용하세요. 특히 도구 모음(toolbar)이나 상태 표시줄에 해당 구성요소들을 사용하지 않도록 하세요.
Switches
하나의 디테일이나 사소한 설정을 제어하기 위해 스위치를 사용하지 않도록 하세요. 스위치는 체크박스보다 시각적 비중이 크기 때문에 일반적으로 체크박스보다 더 많은 기능을 제어할 때 더 보기 좋습니다. 예를 들어 스위치를 사용하여 사람들이 하나의 설정이 아닌 설정 그룹을 켜거나 끌 수 있도록 할 수 있습니다. 개발자 가이드라인 switch를 참고하세요.
그룹화된 양식 내에서 미니 스위치를 사용하여 단일 행에서 설정을 제어하는 것도 고려해 보세요. 미니 스위치의 높이는 버튼 및 기타 컨트롤의 높이와 비슷하므로 행의 높이가 일정하게 유지됩니다. 그룹화된 양식 내에서 설정의 계층 구조를 표시해야 하는 경우 기본 설정에는 일반 스위치를 사용하고 하위 설정에는 미니 스위치를 사용할 수 있습니다. 개발자 가이드라인은 GroupedFormStyle 및 ControlSize를 참고하세요.
일반적으로 체크박스를 스위치로 바꾸지 마세요. 인터페이스에서 이미 체크박스를 사용하고 있다면 계속 사용하는 것이 가장 좋습니다.
Checkboxes
체크박스는 버튼이 꺼져 있으면 비어 있고, 버튼이 켜져 있으면 확인 표시가 있으며, 버튼 상태가 혼합되어 있으면 대시가 포함될 수 있는 작은 정사각형 버튼입니다. 일반적으로 체크박스는 그 뒤에 레이블을 보여줍니다. 편집 가능한 체크리스트에서는 제목이나 추가 콘텐츠 없이 체크박스가 표시될 수 있습니다.
설정의 계층 구조를 보여줘야 하는 경우에는 스위치 대신 체크박스를 사용하세요. 체크박스의 시각적 스타일은 정렬이 잘 되고 그룹화를 전달하는 데 도움이 됩니다. 일반적으로 확인란의 앞쪽 가장자리를 따라 정렬 및 들여 쓰기를 사용하면 확인란의 상태가 하위 확인란의 상태를 지배하는 경우와 같이 종속성을 표시할 수 있습니다.
두 가지 이상의 상호 배타적인 옵션 그룹을 표시해야 할 경우에는 라디오 버튼 사용을 고려해 보세요. “켜짐” “꺼짐” 뿐만 아니라 다른 옵션들 중에 선택해야 하는 경우, 여러 개의 라디오 버튼을 사용하면 고유한 레이블로 각 옵션을 명확히 할 수 있습니다.
서로 관계가 명확하지 않다면 레이블을 사용하여 체크박스 그룹을 설명하는 것을 고려해 보세요. 옵션 그룹을 설명하고 레이블의 기준선을 그룹의 첫 번째 체크박스에 맞춥니다.
현재의 체크박스= 상태를 정확하게 반영합니다. 체크박스는 선택, 선택 해제 또는 혼합 상태일 수 있습니다. 체크박스를 사용하여 여러 하위 체크박스를 전체적으로 활성화 및 비활성화할 때, 하위 체크박스의 상태가 서로 다르다면 혼합된 상태를 표시합니다. 예를 들어 모든 스타일을 설정하거나 해제하는 텍스트 스타일 설정이 필요하지만 굵게, 기울임 꼴, 밑줄과 같은 개별 스타일 설정의 하위 그룹을 선택할 수도 있어야 합니다. 개발자 지침은 allowsMixedState를 참고하세요.
Radio buttons
라디오 버튼은 작은 원형 버튼 뒤에 레이블이 붙어 있습니다. 일반적으로 2개에서 5개까지 그룹으로 표시되는 라디오 버튼은 상호 배타적인 선택 항목 세트를 표시합니다.
라디오 버튼의 상태는 켜짐(채워진 원) 또는 꺼짐(빈 원)입니다. 라디오 버튼에 혼합 상태(대시로 표시)를 표시할 수도 있지만, 추가 라디오 버튼을 사용하여 여러 상태를 전달할 수 있으므로 이 상태는 거의 유용하지 않습니다. 설정이나 항목의 상태가 혼합되어 있음을 표시해야 하는 경우에는 체크박스를 대신 사용하는 것이 좋습니다.
상호 배타적인 옵션을 표시하려면 라디오 버튼 세트를 사용하는 것이 좋습니다. 사람들이 한 세트에서 여러 옵션을 선택할 수 있도록 해야 하는 경우에는 대신 체크박스를 사용하세요.
한 세트에 너무 많은 라디오 버튼을 나열하지 마세요. 긴 목록의 라디오 버튼은 인터페이스에서 많은 공간을 차지하여 부담스러울 수 있습니다. 5개 이상의 옵션을 표시해야 하는 경우에는 팝업 버튼(pop-up button)과 같은 컴포넌트를 대신 사용하는 것이 좋습니다.
켜거나 끌 수 있는 단일 설정을 표시하려면 체크박스를 사용하는 것이 좋습니다. 단일 라디오 버튼으로도 켜거나 끌 수 있지만 체크박스의 체크 표시 여부가 현재 상태를 한눈에 파악하기 쉽습니다. 하지만 드물게 단일 체크박스가 반대의 상태를 분명하게 전달하지 않는 경우에는 제어 상태를 명시하는 레이블이 있는 한 쌍의 라디오 버튼을 사용할 수 있습니다.
라디오 버튼을 수평으로 표시할 때는 일정한 간격을 사용하세요. 가장 긴 버튼 레이블에 필요한 공간을 측정하고 그 공간을 일관되게 사용합니다.
Resources
Related
Developer documentation
Toggle — SwiftUI
UISwitch — UIKit
NSButton.ButtonType.toggle — AppKit
NSSwitch — AppKit
Change Log
Date, March 29, 2024 | Changes, Enhanced guidance for using switches in macOS apps, clarified when a checkbox has a title, and added artwork for radio buttons.
Date, September 12, 2023 | Changes, Updated artwork.
