brunch

You can make anything
by writing

C.S.Lewis

by Lawn Jul 03. 2023

[HIG] Tab Bar

동일한 화면에서 콘텐츠 사이를 탐색하는 탭바

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

Introduction

탭 바는 막대 항목을 사용하여 동일한 화면에서 상호 배타적인 콘텐츠 사이를 탐색할 수 있습니다.

탭 바는 뷰가 제공하는 다양한 유형의 정보 또는 기능을 이해하는 데 도움이 됩니다. 또한 탭 바를 사용하면 각 섹션 내의 현재 탐색 상태를 유지하면서 뷰의 섹션 간에 빠르게 전환할 수 있습니다.

macOS에서 유사한 구성 요소를 사용하는 방법에 대한 지침은 탭 뷰(tab views)를 참조하십시오.

Best practices

탭 바는 동작을 제공하는 것이 아니라 탐색을 지원하는 데 사용하세요. 탭 바를 사용하면 시계 앱의 알람, 스톱워치 및 타이머 탭과 같이 앱의 여러 영역 사이를 탐색할 수 있습니다. 현재 뷰의 요소에 작동하는 컨트롤을 제공해야 하는 경우 대신 툴바(toolbar)를 사용하세요.

사람들이 앱의 다른 영역으로 이동할 때 탭 바가 표시되는지 확인하세요. 모달 뷰 내의 탭 바는 예외입니다. 모달 뷰는 사용자가 완료하면 해제하는 별도의 환경을 제공하므로 보기의 탭 바를 숨겨도 앱 탐색에는 영향을 주지 않습니다.

사람들이 앱을 탐색하는 데 필요한 최소한의 탭을 사용하세요. 탭이 추가될 때마다 앱의 복잡성이 증가하여 사람들이 정보를 찾기가 더 어려워집니다. 탭이 너무 많으면 레이블이 잘리지 않도록 짧은 제목이나 아이콘이 있는 탭을 몇 개만 사용하는 것이 좋습니다. 일반적으로 iOS에서는 최대 5개의 탭을 사용하고, 비전 OS, iPadOS 및 tvOS에서는 최대 6개의 탭을 사용합니다.

콘텐츠를 사용할 수 없는 경우에도 탭을 계속 표시하세요. 어떤 경우에는 탭을 사용할 수 있지만 다른 경우에는 사용할 수 없는 경우 앱의 인터페이스가 불안정하고 예측할 수 없게 보일 수 있습니다. 필요한 경우 탭의 콘텐츠를 사용할 수 없는 이유를 설명하세요. 예를 들어, iOS 디바이스에 음악이 없는 경우에도 음악 앱의 지금 듣기 탭은 계속 사용할 수 있으며 음악 다운로드에 대한 제안을 제공합니다.

각 탭 제목에 간결한 용어를 사용하세요. 유용한 탭 제목은 탭에 포함된 콘텐츠 유형이나 기능을 명확하게 설명하여 탐색에 도움이 됩니다. 음악, 공유, 라이브러리 또는 나를 위해와 같이 한 단어 또는 매우 짧은 문구를 사용하는 것이 좋습니다. 홈과 같은 일반적인 용어는 구체성이 부족하고 앱마다 다른 의미로 사용될 수 있으므로 피하는 것이 좋습니다.

배지를 사용하여 눈에 띄지 않게 소통하세요. 흰색 텍스트와 숫자 또는 느낌표가 포함된 빨간색 타원형 배지를 탭에 표시하여 해당 보기 또는 모드와 관련된 새 정보를 사용할 수 있음을 나타낼 수 있습니다. 자세한 내용은 알림(Notifications)을 참조하세요.

Platform considerations

macOS 또는 watchOS에서는 지원되지 않습니다.

iOS, iPadOS

기본적으로 탭 막대는 반투명합니다: 콘텐츠가 뒤에 표시될 때만 배경 머티리얼을 사용하며 뷰가 아래쪽으로 스크롤되면 머티리얼이 제거됩니다. 키보드가 화면에 있으면 탭 바가 숨겨집니다.

가능한 한 탭이 넘치지 않도록 하세요. 장치 크기 및 방향에 따라 표시되는 탭의 수가 전체 탭 수보다 적을 수 있습니다. 가로 공간으로 인해 표시되는 탭 수가 제한되는 경우 후행 탭이 더 보기 탭이 되어 목록의 나머지 항목이 별도의 화면에 표시됩니다. 더 보기 탭은 숨겨진 탭의 콘텐츠에 접근하기 어렵게 만들 수 있으므로 앱에서 이러한 상황이 발생할 수 있는 시나리오를 제한해야 합니다.

iPadOS 앱에서는 탭 바 대신 사이드바를 사용하는 것이 좋습니다. 사이드바는 많은 수의 항목을 표시할 수 있으므로 iPad 앱을 보다 효율적으로 탐색할 수 있습니다. 또한 사람들이 사이드바의 항목을 사용자 지정하고 콘텐츠를 위한 더 많은 공간을 확보하기 위해 사이드바를 숨길 수 있도록 허용할 수도 있습니다. 자세한 내용은 사이드바(Sidebars)를 참조하세요.

탭이 화면의 다른 뷰가 아니라 탭 바에 연결된 뷰에 영향을 주는지 확인하세요. 예를 들어 분할 보기의 왼쪽에서 탭을 선택해도 분할 보기의 오른쪽이 변경되지 않는지 확인합니다.

