1. SwiftUI 모드의 Xcode

SwiftUI모드로 Xcode를 실행한 화면이다.
A. 프로젝트 네비게이터
B. 코드 에디터
C. 프리뷰 캔버스 : SwiftUI 레이아웃 선언을 변경했을 때 실시간으로 표시됨
D. 인스펙터 패널 : 현재 선택된 항목의 속성은 애트리뷰트 인스펙터 패널에 표시됨
E. 디버그 패널

2. 프리뷰 캔버스

프리뷰 캔버스는 사용자 인터페이스 설계에 대한 시각적 표시와 함께 레이아웃 내에 뷰를 추가하거나 수정할 수 있는 도구를 제공한다. 또한 iOS 시뮬레이터를 실행하지 않고도 앱을 테스트할 수 있게 해준다.
Resume : 코드가 변경될 때 프리뷰는 실시간 업데이트를 일시 중지하게 된다. Resume 버튼을 클릭하면 다시 프리뷰를 업데이트하기 시작한다.
Live Preview : 실행되는 앱에서의 사용자 인터페이스를 테스트한다.
Preview on Device : 현재 상태의 앱을 실제 디바이스에서도 미리보기가 가능하다.
pin : 다른 뷰 파일을 선택해도 현재의 프리뷰를 캔버스에 고정하여 표시되게 한다.

3. 화면 설계 수정하기

SwiftUI 작업은 코드 에디터에서 구조체를 수정하는 방식으로 진행된다.

Text("Hello World")
	.font(.largeTitle)
    .foregroundColor(.red)

다른 방법으로는 라이브러리 패널에서 원하는 항목을 찾아 SwiftUI View 로 드래그 앤 드롭하여 변경하는 것이다.

에디터 또는 프리뷰 패널에서 해당 뷰를 선택한 다음에 애트리뷰트 인스펙터 패널에서 변경할 수 있다.

애트리뷰트 인스펙터는 패널 하단에 있는 Add Modifier 메뉴를 통해 수정자를 뷰에 추가할 수 있게 해준다.

4. 에디터 콘텍스트 메뉴

키보드의 Command 키를 누른 상태로 코드 에디터의 항목을 클릭하면 에디터 콘텍스트 메뉴가 나타난다.

이 메뉴는 선택한 항목의 타입에 따라 달라지는 메뉴들을 제공한다.

5. 여러 디바이스에서 미리보기

struct ContentView_Previews: PreviewProvider {
	static var previews: some View {
    	ContentView()
    }
}

이 구조체는 파일에서 기본이 되는 뷰의 인스턴스를 반환한다. 이것은 Xcode가 프리뷰 캔버스에 해당 뷰의 미리보기를 표시하도록 지시하는 것이다.

Xcode 툴바에 실행/정지 버튼 우측에 있는 타깃 메뉴에서 원하는 타깃 디바이스로 변경 가능하다.

더 좋은 방법은 디바이스가 지정되도록 프리뷰 구조체를 수정하는 것이다. Group뷰로 그루핑하여 이 기술을 사용하면 여러 디바이스 타입에서 동시에 미리보기할 수 있다.

environment 수정자는 다른 구성으로의 레이아웃을 미리보기하는 데도 사용될 수 있다.

struct ContentView_Previews: PreviewProvider {
	static var previews: some View {
    	Group{
    		ContentView()
        		.previewDevice(PreviewDevice(rawValue: "iPhone SE"))
            	.previewDisplayName("iPhone SE")
                	.environment(\.colorScheme, .dark)
            ContentView()
        		.previewDevice(PreviewDevice(rawValue: "iPhone 11"))
            	.previewDisplayName("iPhone 11")
                
        }
    }
}

6.시뮬레이터 및 디바이스 에서 앱 실행하기

Xcode 프로젝트 윈도우 좌측 상단에 있는 메뉴를 사용하여 타깃 시뮬레이터를 선택할 수 있다.
실행버튼을 클릭하면 코드가 컴파일되고 선택된 타깃에서 앱이 실행된다

또한 개발 시스템과 디바이스를 연결한 상태로 실제 디바이스로 전환하여 디바이스에서 앱을 실행할 수 있다. 현재 연결된 iOS 디바이스와 Xcode에서 사용하도록 구성된 시뮬레이터는 Xcode의 디바이스 화면에 표시되고 관리될 수 있다.
Connect via network 옵션을 활성화하면 디바이스는 USB 케이블로 연결되지 않은 상태에서도 앱을 실행할 타깃으로 계속해서 사용될 수 있다. 단, 디바이스와 개발 컴퓨터가 동일한 와이파이 네트워크에 연결되어 있어야 한다.

7. 애플리케이션 성능 모니터링

디버그 내비게이터에서 애플리케이션의 성능을 모니터링할 수 있다.

8. 사용자 인터페이스 레이아웃 계층구조 살펴보기

Xcode는 사용자 인터페이스 레이아웃을 회전하여 볼 수 있는 3차원 뷰로 분리하는 기능을 제공한다. 이 3차원 뷰를 통하여 사용자 인터페이스의 뷰 계층구조가 어떻게 구축되었는지를 확인할 수 있다.
이 모드로 뷰 계층구조에 접근하려면 디버그 모드로 미리보기를 시작하고 Debug View Hierarchy 버튼을 클릭한다.