SwiftUI 기본 레이아웃 이해하기: VStack과 HStack 사용법

SwiftUI는 iOS 개발자들이 UI를 빠르고 효율적으로 설계할 수 있도록 도와주는 Apple의 최신 사용자 인터페이스 툴킷입니다. 이 툴킷의 강력한 기능 중 하나는 VStack과 HStack 레이아웃 구성 요소입니다. 이번 글에서는 VStack과 HStack을 사용하여 기본 레이아웃을 만드는 방법에 대해 자세히 알아보겠습니다.

VStack: 수직 스택으로 레이아웃 구성하기

VStack은 수직 방향으로 뷰를 쌓는 데 사용됩니다. SwiftUI에서 VStack을 사용하면 간편하게 여러 뷰를 세로로 정렬할 수 있습니다. 다음은 기본적인 VStack의 예제입니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
            Text("Welcome to SwiftUI")
            Text("VStack Example")
        }
    }
}

이 코드는 세 개의 Text 뷰를 수직으로 쌓습니다. VStack 내부에 어떤 순서로 뷰를 넣느냐에 따라 화면에 표시되는 순서도 결정됩니다. 기본적으로 뷰들은 서로 간격 없이 밀착되어 표시됩니다. 만약 간격을 조절하고 싶다면 spacing 파라미터를 사용할 수 있습니다.

swift
VStack(spacing: 20) {
    Text("Hello, World!")
    Text("Welcome to SwiftUI")
    Text("VStack Example")
}

위 코드에서는 각 뷰 사이에 20 포인트의 간격이 추가됩니다.

HStack: 수평 스택으로 레이아웃 구성하기

HStack은 VStack과 반대로 수평 방향으로 뷰를 배열합니다. HStack을 사용하면 여러 개의 뷰를 가로로 나란히 배치할 수 있습니다. 다음은 HStack의 기본 예제입니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hello")
            Text(", ")
            Text("World!")
        }
    }
}

이 코드를 실행하면 Hello, World!라는 문자열이 수평으로 나란히 표시됩니다. HStack에서도 spacing 파라미터를 사용하여 뷰 사이의 간격을 조정할 수 있습니다.

swift
HStack(spacing: 10) {
    Text("Hello")
    Text(", ")
    Text("World!")
}

이 코드에서는 각 뷰 사이에 10 포인트의 간격이 추가됩니다.

VStack과 HStack의 조합

VStack과 HStack을 조합하여 더욱 복잡한 레이아웃을 만들 수 있습니다. 예를 들어, VStack 내부에 HStack을 중첩하여 사용하면 수직 및 수평으로 뷰를 혼합하여 배치할 수 있습니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Title")
                .font(.largeTitle)

            HStack(spacing: 10) {
                Text("Row 1, Col 1")
                Text("Row 1, Col 2")
            }

            HStack(spacing: 10) {
                Text("Row 2, Col 1")
                Text("Row 2, Col 2")
            }
        }
    }
}

위 예제에서는 VStack을 사용하여 세로 방향으로 타이틀과 두 개의 HStack을 배치하고, 각 HStack 내에서는 Text 뷰를 가로 방향으로 배치합니다.

배치와 정렬

VStack과 HStack에서는 뷰의 위치와 정렬을 더욱 세밀하게 제어할 수 있는 다양한 방법이 있습니다. 예를 들어, 기본적으로 VStack과 HStack 내부의 뷰들은 중앙에 정렬됩니다. 그러나 alignment 파라미터를 사용하여 이 정렬 방식을 변경할 수 있습니다.

swift
VStack(alignment: .leading) {
    Text("Leading 1")
    Text("Leading 2")
}

이 코드는 VStack 내의 텍스트를 왼쪽으로 정렬합니다. HStack에서도 비슷하게 alignment 파라미터를 사용할 수 있습니다.

swift
HStack(alignment: .top) {
    Text("Top 1")
    Text("Top 2")
}

이 경우, 모든 텍스트가 상단에 정렬되어 표시됩니다.

또한, SwiftUI에서는 Spacer 뷰를 사용하여 유연한 빈 간격을 추가할 수 있습니다. 이는 특히 복잡한 레이아웃을 설계할 때 유용합니다.

swift
HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

위 코드는 Text 뷰 간에 빈 공간을 추가하여 화면의 양 옆으로 뷰를 배치합니다.

마무리

SwiftUI의 VStack과 HStack은 기본적인 레이아웃 구조를 손쉽게 만들 수 있게 해주는 강력한 도구입니다. 간단히 수직 또는 수평 방향으로 뷰를 배치할 수 있으며, 여러 가지 파라미터와 중첩된 배치를 통해 복잡한 UI를 구성할 수 있습니다. 이번 글을 통해 VStack과 HStack의 기초적인 사용법을 익히고, 이를 기반으로 더 복잡한 레이아웃을 자유롭게 디자인해 보시기 바랍니다.