본문 바로가기

iOS/UIUX

[HIG] Mac Catalyst: Mac 앱을 위한 계획

여러분은 iPad 앱의 맥 버전을 생성하기 위해 맥 카탈리스트를 사용할 것이다.

맥 카탈리스트는 맥의 기초적인 기능들을 지원한다.

  • 시스템 설정
  • 키보드, 트랙패드, 마우스, 터치바 입력, 키보드 네비게이션과 키 포커스
  • 윈도우 관리
  • 풍부한 텍스트 상호동작, 복사와 붙여넣기와 수정을 위한 문맥상 메뉴
  • 파일 관리

시스템에서 제공하는 UI 요소들은 자동으로 iOS에서 macOS로 변환된다.
예를 들어, 다음의 iOS에서 제공하는 아이템들이 macOS에 적합한 아이템으로 바뀌는 것들은 다음과 같다.

  • 스플릿 뷰(Split view)
  • 파일 브라우저(File browser)
  • 액티비티 뷰(Activity view)
  • 폼 시트(Form sheet)
  • 문맥상 동작(Contextual actions)

당신의 앱이 Mac에서도 사용자 경험을 풍부하게 하려면 어떻게 해야할까?
단순히 macOS 윈도우에 iOS UI를 표시하는 것을 넘어서야 한다.
특정 뷰나 컨트롤을 수정하기 전에, 플랫폼들의 차이점에 친숙해야한다.
macOS앱의 디자인 가이드라인은 macOS Human Interface Guidelines를 참고하라.

iOS와 macOS은 각각 디자인 패턴과 컨벤션을 가지고 있다.
예를 들어, iOS의 컨벤션은 스와이프하여 삭제하기, 액션 시트 명령, 그리고 휴대 기기의 터치 상호작용을 최적화하는 화면 하단의 컨트롤이 있다.
같은 방향으로, macOS의 컨벤션은 지정 키, 키보드 단축키, 메뉴 명령, 윈도우의 상단 컨트롤 등이 있다.

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

  1. 네비게이션
  • 많은 iOS와 macOS 앱은 비슷한 방식으로 데이터를 조직화한다.
  • 하지만, 두 플랫폼은 다른 컨트롤과 시각적 표시자를 사용한다.
  • 더 자세한 사항은 다음 Adopt macOS App Structure and Navigation Conventions을 참고하라.
  1. 사용자 입력과 상호작용
  • iPad와 Mac은 다양한 기기를 통해 사용자 입력을 받는다.
  • 예를 들어, 멀티 터치 디스플레이, 키보드, 마우스, 트랙패드가 있다.
  • 키보드와 마우스 상호동작은 macOS의 컨벤션에서 유래한다.
  • 더 자세한 사항은 Support macOS User Interactions을 참고하라.
  1. 메뉴
  • Mac 사용자는 메뉴 바에 친숙하며 메뉴 바에서 모든 앱의 명령을 찾는 것을 예상한다.
  • 반면, iOS는 항상 떠있는 메뉴 바가 없다. iOS 사용자는 앱의 UI에서 앱에 명령을 찾을 것을 기대한다.
  • 더 자세한 사항은 Put App Commands into Menus을 참고하라.
  1. 컨텐츠 스케일링
  • macOS 버전의 iPad 앱의 텍스트는 iOS와 같다.
  • 왜냐하면 SF 폰트는 두 플랫폼에서 모두 가능하기 때문이다.
  • 하지만, iOS의 기본 폰트 사이즈(baseline font size)는 17 pt이다.
  • 반면 macOS의 기본 폰트 크기는 13 pt이다.
  • macOS 화면에서 인터페이스요소와 글자의 일관성을 원한다면, iOS 뷰는 77%로 스케일 다운되어야 한다.
  • 더 자세한 사항은 Typography을 참고하라.

macOS의 상호작용과 디자인 컨벤션을 적용하기 위해서, 시각적 디자인과 레이아웃을 수정하여 맥의 넓은 화면의 이점을 살려야 한다.
예를 들어,

  • 동작과 컨텐츠의 단일한 칼럼들을 여러 칼럼들로 분할하라
  • 팝오버 내부가 아닌, 메인 컨텐츠옆에 inspector UI를 띄워라.
  • 둘 이상의 앱의 계층 레벨을 동시에 보여라.

더 자세한 사항은 Visual Design Considerations을 참고하라.

macOS 디자인 컨벤션의 관점에서 iPad앱은 iOS 버전을 향상할 수 있는 방법들을 제공한다.
비록 당신이 각가의 플랫폼의 컨벤션을 유지하길 원하더라도, 당신의 앱의 디자인을 다시한번 검토하라.
특히, 당신의 iPad앱이 iPhone을 기반으로 했다면, 그럼으로써, 큰 iPad 화면을 활용할 수 있는 공간을 위해 레이아웃 뷰와 컨트롤을 다시 살펴보아라.

Ideally, viewing your iPad app from the perspective of macOS design conventions can suggest ways to improve the iOS version, too. Although you want to make sure that each version remains true to the conventions of its platform, take this opportunity to revisit the design of your original app. Especially if your iPad app originated on iPhone, consider reassessing the ways you lay out views and controls to see if there are places where you can make better use of the large iPad screen.


https://developer.apple.com/design/human-interface-guidelines/ios/overview/mac-catalyst/