Bars - Tab Bars

Tab Bars

탭바는 앱화면 아래 나타나 앱의 다른 섹션으로 빠르게 이동할 수 있게 도와준다. 탭바는 기본적으로 투명하나 배경 색상값을 가질 수도 있으며, 화면의 어떤 모드(가로/세로)에도 동일한 높이를 유지하고, 키보드가 나왔을 땐 가려진다. 탭바는 어떤 수의 탭도 포함할 수 있긴 하지만, 탭은 기기 크기나 모드에 따라 보여지는 탭의 개수가 달라진다.

 

TIP💡

둘 다 앱화면의 아래에 나오기 때문에 탭바와 툴바의 차이를 알아두는 것이 좋다.  탭바는 앱의 다른 섹션으로 이동할 수 있게 한다. 반면 툴바는 현재 맥락과 관련된 액션을 수행하기 위한 버튼을 포함한다. 아이템을 삭제하거나 만들고, 주석을 추가하거나 사진을 찍는 것이다. 탭바와 툴바는 절대 같은 화면에서 함께 나오지 않는다.

 

Tabbar

Toolbar

 

탭바는 앱 수준에서의 정보를 구조화하는데 사용하자.

탭바는 정보 위계를 간단히 하고 같은 위계의 정보 카테고리나 모드를 동시에 접근할 수 있도록 한다.

 

탭바는 탐색을 위한 용도로만 사용하자.

탭바에 액션을 취할 수 있게 하는 버튼을 사용하지 마세요. 만약 현재 화면에 작용하는 컨트롤이 필요하다면, 툴바를 대신 쓰세요.

 

탭의 적절한 수를 가늠해라.

탭을 너무 많이 만들면 탭을 각각 누를 수 있는 영역이 줄어들고, 앱이 복잡해져 사용자들이 정보를 탐색하기 어렵게 만든다. 또 너무 적은 수의 탭 또한 문제가 되는데, 화면이 동떨어졌다는 느낌을 주기 때문이다. 물론 탭을 여러개 만들어 추가 탭 영역에 둘 수 있지만, 이를 보기 위해선 또 한번의 탭이 필요하며, 공간을 제대로 활용하지도 못할 것이다. 꼭 필요한 탭만을 남겨두고, 정보 구조 위계에 있어 탭을 최소한으로만 두자. 일반적인 경우, iPhone에선 3개에서 5개 사이의 탭을 사용하자. 물론 필요하다면 iPad에선 좀 더 추가해도 괜찮다.

 

iPadOS 앱에서 탭바 대신 사이드바를 사용하는 것을 고려하자.

사이드바는 많은 항목을 표시할 수 있으므로 iPad 앱을 보다 효율적으로 탐색할 수 있다. 또한 사람들이 사이드바의 항목을 사용자화하고 콘텐츠를 위한 더 많은 공간을 만들기 위해 숨기도록 할 수 있다.

 

사용자들이 앱의 다른 영역을 탐색하고 있더라도 탭바는 숨기지 말자.

탭바는 앱의 전반을 탐색하는 도구이기 때문에 언제 어디서든 꼭 보여야한다.  (modal View예외) 모달 뷰는 사용자들에게 그들이 임무를 끝낸 뒤에 사라지는 (의도적으로) 분리된 경험을 주기 때문에, 탐색할 수 있는 앱의 부분은 아니다.

 

기능을 사용할 수 없어도  탭을 지우거나 비활성화 시키지 마라

 어디선 탭바가 보여지고 또 어디선 그렇지 않다면, 앱의 화면은 불안정하고 예측불가능한 것이 된다. 모든 탭을 누를 수 있지만, 해당 탭의 콘텐츠를 왜 사용할 수 없는지 설명해라.

 

선택된 화면에 따라 내용(맥락)을 변경하자.

 화면을 예상 가능하게 유지하려면, 탭을 선택했을 때 화면의 다른곳이 아닌 탭바가 변경되어야 한다. 예를 들어 스플릿 뷰의 왼쪽 부분의 탭을 선택했을 때 오른쪽 부분이 갑자기 변해서는 안된다는 것이다. 팝오버의 탭 선택은 팝업의 뒤에 있는 화면을 변경시켜선 안된다.

 

배지를 사용하여 눈에 거슬리지 않게 의사 소통하자.

흰색의 텍스트, 숫자, 혹은 느낌표를 포함하는 빨간 동그라미인 '뱃지'를 탭 위에 노출시켜 해당 탭의 뷰나 모드에 새 정보가 생겼다는걸 보여줄 수 있다.

 

확장 가능하고 시각적으로 일관된 탭바 항목을 제공하려면 SF Symbol을 사용하는 것이 좋다.

iOS 13 포함 이후 버전에선 SF 심볼을 사용해 탭바 아이템을 나타낼 수 있습니다. iOS의 모든 버전에선 시스템 API가 일반적으로 사용되도록 디자인된 특정 글리프를 제공합니다. 또 자기만의 글리프를 디자인할 수도 있다.