A segmented control is a linear set of two or more segments, each of which functions as a button.
세그먼트 컨트롤은 두 개 이상의 세그먼트로 구성된 선형 세트이며 각 세그먼트는 버튼 역할을 합니다.
Within a segmented control, all segments are usually equal in width. Like buttons, segments can contain text or images. Segments can also have text labels beneath them (or beneath the control as a whole).
분할된 컨트롤 내에서 모든 세그먼트의 너비는 일반적으로 동일합니다. 버튼과 마찬가지로 세그먼트에는 텍스트나 이미지가 포함될 수 있습니다. 세그먼트 아래에(또는 전체적으로 컨트롤 아래에) 텍스트 레이블이 있을 수도 있습니다.
A segmented control can offer a single choice or multiple choices. For example, in Keynote people can select only one segment in the alignment options control to align selected text. In contrast, people can choose multiple segments in the font attributes control to combine styles like bold, italics, and underline. The toolbar of a Keynote window also uses a segmented control to let people show and hide various editing panes within the main window area.
세그먼트화된 컨트롤은 단일 선택 또는 다중 선택을 제공할 수 있습니다. 예를 들어 Keynote에서는 정렬 옵션 컨트롤에서 세그먼트 하나만 선택하여 선택한 텍스트를 정렬할 수 있습니다. 이와 대조적으로 사람들은 글꼴 속성 컨트롤에서 여러 세그먼트를 선택하여 굵게, 기울임꼴 및 밑줄과 같은 스타일을 결합할 수 있습니다. Keynote 창의 도구 모음은 분할된 제어 기능을 사용하여 사람들이 기본 창 영역 내에서 다양한 편집 창을 표시하고 숨길 수 있도록 합니다.
Single choice
Multiple choices
Use a segmented control to provide closely related choices that affect an object, state, or view. For example, a segmented control can help people switch between views in a toolbar. Avoid using a segmented control to offer actions, such as adding, removing, or editing content.
객체, 상태 또는 보기에 영향을 미치는 밀접하게 관련된 선택 사항을 제공하는 경우에 분할된 컨트롤을 사용하십시오. 예를 들어 분할된 컨트롤은 사람들이 도구 모음에서 보기 간에 전환하는 데 도움이 될 수 있습니다. 콘텐츠 추가, 삭제, 편집 등의 작업을 제공하기 위해는 분할된 컨트롤을 사용하지 마세요.
Avoid crowding the control with too many segments. Too many segments can be hard to parse and time-consuming to navigate. Aim for no more than about five to seven segments in a wide interface and no more than about five segments on iPhone.
너무 많은 세그먼트로 컨트롤을 혼잡하게 만들지 마세요. 세그먼트가 너무 많으면 구문 분석하기 어렵고 탐색하는 데 시간이 많이 걸릴 수 있습니다. 와이드 인터페이스에서는 세그먼트를 5~7개 이하로, iPhone에서는 세그먼트를 5개 이하로 목표로 삼으세요.
In general, keep segment size consistent. When all segments have equal width, a segmented control feels balanced. To the extent possible, it’s best to keep icon and title widths consistent too.
일반적으로 세그먼트 크기를 일관되게 유지합니다. 모든 세그먼트의 너비가 같으면 세그먼트 컨트롤이 균형 잡힌 느낌을 받습니다. 가능한 한 아이콘과 제목 너비도 일관되게 유지하는 것이 가장 좋습니다.
Prefer using either text or images — not a mix of both — in a single segmented control. Although individual segments can contain text labels or images, mixing the two in a single control can lead to a disconnected and confusing interface.
단일 분할된 컨트롤에서 텍스트나 이미지 중 하나를 사용하는 것이 좋습니다(두 가지를 혼합하지 않음). 개별 세그먼트에는 텍스트 라벨이나 이미지가 포함될 수 있지만 단일 컨트롤에서 두 가지를 혼합하는 것이 좋습니다. 단절되고 혼란스러운 인터페이스로 이어질 수 있습니다.
As much as possible, use content with a similar size in each segment. Because all segments typically have equal width, it doesn’t look good if content fills some segments but not others.
최대한 각 세그먼트에 비슷한 크기의 콘텐츠를 사용하세요. 일반적으로 모든 세그먼트의 너비가 동일하므로 콘텐츠가 일부 세그먼트를 채우지만 그렇지 않으면 보기 좋지 않습니다.
Use nouns or noun phrases for segment labels. Write text that describes each segment and uses title-style capitalization. A segmented control that displays text labels doesn’t need introductory text.
세그먼트 레이블에는 명사 또는 명사구를 사용하세요. 각 세그먼트를 설명하는 텍스트를 작성하되, 제목 형식의 대문자를 사용하세요. 텍스트 레이블을 표시하는 세그먼트 컨트롤은 추가 설명 텍스트가 필요하지 않습니다.
Not supported in watchOS.
watchOS에서는 지원되지 않습니다.
Use a segmented control in a bar only as recommended. Specifically, if you use a segmented control in a navigation bar, avoid including any other controls or a title. Avoid using a segmented control in a toolbar, because toolbar items act on the current screen — they don’t let people switch contexts.
권장되는 대로만 막대에 분할된 컨트롤을 사용하십시오. 특히 탐색 막대에서 분할된 컨트롤을 사용하는 경우 다른 컨트롤이나 제목을 포함하지 마십시오. 도구 모음 항목은 현재 화면에서 작동하므로 사람들이 컨텍스트를 전환할 수 없으므로 도구 모음에서 분할된 컨트롤을 사용하지 마세요.
Consider using introductory text to clarify the purpose of a segmented control. When the control uses symbols or interface icons, you could also add a label below each segment to clarify its meaning. If your app includes tooltips, provide one for each segment in a segmented control.
분할된 컨트롤의 목적을 명확히 하기 위해 소개 텍스트를 사용하는 것을 고려해 보세요. 컨트롤이 기호나 인터페이스 아이콘을 사용하는 경우 각 세그먼트 아래에 라벨을 추가하여 의미를 명확히 할 수도 있습니다. 앱에 도구 설명이 포함된 경우 분할된 컨트롤의 각 세그먼트에 대해 도구 설명을 제공하세요.
역자첨언
Use a tab view in the main window area — instead of a segmented control — for view switching. A tab view supports efficient view switching and is similar in appearance to a box combined with a segmented control. Consider using a segmented control to help people switch views in a toolbar or inspector pane.
Size custom interface icons appropriately based on the size of the control. Use the following values for guidance.
컨트롤 크기에 따라 맞춤 인터페이스 아이콘의 크기를 적절하게 조정하세요. 지침으로 다음 값을 사용하세요.
Regular
Small
Mini
Control size | Icon size |
Regular | 17x17 px @1x (34x34 px @2x) |
Small | 14x13 px @1x (28x26 px @2x) |
Mini | 12x11 px @1x (24x22 px @2x) |
Consider supporting spring loading. On a Mac equipped with a Magic Trackpad, spring loading lets people activate a segment by dragging selected items over it and force clicking without dropping the selected items. People can also continue dragging the items after a segment activates.
스프링 로딩 지원을 고려하세요. Magic Trackpad가 장착된 Mac에서 스프링 로딩을 사용하면 선택한 항목을 그 위로 드래그하고 선택한 항목을 놓지 않고 강제로 클릭하여 세그먼트를 활성화할 수 있습니다. 세그먼트가 활성화된 후에도 사람들은 계속해서 항목을 드래그할 수 있습니다.
역자첨언
Consider using a split view instead of a segmented control on screens that perform content filtering. People generally find it easy to navigate back and forth between content and filtering options using a split view. Depending on its placement, a segmented control may not be as easy to access.
콘텐츠 필터링을 수행하는 화면에서 분할된 컨트롤 대신 분할 보기를 사용하는 것을 고려해 보세요. 일반적으로 사람들은 분할 보기를 사용하여 콘텐츠와 필터링 옵션 사이를 앞뒤로 쉽게 탐색할 수 있다고 생각합니다. 위치에 따라 분할된 컨트롤에 액세스하기가 쉽지 않을 수 있습니다.
Avoid putting other focusable elements close to segmented controls. Segments become selected when focus moves to them, not when people click them. Carefully consider where you position a segmented control relative to other interface elements. If other focusable elements are too close, people might accidentally focus on them when attempting to switch between segments.
분할된 컨트롤 근처에 포커스를 받을 수 있는 다른 요소를 두지 마세요. 사람들이 세그먼트를 클릭할 때가 아니라 포커스가 해당 세그먼트로 이동할 때 세그먼트가 선택됩니다. 다른 인터페이스 요소를 기준으로 분할된 컨트롤을 배치하는 위치를 신중하게 고려하세요. 초점을 맞출 수 있는 다른 요소가 너무 가까우면 세그먼트 간 전환을 시도할 때 사람들이 실수로 해당 요소에 초점을 맞출 수 있습니다.
When people look at a segmented control that uses icons, the system displays a tooltip that contains the descriptive text you supply.
사람들이 아이콘을 사용하는 분할된 컨트롤을 보면 시스템은 사용자가 제공하는 설명 텍스트가 포함된 도구 설명을 표시합니다.
segmented — SwiftUI
UISegmentedControl — UIKit
NSSegmentedControl — AppKit
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/11/13 | 하니 | 초기 번역 |
2023/12/25 | 하니 | 배포 |