brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 23. 2023

[HIG] Tab views

여러 콘텐츠 영역을 보여주는 탭 뷰

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

Introduction

탭 뷰(Tab view)는 동일한 공간에 서로 다른 여러 개의 콘텐츠 영역을 보여주며, 이 영역은 탬 컨트롤(Tabbed control)을 사용해 전환할 수 있습니다.

Best Practice

탭 뷰(tap veiw)를 사용해 밀접하게 관련된 콘텐츠 영역을 보여줍니다. 탭 뷰(tap veiw)는 눈에 잘 띄는 시각적 형태를 사용합니다. 사람들은 각 탭이 다른 탭의 내용과 유사하거나 관련 있는 내용을 보여줄 것을 기대하며 원합니다.

영역 안에 있는 컨트롤은 같은 영역 안의 내용에만 영향을 줄 수 있어야 합니다. 영역은 상호 배타적이므로 완전히 독립적이어야 합니다.

영역 안의 내용을 설명하는 레이블을 각 탭에 제공하세요. 좋은 레이블은 탭을 클릭하거나 누르기 전에 영역의 콘텐츠를 사용자들이 예상하는 데 도움을 줍니다. 일반적으로, 탭 레이블에는 명사 또는 짧은 명사 구문을 사용합니다. 동사 또는 짧은 동사 구문은 몇몇 문맥에서 적합할 수 있습니다. 탭 레이블에는 제목 스타일의 대문자(title-style capitalization)를 사용합니다.

탭 간 전환에 팝업 버튼(pop-up button)을 사용하는 것은 피하는 것이 좋습니다. 탭 컨트롤은 한 번의 클릭 또는 탭으로 선택하고 전환할 수 있기 때문에 효율적인 반면, 팝업 버튼은 두 번의 클릭 또는 탭이 필요합니다. 또한 탭 컨트롤은 화면에 모든 선택사항을 보여주지만, 팝업 버튼은 반드시 클릭해야만 선택 사항을 볼 수 있습니다. 팝업 버튼은 콘텐츠 영역이 너무 많아서 탭과 함께 표시할 수 없는 경우에 적합한 대안이 될 수 있습니다.

한 개의 탭 뷰에서 여섯 개를 초과하는 탭을 사용하는 것은 좋지 않습니다. 너무 많은 탭은 사용자들에게 부담스럽고 레이아웃 문제를 일으킬 수 있습니다. 여섯 개보다 많은 탭이 있는 경우 앱의 사용자 인터페이스를 구현하는 다른 방법을 고려해 보세요. 예를 들어, 팝업 버튼의 보기 옵션으로 탭이 더욱 적합할 수 있습니다.

개발자 가이드라인은 NSTabView를 참고하세요.

Anatomy

콘텐츠 영역의 상단, 하단, 좌측 및 우측 등의 가장자리에 탭 컨트롤을 배치할 수 있습니다. 또한 프로그래밍 방식으로 영역을 전환할 때는 컨트롤을 숨길 수 있습니다.

탭 컨트롤을 숨길 때, 콘텐츠 영역은 테두리가 없거나, 베젤을 두거나, 선으로 된 테두리를 가질 수도 있습니다. 테두리가 없는 뷰는 불투명(solid)할 수도, 반투명(transparent)할 수도 있습니다.

탭 뷰(tap veiw)의 모든 측면과 가장자리에 여백을 남겨 탭 뷰(tap veiw)를 삽입합니다. 이 레이아웃은 보기가 깔끔하고 탭 뷰(tap veiw)의 콘텐츠와 관련이 없는 추가적인 컨트롤을 위한 공간을 제공합니다. 예를 들어, 날짜 및 시간 설정의 잠금 버튼은 모튼 탭에 적용되기 때문에 탭 뷰(tap veiw) 바깥에 있습니다. 창의 모서리에 맞게 탭 뷰(tap veiw)를 확장할 수 있지만 이러한 레이아웃은 일반적이지 않습니다.