Size Class: iOS에서 Compact 및 Regular 크기 클래스란
Size Class는 모든 기기를 각 축에 따라 Compact(좁음/짧음)와 Regular(넓음/김)의 두 범주로 나누는 iOS의 적응형 레이아웃 메커니즘입니다. 이 값들의 조합은 iPhone, iPad, Mac Catalyst 및 CarPlay에서 인터페이스가 표시되는 방식을 결정합니다. Apple Human Interface Guidelines, 2024에 따르면, Size Class를 사용하면 Auto Layout과 UITraitCollection을 사용하여 모든 기기에서 하나의 storyboard를 구축할 수 있습니다. 이 시스템은 iOS 8부터 모든 iOS 기기에서 작동합니다.
핵심 사항
- Size Class는 각 축에 Compact(압축됨)와 Regular(전체 크기)의 두 값을 갖는 iOS 크기 분류 시스템입니다.
- 가로 Size Class는 세로 방향 iPhone에서는 Compact, iPad에서는 Regular입니다. 세로는 SE를 제외한 모든 iPhone에서 Regular입니다.
- UITraitCollection은 현재 Size Class를 가져오고 런타임에서 특성 컬렉션 변경에 응답하기 위한 프로그래매틱 인터페이스입니다.
- Interface Builder는 Vary for Traits 도구를 사용하여 각 Size Class 조합에 대한 제약 조건 및 요소 가시성을 구성할 수 있습니다.
- 적응형 레이아웃과 Size Class를 사용하면 iPhone과 iPad용 개별 storyboard가 필요 없어집니다 — 하나의 파일이 모든 기기에 적응합니다.
Size Class란?
Size Class는 iOS 8에서 Apple이 적응형 레이아웃을 통합하기 위해 도입한 iOS의 추상적 화면 분류입니다. 특정 기기 모델을 확인하는 대신, Size Class는 가로 및 세로 사용 가능 공간이라는 두 가지 특성을 정의합니다. 각 특성은 Compact(제한된 공간) 또는 Regular(충분한 공간)의 두 값 중 하나를 취합니다. 이 값들의 조합은 특성 컬렉션(trait collection)을 형성하며, 모든 인터페이스 요소에 전달됩니다.
역사와 목적
Size Class 이전에는 개발자가 iPhone과 iPad용 개별 storyboard를 만들거나 코드에서 UI_USER_INTERFACE_IDIOM() 검사를 사용했습니다. 이로 인해 코드 중복, storyboard 비대화, 새로운 화면 크기 지원의 어려움이 발생했습니다. Size Class는 보편적인 시스템을 제공하여 문제를 해결했습니다. 개발자가 4가지 Compact/Regular 조합에 대해 인터페이스를 구성하면 iOS가 자동으로 적절한 것을 선택합니다. iPad의 Split View와 다양한 iPhone 크기의 출현으로 이 시스템은 적응형 레이아웃에 필수적이 되었습니다.
Size Class 작동 방식
Size Class는 iOS가 현재 화면의 너비와 높이를 기반으로 방향 및 멀티태스킹을 고려하여 계산합니다. 값은 특정 픽셀에 연결되지 않습니다 — 논리적 범주입니다. 예를 들어, iPhone 16 Pro를 세로 방향으로 사용하면 가로는 Compact, 세로는 Regular입니다. 같은 iPhone을 가로 방향으로 사용하면 두 축 모두 Compact입니다. Split View에서 앱이 화면의 1/3을 차지하는 iPad는 가로가 Compact가 됩니다(전체 화면 모드에서는 Regular). 시스템은 방향이나 Split View 변경 시 자동으로 Size Class를 업데이트합니다.
크기 클래스의 종류
Size Class는 두 축에 두 값의 네 가지 조합을 사용합니다. 각 조합은 기기 유형과 방향에 따라 용도가 다릅니다. 이러한 조합을 이해하는 것은 iOS용 적응형 인터페이스를 설계하는 기초입니다. 이 시스템은 iPhone, iPad, Mac Catalyst, CarPlay 등 모든 현재 Apple 기기를 포괄합니다. Apple은 wAny hAny(기본 레이아웃) 조합으로 설계를 시작하고 특정 조합에 맞게 조정할 것을 권장합니다.
4가지 Size Class 조합
wCompact hRegular — 세로 방향 iPhone(일부 경우 Plus/Max 제외). wCompact hCompact — 가로 방향 iPhone SE/6/7/8. wRegular hRegular — 모든 방향의 전체 화면 iPad, 가로 방향 iPhone Plus/Max. wRegular hCompact — 좁은 콘텐츠의 가로 방향 iPad. 각 조합은 어떤 제약 조건과 요소가 활성화될지 결정합니다. 개발자는 Interface Builder에서 각 조합의 모양을 개별적으로 설정할 수 있습니다.
Mac Catalyst용 Size Class
Mac Catalyst에서 Size Class는 항상 wRegular hRegular(전체 크기 인터페이스)입니다. 즉, iPad 앱의 Mac 버전이 최대 공간을 얻습니다. 개발자는 UIScreen.traitCollection.userInterfaceIdiom을 통해 추가 확인을 사용하여 Mac과 iPad를 구분할 수 있습니다. Mac에서 Size Class는 안정적으로 작동하지만, Catalyst 앱은 Size Class를 넘어 마우스와 키보드에 대한 추가 적응이 필요한 경우가 많습니다.
Size Class가 적응형 레이아웃에 미치는 영향
Size Class는 어떤 Auto Layout 제약 조건이 활성화되고, 어떤 인터페이스 요소가 표시되며, 하위 뷰가 어떻게 배치되는지 결정합니다. 개발자는 다른 Size Class에 대해 다른 제약 조건을 설정할 수 있으며, 특성 컬렉션이 변경되면 iOS가 자동으로 전환합니다. 예를 들어, iPad(wRegular hRegular)에서는 세부 정보가 있는 테이블이 Master-Detail로 표시되고, iPhone(wCompact hRegular)에서는 Navigation Stack으로 표시됩니다. 이것이 Size Class를 사용한 적응형 레이아웃의 주요 시나리오입니다.
제약 조건 설정 및 제거
Interface Builder에서 개발자는 Vary for Traits 버튼을 통해 Size Class 조합을 선택하고 해당 조합에만 적용되는 제약 조건을 추가합니다. wAny hAny에 설정된 제약 조건은 항상 적용됩니다. 특정 조합에 설정된 제약 조건은 Size Class가 일치할 때만 활성화됩니다. 조합에 특별한 제약 조건이 설정되지 않은 경우 기본 제약 조건이 사용됩니다. Size Class가 변경되면 iOS는 제약 조건 세트 간 전환을 애니메이션화합니다.
요소 숨기기 및 표시
Interface Builder의 Installed 플래그를 사용하면 특정 Size Class에 대해 요소를 숨길 수 있습니다. 개발자는 선택한 조합에 대해 요소를 Uninstalled로 표시합니다. 예를 들어, Details 버튼은 iPad(wRegular hRegular)에서만 표시되고 iPhone에서는 숨겨집니다. 이는 코드에서 isHidden을 관리하는 것보다 간단합니다. 프로그래매틱 방식으로 숨기려면 traitCollectionDidChange를 재정의하거나 willTransition 메서드를 사용하여 현재 Size Class를 확인합니다.
Interface Builder에서 Size Class 사용
Interface Builder는 Size Class 작업을 위한 시각적 도구 Vary for Traits를 제공합니다. 개발자는 원하는 조합(너비와 높이)을 선택하면 Interface Builder가 해당 조합의 화면 미리보기를 표시합니다. 이 모드에서 이루어진 모든 제약 조건, 크기, 글꼴 및 가시성 변경은 선택한 Size Class에만 적용됩니다. 모드를 종료하면 설정이 저장됩니다. 이 접근 방식은 다양한 기기에 대한 적응 코드를 작성할 필요가 없게 합니다.
Interface Builder에서 단계별 작업
Interface Builder에서 Size Class를 구성하려면 개발자가 storyboard를 열고 view controller를 선택한 다음 하단 패널의 Vary for Traits 버튼을 클릭합니다. 그런 다음 Width(Compact, Regular 또는 Any)와 Height(Compact, Regular 또는 Any)를 선택합니다. 인터페이스가 선택한 조합의 편집 모드로 전환됩니다. 모든 제약 조건 변경, 요소 추가 또는 제거는 이 조합에만 적용됩니다. 설정이 완료되면 개발자가 모드를 종료합니다 — 변경 사항이 특정 Size Class 조합에 저장됩니다.
모범 사례
Apple은 wAny hAny(모든 기기를 포괄하는 기본 조합)의 기본 레이아웃으로 시작할 것을 권장합니다. 그런 다음 문제가 있는 조합(wCompact hRegular(세로 iPhone) 및 wRegular hRegular(iPad))에 대해 레이아웃을 조정합니다. 모든 조합을 구성할 필요는 없으며 레이아웃이 깨지는 것만 구성합니다. 과도한 구성은 유지 관리를 복잡하게 만듭니다. 정확한 글꼴 크기 조정을 위해 Size Class 대신 Dynamic Type을 사용하세요. 글꼴이 화면 크기에 자동으로 적응합니다.
코드에서 Size Class: UITraitCollection
UITraitCollection은 현재 Size Class 및 기타 환경 특성(force touch, 디스플레이 스케일, 사용자 인터페이스 관용구)을 포함하는 iOS 클래스입니다. 각 UIView와 UIViewController는 부모로부터 상속된 자체 traitCollection을 가지고 있습니다. 개발자는 traitCollection.horizontalSizeClass와 traitCollection.verticalSizeClass를 통해 Size Class를 가져오며, 이들은 UIUserInterfaceSizeClass(.compact, .regular 또는 .unspecified)를 반환합니다. Size Class 변경은 traitCollectionDidChange를 재정의하여 추적됩니다.
예제: 코드에서 레이아웃 전환
Size Class에 맞게 UICollectionView 레이아웃을 조정하는 예제를 살펴보겠습니다. iPad(wRegular hRegular)에서는 2열 UICollectionViewCompositionalLayout을 사용하고, iPhone(wCompact hRegular)에서는 1열을 사용합니다. 코드는 가로 Size Class를 확인하고 적절한 레이아웃을 선택합니다. 회전 또는 Split View 전환 시 iOS가 traitCollectionDidChange를 호출하고, 컨트롤러가 애니메이션과 함께 레이아웃을 전환합니다.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}특성 컬렉션 변경에 응답
traitCollectionDidChange 메서드는 기기 회전, Split View 진입/종료, 외부 디스플레이 연결 등 Size Class가 변경될 때마다 호출됩니다. 이 메서드에서 개발자는 레이아웃을 업데이트하고, 컬렉션을 다시 로드하고, 제약 조건 우선순위를 업데이트하거나 요소 가시성을 변경합니다. Size Class가 실제로 변경되었는지(다른 특성이 아닌지) 확인하는 것이 중요합니다: traitCollection.horizontalSizeClass를 previousTraitCollection?.horizontalSizeClass와 비교합니다. 이 최적화는 force touch나 디스플레이 스케일 변경 시 불필요한 다시 그리기를 방지합니다.
기기별 Size Class 특징
Apple 기기마다 Size Class 조합이 다르며, 개발자는 이러한 특징을 고려해야 합니다. iPhone 세로 방향 — wCompact hRegular, 가로 방향 — 모델에 따라 다름: iPhone SE/6/7/8(wCompact hCompact), iPhone X 이상(콘텐츠에 따라 wCompact hCompact 또는 wCompact hRegular). iPad 전체 화면 모드 — wRegular hRegular, Split View — wCompact hRegular(화면 1/3) 또는 wRegular hRegular(화면 2/3)일 수 있습니다. Mac Catalyst — 항상 wRegular hRegular.
iPhone: 모든 크기
iPhone에서 Size Class는 대부분의 모델에서 안정적이지만 미묘한 차이가 있습니다. iPhone Plus(6+, 7+, 8+) 및 Max(X, XS, 11 Pro, 13–16 Pro Max)는 가로 방향에서 wRegular hCompact(iPad mini와 유사)입니다. 이를 통해 큰 iPhone의 가로 방향에서 두 열로 콘텐츠를 배치할 수 있습니다. iPhone SE(1~3세대) 가로 방향 — wCompact hCompact. 세로 방향의 모든 iPhone에서 세로 Size Class는 Regular이지만, 가로 방향의 iPhone SE에서는 Compact입니다. 가로는 세로 및 가로 방향에서 항상 Compact입니다(가로 방향 Plus/Max 제외).
iPad 및 Split View
iPad 전체 화면 모드 — wRegular hRegular, 최대 레이아웃 유연성을 제공합니다. Split View에서는 동작이 변경됩니다: 앱이 화면의 1/3을 차지하는 경우(Slide Over 또는 1/3 Split), 가로 Size Class가 Compact가 되지만 세로는 Regular로 유지됩니다. 화면 2/3의 경우 — wRegular hRegular. 개발자는 모든 Split View 모드에서 인터페이스를 테스트해야 합니다. Size Class가 동적으로 변경되기 때문입니다. Apple은 iPad에서 일관된 동작을 위해 UISplitViewController와 함께 Size Class를 사용할 것을 권장합니다.
자주 묻는 질문
Size Class는 CSS의 중단점(breakpoint)과 어떻게 다른가요?
Size Class는 4가지 조합을 가진 이산 시스템인 반면, CSS 중단점은 임의의 수의 지점을 가진 연속 시스템입니다. Size Class는 특정 화면 크기에서 추상화하여 동작별로 기기를 그룹화합니다. CSS 중단점은 픽셀에 연결되고, Size Class는 논리적 Compact/Regular 범주에 연결됩니다.
가로 방향 iPhone Plus의 가로 Size Class가 Regular인 이유는 무엇인가요?
iPhone Plus/Max는 가로 방향에서 두 열로 콘텐츠를 표시하기에 충분한 화면 너비를 가지고 있습니다(iPad mini와 유사). Apple은 개발자가 추가 확인 없이 다중 열 레이아웃을 사용할 수 있도록 가로를 Regular로 할당합니다. 이는 iPhone의 Compact 규칙에 대한 예외입니다.
Size Class를 프로그래매틱 방식으로 변경할 수 있나요?
Size Class는 실제 기기 특성에 따라 iOS가 결정하며 앱 코드에서 변경할 수 없습니다. 개발자는 현재 값에 반응할 수만 있습니다. 시스템 UI는 시스템 요소에 대해 Size Class를 재정의할 수 있지만, 앱에서는 이것이 불가능합니다.
Size Class는 SwiftUI와 어떻게 작동하나요?
SwiftUI는 Size Class를 직접 사용하지 않습니다 — 대신 개발자는 @Environment(\.horizontalSizeClass) 수정자를 사용하여 현재 값을 읽습니다. SwiftUI는 적응형 레이아웃을 위한 Size Classes 및 Layout 프로토콜을 사용한 AnyLayout과 같은 더 높은 수준의 도구를 제공합니다.
외부 모니터 연결 시 Size Class가 업데이트되나요?
네, Stage Manager 또는 Sidecar를 통해 외부 디스플레이를 연결하면 iOS가 Size Class를 업데이트합니다. 외부 모니터는 일반적으로 wRegular hRegular를 받고, 주 화면은 자체 Size Class를 유지합니다. traitCollectionDidChange는 각 화면의 창에 대해 독립적으로 호출됩니다.
요약
- Size Class는 각 축에 Compact/Regular의 두 값을 가지며 총 4가지 조합이 있는 iOS 화면 분류 시스템입니다.
- 세로 방향 iPhone — wCompact hRegular. 전체 화면 모드 iPad — wRegular hRegular. 가로 방향 iPhone Plus/Max — wRegular hCompact.
- Interface Builder는 각 Size Class에 대한 제약 조건 및 가시성의 시각적 구성을 위해 Vary for Traits를 제공합니다.
- UITraitCollection은 horizontalSizeClass 및 verticalSizeClass를 통해 Size Class를 읽기 위한 프로그래매틱 API입니다. 변경 사항은 traitCollectionDidChange에서 추적됩니다.
- iPad의 Split View는 Size Class를 동적으로 변경합니다: 화면 1/3에서 가로가 Compact가 되어 레이아웃 적응이 필요합니다.
- SwiftUI는 Size Class 읽기를 위한 @Environment(\.horizontalSizeClass)와 런타임에 레이아웃 전환을 위한 AnyLayout을 제공합니다.
- 권장 사항: wAny hAny의 레이아웃으로 시작한 다음 wCompact hRegular(iPhone) 및 wRegular hRegular(iPad)에 맞게 조정하고 나머지 조합은 과부하하지 마십시오.
턴키 방식의 모바일 애플리케이션을 개발해 드립니다
IT Sectr는 2017년부터 스타트업과 기업을 위한 iOS 및 Android 애플리케이션을 만듭니다. 저희가 상담해 드리고 최적의 솔루션을 제안하겠습니다.
더 읽어보기