Choosing a User Interface Idiom for Your Mac App

https://developer.apple.com/documentation/uikit/mac_catalyst/choosing_a_user_interface_idiom_for_your_mac_app

"Select the iPad or the Mac user interface idiom in your Mac app built with Mac Catalyst."

맥 Catalyst에서 빌드된 맥 앱에서 아이패드 혹은 맥 UI idiom을 선택합니다.

Overview

맥 Catalyst로 빌드된 맥 앱은 UIUserInterfaceIdiom.pad 혹은 UIUserInterfaceIdiom.mac UI idiom에서 실행될 수 있습니다. 앱이 실행되는 idiom을 선택하려면 Xcode 프로젝트에서 맥 Catalyst를 활성화한 후 아래 옵션 중 한 가지를 선택해야 합니다.

Scale Interface to Match iPad
UIUserInterfaceIdiom.pad idiom에서 앱을 실행합니다. 아이패드 앱을 맥으로 빠르게 가져오기 위해 이 옵션을 선택할 수 있습니다.

Optimize Interface for Mac
UIUserInterfaceIdiom.mac idiom에서 앱을 실행합니다. AppKit에서 사용할 수 있는 것과 같은 모습으로 보이고 동작하는 컨트롤을 보여주기 위해 이 옵션을 선택할 수 있습니다.

Note
맥 Catalyst를 활성화하는 것에 대해서는 Creating a Mac Version of Your iPad App을 보시기 바랍니다.

https://developer.apple.com/documentation/uikit/mac_catalyst/creating_a_mac_version_of_your_ipad_app
https://velog.io/@panther222128/Creating-a-Mac-Version-of-Your-iPad-App

Start with the iPad Idiom

기본값으로 Xcode는 맥 Catalyst를 활성화한 후 Scale Interface to Match iPad를 선택합니다. 이 옵션은 아이패드 앱을 맥으로 가져오기 위한 단순화된 접근방법을 제공합니다. UIUserInterfaceIdiom.pad idiom에서 실행되는 맥 앱은, 아이패드에서 보였던 모습과 뷰 메트릭스를 보존한 채로, 맥 디스플레이 환경에 맞춰질 수 있도록 앱의 UI를 조정하길 macOS에게 알려줍니다.

앱을 테스트할 때, AppKit에 있는 것처럼 보이고 동작하는 컨트롤을 채택하는 것 혹은 crisper-looking 텍스트를 제공하는 것은 앱의 사용자 경험을 강화해줍니다. 이 경우 Optimize Interface for Mac을 선택하는 것을 통해 UIUserInterfaceIdiom.mac으로 변경해야 합니다. 그러나 이 옵션을 선택하는 것은 앱에 대한 추가적인 변경사항을 요구하게 될 것입니다.

Update Your App to Use the Mac Idiom

Optimize Interface for Mac을 선택하는 것은 앱의 인터페이스를 변경시키는 UIUserInterfaceIdiom.mac UI idiom에서 맥 앱이 작동한다는 것을 의미합니다. 어떤 컨트롤은 크기와 모양이 변경될 것입니다. 그리고 이 컨트롤에 상호작용하는 것은 AppKit에 있는 컨트롤에 상호작용하는 것과 동일하게 느껴질 것입니다. 예를 들어 UIButton은 NSButton과 동일하게 나타납니다.

UI idiom이 UIUserInterfaceIdiom.mac인 경우 시스템은 컨트롤의 크기를 적절하게 설정하기 때문에 시스템은 맥의 크기에 맞춰 앱의 인터페이스 크기를 조정할 필요가 없게 됩니다. 스크린 포인트는 AppKit 기반이 앱과 동일하게 됩니다. 그러나 만약 앱이 아이패드에서 하드코딩된 크기를 갖거나 크기가 정해진 이미지를 갖는 경우 크기 차이를 수용할 수 있도록 앱을 업데이트해야 할 필요가 있습니다. 오토 레이아웃 제약 또한 조정할 필요가 있습니다.

몇 가지 컨트롤은 맥에 적합한 모양을 갖출 수 있도록 돕는 추가적인 설정을 제공합니다. 예를 들어 UISwitc는 preferredStyle을 UISwitch.Style.checkbox로 설정함으로써 idiom이 UIUserInterfaceIdiom.mac일 때 체크박스로 나타납니다. 그러면 제목을 체크박스의 텍스트로 설정합니다.

let showFavoritesAtTop = UISwitch()
showFavoritesAtTop.preferredStyle = .checkbox
if traitCollection.userInterfaceIdiom == .mac {
    showFavoritesAtTop.title = "Always show favorite recipes at the top"
}

UIPageControl, UIRefreshControl, UIStepper는 맥 idiom에서 작동하는 앱에서 사용이 불가능합니다. 만약 뷰에 이 컨트롤을 표시하려고 시도한다면, 앱은 예외를 반환할 것입니다. UI idiom이 UIUserInterfaceIdiom.mac인 경우 이와 같은 컨트롤을 유사한 기능을 하는 다른 무엇으로 대체해야 합니다. 예를 들어 제목이 "Refresh"인 UIKeyCommand 객체를 생성하고 키보드 단축키를 커맨드 R로 지정함으로써 UIRefreshControl을 Refresh 메뉴 아이템으로 대체할 수 있습니다. 그리고 앱의 메뉴 시스템에 커맨드를 추가합니다. 더 많은 정보는 Adding Menus and Shortcuts to the Menu Bar and User Interface를 살펴보시기 바랍니다.

