오역이 있을 수 있습니다! 영문 문서를 기본으로 하고 이 글은 참고하는 느낌으로 봐주시면 좋을 것 같습니다. 😊
Human Interface Guidelines - Navigation
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에서 네비게이셔은 크게 3가지 스타일이 있습니다.
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.
일부 앱은 여러 네비게이션 스타일을 결합합니다. 예를 들어, flat navigation을 사용하는 앱은 각 범주 내에서 hierarchical navigation을 구현할 수 있습니다.
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.
항상 명확한 경로를 제공하세요. 사람들은 항상 앱에서 자신이 어디에 있는지, 다음 화면으로 이동하는 방법을 알고 있어야 합니다. 네비게이션 스타일에 상관없이 콘텐츠를 통한 이동 경로는 논리적이며 예측할 수 있어야 하고, 쉽게 알아차릴 수 있어야 합니다. 일반적으로 사용자에게 각 화면에서 하나의 이동경로를 지정합니다. 여러 맥락에서 한 화면을 보려면 action sheet, alert, popover, modal view를 고려하세요. 더 많은 정보는? Action Sheets, Alerts, Popovers, 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.
표준 네비게이션 구성 요소를 사용하세요. 가능하다면 page controls, tab bar, segmented controls, table views, collection views, split views와 같은 표준화된 navigation controls를 사용하세요. 사용자들은 이미 이 컨트롤에 익숙하고, 직관적으로 앱의 구조를 파악할 수 있습니다.
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.
계층화된 데이터를 이용하기 위해 네비게이션 바를 사용하세요. 네비게이션 바의 제목은 계층적인 구조에서 현재 위치를 보여줄 수 있고, 뒤로 가기 버튼은 이전 화면으로 돌아갈 수 있도록 도와줍니다. 자세한 내용은? 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.
탭 바를 사용하여 콘텐츠 또는 기능의 비슷한 카테고리를 표시합니다. 탭 바를 사용하면 현재 위치와 상관없이 카테고리 전환을 빠르게 할 수 있습니다. 자세한 내용은? 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.
아이패드에서는 탭 바 대신 split view를 사용하세요. Split view는 탭 바와 동일하게 빠른 네비게이션을 제공하는 동시에 대형 디스플레이에 최적화 될 수 있습니다. 자세한 내용은? 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.
콘텐츠 유형이 동일한 여러 페이지가 있는 경우엔 페이지 컨트롤을 사용합니다. page control은 사용 가능한 페이지 수와 현재 활성화된 페이지를 명확히 전달합니다. 날씨 앱은 page control을 사용해 위치별 날씨 페이지를 나타냅니다. 자세한 내용은? 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.
segmented control과 toolbar는 내비게이션을 사용할 수 없습니다. segmented control을 사용해 정보를 다른 카테고리로 구성하세요. 현재 맥락에서 상호작용하기 위한 control을 제공하기 위해서 툴바를 사용하세요. 자세한 내용은? Segmented Controls, Toolbars
느낀점
이전 modal과 마찬가지로 navigation역시 아주아주 많이 사용되는 녀석이다. 특히 사용자와 상호작용이 많이 일어나기 때문에 상황에 따라 알맞은 스타일을 잘 사용하는 것이 중요할 것 같다.
번역하면서 몰랐던 영단어들을 quizlet이라는 곳에 정리해두었어요. HIG 읽으면서 영어 실력까지 키우고 싶은 분들에게 도움이 됐으면 좋겠어요!
수정해야 할 부분이 있다면 알려주세요!
읽어 주셔서 감사합니다. 🙂
