Mac Catalyst

Lawn·2022년 5월 11일

☘️ 코더스 하이 HIG 독서모임

목록 보기

2/13

안녕하세요 🌱 Lawn입니다 코더스하이 윤성관 대표님과 함께하는 HIG 독서모임을 함께하면서 배우게된 내용을 정리해보도록 하겠습니다

HIG Story Mac Catalyst는 윤성관 대표님께서 새로 HIG를 읽어야 겠다고 마음 먹게 되신 계기가 된다. Mac Catalyst 덕분에 이제는 아이패드 용 어플을 만들면 Mac에서도 사용할 수 있다. 여기서 우리는 Mac과 Ipad의 차이를 아는 것이 중요한데, Mac은 항상 키보드가 노출되어있지만 Ipad는 그렇지 않다. 이렇든 Mac과 Ipad는 다르지만 차후 하나로 묶일것이다.

🌱 Before You Start

아이패드에 있는 기능들 (자이로스코프 : 각 축의 회전값을 측정, 엑셀러레이터 : 중력과 힘의 방향 측정)이 Mac에는 없는 경우가 많다. HelthKit or ARKit 등이 Mac에서는 돌아가지가 않는다. (Backside Camera 등이 없기 때문에) 이런 하드웨어적인 기능이 없는 것이 아니면 Mac에서도 잘 돌아갈 것이다.

멀티 테스킹 지원 : Split View, Slide Over, Picture in Picture, Window resizability
드래그 앤 드랍 지원 : 아이패드 앱에서 드래그 앤 드롭을 지원할때, 맥에서도 사용이 가능하다.
키보드 단축키 지원 : 아이패드 앱에서 키보드 단축키를 항상 사용할 수 있는것은 아니지만 맥과 IOS에서는 사용자와 키보드 단축키로 상호작용이 가능하다.

☘️ Plan Enhancements for You Mac App

아이패드 앱을 맥 용으로 만들기 위해 Mac Catalyst를 사용할 때 다음과 같은 맥 을 위한 기능을 자동으로 지원받을 수 있다.

시스템 설정(System Prefernces)
키보드, 트랙패드, 마우스, 터치바 입력, 키보드 네비게이션과 키 포커스(Keyboard, trackpad, mouse, and Touch Bar input)
창 관리(Window management)
Rich text interaction(복사/붙이기), Contextual Menu(글자를 드레그 하면 나오는 복사/찾아보기/공유)
파일관리(File management)

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

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

HIG Story 많은 Mac과 Ipad 용 app들은 비슷하게 구성된다. 하지만 controls 와 visual indicator들은 좀 다르다 (스위치 같은것이 다름, 애플이 만든 스위치 등에는 각 환경에 따른 이유들이 있다.) iOS와 macOS은 각각 디자인 패턴과 컨벤션을 가지고 있다. 예를 들어, iOS의 컨벤션은 스와이프하여 삭제하기, 액션 시트 명령, 그리고 휴대 기기의 터치 상호작용을 최적화하는 화면 하단의 컨트롤이 있다. 같은 방향으로, macOS의 컨벤션은 지정 키, 키보드 단축키, 메뉴 명령, 윈도우의 상단 컨트롤 등이 있다.

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

macOS앱의 디자인 가이드라인 macOS Human Interface Guidelines을 참고하자.

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

네비게이션(Navigation)

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

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

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

메뉴(Menus)

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

컨텐츠 스케일링(Content scaling)

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

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

동작과 컨텐츠의 단일한 칼럼들을 여러 칼럼들로 분할하라
팝오버 내부가 아닌, 메인 컨텐츠옆에 inspector UI를 띄워라.(엑스코드 인스펙터 창처럼)
둘 이상의 앱의 계층 레벨을 동시에 보여라.
더 자세한 사항은 Visual Design Considerations을 참고하자.

HIG Story 작은 욕심에 UI를 커스텀 하지 말아야한다. 애플은 계획이 전부 있다. 커스텀 했을때 애플의 업데이트시 전무 무소용이 될수도 있다. 맥과 아이패드에 둘다 친숙해져야한다. 다양한 기기에 친숙해져야 개발 디자인 기획 등을 할 수가 있다. 내 아이패드 앱을 맥 용으로 바꾸려 하다보면 새로운 개선점이 보인다. 다른 환경으로 바꾸려 한번 해보자. 좋은 경험이 될것이다.

