SwiftUI에 관한 모든 것은 기존 스토리보드 형식의 iOS 앱과 달리 전부 새롭습니다.
그 중 레이아웃 시스템도 예외는 아닙니다.
SwiftUI는 더 이상 자동 레이아웃 (Auto Layout)을 사용하지 않으며
수년 동안 도입된 자동 레이아웃과 관련된 모든 것들을 삭제했습니다.
SwiftUI는 반응형 크로스 플랫폼 앱을 쉽게 개발할 수 있도록
처음부터 완전히 새로운 배치 시스템을 갖추고 있습니다.
보통 많은 사람들이 기존에는 UIStackView 에서 오픈 소스를 활용하여
자동 레이아웃을 설계했을 겁니다.
또한 Flexbox를 포함한 웹 상의 레이아웃 시스템으로 작업한 경험이 있을 겁니다.
기본 레이아웃 (Layout Basics)
SwiftUI에서 기본적으로 Hello World를 출력하는 코드의 예시입니다.
import SwiftUI struct ContentView: View { var body: some View { Text("Hello World") } }
File / New File... / SwiftUI View
미리보기를 여는 순간 앱이 빌드되고 레이아웃 시스템이 이미 경험을 하게 됩니다.
미리보기 편집기의 파란색 상자는 화면의 ContentView 범위를 나타냅니다.
뷰의 범위는 뷰 계층 구조 하단에 있는 본문, 즉 Text와 동일합니다.
여기서 하나 알아야 할 점은 안전 영역 (Safe Area) 입니다.
안전 영역은 전체 UI의 가시적 부분 내에 보기를 배치하는 데 도움을 줍니다.
위 예시에서 안전 영역은 상태 표시줄 영역을 제외한 영역을 뜻합니다.
기본적으로 안전 영역에 들어간 요소의 경우,
다음 수식어를 통해 안전 영역 외부에 컴포넌트를 배치할 수 있습니다.
Text("Hello World") .edgesIgnoringSafeArea(.all)
ContentView와 같이 최상단 커스텀 뷰는 레이아웃에 중립적입니다.
최상단 커스텀 뷰는 디바이스 크기의 한계에 의해 정의됩니다.
이 경우, Text가 ContentView와 동일한 크기로 처리가 됩니다.
SwiftUI에서 ContentView를 루트 뷰의 정 중앙에 배치된 이유는
우리가 SwiftUI에서 어떻게 레이아웃 시스템이 작동하는지 진행 절차를 이해해야 합니다.
레이아웃 진행 절차 (Layout Progress)
레이아웃 진행 절차 관련 설명 이미지
1. 부모 요소의 자식 요소를 토대로 제안된 크기
첫번째로, 루트 뷰는 텍스트에 제안된 크기.
즉, 예시의 경우 주황색 사각형으로 표현되는 화면의 전체 안전 영역을 뜻합니다.
2. 자식 요소 자신의 사이즈 선택
Text 같은 경우, 내용을 그릴 수 있는 정도의 사이즈만 있으면 됩니다.
부모 요소는 자식 요소의 선택을 존중해야 하기 때문에, 자식 요소를 강제로 늘리거나 압박하지 않습니다.
Text 같은 경우, 자기 자신이 사이즈를 정한다고 보면 됩니다.
즉, 커스텀 최상단 뷰 밑의 컴포넌트들은 자기 자신이 사이즈를 정하는 객체라고 볼 수 있습니다.
3. 부모 요소가 자식 요소를 부모의 특정 좌표에 배치한다.
1번과 2번 과정을 거친 뒤, 루트 뷰는 자식 요소를 어딘가에 넣어야 하기 때문에 바로 중간에 넣습니다.
마치며
바로 이런 흐름을 이해해야 합니다.
이건 단순한 모델이지만, SwiftUI의 모든 레이아웃은 이런 방식으로 계산됩니다.
여러가지 중요한 면에서 기존의 자동 레이아웃 (Auto Layout)의 관점을 크게 벗어난 것입니다.
첫번째로, 어떤 면에서는 자식 요소가 부모 요소의 프레임에 영향을 주지 않는
단순한 프레임 기반 레이아웃에 가깝습니다. 제약 조건이 양방향으로 작용하는
자동 레이아웃의 경우는 이렇지 않고, 어떤 경우에는 부모 요소가 자식 요소의 크기를 결정하거나
어떤 경우에는 그와 반대로 결정하기도 하였습니다. 이것은 자동 레이아웃의 가장 큰 단점이였고,
SwiftUI에서는 사라졌습니다.
두번째로, 스토리보드를 작성해본 사람들이라면 알 수 있겠지만,
우리는 레이아웃에 대해 명시적으로 아무 말도 하지 않았지만,
Ambiguous Layout 이라는 경구는 사라졌습니다.
자동 레이아웃과 달리 SwiftUI는 항상 유효한 레이아웃을 생성합니다.
SwiftUI에서는 모호하거나 만족스럽지 못한 레이아웃2는 존재하지 않습니다.
SwiftUI 의 레이아웃 시스템에서는 항상 최상의 결과를 내고, 필요할 때
개발자에게 제어권을 주기 위해 최선을 다합니다.