[HIG] App Architecture: Navigation, 네비게이션

앱을 사용하는 사람들은 앱의 네비게이션의 존재를 인식하지 못한다.
앱을 제작하는 사람들은 네비게이션에 주의를 끌지 않고 앱의 목적과 구조를 도와주기 위해 네비게이션을 구현해야 한다.
네비게이션은 자연스럽고 친숙해야 한다. 또한, 인터페이스를 지배해선 안되며 컨텐츠의 주의를 빼앗으면 안된다.

iOS에는 3 가지 네비게이션 스타일이 존재한다.

iOS 네비게이션 스타일

1. 계층 네비게이션 (Hierarchical Navigation)

• 목적지에 도달하기 전까지 화면마다 하나의 선택을 한다.
• 사용자가 다른 선택을 원할 수도 있으므로, 처음부터 시작하거나 뒤로 네비게이션을 탐색할 수 있어야 한다.
• 메일 앱이나 설정(Settings)앱이 계층 방식에 속한다.

2. 평면 네비게이션 (Flat Navigation)

• 여러 컨텐츠 카테고리가 존재한다.
• 앱스토어나 애플 뮤직 앱이 평면 네비게이션 방식에 속한다.

3. 컨텐츠 주도 혹은 경험 주도 네비게이션 (Content-Driven or Experience-Driven Navigation)

• 켄텐츠를 자유롭게 탐색할 수 있다.
• 컨텐츠 자체가 네비게이션이다.
• 게임, 책 앱이 컨텐츠 주도 네비게이션 방식에 속한다.

네비게이션을 잘 만드는 방법

1. 항상 정확한 경로를 제공하라.

• 사람들은 항상 자신의 위치가 앱의 어디에 있는지를 알아야 하며, 다음 목적지로 어떻게 가야하는지 알아야 한다.
• 네비게이션 방식과는 무관하게, 컨텐츠를 탐색하는 경로는 논리적이고 예측가능해야하며, 쉽게 따라갈 수 있어야 한다.
• 여러 컨텍스트에서 스크린을 봐야한다면, 액션 시트(Action Sheets), 알람(Alerts), 팝오버(Popovers) 또는 모달 뷰(Modality)를 고려해라.

2. 컨텐츠를 빠르고 쉽게 획득하기 위한 정보 구조를 설계하라.

• 여러분의 앱의 정보 구조를 조직화할 때 가장 적은 횟수의 탭과 스와이프 그리고 가장 적은 개수의 스크린을 가져야 한다.

3. 터치 제스처를 사용하여 유연함을 만들어라

• 가장 적은 마찰(?)로 인터페이스를 이동하는 것이 쉽도록 만들어야 한다.
• 예를 들어, 스크린의 끝을 스와이프하여 이전 스크린으로 돌아가도록 해줘야 한다.

4. 표준 네비게이션 컴포넌트를 사용하라.

• 가능하다면 항상, 표준 네비게이션 컨트롤를 사용하라.
• 표준 네비게이션 컨트롤에는 페이지 컨트롤, 탭 바, 세그먼트 컨트롤, 테이블 뷰, 컬렉션 뷰, 그리고 스플릿 뷰가 있다.
• 사용자는 항상 컨트롤에 친숙해야 하므로, 여러분의 앱이 어떻게 동작하는지 직관적으로 알 수 있을 것이다.

5. 네비게이션 바를 사용하여 데이터의 계층을 탐색하도록 하라

• 네비게이션 바의 제목(title)은 현재 계층의 위치를 알려준다.
• 뒤로가기 버튼은 이전 위치를 쉽게 돌아갈 수 있도록 해준다.
• 네비게이션 바에 대한 더 자세한 사항은 Navigation Bars를 참고하자.

6. 탭 바를 사용하여, 이웃 카테고리를 표현하라.

• 탭 바는 현재 위치에 상관 없이 사용자가 쉽고 빠르게 카테고리를 이동할 수 있도록 해준다.
• 탭 바에 관한 자세한 사항은 Tab Bars를 참고하자.

7. iPad는 탭바 대신 스플릿 뷰(split view)를 사용하라.

• 스플릿 뷰는 탭 바와 동일한 빠른 네비게이션을 제공하며, 스플릿 뷰는 큰 화면을 잘 활용한다.
• 스플릿 뷰에 대한 자세항 사항은 Split Views를 참고하자.

8. 컨텐츠의 동일한 타입의 여러 페이지가 있을 때는 페이지 컨트롤을 사용하라.

• 페이지 컨트롤은 여러 페이지를 깔끔하게 상호동작할 수 있다.
• 날씨 앱은 페이지 컨트롤의 대표적인 예이다. 날씨 앱에서 각 지역이 각 페이지를 의미한다.
• 페이지 컨트롤에 대한 자세한 사항은 Page Controls을 참고하자.

팁: 세그먼트 컨트롤과 툴바는 네비게이션이라고 보기 어렵다. 세그먼트 컨트롤은 다른 카테고리의 정보를 조직화할 때 적합하다. 반면, 툴바는 현재 컨텍스트와 상호동작할 때 유용하다. Segmented Controls과 Toolbars을 참고하자.