Navigation bars

 

Navigation bars | Apple Developer Documentation

💡 Navigation Bars는 앱이나 게임에서 방향을 잡고 도움이 되는 제목을 표시할 수 공간을 제공, 추가적으로 아래에 콘텐츠에 영향을 주는 컨트롤 (검색 등…)도 포함하는 컴포넌트
💡 macOS는 탐색 모음을 제공하지 않는다. macOS 앱은 탐색을 위해 사이드바 또는 툴바의 뒤로가기 버튼을 주로 사용 하거나 제목 표시줄에 macOS 창의 제목을 표시합니다.

Best practices

• 타이틀 영역에 현재 창을 설명하는 것은 앱의 맥락 상 유용할 때 적용할 것: 제목은 사람들이 앱을 탐색할 때 자신의 위치를 확인하는 데 도움을 주지만, 네비게이션 바에 제목을 붙이는 것이 불필요해 보인다면 제목 영역을 비울 것.
  • 기본 노트 앱의 경우, 콘텐츠의 첫 줄로 충분한 맥락을 제공하기 네비 바에 노트 제목을 붙이지 않는다.
  • 앱 이름을 네비 바 제목으로 설정하는 것은 콘텐츠 계층 구조나 앱의 창이나 화면에 대한 정보를 제공하지 않으므로 적용하지 말 것

타이틀을 네비게이션 영역에서 작성할 수 있어 제목을 따로 붙이지 않아도 명확한 의미전달이 가능

• 간결한 제목을 작성할 것: 뒤로 버튼과 추가 버튼을 위한 충분한 공간을 확보할 수 있도록 최대한 15자를 넘지 않을 것
  • 창, 화면의 목적을 간결하게 표현하는 단어 혹은 짧은 문구를 사용할 것
• 몰입형 환경을 위해 일시적인 내비게이션 바 숨기기 고려해 볼 것: iOS, iPadOS 및 macOS 사진앱 전체 화면 보기 적용 시, 탐색 모음 및 기타 인터페이스 요소를 숨김
  • 이런 유형의 동작을 구현하는 경우, 탭이나 아래로 스와이프와 같은 익숙한 제스처를 사용하여 탐색 모음을 복원할 수 있도록 할 것
  • 비전OS에선 창(Window)의 탐색 막대를 숨길 수 있지만, Apple Vision Pro만의 몰입형 경험 지침 참고해서 설계
    Immersive experiences | Apple Developer Documentation
• 표준(애플에서 미리 구현한) Back 버튼 구성을 최대한 사용할 것: 표준 Back Button은 이전 뷰가 무엇이었는지 정보를 제공한다.
  • 사용자 지정 뒤로 버튼을 구현할 경우, Back Button 버튼처럼 보이고, 사용자가 기대하는 대로 작동하며 앱이나 게임 전체에서 일관되게 구현되는지 확인할 것
  • 시스템에서 제공하는 Chevron Left 이미지를 사용자 지정 이미지로 대체하는 경우, 사용자 지정 이미지에 대한 마스크도 제공해야 한다. (탭을 누르고 있을 때 뒤로가는 것이라는 표시)
    ✅ 예를 들어 iOS는 이 마스크를 사용하여 전환 중에 버튼 제목에 애니메이션을 적용

표준 backbutton의 경우 깊게 들어가면 이전의 뷰 네비게이션 타이틀을 보여주는 정보를 제공함

• 텍스트 레이블을 사용하는 버튼에 충분한 공간이 있는지 확인할 것: 버튼 사이에 고정 공백 항목을 삽입하여 구분하도록 만들 것
  • 개발자는 UIBarButtonSystemItemFixedSpace 명세서 참고
    UIBarButtonSystemItemFixedSpace | Apple Developer Documentation

👉 네비게이션 바 보단, 툴바에서 사용하면 체감이 더 크다.
텍스트가 있는 버튼이 두 개 이상인 경우, 버튼을 구분할 수 없게 된다.

Platform considerations

tvOS는 고려할 것 없음, macOS는 지원하지 않음

iOS, iPadOS

• 네비게이션 바에서 세그먼트 컨트롤을 사용해 계층 구조를 평평하게 만드는 것을 고려볼 것
  • 전화 앱에 최근 탭안에 네비게이션 바 모음에 세그먼트 컨트롤을 사용해 사용자가 모든 최근 통화를 보거나 부재중 전화만 볼 수 있도록 만들었다.
  • 이와 같은 디자인이 적용시, 계층 구조 최상위만 세그먼트 컨트롤을 배치하고 두 번째 계층 화면 이후는 에 대한 정확한 뒤로가기 버튼 텍스트를 입력해야 한다.

통화 앱 네비게이션 내부 세그먼트 컨트롤 사용

