[SwiftUI] - SwiftUI 프로젝트 생성하기

바로 이전 내용에서 간략히 SwiftUI가 무엇인지에 대해 간략히 살펴봤었다. 실습을 통해 배우는 것을 선호하는 나로써는 당장 프로젝트를 시작하여 코드와 UI들을 살펴보고 싶었다.

 

1. 프로젝트 생성

우선, 다음과 같이 프로젝트를 생성한다.

프로젝트 생성 화면

interface에서 SwiftUI를 선택해준 후 프로젝트를 생성해주면 된다.

 

 

2. 프로젝트 생성 시 첫 화면

프로젝트를 생성하게 되면 다음과 같은 화면이 나타나게 된다.

프로젝트 첫 화면

 기존 storyBoard에서와 비슷하게 왼쪽은 코드가 쓰여져 있고, 오른쪽 화면은 시뮬레이터(?) 비슷한 화면이 나타나 있다. 알아본 결과 오른쪽 화면은 preview기능 즉 미리보기 화면이라고 한다.

 

왼쪽 화면에서 Text("hello world")를 Text("하위이이이") 라고 바꾸게 되면 그에 따라 오른쪽 화면에 실시간으로 "하위이이이"가 출력되는 것을 볼 수 있을 것이다.

 

그렇다면 이제 왼쪽 화면의 코드를 살펴보도록 하자. 왼쪽 화면에는 크게 코드가 두가지의 struct로 나눠져 있다. 첫번째는 ContentView이고, 두번째는 ContentView_Previews이다. 

ContentView는 화면을 그리고 구성할 수 있도록 하는 코드를 작성하는 곳이고, ContentView_Previews는 preview를 그리는?? 그러한 struct라고 보면 될 것 같다.

 

 

3. ContentView 살펴보기

다음은 ContentView에 있는 코드들을 살펴보도록 하겠다.

 

3-1) modifier 

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("하위이이이!")
        }
        .padding()
    }
}

쉽게 이해되었던 내용부터 살펴보면 Text("하위이이이!")는 화면에 "하위이이이"라는 text를 출력하게 해준다. 그리고 Image(systemName: "globe")는 지구본 모양의 이미지를(2번째 사진 참고) 화면에 출력한다. 

.imageScale 과 .foregroundColor는 modifier라고 하며 현재 코드에서는 Image의 속성들을 설정해주는 역할을 한다. 

 

Text에서도 이러한 modifier를 사용할 수 있는데 이는 다음과 같이 사용할 수 있다.

Text("하위이이이!")
           .font(.body)
           .fontWeight(.bold)
           .padding()

 

3-2) Stack

그렇다면 그 위에 있는 Vstack은 무엇일까? 우선 위에 있는 body라는 연산 프로퍼티는 단 한개의 view만 반환해야 한다고 한다.  

var body: some View {
	Image(systemName: "globe")
	Text("하위이이이!")
}

그래서 만약 다음과 같이 Image, Text 두개의 View를 반환하게 되면 contentview의 미리보기가 두 개가 되는 기현상을 발견할 수 있다. 그렇기 때문에 만약 여러 개의 view를 나열하고자 한다면, Stack이나 Group을 활용해야 한다. 

 

Stack이나 Group을 활용함으로써 여러 개의 View들을 하나의 View(stack view, group view)로 반환할 수 있는 것이다.(맞나..?)

 

stack의 종류에는 HStack, VStack, ZStack이 있다. 

간략히 설명하면

HStack은 view들을 수평으로 배열해주는 역할을 하며,

VStack은 view들을 수직으로 배열시켜주고,

ZStack은 view들을 Z축으로 배열시켜주는 역할을 한다.

 

이상으로 간단히 contentview의 구성에 대해 살펴보았다.