Determine the Current User Interface Idiom

앱이 맥 idiom에서 실행할 수 있는지 결정하려면 iserInterfaceIdiom 속성의 값과 UIUserInterfaceIdiom.mac을 비교해야 합니다. 비교가 true라면, 맥에 적합하게 동작을 조정할 수 있습니다. 예를 들어 다른 자식 뷰를 보여주는 것이 있습니다.

let childViewController: UIViewController
if traitCollection.userInterfaceIdiom == .mac {
    childViewController = MacOptimizedChildViewController()
} else {
    childViewController = ChildViewController()
}
addChild(childViewController)
childViewController.view.frame = view.bounds
view.addSubview(childViewController.view)
childViewController.didMove(toParent: self)

Set the Preferred Behavioral Style

맥 idiom을 채택하는 경우 UIButton, UISlider와 같은 몇 가지 컨트롤은 AppKit에 상응하는 것과 동일하게 나타납니다. 그러나 앱에서 맥 idiom의 이점을 사용하길 원하는 상황이면서도 컨트롤의 모양과 동작을 아이패드에 있었던 것의 형태로 유지하고 싶을 수 있습니다. 예를 들어 커스텀 thumb 이미지로 슬라이더를 표시하는 아이패드 앱을 생각할 수 있습니다. 기본값으로 맥 Catalyst로 빌드된 맥 버전의 앱은 UI idiom이 UIUserInterfaceIdiom.mac인 경우 표준 macOS 슬라이더를 표시합니다.

아이패드와 맥 버전의 앱에 있어 슬라이더의 모양을 일관되게 제공하길 원한다면, 슬라이더의 preferredBehavioralStyle을 UIBehavioralStyle.pad로 설정해야 합니다. 이 동작 스타일은 앱이 맥 idiom을 사용하고 있더라도 UI idiom이 마치 UIUserInterfaceIdiom.pad인 것처럼 동작해야 함을 슬라이더에게 알려줍니다.

맥 idiom을 사용하는 앱의 인터페이스는 조정되지 않기 때문에 선호되는 동작 스타일이 UIBehavioralStyle.pad일지라도 크기 차이를 수용하기 위해서는 앱을 업데이트할 필요가 있다는 것을 기억하시기 바랍니다. 예를 들어 커스텀 thumb 이미지를 갖는 슬라이더는 아이패드에서 사용된 것이 아닌, 맥 앱을 위한 다른 크기의 이미지가 필요할 것입니다.

let slider = UISlider()
slider.minimumValue = 0
slider.maximumValue = 1
slider.value = 0.5
slider.preferredBehavioralStyle = .pad

if slider.traitCollection.userInterfaceIdiom == .mac {
    slider.setThumbImage(#imageLiteral(resourceName: "customSliderThumbMac"), for: .normal)
} else {
    slider.setThumbImage(#imageLiteral(resourceName: "customSliderThumb"), for: .normal)
}

동작 스타일이 UIBehavioralStyle.mac인 경우 맥 idiom에서 UIButton, UISlider의 지원되지 않는 속성 및 메소드가 몇 가지 존재합니다. 이는 예외를 반환합니다. 예를 들어 버튼의 제목 혹은 이미지를 노멀이 아닌 다른 컨트롤 상태로 설정하는 것, 슬라이더의 thumb 이미지를 설정하는 것, 최소 혹은 최대 트랙 이미지 설정, 틴트 컬러, 값 이미지와 같은 것들이 있습니다. 그러나 이 속성들과 메소드들은 컨트롤의 동작 스타일이 UIBehavioralStyle.pad인 경우 맥 idiom에서도 사용이 가능합니다.

Provide a Different Code Path

UIUserInterfaceIdiom.pad idiom에서 맥 앱이 동작하는 경우에서도 맥 앱의 모양과 동작을 변경시킬 필요가 있을 것입니다. 목표 환경에 따라 다른 코드 경로를 선택할 수 있도록 targetEnvironment() 컴파일 조건을 선택하시기 바랍니다.

예를 들어 만약 아이패드 앱에서 삭제 버튼 옆으로 팝오버에 아이템 삭제 확인을 표시하는 경우에 맥 앱에서는 삭제 확인이 경고처럼 나타나길 원한다면, 경고 컨트롤러의 선호되는 스타일을 결정하기 위해 targetEnvironment() 조건을 추가하시기 바랍니다.

let deleteAction = UIAlertAction(title: "Delete", style: .destructive) { (action) in
    if dataStore.delete(recipe) {
        self.recipe = nil
    }
}

let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)

#if targetEnvironment(macCatalyst)
let preferredStyle = UIAlertController.Style.alert
#else
let preferredStyle = UIAlertController.Style.actionSheet
#endif

let alert = UIAlertController(title: "Are you sure you want to delete \(recipe.title)?", message: nil, preferredStyle: preferredStyle)
alert.addAction(deleteAction)
alert.addAction(cancelAction)

if let popoverPresentationController = alert.popoverPresentationController {
    popoverPresentationController.barButtonItem = sender as? UIBarButtonItem
}

present(alert, animated: true, completion: nil)