ZStack에서 배경색을 설정할 때 alignment가 적용되지 않을 때

1. background()를 사용해서 ZStack에 배경색을 설정할 때 -> alignment 속성 적용 X

struct FirstOnBoardingView: View {
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .topLeading) {
                Image("Capsule")
                    .resizable()
                    .scaledToFit()
                    .frame(width: geometry.size.width * 0.5, height: geometry.size.height * 0.5)
                    .offset(x: -geometry.size.width * 0.15, y: -geometry.size.height * 0.15)
                    .background(Color.white)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.red)
        }
    }
}

이 때는 ZStack(alignment: ) 정렬 속성이 적용되지 않는다.

 

2. background() & Color.clear를 사용해서 ZStack에 배경색을 설정할 때 -> alignment 속성 적용 O

struct FirstOnBoardingView: View {
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .topLeading) {
                Color.clear
                Image("Capsule")
                    .resizable()
                    .scaledToFit()
                    .frame(width: geometry.size.width * 0.5, height: geometry.size.height * 0.5)
                    .offset(x: -geometry.size.width * 0.15, y: -geometry.size.height * 0.15)
                    .background(Color.white)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .background(Color.red)
        }
    }
}

이 때는 정렬 속성이 적용된다.

 

3. Color.red를 직접 ZStack안에 넣어 배경색을 설정할 때 -> alignment 속성 적용 O

struct FirstOnBoardingView: View {
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .topLeading) {
                Color.red
                Image("Capsule")
                    .resizable()
                    .scaledToFit()
                    .frame(width: geometry.size.width * 0.5, height: geometry.size.height * 0.5)
                    .offset(x: -geometry.size.width * 0.15, y: -geometry.size.height * 0.15)
                    .background(Color.white)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
        }
    }
}

이 때는 정렬 속성이 적용된다.

 

ZStack의 배경색을 (Color.~)를 직접 적용시키는 것과 background(Color.~)로 적용시키는 것에 대한 차이점이 무엇인지는 아직 잘 모르겠다. (찾아봤는데 잘 안나옴... Chat GPT도 헛소리만 하네요..)

 

혹시 이 글을 읽고 문제에 대한 이유를 알고계신다면 댓글 부탁드립니다 ㅠ.ㅠ