확장 가능하고 시각적으로 일관된 탭 막대 항목을 제공하려면 SF symbol을 사용하는 것이 좋습니다. SF Symbols을 사용하면 탭 바 항목이 다른 컨텍스트에 맞게 자동으로 조정됩니다. 예를 들어 탭 바는 현재 사용 중인 디바이스와 방향에 따라 일반 탭 바 또는 콤팩트 탭 바가 될 수 있습니다. 또한 세로 방향에서는 탭 바 아이콘이 탭 제목 위에 표시될 수 있고, 가로 방향에서는 아이콘과 제목이 나란히 표시될 수 있습니다. 플랫폼과의 일관성을 위해 채워진 기호 또는 아이콘을 선호하세요. 앱이 iPad에서 실행될 때 탭 바 대신 사이드바를 사용하는 경우 채워진 기호 또는 아이콘을 사이드바에서 윤곽선이 있는 변형으로 전환합니다.

비트맵을 사용하여 사용자 지정 탭 바 아이콘을 만들어야 하는 경우 일반 환경과 콤팩트 환경 모두에서 탭 바가 잘 보이도록 각 아이콘을 두 가지 크기로 만드세요. 다양한 모양의 탭 바 아이콘을 만들 때는 다음 메트릭을 사용하세요. 지침은 아이콘(Icons)을 참조하세요.

Target dimensions

tvOS

탭 바는 고도로 커스터마이징(사용자 정의)할 수 있습니다. 예를 들면 다음과 같습니다:

탭 바 배경의 색조, 색상 또는 이미지 지정

선택한 항목의 다른 글꼴을 포함하여 탭 항목의 글꼴을 선택

선택한 항목과 선택하지 않은 항목의 색조 지정

설정 및 검색 등의 버튼 아이콘 추가

기본적으로 탭 바는 반투명하며 선택한 탭만 불투명합니다. 리모컨을 사용하여 탭 바에 초점을 맞추면 선택한 탭에 선택된 상태를 강조하는 그림자가 표시됩니다. 탭 바의 높이는 68포인트, 상단 가장자리는 화면 상단에서 46포인트이며 이 값 중 어느 것도 변경할 수 없습니다.

탭 바에 들어갈 수 있는 항목보다 많은 항목이 있는 경우 시스템은 탭 바의 오른쪽에서 시작되는 페이드 효과를 적용하여 가장 오른쪽 항목을 잘라냅니다. 스크롤을 유발할 만큼 항목이 많으면 왼쪽부터 페이드 효과를 적용하여 잘라내는 효과도 적용합니다.

탭 제목에 아이콘을 사용하는 경우 익숙한 아이콘인지 확인하세요. 공간을 절약하기 위해 아이콘을 탭 제목으로 사용할 수 있지만 검색이나 설정과 같이 보편적으로 인식되는 기호에 한해서만 사용할 수 있습니다. 설명이 없는 낯선 기호를 제목으로 사용하면 사람들에게 혼란을 줄 수 있습니다. 지침은 SF Symbols를 참조하세요.

탭 바 스크롤 동작에 유의하세요. 기본적으로 현재 탭에 하나의 기본 보기가 포함되어 있으면 탭 바를 화면 밖으로 스크롤할 수 있습니다. 이 동작의 예는 TV 앱의 지금 보기, 영화, TV 프로그램, 스포츠 및 어린이 탭에서 확인할 수 있습니다. 단, TV 앱의 라이브러리 탭이나 앱의 설정 화면과 같이 화면에 분할 보기가 포함된 경우는 예외입니다. 이 경우 사용자가 분할 보기의 기본 창과 보조 창에서 콘텐츠를 스크롤하는 동안 탭 바는 보기 상단에 고정된 상태로 유지됩니다. 탭의 콘텐츠에 관계없이 사용자가 리모컨에서 메뉴를 누르면 초점이 항상 페이지 상단의 탭 바로 돌아갑니다.

Live-viewing app에서는 탭을 일관된 방식으로 구성하세요. 최상의 환경을 위해 라이브 스트리밍 앱의 콘텐츠를 다음 순서로 탭으로 구성하세요:

실시간 콘텐츠

클라우드 DVR 또는 기타 녹화된 콘텐츠

기타 콘텐츠

자세한 안내는 Live-viewing apps을 참조하세요.

앱에 적합한 경우 탭 바의 앞쪽 또는 뒤쪽 끝에 표시할 브랜드 로고 이미지를 생성하세요. 브랜드 로고 이미지와 탭 바 가장자리 사이에 충분한 공간을 확보하려면 이미지를 안전 여백 내에 배치합니다. 다음 이미지 크기 값을 참고하세요:

visionOS

비전 OS에서 탭 바는 항상 세로로 표시되며 창의 앞쪽을 기준으로 고정된 위치에 떠 있습니다. 사용자가 탭 바를 보면 자동으로 확장되며, 특정 탭을 열려면 탭에 초점을 맞추고 탭 합니다. 탭 바가 확장되어 있는 동안에는 일시적으로 그 뒤에 있는 콘텐츠가 가려질 수 있습니다.

각 탭의 심벌과 텍스트 제목을 제공하세요. 탭의 기호는 항상 탭 표시줄에 표시됩니다. 사람들이 탭 바를 볼 때 시스템에서 탭 제목도 함께 표시합니다. 탭 바가 확장되더라도 사람들이 한눈에 읽을 수 있도록 탭 제목을 짧게 유지해야 합니다.

앱에 적합하다면 탭 내에 사이드바를 사용하는 것을 고려해 보세요. 앱의 계층 구조가 깊은 경우 사이드바(sidebar)를 사용하여 탭 내에서 보조 탐색을 지원할 수 있습니다. 이 경우 사이드바에서 선택한 항목이 현재 열려 있는 탭을 변경하지 않도록 해야 합니다.