ch05_iOS가이드라인(3)_bar

학습목표
iOS 가이드라인의 Bar, View, Control 요소를 깊이 이해하고, 실무에서 이를 효과적으로 활용할 수 있도록 한다.

Bar 구성 요소 디자인 시 고려 사항

1. 일관성 유지: 각 Bar는 앱의 나머지 UI와 시각적으로 조화롭게 통합되어야 한다.
2. 간결성:사용자가 직관적으로 이해할 수 있도록 복잡한 요소를 최소화한다.
3. 다크 모드 지원: 다크 모드 및 라이트 모드에서 적절히 표시되도록 디자인.
4. 접근성: VoiceOver와 같은 접근성 기능을 지원하며, 버튼 크기와 간격이 충분히 넓어야 한다.

---

1. 상태 바 (Status Bar)

• 화면 상단에 위치하며, 디바이스의 상태 정보를 표시한다.
• 주요 역할:
  • 시간, 배터리 상태, Wi-Fi 신호, 네트워크 상태 등을 표시.
  • iOS의 시스템 정보를 사용자에게 제공.
• 특징:
  • 앱 화면에 포함될 수도 있고, 앱에 의해 숨길 수도 있다.
  • 다크 모드와 라이트 모드를 지원.

---

2.탐색 바 (Navigation Bar)

• 화면 상단에 위치하며, 앱 내의 계층 구조를 탐색할 수 있는 인터페이스 요소이다.
• 주요 역할:
  • 뒤로 가기 버튼, 제목, 검색창 등을 포함하여 사용자가 이전 화면으로 이동하거나 앱의 특정 섹션으로 이동하도록 지원.
• 특징:
  • 화면의 제목(Label)을 표시.
  • 왼쪽과 오른쪽에 버튼을 배치할 수 있다.
  • Large Title 스타일을 통해 가독성을 높일 수 있다 (타이틀바라고 부르기도 한다.)
  1. 제목 영역과 작성
     • 현재 화면의 맥락을 간단히 제공.
     • 제목이 불필요하면 비워둘 수 있음(예: Notes 앱처럼 콘텐츠가 충분한 정보를 제공하는 경우).
     • 짧고 간결하게 작성(15자 이하 권장).
     • 중복되거나 불필요한 정보를 포함하지 않음.
  2. 탐색 모음 숨기기
     • 전체 화면 콘텐츠를 강조하기 위해 숨길 수 있음(예: Photos 앱).
     • 제스처(탭, 스와이프 등)로 다시 표시 가능.
  3. 뒤로 가기 버튼
     • 표준 뒤로 가기 버튼 사용 권장.
     • 사용자 지정 버튼은 표준 버튼처럼 보이고 작동해야 함.
  4. 버튼 간 간격
     • 텍스트 버튼이 겹치지 않도록 간격을 유지.
     • 고정 공간 항목(UIBarButtonSystemItemFixedSpace) 사용.
  5. 일관성과 접근성
     • 전체 앱에서 탐색 모음의 스타일과 동작을 일관되게 유지.
     • 다크 모드와 접근성 기능을 지원.베스트 적용

---

3. 검색 바 (Search Bar)

• 화면 상단에 위치하며, 단독으로 둘 수도 있고 검색 모음이나 내용 보기에 표시할 수도 있다.
• 사용자로부터 검색어 입력을 받을 수 있는 UI 구성 요소로, 주로 화면 상단에 위치.
• 검색 기능을 지원하여 사용자가 원하는 데이터를 빠르게 찾도록 도움.
• 특징:
  • 입력 필드와 함께 제안 옵션을 표시할 수 있다.
  • 자동 완성, 추천 결과 등의 기능을 제공.
  • 스코프 바(Scope Bar)란?
    • 검색 기능에 추가적으로 제공되는 UI 요소.
    • 검색 범위를 좁히는 옵션을 제공하여 더 정확한 검색 결과를 얻을 수 있도록 도움.\

---

4. 탭 바 (Tab Bar)

• 화면 하단에 위치하며, 주요 섹션 간의 빠른 전환을 제공한다.
• 탭 바의 메뉴들이 서로 밀접하게 관련되어 있으며 같은 화면 안에서 현재의 콘텐츠 내용과 관련된 데이터로 전환한다.
• 사용자가 앱의 최상위 섹션을 탐색할 수 있습니다.
• 주요 역할:
  • 앱의 주요 섹션(탭)을 쉽게 탐색할 수 있도록 아이콘과 텍스트 라벨 제공.
  • 섹션 간 전환 시 상태가 유지되도록 지원.
• 특징:
  • 각 탭에는 아이콘과 텍스트 라벨이 포함될 수 있다.
  • 선택된 탭은 강조색으로 표시된다.
  • SF Symbols와 같은 시스템 아이콘을 사용할 수 있다.
  • 탭 바에는 3~5개의 메뉴를 사용하는 것이 적당하다
  • 사람들이 앱의 다른 섹션으로 이동할 때 탭 바가 보이는지 확인
  • 섹션이 비어 있는 경우 콘텐츠를 사용할 수 없는 이유를 설명
  • 각 탭 제목에 간결한 용어를 사용
  • 배지를 사용하여 정보가 있음을 눈에 띄지 않게 전달 

---

5. Tool bar (툴 바)

화면의 하단(또는 상단)에 위치하여, 현재 화면에서 사용할 수 있는 주요 작업을 제공하는 iOS의 인터페이스 요소이다. 도구 모음은 사용자와의 상호작용을 간편하고 직관적으로 만들기 위해 설계되었다.

주요 특징

• 작업 중심 UI:
  • 현재 화면에서 수행할 수 있는 주요 동작을 버튼 형태로 제공.
  • 예: 삭제, 공유, 추가, 검색.
• 구성 요소:
  • 아이콘, 텍스트 레이블, 또는 둘 다 포함 가능.
  • 버튼 사이에 간격 조정 및 배치를 사용자 정의할 수 있음.

사용 사례

• 기본 작업 제공: 이메일 앱의 삭제, 답장, 전달 버튼.
• 컨텍스트 기반 작업: 특정 콘텐츠나 사용자 동작에 따라 적절한 작업 옵션 제공.
• 공유 및 액션 실행: 공유 버튼을 통한 파일이나 콘텐츠 공유.

디자인 원칙

• 간결성: 너무 많은 버튼을 포함하지 말고, 화면의 핵심 작업에만 집중.(3개이하)
• 일관성: 앱 전반에서 도구 모음의 스타일과 동작이 일관되도록 설계.
• 접근성: 버튼이 충분히 크고 간격이 넓어 터치하기 쉬워야 함.
• 사용자 피드백:버튼을 누르면 즉각적인 시각적/청각적 피드백을 제공.

---

도구 모음과 탐색 바의 차이점

항목	tool bar	navigateion bar
위치	화면 하단	화면 상단
주요 역할	작업 실행	탐색 계층 구조 및 화면 제목 표시
구성 요소	작업 버튼	제목, 뒤로 가기 버튼, 추가 컨트롤