[HIG] Mac Catalyst: macOS의 앱 구조와 네비게이션 컨벤션 적용하기

잘 설계된 앱 네비게이션은 데이터의 구조를 반영한다. 또한, 플랫폼의 컨벤션을 따르면서 앱의 주요 기능을 제공한다

macOS 사용자가 당신의 앱을 편안하게 느끼려면, iOS 네비게이션 컨벤션을 macOS의 네비게이션 컨벤션으로 변환해야 한다

대부분의 iPad 앱은 플랫 네비게이션 또는 계층 네비게이션을 사용하거나 둘 모두를 동시에 사용한다

플랫 네비게이션은 카테고리 혹은 기능들의 영역을 표시한다. 예를 들어, App Store, Apple Music은 플랫 네비게이션 구조를 사용하여 사용자에게 Library와 같은 최상위 영역에 곧바로 접근할 수 있도록 한다

계층형 네비게이션은 트리와 같은 조직에서 정보를 표현한다. 사용자는 목적지에 도달할 때까지 아이템을 선택하며 탐색하게 된다

계층형 네비게이션의 가장 유명한 예는 설정(Settings) 앱이다. 설정 앱에서 텍스트를 교체하려면 General > Keyboards > Text Replacement로 이동할 수 있다.

iPad앱은 아래의 UIKit 컨트롤을 이용하여 네비게이션을 구현한다.

• 탭 바, 탭 바는 플랫 네비게이션을 제공한다. 최상위 카테고리들은 화면의 하단에 영속 바(persistent bar)에 위치한다
• 페이지 컨트롤, 페이지 컨트롤은 현재 페이지의 위치를 알려준다.
• 스플릿 뷰, 스플릿 뷰는 계층형 네비게이션을 표현한다. 사용자가 첫 뷰에서 아이템을 선택하면 스플릿 뷰는 2차 뷰의 아이템과 연관된 컨텐츠를 표시한다.

만약 당신이 iPad 앱의 탭바를 사용한다면, 세그먼트 컨트롤이나 사이드바 배경 스타일을 스플릿 뷰 컨트롤러에서 고려하라.
세그먼트 컨트롤과 사이드바 배경 스타일은 Mac 윈도우의 네비게이션 컨벤션과 유사하다.
두 아이템 중 하나를 선택할 때 다음을 고려하라.

• 세그먼트 컨트롤과 탭 바는 유사한 상호동작을 가진다. 예를 들어, 상호배타적인 선택이 가능하다.

• 세그먼트 컨트롤은 단순한 macOS 적용을 위한 대안이다.

• 세그먼트 컨트롤은 각각의 탭 안에서 계층이 여럿인 iPad 앱에 적절하다.

• 사이드바는 최상위 레벨의 아이템 리스트를 표현한다. 각각의 아이템은 자식 아이템들을 보여준다.

• 사이드바를 사용하면, 네비게이션이 간소화된다. 사람들은 사이드바 내부에서 각각의 탭 컨텐츠를 볼 수 있기 때문이다.

• 사이드바는 앱에서 정의하거나 사용자가 정의한 카테고리에 적합하다. 단, 자주 바껴서는 안된다.

• 예를 들어, News 사이드바의 Follwing 카테고리와 Suggested 카테고리는 바뀌지 않는다.

세그먼트 컨트롤과 사이드바를 조합할 수도 있다.
예를 들어, 탭을 포함하기 위해 세그먼트 컨트롤 사용하거나, 각각의 탭의 컨텐츠를 보여주기 위해 사이드 바를 사용할 수도 있다.
탭 바를 어떻게 적용하든, 사용자는 macOS 뷰 메뉴를 통해 각 탭의 컨텐츠를 빠르게 접근할 수 있어야 한다.
메뉴에 대한 자세한 사항은 Put App Commands into Menus을 참고하라.

당신의 iPad 앱의 스플릿 뷰가 있다면, macOS는 자동으로 스플릿 뷰를 Mac 버전의 스플릿 뷰로 바꿔준다.
두 플랫폼에서, 첫 뷰는 다양한 아이템의 목록을 보여주는 데 가장 적합하다. 예를 들어, Mail 앱의 메일 박스 리스트가 있다.
왜냐하면, 레이블과 아이콘, 정렬과 필터링 등이 포함되기 때문이다.
하지만, 2 단계 이상의 컨텐츠 계층을 갖는다면, 중간 레벨의 뷰는 Mac 스타일의 윈도우에서는 보이지 않는다.
사람들이 다시 자신이 한 탐색을 뒤로 가도록 하기 위해, 툴 바에 뒤로가기 버튼을 포함하라.

페이지 컨트롤을 사용한다면, 또는 레터럴 네비게이션을 활성화하고 싶다면, 뷰 페이지에 구체적인 컨트롤을 사용자에게 제공하라.
만약 레터럴 네비게이션의 타입을 지원한다면, 사용자는 툴바에서 다음/이전 버튼을 통해 페이지를 탐색할 수 있어야 한다.
예를 들어, macOS의 Stocks 앱은 툴바에 뒤로 가기 버튼을 제공하며, 뷰 메뉴에서 이전 Stroy 명령이 가능하다.

만약 당신의 iPad 앱이 다중 윈도우를 제공한다면, macOS 버전에도 다중 윈도우를 제공하라.
많은 macOS 앱은 문서를 열 수 있다. 또한, 새로운 윈도우를 여는 대신, 새로운 탭을 열 수 있다.
예를 들어, 사용자는 사파리 윈도우의 다른 웹페이지 탭을 열 수 있다. 파인더 앱의 하나의 윈도우에서 다른 탭은 각자의 파일 시스템 위치를 보여준다.
사용자는 System Preferences 를 이용하여 윈도우 대신 탭을 선호할 수 있다. 시스템은 동적으로 앱의 메뉴에 연관된 메뉴 아이템을 추가한다.
예를 들어, View > Show Tab Bar와 Window > Show Next Tab.이 있다