HStack: 그것이 무엇인가, SwiftUI의 HStack VStack ZStack

SwiftUI에서 HStack이란?

HStack(Horizontal Stack)은 자식 뷰를 수평선으로 배열하는 SwiftUI 컨테이너입니다. 각 자식 요소는 달리 지정되지 않는 한 필요한 만큼의 공간을 차지합니다. HStack은 두 가지 필수 매개변수를 받습니다: alignment(수직 정렬, 기본값 .center)와 spacing(요소 간 거리, 기본값 nil — 시스템 간격). Apple Human Interface Guidelines(2025)에 따르면, HStack은 버튼 바, 입력 행, 수평 아이콘 목록에 선호되는 선택입니다.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("즐겨찾기")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

이 예제에서 HStack은 세 가지 요소(아이콘, 텍스트, 화살표)의 행을 만듭니다. Spacer()가 요소를 분리하여 아이콘과 텍스트는 왼쪽 가장자리에, 화살표는 오른쪽 가장자리에 배치됩니다. Alignment .center는 세 요소 모두를 수직 중심축을 따라 정렬합니다.

VStack: 수직 레이아웃 및 정렬

VStack(Vertical Stack)은 자식 요소를 위에서 아래로 수직으로 배열하는 SwiftUI 컨테이너입니다. HStack과 유사하게 alignment(수평 정렬: .leading, .center, .trailing)와 spacing을 받습니다. VStack은 폼, 카드, 프로필, 설정 목록을 구축하는 기초입니다. Apple Docs(2025)에 따르면, VStack은 LazyVStack과 함께 SwiftUI 수직 레이아웃 시나리오의 85%를 커버합니다.

VStack(alignment: .leading, spacing: 8) {
    Text("레시피 이름")
        .font(.headline)
    Text("준비 시간: 30분")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

alignment .leading을 사용한 VStack은 모든 행을 왼쪽 가장자리에 정렬합니다. VStack 내부에는 평점을 위한 HStack이 중첩되어 있습니다 — 이는 중첩 스택을 통해 복잡한 레이아웃을 구축하는 전형적인 패턴입니다. Spacing 8은 텍스트 줄 사이에 균일한 간격을 만듭니다.

ZStack: 깊이별 요소 겹치기

ZStack(Z축 스택)은 자식 뷰를 깊이 축을 따라 서로 겹쳐 쌓는 SwiftUI 컨테이너입니다. ZStack 본문의 첫 번째 요소는 배경에 그려지고, 마지막 요소는 전경에 그려집니다. ZStack은 텍스트가 있는 배경 이미지, 사용자 지정 표시기, 오버레이 버튼 및 전환 애니메이션에 사용됩니다. Apple Docs(2025)에 따르면, ZStack은 기본적으로 모든 요소를 중앙에 정렬(alignment: .center)하지만 모든 Alignment 조합을 지원합니다.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("산 풍경")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

이 예제에서 ZStack은 세 개의 레이어를 쌓습니다: 산 이미지, 어둡게 하기 위한 반투명 검정색, 제목 텍스트입니다. Alignment .bottomLeading은 텍스트를 왼쪽 하단 모서리에 고정합니다. 어둡게 하기(Color.black.opacity(0.3))는 이미지의 밝은 영역에서 텍스트 가독성을 향상시킵니다.

HStack vs VStack vs ZStack: 각각 언제 사용할까

스택 선택은 레이아웃 방향에 따라 다릅니다: HStack — 수평 배치(버튼, 입력 행), VStack — 수직 배치(폼, 카드), ZStack — 겹치기(배경, 오버레이). Apple Human Interface Guidelines(2025)에 따르면, 복잡한 레이아웃의 경우 스택이 서로 중첩됩니다: 외부 VStack 안에 HStack과 ZStack이 포함됩니다. LazyHStack과 LazyVStack은 대규모 컬렉션을 위한 지연 버전입니다.

Alignment와 Spacing: 스택 미세 조정

alignment와 spacing 매개변수는 SwiftUI 스택에서 자식 요소의 위치를 완전히 제어합니다. HStack의 Alignment는 높이가 다른 요소의 수직 정렬을 제어합니다. VStack alignment는 수평 정렬을 제어합니다. Spacing은 스택의 모든 자식 요소 사이의 거리를 설정합니다. SwiftUI Lab(2025)에 따르면, alignment는 표준(.top, .center, .bottom) 또는 AlignmentID를 통한 사용자 지정이 가능합니다.

HStack(alignment: .top, spacing: 12) {
    Text("제목")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("부제목")
        Text("추가 텍스트가 있는 설명")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

여기서 alignment .top은 큰 제목과 중첩된 VStack을 위쪽 가장자리를 따라 정렬합니다. Spacing 12는 그들 사이에 간격을 만듭니다. alignment .leading이 있는 중첩 VStack은 부제목과 설명을 왼쪽 가장자리에 정렬합니다. 중첩 스택 내에서 다양한 alignment를 조합하면 정확한 레이아웃 제어가 가능합니다.

중첩 스택: 복잡한 레이아웃 구축 예제

실제 인터페이스는 중첩된 HStack, VStack, ZStack을 조합하여 구축됩니다. 제품 카드는 전형적인 예입니다: 외부 VStack에 이미지(ZStack과 오버레이), 제목(Text), 평점(HStack), 가격이 포함됩니다. Apple Sample Projects(2025)에 따르면, 스택의 중첩 깊이는 4레벨을 거의 넘지 않습니다 — 더 깊은 중첩은 코드 가독성과 성능을 저하시킵니다.

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("스마트폰 Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

이 예제에서 VStack은 ZStack(할인 배지가 있는 이미지), 제품 이름, HStack(가격 + 평점)을 결합합니다. ZStack은 alignment .topTrailing을 사용하여 «-20%» 배지를 오른쪽 상단 모서리에 배치합니다. HStack의 Spacer는 가격을 왼쪽 가장자리로, 평점을 오른쪽 가장자리로 밀어냅니다.