iOS HIG 독서모임 4~5강

Mac App에는 다음과 같은 요소가 들어가야 한다.

• System Preference (환경 설정)
• Keyboard, TrackPad, Mouse, Touch Bar Input
• Rich Text Interaction - 복사 붙여넣기 기능이 있어야 함
• Contextual Menu
  • 어떤 텍스트를 드래그할 때 복사하기, 찾아보기, 공유 등이 나오는 메뉴가 있는데 그 요소가 Mac App에 들어가야 한다는 뜻.
• UI를 함부로 커스터마이징하지 말기. 그냥 애플에 존재하는 UI 그대로 사용하는 것이 좋다 ⭐️⭐️

iOS와 macOS는 뿌리부터 다른 디자인과 컨벤션을 가짐

• iOS는 터치 기반, macOS는 키보드와 마우스.
  • iOS에는 셀을 스와이프로 제거하는 방식이 존재

플랫폼 호환에 가장 큰 영향을 미치는 디자인과 컨벤션들은 4가지 영역으로 나눌 수 있다.

1. 네비게이션(Navigation)

• 많은 iOS와 macOS 앱은 비슷한 방식으로 데이터를 조직화한다.
• 하지만, 두 플랫폼은 서로 다른 컨트롤과 시각적 표시자를 사용한다.
• Adopt macOS App Structure and Navigation Conventions을 참고하자.

1. 사용자 입력과 상호작용(User input and interactions)

• iPad와 Mac은 다양한 기기를 통해 사용자 입력을 받는다.
• 예를 들어, 멀티 터치 디스플레이, 키보드, 마우스, 트랙패드가 있다.
• 키보드와 마우스 상호동작은 macOS의 컨벤션에서 유래한다.
• Support macOS User Interactions을 참고하자.

1. 메뉴(Menus)

• Mac에서는 기본적인 메뉴 구조가 있기에 따라주어야 한다.
• 사용자들은 Mac에서는 메뉴 바에서 컨트롤 하기를 원하고, IOS같은 경우에는 UI에서 컨트롤 하기를 원한다.
• Put App Commands into Menus을 참고하자.

1. 컨텐츠 스케일링(Content scaling)

• macOS 버전의 iPad 앱의 텍스트는 iOS와 같다.
• 왜냐하면 SF 폰트는 두 플랫폼에서 모두 가능하기 때문이다.
• 하지만, iOS의 기본 폰트 사이즈(baseline font size)는 17 pt이다.
• 반면 macOS의 기본 폰트 크기는 13 pt이다.
• macOS 화면에서 인터페이스요소와 글자의 일관성을 원한다면, iOS 뷰는 77%로 스케일 다운되어야 한다.
• Typography을 참고하자.

macOS 앱 구조와 내비게이션 컨벤션을 적용하는 사안

• 잘 설계된 앱 네비게이션은 데이터의 구조를 반영한다. 또한, 플랫폼의 규약을 따르면서 앱의 주요 기능을 제공한다. macOS 사용자가 당신의 앱을 편안하게 느끼려면, iOS 네비게이션 규약을 macOS의 네비게이션 규약으로 변환해야 한다. 대부분의 iPad 앱은 플랫 네비게이션 또는 계층 네비게이션을 사용하거나 둘 모두를 동시에 사용한다
• 플랫네비게이션은 카테고리 혹은 기능들의 영역을 표시한다. 예를 들어, App Store, Apple Music은 플랫 네비게이션 구조를 사용하여 사용자에게 Library와 같은 최상위 영역에 곧바로 접근할 수 있도록 한다. 계층형 네비게이션은 트리와 같은 조직에서 정보를 표현한다. 사용자는 목적지에 도달할 때까지 아이템을 선택하며 탐색하게 된다. 계층형 네비게이션의 가장 유명한 예는 설정(Settings) 앱이다. 설정 앱에서 텍스트를 교체하려면 General > Keyboards > Text Replacement로 이동할 수 있다.
• iPad앱은 아래의 UIKit 컨트롤을 이용하여 네비게이션을 구현한다.
  • 탭바(Tap bar)
  • 페이지 컨트롤(Page control)
  • 스플릿 뷰(split View)
• 아이패드에서 Tap bar를 사용한다면
  • Segmented control 이나 Sidebar background로 바꾸자
  • Segmented control : 하나를 선택하면 나머지 버튼이 선택이 안 되는 컨트롤러
  • Sidebar displays : 맥에 왼쪽에 리스트로 표시되는 것 (유튜브 三 표시 누르면 왼쪽에 쭉 리스트로 뜨는 것 - 홈, Shorts, 구독 등)
• 아이패드에서 split view를 쓴다면
  • macOS는 자동으로 스플릿 뷰를 Mac 버전의 스플릿 뷰로 바꿔준다.
  • 두 플랫폼에서, 첫 뷰는 다양한 아이템의 목록을 보여주는 데 가장 적합하다. 예를 들어, Mail 앱의 메일 박스 리스트가 있다.
  • 왜냐하면, 레이블과 아이콘, 정렬과 필터링 등이 포함되기 때문이다.
  • 하지만, 2 단계 이상의 컨텐츠 계층을 갖는다면, 중간 레벨의 뷰는 Mac 스타일의 윈도우에서는 보이지 않는다.
  • 사람들이 다시 자신이 한 탐색을 뒤로 가도록 하기 위해, 툴 바에 뒤로가기 버튼을 포함하라.
• 페이지 컨트롤을 사용한다면, 또는 레터럴 네비게이션을 활성화하고 싶다면
  • 뷰 페이지에 구체적인 컨트롤을 사용자에게 제공하라.
  • 만약 레터럴 네비게이션의 타입을 지원한다면, 사용자는 툴바에서 다음/이전 버튼을 통해 페이지를 탐색할 수 있어야 한다.
  • 예를 들어, macOS의 Stocks 앱은 툴바에 뒤로 가기 버튼을 제공하며, 뷰 메뉴에서 이전 Stroy 명령이 가능하다.
• 만약 당신의 iPad 앱이 다중 윈도우를 제공한다면
  • macOS 버전에도 다중 윈도우를 제공하라.많은 macOS 앱은 문서를 열 수 있다. 또한, 새로운 윈도우를 여는 대신, 새로운 탭을 열 수 있다.
  • 예를 들어, 사용자는 사파리 윈도우의 다른 웹페이지 탭을 열 수 있다. 파인더 앱의 하나의 윈도우에서 다른 탭은 각자의 파일 시스템 위치를 보여준다.
  • 사용자는 System Preferences 를 이용하여 윈도우 대신 탭을 선호할 수 있다. 시스템은 동적으로 앱의 메뉴에 연관된 메뉴 아이템을 추가한다.
  • 예를 들어, View > Show Tab Bar와 Window > Show Next Tab.이 있다