이번 편의 목표: Xcode의 macOS App 템플릿으로 스위프트UI 창을 만들고, 단추를 눌러 연체료 문장을 바꿉니다.

Xcode에서 새 프로젝트를 만듭니다. 플랫폼은 macOS, 인터페이스는 SwiftUI, 언어는 Swift입니다. 제품 이름은 Library로 둡니다. 생성된 프로젝트의 언어 모드는 Swift 6입니다. 템플릿이 만든 앱 타입과 뷰를 아래로 바꿉니다.

LibraryApp.swift입니다.

Swift
import SwiftUI

@main
struct LibraryApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

@main은 프로그램이 이 타입에서 시작한다는 표시입니다. WindowGroup은 같은 뷰로 창을 만듭니다. 맥에서는 새 창을 열 때마다 ContentView가 하나 생깁니다.

ContentView.swift입니다.

Swift
import SwiftUI

struct ContentView: View {
    @State private var message = "개미"

    var body: some View {
        VStack(spacing: 12) {
            Text(message)
            Button("3일 연체료") {
                message = "300원"
            }
        }
        .padding(24)
    }
}

View를 채택한 구조체의 body가 화면입니다. @State는 뷰가 다시 그려져도 유지되는 값입니다. message를 바꾸면 Text가 새 문자열로 다시 그려집니다. VStack은 세로로 쌓고 padding은 창 가장자리와의 간격입니다.

상단의 실행 대상이 My Mac인지 확인한 뒤 Run을 누릅니다. 창에 개미가 보이고, 단추를 누르면 300원으로 바뀝니다. 미리보기가 열려 있으면 캔버스에서도 같은 뷰를 누를 수 있습니다. 미리보기용 코드는 파일 맨 아래에 둡니다.

Swift
#Preview {
    ContentView()
}

이 창은 맥 앱입니다. 같은 뷰 구조는 아이폰 템플릿에서도 보이지만, 이 프로젝트의 실행 대상은 맥입니다. 창의 최소 크기는 다음 편에서 빌드를 고정할 때 필요하면 frame으로 지정합니다.

직접 해 보기

단추 제목을 5일 연체료로 바꾸고, 눌렀을 때 message가 750원이 되게 하세요. 하루 요금은 150원입니다.

해설

5 곱하기 150은 750입니다. message에 넣는 문자열만 바꿉니다. Text는 message를 읽으므로 추가 연결 코드는 필요 없습니다.