ZStack이란?

ZStack은 SwiftUI에서 사용하는 레이아웃 컨테이너 중 하나로, Z축을 따라 뷰들을 겹쳐서 배치할 때 사용됩니다. ZStack을 사용하면 앞뒤로 여러 뷰를 쌓는 방식으로 레이아웃을 구성할 수 있습니다.

주요 특징

• Z축 레이아웃: ZStack은 뷰를 Z축 방향으로 배치하여 겹쳐서 표현합니다. 즉, 첫 번째로 추가된 뷰는 가장 뒤에 위치하고, 그 이후로 추가된 뷰는 앞쪽에 쌓이게 됩니다.
• 뷰 겹치기: 여러 뷰를 중첩해서 보여줄 때 유용합니다. 예를 들어, 이미지 위에 텍스트를 표시하거나 배경 위에 버튼을 배치하는 등의 작업을 할 수 있습니다.
• 정렬: ZStack 내부의 뷰들은 기본적으로 중앙에 정렬됩니다. 하지만 alignment 매개변수를 사용하여 다른 위치로 정렬할 수 있습니다.

기본 사용법

ZStack {
    Color.blue
    Text("Hello, World!")
        .foregroundColor(.white)
}

설명:

• Color.blue는 ZStack의 가장 뒤에 배치된 배경입니다.
• Text("Hello, World!")는 그 위에 배치된 텍스트로, 파란색 배경 위에 흰색 글씨가 표시됩니다.

ZStack의 동작

1. 첫 번째로 선언한 뷰는 가장 뒤에 위치합니다.
2. 그 이후로 선언된 뷰들은 앞에 쌓입니다.
3. 기본적으로 뷰는 중앙에 배치되지만, alignment를 사용하여 다른 위치로 이동시킬 수 있습니다.

ZStack {
    Color.red
    Image(systemName: "star")
    Text("별 모양")
}

이 코드는 빨간색 배경 위에 별 모양 이미지가 표시되고, 그 위에 "별 모양"이라는 텍스트가 겹쳐서 나타납니다.

정렬 (Alignment)

기본적으로 ZStack은 뷰를 중앙에 배치하지만, alignment 매개변수를 사용하여 원하는 방향으로 정렬할 수 있습니다.

ZStack(alignment: .topLeading) {
    Color.green
    Text("Hello")
    Text("World")
}

• alignment: .topLeading을 사용하면, 두 텍스트가 왼쪽 상단에 배치됩니다.

alignment에는 .topLeading, .topTrailing, .bottomLeading, .bottomTrailing, .center 등이 가능합니다.

크기 조정

ZStack의 크기는 기본적으로 그 안에 포함된 가장 큰 뷰의 크기로 결정됩니다. 하지만 ZStack에 직접 프레임(frame)을 설정해서 크기를 조절할 수 있습니다.

ZStack {
    Color.yellow
    Text("SwiftUI")
}
.frame(width: 200, height: 200)

이 경우, ZStack은 200x200의 크기를 가지며, 그 안에 있는 뷰들도 그 크기에 맞춰 배치됩니다.

예시: 이미지 위에 텍스트 겹치기

ZStack {
    Image("backgroundImage")
        .resizable()
        .scaledToFill()
        .frame(width: 300, height: 200)
        .clipped()

    Text("Welcome")
        .font(.largeTitle)
        .foregroundColor(.white)
        .shadow(radius: 10)
}

설명:

• Image("backgroundImage"): 배경 이미지를 300x200 크기로 표시하고, scaledToFill()로 이미지를 프레임에 맞게 조정합니다.
• Text("Welcome"): 그 위에 텍스트를 흰색으로 표시하고, 그림자를 추가하여 시각적으로 강조합니다.

ZStack 활용 사례

• 이미지 위에 텍스트나 버튼 배치: 배경 이미지 위에 레이블, 버튼, 다른 뷰들을 겹쳐서 표시할 때 자주 사용됩니다.
• 중첩된 배경: 여러 배경 색상이나 이미지를 중첩하여 배치하고, 그 위에 콘텐츠를 올리는 레이아웃을 만들 때 유용합니다.
• 효과 추가: 배경 위에 불투명한 오버레이(Overlay)를 추가하거나, 텍스트에 그라데이션이나 음영 효과를 주는 데 사용할 수 있습니다.

예시: 오버레이 추가

ZStack {
    Color.blue
        .frame(width: 200, height: 200)
        .cornerRadius(20)

    Text("Hello SwiftUI")
        .foregroundColor(.white)
        .padding()
        .background(Color.black.opacity(0.7))
        .cornerRadius(10)
}

설명:

• ZStack 안에 파란색 배경이 있고, 그 위에 텍스트가 검은색 투명 배경과 함께 배치됩니다.

요약

• ZStack은 뷰를 Z축(앞뒤)으로 겹쳐서 배치하는 컨테이너입니다.
• 가장 먼저 선언된 뷰는 가장 뒤에 위치하며, 이후 뷰들은 그 위에 쌓입니다.
• alignment 매개변수를 사용하여 뷰를 원하는 위치로 정렬할 수 있습니다.
• 배경 이미지나 색상 위에 텍스트, 버튼 등을 겹치는 레이아웃에서 매우 유용합니다.

ZStack을 사용하면 중첩된 레이아웃을 쉽게 구현할 수 있으며, SwiftUI에서 매우 자주 사용되는 레이아웃 도구입니다.