Segmented control과 유사한 Tab menu! 잘 구분해서 사용하자

개인숙제에서 탭 메뉴를 개선하던 중에 아래와 같은 탭은 강진우 튜터님께서 잘 사용하지 않는다고 하셨다. HIG에 자세한 내용이 나와 있으니 참고해보라고 하셔서 찾아본 결과를 기록해 보겠다.

HIG에서 말하는 Segmented Control(분할된 조작기)

Segmented Control

Segmented Control: 두 개 이상의 세그먼트(부분)로 구성된 선형 세트이며 각 세그먼트는 버튼 역할을 한다.

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

모범 사례

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

단일선택/다중선택

권장 사항

1. 세그먼트화된 컨트롤을 사용하여 개체, 상태 또는 보기에 영향을 미치는 밀접하게 관련된 선택 사항을 제공해라

예를 들어, 분할된 컨트롤은 사람들이 도구 모음의 보기 간에 전환하는 데 도움이 될 수 있다. 하지만 콘텐츠 추가, 제거, 편집과 같은 작업을 제공하기 위해 분할된 컨트롤을 사용하지 마라

2. 너무 많은 세그먼트로 컨트롤을 혼잡하게 만들지 마라

 세그먼트가 너무 많으면 구문 분석하기 어렵고 탐색하는 데 시간이 많이 걸릴 수 있다. 와이드 인터페이스에서는 세그먼트를 5~7개 이하로, iPhone에서는 세그먼트를 5개 이하로 설정하는 것을 목표로 한다.

3. 일반적으로 세그먼트 크기를 일관되게 유지해라

모든 세그먼트의 너비가 동일하면 세그먼트 컨트롤이 균형 잡힌 느낌을 받는다. 가능한 한 아이콘과 제목 너비도 일관되게 유지하는 것이 가장 좋다.

추가적인 자세한 내용-> HIG

Segmented controls | Apple Developer Documentation

 

---

위 내용을 찾아보고 궁금한 점이 생겼다.

1. HIG에서 말하고 있는 것은 Control에 집중해서 설명하고 있는데 탭에도 같은 원리가 적용이 되는가?

2. 레퍼런스로 찾아보았던 신한 플레이의 경우 나와 같은 탭 메뉴로 사용하고 있었다. 하지만, 튜터님이 말씀하셨던 텍스트의 길이가 길어지는 경우(언어가 바뀌거나 새 탭이 추가되었을 때)에 다소 불편할 수 있다는 것이 일리가 있다고 생각했다. 그래서 치지직의 경우를 추가적으로 살펴보았다. 치지직의 경우는 버튼을 둘러싼 배경이 없으므로 탭이 길어져도 스크롤로 넘길 수 있다. 그렇다면 이렇게 사용하면 되지 않는가?

이후 튜터님께 다시 찾아가 보니 튜터님의 의도는 이러했다.

"세그먼트 컨트롤과 한샘님의 탭메뉴는 유사한 형태를 띄고 있으므로 그 기능의 차이, 형태의 차이를 인지하고 사용하면 좋겠다는 뜻이었어요."

튜터님의 말씀 中

튜터님의 말씀을 이해하려고 찾아보았던게 오히려 해답이 되었다. 

이상 끝