잘 설계된 앱 네비게이션은 데이터의 구조를 반영한다. 또한, 플랫폼의 규약을 따르면서 앱의 주요 기능을 제공한다 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 : 맥에 왼쪽에 리스트로 표시되는 것

아이패드에서 split view를 쓴다면

macOS는 자동으로 스플릿 뷰를 Mac 버전의 스플릿 뷰로 바꿔준다.
두 플랫폼에서, 첫 뷰는 다양한 아이템의 목록을 보여주는 데 가장 적합하다. 예를 들어, Mail 앱의 메일 박스 리스트가 있다.
왜냐하면, 레이블과 아이콘, 정렬과 필터링 등이 포함되기 때문이다.
하지만, 2 단계 이상의 컨텐츠 계층을 갖는다면, 중간 레벨의 뷰는 Mac 스타일의 윈도우에서는 보이지 않는다.
사람들이 다시 자신이 한 탐색을 뒤로 가도록 하기 위해, 툴 바에 뒤로가기 버튼을 포함하라.

페이지 컨트롤을 사용한다면, 또는 레터럴 네비게이션을 활성화하고 싶다면

뷰 페이지에 구체적인 컨트롤을 사용자에게 제공하라.
만약 레터럴 네비게이션의 타입을 지원한다면, 사용자는 툴바에서 다음/이전 버튼을 통해 페이지를 탐색할 수 있어야 한다.
예를 들어, macOS의 Stocks 앱은 툴바에 뒤로 가기 버튼을 제공하며, 뷰 메뉴에서 이전 Stroy 명령이 가능하다.

만약 당신의 iPad 앱이 다중 윈도우를 제공한다면

macOS 버전에도 다중 윈도우를 제공하라.많은 macOS 앱은 문서를 열 수 있다. 또한, 새로운 윈도우를 여는 대신, 새로운 탭을 열 수 있다.
예를 들어, 사용자는 사파리 윈도우의 다른 웹페이지 탭을 열 수 있다. 파인더 앱의 하나의 윈도우에서 다른 탭은 각자의 파일 시스템 위치를 보여준다.
사용자는 System Preferences 를 이용하여 윈도우 대신 탭을 선호할 수 있다. 시스템은 동적으로 앱의 메뉴에 연관된 메뉴 아이템을 추가한다.
예를 들어, View > Show Tab Bar와 Window > Show Next Tab.이 있다

☘️ Support macOS User Interactions

Selection persistence는 사용자 인터랙션에서 iOS와 macOS의 기본적인 차이점이다. 많은 macOS 사용자들은 키보드만 사용해서 앱과 시스템을 사용하기 때문에 사용자들이 키를 누름으로써 오브젝트를 선택하는 과정과 그것을 작동시키는 다음 과정을 위해 오브젝트들의 선택된 상태는 지속되어야 한다. 반면에, iOS 사용자들은 선택하는 과정 없이 동작하기를 기대하기 때문에, 오브젝트의 선택된 상태가 필요하지 않다. 일반적으로, iOS 앱들은 키보드 인터랙션에 최적화되지 않는 경향이 있다.

예를 들면 macOS에서는 키보드의 순차적인 선택으로 다양한 핫키를 구현할 수있지만 아이패드에서는 UI로 기능을 구현해 주어야 한다.

사용자 경험에 영향을 미칠 수 있는 몇 가지 다른 인터랙션 규칙이 있다.

맥에서는 기본적으로 삭제 버튼의 UI를 사용 안해도 된다. 상단의 취소를 통해 창을 닫을 수 있기 때문에
iOS 사용자들은 콘텐츠를 새로고침 하기 위해서 화면을 잡아당기는(풀 리케스트) 것에 익숙하다. 반면에, 맥 사용자들은 Check for New Content와 같은 메뉴의 커맨드를 사용한다.

☘️ Keyboard Input

