brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 30. 2023

[HIG] Navigation bars

콘텐츠의 계층을 탐색하는 내비게이션 바

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

Introduction

앱 화면 상단에 내비게이션 바(Navigation bars)가 표시되어 콘텐츠의 계층을 탐색할 수 있게 해 줍니다.

내비게이션 바는 화면의 제목을 자연스럽게 표시해서 사람들이 앱이나 게임에서 길을 잃지 않도록 도와주며, 화면 콘텐츠에 영향을 주는 컨트롤을 함께 제공할 수 있습니다.

macOS는 내비게이션 바를 제공하지 않습니다. macOS에서 탐색(navigation)을 사용하려면 사이드바(sidebar) 또는 툴바(toolbar)의 뒤로 가기 버튼과 같은 내비게이션 컨트롤을 사용하는 경우가 많습니다. 또한, 일반적으로는 제목 표시줄에 macOS 창(window)의 제목을 표시합니다.

Best practices

유용한 컨텍스트를 제공하는 경우 제목 영역을 사용해 현재 보고 있는 화면에 대해 설명합니다. 화면 제목은 사람들이 앱을 탐색할 때 자신의 위치를 확인하는 데 도움을 줍니다. 하지만 내비게이션 바에 제목을 붙이는 것이 불필요하다고 생각되면 제목 영역을 비워둘 수 있습니다. 예를 들어, 메모 앱은 일반적으로 콘텐츠의 첫 번째 줄에 충분한 정보가 제공되므로 현재 노트의 제목을 표시하지 않습니다. 앱의 이름은 화면이나 콘텐츠 계층에 대한 유용한 정보를 제공하지 않기 때문에 제목으로 적절하지 않습니다.

화면 제목을 간결하게 작성하는 것이 좋습니다. 화면의 목적을 잘 드러내는 단어나 짧은 문구를 사용하세요. 뒤로 가기 버튼과 기타 컨트롤을 위한 충분한 공간을 확보하기 위해 대부분의 화면에서 약 15자를 넘지 않는 것이 좋습니다.

더 몰입감 있는 경험을 위해 일시적으로 내비게이션 바를 숨기는 것을 고려해 보세요. 예를 들어, 사진 앱에서는 전체 화면으로 사진을 볼 때 내비게이션 바 및 기타 인터페이스 요소들을 숨깁니다. 이러한 동작을 구현하는 경우 사용자가 화면읕 터치하거나 아래로 스와이프 하여 내비게이션 바를 복원할 수 있도록 하는 것이 좋습니다.

표준 뒤로 가기 버튼을 사용하세요. 사람들은 표준 뒤로 가기 버튼을 통해 탐색 과정의 전 과정으로 돌아갈 수 있다는 것을 알고 있습니다. 사용자 지정 뒤로 가기 버튼을 구현하는 경우 뒤로 가기 버튼으로 보이도록 하고, 사람들이 예상한 대로 동작하며, 다른 인터페이스와 잘 맞으며 앱이나 게임 안에서 일관된 방법으로 동작하도록 하는 것이 좋습니다. 만약 시스템이 제공하는 화살표( < ) 모양의 버튼을 사용자 지정 이미지로 대체할 경우, 사용자 지정 마스크 이미지 또한 제공할 필요가 있습니다. 예를 들어, iOS는 마스크 이미지를 사용하여 제목이 변할 때 애니메이션을 제공합니다.

텍스트 레이블을 사용하는 버튼에 충분한 공간이 있는지 확인하세요. 내비게이션 바에 텍스트 레이블이 있는 버튼이 두 개 이상 포함되어 있는 경우 해당 버튼의 텍스트가 함께 표시되어 버튼을 구분하지 못하게 될 수 있습니다. 버튼 사이에 고정된 너비의 공간을 삽입해서 구분할 수 있게 하는 것이 좋습니다. 개발자 가이드라인은 UIBarButtonSystemItemFixedSpace을 참고하세요.

Platform considerations

No additional considerations for tvOS. Not supported in macOS.

iOS, iPadOS

내비게이션 바에 세그먼트 컨트롤(segmented control)을 사용하여 정보 계층을 평평하게 만드는 것을 고려해 보세요. 예를 들어, 전화 앱에서는 최근 통화 탭의 내비게이션 바에서 세그먼트 컨트롤을 사용하여 사용자가 모든 최근 통화를 보거나 부재중 전화만 볼 수 있도록 전환할 수 있습니다. 이와 같은 디자인이 앱에 적합하다면 계층 구조의 최상위 계층의 내비게이션 바에만 세그먼트 컨트롤을 배치하고 두 번째 수준에는 원래의 뒤로 가기 버튼 레이블을 만들어야 합니다. 가이드라인은 Segmented controls을 참고하세요.

큰 제목(Large title)을 사용하면 사람들이 탐색하고 스크롤할 때 길을 잃지 않도록 도와줍니다. 예를 들어, 전화 앱에서는 큰 제목을 사용해 현재 탭을 명확하게 표시하고 음악 앱에서도 큰 제목을 사용해 앨범, 아티스트, 재생 목록 및 라디오와 같은 콘테르 영역을 구분합니다. 기본적으로, 큰 제목은 사용자가 콘텐츠를 스크롤하기 시작하면 표준 크기 제목으로 바뀌고, 사용자가 상단으로 스크롤하면 다시 큰 제목으로 바뀌어서 현재 위치를 리마인드 해줍니다. 개발자 가이드라인은 prefersLargeTitles을 참고하세요.

제목과 콘텐츠 간의 상호 연결감을 향상하려면 큰 제목 내비게이션 바의 테두리를 숨기는 것이 좋습니다. 하지만 이 디자인을 표준 크기 제목 내비게이션 바에 적용하는 경우 테두리가 보이지 않는 경우 내비게이션 바의 제목과 버튼을 구분하기 어려울 수 있으므로 주의해야 합니다. 반대로 iPad의 스플릿 뷰에서 기본 뷰와 보조 뷰 간의 일관성을 유지하기 위해서는 두 뷰 모두에 테두리가 없는 스타일을 적용시켜야 할 수 있습니다. 바의 그림자를 제거하여 내비게이션 바의 하단 테두리를 숨길 수 있습니다. (콘텐츠 영역을 스크롤하면 테두리가 자동으로 다시 나타납니다.)