• 큰 제목을 사용해 사람들이 탐색하고 스크롤할 때 위치를 헷갈리지 않도록 할 것
  • 전화에서는 큰 제목을 사용하여 활성 탭을 명확하게 표시
  • Music 앱의 홈 탭은 큰 제목을 사용하여 앨범, 아티스트, 재생 목록 및 라디오와 같은 콘텐츠 영역을 구분
  • 큰 제목은 사용자가 콘텐츠를 스크롤하기 시작하면 표준 제목으로 전환되고, 사용자가 상단으로 스크롤하면 다시 큰 제목으로 전환되어 현재 위치를 알려주는 기능을 갖는다.

음악 앱의 스크롤시 네비게이션 스타일 전환... LargeTitle에서는 콘텐츠와 색깔을 구분하지 않음

💡 개발자 지침은 prefersLargeTitles를 참조하세요.

prefersLargeTitles | Apple Developer Documentation

• 제목과 콘텐츠 간의 연결감을 위해 navigationBar Largetitle 사용시 테두리를 숨길 것
  • 이 디자인을 적용하는 경우 Standard title에 테두리가 보이지 않으면 제목과 버튼을 구분하기 어려울 수 있으므로 주의해야 합니다. ⇒ 그래서 스크롤이 되면 Navigation Bar 배경에 Material을 설정한다.
  • iPad 분할 보기에서 기본 View와 보조 View 간에 일관성을 유지하려면 두 보기 모두 테두리 없는 스타일을 사용해야 할 수 있음.바의 그림자를 제거하여 탐색 막대의 하단 테두리를 숨김 (콘텐츠 영역을 스크롤하면 테두리가 자동으로 다시 나타납니다).

visionOS

💡 콘텐츠가 뒤로 스크롤될 때 탐색 모음 항목의 가독성을 유지하기 위해 비전OS는 바 배경에 가변 블러를 사용합니다.
가변 블러는 뷰의 유리 재질을 균일하고 분할되지 않은 상태로 유지하면서 스크롤되는 콘텐츠 위에 바를 고정합니다.

• 탐색 모음에서 표준 구성 요소를 사용하는 것을 선호합니다.
  • 비전OS에서 탐색 모음 모서리는 60pt 정도의 곡선을 사용합니다.
  • 기본 표준 버튼, 텍스트 필드, 머리글 및 바닥글에는 막대 모서리와 원형을 유지하는 모서리 반경이 있습니다. 사용자 지정 구성 요소를 만들어야 하는 경우 다음 공식을 사용하여 모서리 반경도 바 모서리와 동심원이 되도록 할 수 있습니다:

👉 공식: Radius = 60pt - Padding
Radius는 사용자 지정 컴포넌트의 모서리 반경이고 패딩은 상단 패딩 또는 하단 패딩의 값(이 값이 동일할 경우)입니다.

• 큰 제목을 사용하면 사람들이 탐색하고 스크롤할 때 방향을 잡는 데 도움이 됩니다.
  • 탐색 스택의 맨 위에 있는 뷰에 큰 제목을 표시하고 스택의 다른 모든 뷰의 탐색 모음에 표준 제목을 중앙에 배치하는 것이 효과적
  • 기본적으로 큰 제목은 사용자가 콘텐츠를 스크롤하기 시작하면 표준 제목으로 전환되고, 사용자가 맨 위로 스크롤하면 다시 큰 제목으로 전환되어 현재 위치를 상기시켜 줍니다.
  • 개발자 지침은 prefersLargeTitles를 참조하세요.

watchOS

Apple Watch NavigationBar는 세가지 스타일로 제공

1. LargeTitle을 사용
2. 뒤로가기가 존재
3. 내비게이션 버튼을 사용

• 버튼이 없는 경우 모든 시간 표시뷰는 Top Trailing에 위치한다.
• 버튼이 존재하면 시간 표시뷰와 타이틀은 중앙에 위치한다.
• Safe Area를 사용하여 콘텐츠가 둥근 모서리에 잘리지 않도록 할 수도 있습니다. 지침은 레이아웃을 참조하세요.

👉 watchOS는 perfersLargeTitle을 지원하지 않음!!

예전 HIG NavigationBar 내용

• Logical / Predicatable / Easy to follow ⇒ 되도록 하나의 Path로 연결할 것
• 수평적 네비게이션에는 탭바를 사용해라
• 멀티 페이지가 존재한다면 페이지 컨트롤러를 사용해라 (SegmentController, Toolbar)

같이보면 좋은 WWDC 자료

✅ iPhone X 이후 나타난 제스처 인터페이스 설정에 대한 발표

Designing Fluid Interfaces - WWDC18 - Videos - Apple Developer

✅ WWDC22에서 발표한 앱 전체 플로우 설계하는 방법 → 🇰🇷 한국어 지원

Explore navigation design for iOS - WWDC22 - Videos - Apple Developer