SwiftUI Basics - Stacks 와 Spacer 사용하기

본 포스팅은 Swift 5.2.4 기준으로 작성되었습니다.

SwiftUI 에서는 자동으로 뷰의 레이아웃을 잡아주는 기능이 매우 강화되면서 Stacks 의 사용이 더 중요해졌습니다. Stack 은 현재 총 3종류가 있으며 HStack, VStack, ZStack 으로 구성됩니다. 함께 공식 개발자 문서를 보려고 했는데 너무 간단하게 나와있어서 의미가 없을 것 같아요 ㅎ 그냥 하나씩 알아보죠 ㅎㅎㅎ

HStack

HStack 은 Horizontal Stack 으로 우리가 뷰를 가로로 배치할 수 있게 도와주는 View 입니다. 사용법도 이보다 쉬울 수가 없어요. 그냥 HStack 을 중괄호로 열고 그 안에 원하는 내용을 넣으면 됩니다. 그러면 각 Object 들이 좌측부터 순서대로 배치가 됩니다.

HStack {
    Image("SwiftUI")
    Image("SwiftUI")
}

따로 레이아웃을 잡은게 없는데도 중앙에 잘 표시가 되네요. 코드 3줄로 뷰를 완성했습니다.

VStack

HStack 이 Horizontal Stack 이라고 했으니까 VStack 은 뭔지 감이 딱 오죠?? 바로 Vertical Stack 이겠네요. 그리고 본인 내부에 위치한 Object 들을 세로로 배치해 줄 것 같습니다. 그럼 기존에 작성해놓은 코드에서 알파벳 하나만 바꿔서 어떻게 되는지 볼까요?

VStack {
    Image("SwiftUI")
    Image("SwiftUI")
}

짜잔!!! 딱 한글자만 바꿨는데 뷰의 구성은 완전히 바뀌었어요.

ZStack

HStack 은 가로, VStack 이 세로면 다 끝난 것 같은데 아직 하나가 더 남았어요. ZStack 은 뭐의 줄임말인지 모르겠지만 View 를 위로 쌓는 개념입니다. 아마도 x, y, z 축에서 z 를 뜻하는 의미가 아닌가 싶어요. 이미지가 위로 쌓이게 되면 상태를 확인할 수 없으니까 이번에는 아래쪽에 오는 이미지를 크게 만들어 놓고 해볼게요.

var body: some View {
    ZStack {
        Image("SwiftUI")
            .resizable()
            .frame(width: 200, height: 200)
        Image("SwiftUI")
    }
}

코드에서 먼저 구현된 Image 가 Preview 에서는 아래쪽에 위치하는 것을 확인할 수가 있네요. 그냥 순서대로 하나씩 올려놓는다고 생각하면 헷갈릴 것도 없고 당연한 개념이기는 합니다.

Spacer

이렇게 SwiftUI 에 존재하는 3가지 Stack 을 모두 알아보았고 이제 마지막으로 Spacer 에 대해서 알아보도록 할게요.

Spacer 는 이름에서부터 알 수 있듯 어떤 빈 공간을 만들어줍니다. 이 빈 공간은 다른 Object 의 크기에 Priority 를 두고 그 크기가 변하지 않는 선에서 본인의 크기를 최대한으로 늘리고자하는 성질을 갖고 있습니다. 코드를 조금 바꿔서 Spacer 를 구현해보겠습니다.

VStack {
    Image("SwiftUI")
        .resizable()
        .frame(width: 200, height: 200)
    Spacer()
    Image("SwiftUI")
}

각 이미지가 완전히 멀찌감치 떨어져서 배치되었네요. 이미지의 크기는 유지되었고 그 사이 공간에 Spacer 가 본인의 크기를 최대한으로 키우고 들어왔습니다.

그렇다면 Spacer 를 두 이미지보다 위쪽에 배치하면 어떻게 될까요? Spacer 의 위치를 코드의 최상위에 배치해보겠습니다.

VStack {
    Spacer()
    Image("SwiftUI")
        .resizable()
        .frame(width: 200, height: 200)
    Image("SwiftUI")
}

이미지들이 아래로 몰려버렸네요. 하지만 역시 이미지의 크기는 유지시킨채 Spacer 가 늘어날 수 있는 최대한의 크기만큼 늘어난 것을 확인할 수 있습니다.

Spacer 는 이렇게 본인을 빈 공간에 맞게 최대한 늘어나는 성질을 갖고 있습니다. 아직은 어떻게 활용할 수 있을지 감이 오지 않지만 그 활용도가 무궁무진할 것 같다는 생각이 따~악 드네요! Stacks 와 Spacer 를 완벽히 이해하고 사용한다면 거의 웬만한 모든 뷰들은 손쉽게 만들어 낼 수 있을 것 같습니다!

HStack#

VStack#

ZStack#

Spacer#

HStack

VStack

ZStack

Spacer