Intro

화면의 background에 color를 주는것은 매우 중요하다. 앱의 디자인적인 요소를 구현하는데에 필수적이기도 하고, 명시적으로 color를 지정해주지 않으면 light mode에서는 배경이 흰색이 되고 dark mode에서는 배경이 검은색이 된다.

Problem

맨 처음 SwiftUI로 project를 설정하면 다음과 같은 화면이 나온다.

//
//  ContentView.swift
//  background-color
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

이 화면을 구성하는 모든 내용이 ContentView에 있고 그것의 body는 VStack으로 이루어져있으니 VStack에 background modifier를 통해서 background color를 설정할 수 있지 않을까라는 생각이 들 수 있다.

//
//  ContentView.swift
//  background-color
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .background(.green)
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

하지만 그 결과는 아래와 같이 나온다.

VStack의 크기는 그것이 가지고 있는 view들의 크기만큼으로 제한되고 그렇기 때문에 Image와 Text의 크기만큼의 background가 green으로 설정되었다.

Solution

ZStack

ZStack은 연속되는 subview들을 z축으로 나열한다. 즉, 나중에 나오는 subview는 앞에 나오는 subview 위에 올라가게 되는 것이다.

이제 ZStack을 이용해 배경화면을 초록색으로 바꾸어보자:

//
//  ContentView.swift
//  background-color
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color(.green)
            
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
                    .foregroundColor(.black)
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ZStack으로 전체를 감싸주고 그 아래에 2개의 subview를 두었다:

• Color
• VStack

전체가 초록색인 view 위에 VStack이 올라가서 마치 background가 생긴 것 같이 보인다. 이것은 SwiftUI가 Color를 view instance 처럼 다루기 때문에 가능하다:

Because SwiftUI treats colors as View instances, you can also directly add them to a view hierarchy.
https://developer.apple.com/documentation/swiftui/color

하지만 둥근 모서리 부분은 색이 적용되지 않았다. 대부분의 경우 이 영역까지도 색을 적용하고 싶어할 것이다. 아래와 같이 ZStack에 ignoresSafeArea modifier를 설정해준다:

//
//  ContentView.swift
//  background-color
//
//  Created by woo94 on 2023/01/21.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color(.green)
            
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Hello, world!")
                    .foregroundColor(.black)
            }
            .padding()
        }
        .ignoresSafeArea()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

성공이다.