[SwiftUI Essentials] Creating and Combining View - 1

이 시리즈는 Apple Developer에서 튜토리얼로 제공하는 SwiftUI Tutorials를 연습하며 정리한 글이다.

 

가장 첫 번째 튜토리얼은 여러개의 View, 즉 화면 구성을 하는 방법을 SwiftUI를 활용하여 작성하는 방법에 대해서 안내하고 있다.

완성된 화면은 다음과 같다.

원본 튜토리얼에서는 Turtle Rock이라는 캘리포니아에 있는 자연물을 했지만, 한국에 맞춰 서울역 정보로 바꾸어 보았다.

 

서울역 지도와 사진, 위치에 대한 정보를 보여주는 뷰를 만들 예정이다.

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Seoul Station")
                    .font(.title)
                HStack {
                    Text("Seoul Station")
                    Spacer()
                    Text("Seoul")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)
                
                Divider()
                
                Text("About Seoul Station")
                    .font(.title2)
                Text("Station for line #1, #4 and KTX")
            }
            .padding()
            
            Spacer()
        }
    }
}

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

VStack, HStack

SwiftUI에서는 `body` 변수 내에 뷰를 선언하도록 되어 있다. React를 해보았다면 컴포넌트를 반환할 때, 하나의 컴포넌트를 반환해야 한다. swift에서도 그와 같다. body 변수 내에 하나의 뷰를 선언해야 한다. 여러 개의 뷰를 하나의 변수에 할당하기 위해 사용하는 것이 바로 `Stack`이다.

 

- VStack : vertical stack, 뷰들을 세로로 배치한다. 완성된 화면을 보면 가장 위에 지도(MapView) 그 아래에 사진(CircleImage) 그 아래에 장소에 대한 설명 뷰가 되어 있는 것을 확인할 수 있다. 뷰를 위부터 아래로 차례로 배치하고 싶을 때 사용한다.

 

- HStack : horizontal stack, 뷰들을 가로로 배치한다. HStack으로 구현된 부분을 확인해보면 Seoul Station이라는 Text와 Spacer(뒤에서 얘기하겠다.), 그리고 Seoul이라는 Text가 한 줄에 배치된 것을 확인할 수 있다. 뷰를 한 줄에 왼쪽부터 오른쪽으로 차례로 배치하고 싶을 때 사용한다.

Modifiers

각 뷰에 대해서는 체이닝(연속적으로 붙어 있는 함수) 형태로 각 뷰에 대한 스타일을 지정할 수 있다. 이런 스타일을 지정하는 메소드를 `modifiers`라고 부른다. 각 뷰에 대한 스타일은 Xcode에서 코드로 직접 입력하는 방법이 있고, SwiftUI에서 제공하는 미리보기 화면(inspector)에서 원하는 뷰를 cmd + 클릭을 통해 선택해서 지정하는 방법이 있다. 후자의 경우 코드에 자동적으로 modifiers가 추가된다. 

modifiers의 몇 가지 예시를 살펴보면

- .font(_font_style_) : 지정한 폰트 스타일로 글씨체를 지정해준다.

- .foregroundColor(_color_) : 배경 화면 색을 지정한 색으로 교체해준다.

와 같은 방식으로 할당된 속성을 직접 할당할 수 있다.

Inspector

SwiftUI의 특징 중 하나이다. 작성한 코드에 대해 Xcode에서 실시간으로 미리보기를 할 수 있다. 미리보기 뿐만 아니라, 배치된 뷰의 스타일을 변경하거나, 선택하여 해당 뷰가 구현된 코드로 쉽게 이동할 수도 있다.

이전에 사용하던 방식에 비해 UI적인 측면을 구성하기 훨씬 좋아졌다는 첫인상을  받았다.

 

---

다음 포스팅에서는 지도를 사용할 수 있는 MapKit을 사용하는 MapView와, 이미지를 별도의 코드 추가 없이 modifiers만 사용하여 원형의 형태로 가공하는 CircleImage 뷰에 대해서 리뷰해보도록 하겠다.

 

SwiftUI, 아직 처음이지만 확실히 편리하다는 인상이 매우 강하다.