2-5.Navigation.md

Navigation

People tend to be unaware of an app’s navigation until it doesn’t meet their expectations. Your job is to implement navigation in a way that supports the structure and purpose of your app without calling attention to itself. Navigation should feel natural and familiar, and shouldn’t dominate the interface or draw focus away from content. In iOS, there are three main styles of navigation.

사용자들은 앱이 기대에 잘 미친다면, 앱의 내비게이션에 대해 잘 눈치채지 못합니다. 따라서 당신은 네비게이션 바가 그 자체로 주의를 따로 끌지 않고 앱의 구조와 목적으로 지원하는 방식으로 구현해야 합니다. 내비게이션은 자연스럽고 친숙해야 하며, 인터페이스보다 집중되거나 콘텐츠로부터 시선이 분산되도록 해서는 안 됩니다. iOS의 내비게이션에는 세 가지 주요 스타일이 있습니다.

Hierarchical Navigation

Make one choice per screen until you reach a destination. To go to another destination, you must retrace your steps or start over from the beginning and make different choices. Settings and Mail use this navigation style.

계층형 네비게이션

사용자가 어떤 화면에 도달하기 위해 각 화면에서 하나의 선택을 하도록 합니다. 다른 화면으로 가기 위해선 이전 경로를 되짚어가거나 처음부터 다시 시작해 다른 선택을 해야만 합니다. 설정이나 메일에서 이러한 네비게이션 스타일을 사용합니다.

Flat Navigation

Switch between multiple content categories. Music and App Store use this navigation style.

평면 네비게이션

다수의 콘텐츠 카테고리를 번갈아 화면을 전환합니다. 음악과 앱스토어에서 이러한 네비게이션 스타일을 사용합니다.

Content-Driven or Experience-Driven Navigation

Move freely through content, or the content itself defines the navigation. Games, books, and other immersive apps generally use this navigation style.

내용 혹은 경험 중심의 네비게이션

여러 콘텐츠 사이를 자유롭게 이동하거나, 콘텐츠 그 자체가 네비게이션으로 정의됩니다. 게임, 책 그리고 다른 전체 화면을 사용하는 앱들이 대개 이러한 네비게이션 스타일을 사용합니다.

Some apps combine multiple navigation styles. For example, an app that uses flat navigation may implement hierarchical navigation within each category.

몇몇 앱들은 여러 개의 네비게이션 스타일을 혼합해 사용하기도 합니다. 예를 들어, 평면형 네비게이션을 이용하는 앱이 각 카테고리 안에서는 계층형 네비게이션을 구현할 수도 있습니다.

---

Always provide a clear path. People should always know where they are in your app and how to get to their next destination. Regardless of navigation style, it’s essential that the path through content is logical, predictable, and easy to follow. In general, give people one path to each screen. If they need to see a screen in multiple contexts, consider using an action sheet, alert, popover, or modal view. To learn more, see Action Sheets, Alerts, Popovers, and Modality.

Design an information structure that makes it fast and easy to get to content. Organize your information structure in a way that requires a minimum number of taps, swipes, and screens.

Use touch gestures to create fluidity. Make it easy to move through your interface with minimum friction. For example, you could let people swipe from the side of the screen to return to the previous screen.

Use standard navigation components. Whenever possible, use standard navigation controls such as page controls, tab bars, segmented controls, table views, collection views, and split views. Users are already familiar with these controls, and will intuitively know how to get around your app.

Use a navigation bar to traverse a hierarchy of data. The navigation bar’s title can show the current position in the hierarchy, and the back button makes it easy to return to the previous location. For specific guidance, see Navigation Bars.

Use a tab bar to present peer categories of content or functionality. A tab bar lets people quickly and easily switch between categories, regardless of the current location. For specific guidance, see Tab Bars.

On iPad, use a split view instead of a tab bar. Split views provide the same quick navigation as tab bars while making better use of the large display. For guidance, see Split Views.

