세그먼트 컨트롤
세그먼트 컨트롤 (Segmented control)
세그먼트 컨트롤은 하나의 가로 컨테이너 안에 있는 두 개 이상의 세그먼트 중에서 하나를 선택하게 해주는 요소예요.
세그먼트 컨트롤은 단일 맥락 안에서 요소나 보기의 상태를 바꿀 때 잘 맞아요. 가령 연락처 목록에서 최근 통화로 전환하는 경우처럼요. 하지만 동작을 시작하거나 새 페이지로 이동하는 용도로는 쓰지 않는 게 좋아요. 그럴 땐 버튼이나 링크를 쓰는 게 맞고, 앱의 주요 섹션 사이를 이동하게 하려면 탭 바를 쓰세요.
출처: 문서
본문
동작 (Behavior)
상호 배타적인 옵션 (Mutually exclusive options)
세그먼트 컨트롤은 한 번에 하나의 옵션만 선택할 수 있어요. 새 옵션을 선택하면 현재 옵션은 선택이 해제되고요.
스크롤링 (Scrolling)
세그먼트 컨트롤은 iPhone에서 5개, iPad에서 7개 세그먼트로 제한하는 게 좋아요. 화면에 들어갈 수 있는 옵션보다 많아지면 세그먼트 컨트롤이 가로로 스크롤돼요. 스크롤이 제대로 동작하게 하려면 isFixedWidth를 false로 설정해야 해요. 세그먼트 컨트롤은 절대 두 줄로 감싸지 않아요.
레이아웃 (Layout)
맥락 내 이동 (In-context navigation)
세그먼트 컨트롤은 맥락 안에서의 이동을 제공할 수 있어서, 앱의 내비게이션 바에 자주 배치돼요. 인터페이스가 어수선해지지 않도록, 내비게이션 바에 추가 동작이나 제목 없이 세그먼트 컨트롤만을 쓰는 것을 고려해보세요. 제목을 넣는다면 모든 보기에 유용하고 적용 가능한 제목인지 확인해야 해요. 그래야 사용자가 보기 사이를 오가는 데 집중할 수 있죠.
세그먼트와 컨테이너 너비 (Segment and container widths)
세그먼트 컨트롤은 기본적으로 부모 컨테이너를 가득 채워요. 세그먼트 컨트롤의 비중을 줄이는 게 도움이 되는 상황이라면 isFixedWidth를 true로 설정하세요. 그러면 컨테이너의 너비는 개별 세그먼트의 너비에 의해 결정돼요.
개별 세그먼트는 shouldSetEqualWidthForSegments를 사용해 너비를 같게 하거나 다르게 할 수 있어요. 서로 다른 너비를 설정한다면, 세그먼트에 담긴 콘텐츠와 더 큰 세그먼트가 가질 수 있는 시각적 비중을 신중히 고려해야 해요.
콘텐츠 (Content)
각 세그먼트는 텍스트나 아이콘을 지원해요. 스캔하기 쉽게 하려면 하나의 세그먼트 컨트롤 안에서는 둘 중 하나만 쓰는 게 좋아요. 텍스트와 아이콘을 섞으면 시각적 리듬이 깨지고 혼란을 줄 수 있어요.
각 세그먼트를 선택했을 때 사용자가 보게 될 보기를 설명하는 간결한 라벨을 사용하세요. 모바일에서는 공간이 제한적이어서, 숨겨진 옵션이 생기거나 긴 가로 스크롤이 생기지 않도록 라벨을 신중하게 지어야 해요.