brunch

You can make anything
by writing

C.S.Lewis

by Lawn Black Apr 05. 2024

[HIG] Segmented controls

두 개 이상의 세그먼트로 구성된 집합 세그먼트 컨트롤

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

세그먼트 컨트롤(segmented control)은 두 개 이상의 세그먼트로 구성된 선형 집합으로, 각 세그먼트는 버튼으로 작동합니다.

세그먼트 컨트롤 내에서는 일반적으로 모든 세그먼트의 너비가 동일합니다. 버튼과 마찬가지로 세그먼트에는 텍스트나 이미지가 포함될 수 있습니다. 세그먼트는 그 아래(또는 컨트롤 전체 아래)에 텍스트 레이블을 가질 수도 있습니다.

Best practices

세그먼트 컨트롤은 단일 선택 또는 다중 선택을 제공할 수 있습니다. 예를 들어, Keynote에서는 정렬 옵션에서 하나의 세그먼트만 선택하여 선택한 텍스트를 정렬할 수 있습니다. 반대로 글꼴 속성에서 여러 세그먼트를 선택하여 굵게, 이탤릭체 및 밑줄과 같은 스타일을 조합할 수 있습니다. 또한 키노트 창의 도구 모음에서는 세그먼트 컨트롤을 사용하여 기본 창 영역 내에서 다양한 편집 창을 표시하고 숨길 수 있습니다.

세그먼트 컨트롤을 사용하여 개체, 상태 또는 보기에 영향을 주는 선택 사항을 제공하세요. 예를 들어 세그먼트 컨트롤을 사용해 사람들이 툴바에서 뷰를 전환하는 데 도움을 줄 수 있습니다. 콘텐츠 추가, 제거 또는 편집과 같은 작업을 제공하는 데 세그먼트 컨트롤을 사용하지 마세요.

너무 많은 세그먼트를 사용해서 사용자들을 혼란스럽게 만들지 마세요. 세그먼트가 너무 많으면 파싱 하기 어렵고 탐색하는 데 시간이 오래 걸릴 수 있습니다. 넓은 인터페이스에서는 약 5~7개의 세그먼트, iPhone에서는 약 5개 이하의 세그먼트를 사용하는 것이 좋습니다.

세그먼트 크기를 일정하게 유지하는 것이 좋습니다. 모든 세그먼트의 너비가 같으면 세그먼트 컨트롤이 균형 잡힌 느낌을 줍니다. 가능한 한 아이콘과 제목의 너비도 일정하게 유지하는 것이 가장 좋습니다.

하나의 세그먼트 컨트롤에 텍스트 또는 이미지를 혼합하지 않고, 둘 중 하나만 사용하는 것이 좋습니다. 개별 세그먼트에 텍스트 레이블이나 이미지를 포함할 수 있지만, 두 가지를 하나의 컨트롤에 혼합하면 인터페이스가 단절되고 혼란스러워질 수 있습니다.

가능한 한 각 세그먼트에 비슷한 크기의 콘텐츠를 사용하세요. 일반적으로 모든 세그먼트의 너비는 동일하므로 콘텐츠가 일부 세그먼트만 채우고 다른 세그먼트는 채우지 못하면 보기 좋지 않습니다.

세그먼트 레이블에는 명사 또는 명사 구문을 사용합니다. 각 세그먼트를 설명하는 텍스트를 작성하고 제목 스타일의 대문자(title-style capitalization)를 사용합니다. 텍스트 레이블을 표시하는 세그먼트 컨트롤에는 소개 텍스트가 필요하지 않습니다.

Platform considerations

Not supported in watchOS.

iOS, iPadOS

바에서 세그먼트 컨트롤은 권장되는 대로만 사용하세요. 특히 탐색 모음에서 세그먼트 컨트롤을 사용하는 경우 다른 컨트롤이나 제목을 포함하지 마세요. 툴바의 항목은 현재 화면에서 동작하므로 사용자가 콘텍스트를 전환할 수 없습니다. 툴바에서 세그먼트 컨트롤을 사용하지 마세요.

macOS

세그먼트 컨트롤의 목적을 명확히 하기 위해 소개 텍스트를 사용하는 것이 좋습니다. 컨트롤이 기호 또는 인터페이스 아이콘을 사용하는 경우 각 세그먼트 아래에 레이블을 추가하여 그 의미를 명확히 할 수도 있습니다. 앱에 툴팁이 포함된 경우 세그먼트화된 컨트롤의 각 세그먼트에 대해 툴팁을 제공합니다.

뷰 전환 시에는 세그먼트 컨트롤 대신 기본 창 영역에서 탭 뷰를 사용하세요. 탭 뷰(tab view)는 효율적인 보기 전환을 지원하며 모양이 세그먼트 컨트롤과 결합된 상자(box)와 유사합니다. 도구 모음이나 인스펙터 창에서 보기를 전환할 때 세그먼트 컨트롤을 사용하는 것을 고려해 보세요.

컨트롤의 크기에 따라 사용자 지정 인터페이스 아이콘의 크기를 적절하게 조정합니다. 다음 값을 참고하세요.

스프링 로딩(spring loading) 지원을 고려하세요. 매직 트랙패드가 장착된 Mac에서 스프링 로딩을 사용하면 선택한 항목을 드래그하여 세그먼트를 활성화하고 선택한 항목을 취소하지 않고 세그먼트를 활성화시킬 수 있습니다. 세그먼트가 활성화된 후에도 항목을 계속 드래그할 수 있습니다.

역자설명 : 스프링 로딩은 시스템 설정 > 손쉬운 사용 > 포인터 제어기에서 설정할 수 있습니다. 한국버전으로는 '자동열림'으로 여러 파일 또는 폴더를 드래그하여 원하는 폴더에 드레그 해서 올려놨을 시 일정 시간이 지나면 자동으로 폴더가 열리고, 해당 폴더로 이동합니다.

tvOS

콘텐츠 필터링 화면에서 세그먼트 컨트롤 대신 분할 뷰(split view)를 사용하는 것이 좋습니다. 사람들은 일반적으로 분할 뷰(split view)를 사용하면 콘텐츠와 필터링 옵션 사이를 쉽게 오갈 수 있습니다. 세그먼트 컨트롤은 배치에 따라 접근하기 쉽지 않을 수 있습니다.

세그먼트 컨트롤 가까이에 초점을 맞출 수 있는 다른 요소를 배치하지 마세요. 세그먼트는 사용자가 클릭할 때가 아니라 초점이 해당 세그먼트로 이동할 때 선택됩니다. 세그먼트 컨트롤을 다른 인터페이스 요소에 비해 어디에 배치할지 신중하게 고려하세요. 다른 포커스 가능한 요소가 너무 가까이 있으면 사용자가 세그먼트 간 전환을 시도할 때 실수로 해당 요소에 초점을 맞출 수 있습니다.