Use a page control when you have multiple pages of the same type of content. A page control clearly communicates the number of pages available and which one is currently active. The Weather app uses a page control to show location-specific weather pages. For specific guidance, see Page Controls.

TIP

Segmented controls and toolbars don’t enable navigation. Use a segmented control to organize information into different categories. Use a toolbar to provide controls for interacting with the current context. For additional information on these types of elements, see Segmented Controls and Toolbars.

---

항상 명확한 이동 경로를 제공하세요. 사용자들은 언제나 자신이 앱 안 어디에 있는지, 다음 화면으로 이동하기 위해서 어떻게 해야 하는지 알아야 합니다. 네비게이션 스타일에 관계없이 콘텐츠로 이동하는 길은 논리적이고 예측가능해야하며 따라가기 쉬워야 합니다. 일반적으로, 사용자에게 각 화면에서 이동하는 선택지를 한 개씩 제공하세요. 만약 여러 환경에서 한 화면을 보여줘야 한다면, 액션 시트나 경고창, 팝오버나 모달 화면을 사용하는 것을 고려해보세요. Action Sheets, Alerts, Popovers, Modality 에서 더 자세한 정보를 얻을 수 있습니다.

콘텐츠에 빠르고 쉽게 접근하기 위해 정보를 구조화하세요. 최소한의 탭, 스와이프, 스크린 수로 정보 구조를 체계화하세요.

터치 제스처를 사용하여 이동하세요. 마찰을 최소화하며 화면 이동을 쉽게할 수 있도록 하세요. 예를 들어, 버튼을 누르지 않아도 화면 가장자리에서 스와이프를 해 이전 화면으로 돌아가게 할 수 있습니다.

표준화된 네비게이션 컴포넌트를 사용하세요. 가능하다면, 페이지 컨트롤이나 탭 바, 부분 조작 컨트롤, 테이블 뷰, 컬랙션 뷰, 스플릿 뷰와 같은 일반적인 네비게이션 컨트롤을 사용하세요. 사용자들은 이미 이 컨트롤에 익숙하고, 당신의 앱에서도 어떻게 해야할지 직감적으로 알 것입니다.

계층화된 데이터를 이용하기 위해 네비게이션 바를 사용하세요. 네비게이션 바의 제목은 계층적인 구조 안에서 현재 위치를 보여줄 수 있으며, 뒤로가기 버튼은 이전 위치로 돌아가기 쉽게 합니다. 자세한 가이드는 Navigation Bars를 확인하세요.

같은 계층의 카테고리나 기능을 보여주기 위해 탭 바를 사용하세요. 탭 바는 현재 위치에 상관없이 사용자들이 카테고리 간 이동을 더 빠르고 쉽게 하도록 합니다. 자세한 가이드는 Tab Bars에서 확인하세요.

아이패드에서는 탭바 대신 스플릿 뷰를 사용하세요. 스플릿 뷰는 탭 바와 같이 빠른 네비게이션을 제공하면서, 동시에 큰 화면을 더 잘 활용할 수 있게 합니다. Split Views에서 가이드를 참고하세요.

같은 형태의 페이지가 많은 경우 페이지 컨트롤을 사용하세요. 페이지 컨트롤은 현재 어떤 화면에 있고, 페이지의 수가 몇 개인지, 몇 개의 페이지를 이동할 수 있는지 명확히 보여줍니다. 날씨 앱은 구체적인 장소의 맞춤 날씨 페이지를 보여주기 위해 페이지 컨트롤을 사용합니다. 자세한 가이드는 Page Controls에서 확인하세요.

팁

segmented control과 toolbar는 네비게이션을 사용할 수 없도록 합니다. 정보를 다른 카테고리로 묶기 위해선 segmented control을 사용하세요. 현재 context에서 인터랙팅하기 위한 control을 제공하기 위해선 툴바를 사용하세요. 더 많은 정보와 이러한 요소들의 종류는 Segmented Controls과Toolbars에서 확인할 수 있습니다.

---

애플 공식 문서

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/