사용자가 화살표 키를 사용하거나 문자 및 숫자 키를 눌러 선택을 변경할 수 있도록 해줘야한다. 맥 사용자들은 키보드와 마우스 또는 트랙패드를 동시에 사용한다. 아이패드 앱에 UIKeyCommand를 구현하여 명령에 대한 키보드 시퀀스를 정의하면, macOS 버전의 앱은 이런 단축키들을 메뉴로 표시한다. 아이패드 앱의 UI에 삭제 버튼이 있다면, macOS 버전에서는 사용자가 삭제 키나 편집 - 삭제 명령을 대신 사용할 수 있어야 한다.

☘️ Gestures

아이패드 앱이 macOS에서 실행될 때, 대부분의 제스처들은 다음과 같이 자동으로 변환된다.

☘️ Put App Commands into Menus

맥에서 화면의 최상단의 메뉴 바는 고정되어 있어 사용자가 앱과 시스템을 제어할 수 있어야 한다. 메뉴 바는 기본 메뉴와 현재 앱에서 제공된 커스텀 메뉴를 포함한다.

앱 이름(App Name)
파일(File)
편집(Edit)
보기(View)
윈도우(Window)
도움말(Help)

Developer Note 아이패드 앱 각각의 명령어를 나타내기 위해서 UICommand 꼭 사용하자,
명령어들이 macOS의 메뉴바에 포함될 수 있다.
명령어들의 키보드 단축키를 지원하기 위해서, UIKeyCommand를 사용하자. -> 선택사항

아이패드 앱은 메인 UI에서 controls를 사용하기 때문에, 논리적이며 직관적인 메뉴 바 위치를 찾는 것이 가장 중요하다.

macOS 버전의 앱을 위한 menu bar menus를 설계하기 위해서는, 사용자들이 수행할 수 있는 모든 동작들을 나열하는 것으로 시작하고, 표준 menu bar menus를 기준으로 정의된 카테고리로 그룹핑해야한다.

대부분의 macOS 앱들은 View 메뉴와 Window 메뉴를 갖고 있다. 이런 메뉴들은 비슷해 보일 수 있으나, 다른 목적이 있다. 사용자들은 앱 윈도우의 모양을 커스텀하고 그리고 다른 기능적인 영역 사이를 이동하기 위해서 View 메뉴를 사용하는 반면, Window 메뉴를 사용하여 앱 내의 윈도우의 컬렉션을 탐색하고 조직하며 관리한다.

리스트에 있는 몇 가지 기능들이 기본 menu bar menus에서 적합하지 않다면, 커스텀 메뉴에 추가하자. Mac 앱들은 종종 커스텀 menu bar menu에 명령어들을 추가하는데, 이 명령어들은 핵심적인 앱 워크플로우와 관계가 있다. 예를 들어, macOS에서 메일 앱은 메시지와 메일함 메뉴를 사용하고, 키노트 앱은 Arrange 메뉴를 사용한다.

앱의 기능들은 메뉴로 그룹화한 후, 적절한 방식으로 메뉴 순서를 정해야 한다. 표준 메뉴는 권장순서가 있기때문에 이 순서를 따르는 것이 중요하다.

새로운(New)
열기(Open)
최근에 사용한 파일 열기(Open Recent)
닫기(Close)

Note 커스텀 menu bar 에서 중요성, 사용 빈도, 또는 앱에서 의미에 따라 항목들의 순서를 정해야 한다.
또한, 키보드를 사용하는 맥 또는 아이패드 사용자가 이점을 얻을 수 있도록, 메뉴에서 자주 사용되는 명령어의 키보드 단축키를 지원해야 한다. 기본 메뉴 뿐만 아니라 커스텀 항목에 대한 단축키도 정의할 수 있다.

☘️ Visual Design Considerations

macOS에 맞게 아이패드 앱이 실행되는 것을 돕기 위해서, 다음과 같은 시각적인 디자인의 영역에서 플랫폼의 차이를 고려하자.

Layout

맥 사용자들은 앱 창의 크기를 전체 화면부터 앱이 허용하는 한 작은 사이즈로 조정할 수있다. 때문에 우리는 이런 맥의 넓은 디스플레이의 이점을 활용하기 위해서, 사이즈 클래스를(오토 레이아웃) 사용하고, 필요하다면 윈도우 콘텐츠 영역의 요소를 나란히 배치하도록 조정하자.

가능한 탑 다운 레이아웃을 채택하자. macOS 앱들은 대부분의 중요한 동작과 콘텐츠를 창의 최상단에 위치시킨다. 아이패드 앱이 툴바나 내비게이션 바에 controls를 제공한다면, 이러한 controls를 macOS버전 앱의 윈도우 툴바에 놓자.

controls를 아이패드 주요 UI에서 macOS 윈도우 툴바로 옮기는 것을 고려하자.

화면의 왼쪽이나 오른쪽 가장자리로부터 버튼들을 재배치 하자. 아이패드에서는 사용성을 위해 접근성이 좋은 위치에 버튼을 위치하지만, 맥에서는 이러한 인체공학적인 요소가 중요하지 않다. controls를 콘텐츠 영역의 최상단 혹은 최하단 가장자리에 재배치하거나 macOS 윈도우의 툴바에 위치시키자.

Color

두 기기에서 모두 사용할 수있는 색을 사용하자.

iOS 배경을 위해 설계된 dynamic system colors는 아래 표에서 보이는 것과 같이 자동으로 macOS에 맞춰서 적용이 된다.

테이블 행의 버튼에는 색을 지정하지 말자. 아이패드 앱에서, 테이블의 행에 있는 버튼이 활성화되어 있는 것을 보여주기 위해서 색조를 사용하지만, macOS에서 테이블 행의 색이 있는 버튼은 어색하다.

Typography

시스템에 의해 자동으로 크기가 조절되는 것은 양쪽 기기 모두 자동으로 잘 적용이 되지만, 모든 상황에서 최상의 결과를 얻는 것은 아니다.

맥에서 작은 글씨를 읽을 수 있는지 확인하자. 아이패드 앱에서 사용하는 가장 작은 폰트 크기를 키워 macOS 버전에서도 모든 텍스트를 읽을 수 있도록 준비하자. 또한 Dynamic Type은 macOS에서는 지원되지 않는다.

Custom Icons and Glyphs

macOS 버전의 앱 아이콘을 제작하자. 최고의 macOS 앱 아이콘은 최고의 iOS 아이콘과 다르다. 예를 들어, macOS 아이콘들은 사각형이 아닌 모양일 수도 있고, 비스듬 하거나 회전할 수도 있다. 당신의 앱 아이콘을 맥용 버전을 위한 것으로 디자인하면 더 좋다.

필요하다면, 기기에 맞춘 기호를 제작하자. 아이패드 앱에서 커스텀 기호를 사용한다면, 맥에서 최적화된 기호를 제작하자. Xcode는 아이패드에서 사용할 수 있는 macOS 전용의 별도 asset 카탈로그를 제공한다.

Preferences

macOS는 자동으로 Ios 설정 항목들을 맥 버전의 preferences window에서 보여준다. 기본적으로, macOS는 설정 앱에서 사용되는 항목들의 화면들에 기본 시스템 속성 아이콘과 제목을 부여하여, preferences window에 iOS 설정에 있는 각 항목들을 툴바 버튼에 추가한다.

앱 메뉴에서 기본 설정 메뉴 항목을 선택하면 기본 설정 창이 나타난다. 하지만, 설정 항목의 표시를 세분화하여 앱의 기본 설정을 Mac처럼 느끼게 하는 몇 가지 방법이 있습니다.

각 항목의 툴바 버튼 아이콘을 커스텀하자. macOS는 자동으로 기본 시스템 설정 아이콘을 사용하기 때문에, 사용자들은 다른 여러 항목들 중에서 구별하기 위해 각 툴바 버튼의 제목을 읽어야 한다. 별로 좋지 못한 사용자 경험이기 때문에 각 설정 항목의 커스텀 아이콘을 사용하면 좋다.

macOS 사용자들이 이해할 수 있도록 스위치 controls을 더 쉽게 만들자. 아이패드 앱과 달리, macOS 앱은 종종 시스템 속성에서 변경하기 위해 스위치를 사용하면 확인 창을 보여준다. 게다가, iOS 설정 앱에 있는 스위치는 어떻게 스위치가 사용자 경험에 영향을 미치는지와 같은 많은 양의 정보를 적은 양의 텍스트에 포함할 수 있다. 맥 버전의 앱에서는 macOS 스위취와 함께 간단한 설명을 제공할 수 있고, 사용자가 설정을 변경하기 위해 사용할 때 확인 창을 표시할 콘텐츠를 지정할 수 있다.