SwiftUI 를 활용한 iOS 앱 프로젝트를 생성하는 단계를 정리해보려고 해.
아래 URL 을 참고한 아주 기초적인 내용의 프로젝트야.
참고: https://developer.apple.com/tutorials/swiftui/creating-and-combining-views
Choose a template for your new project: iOS – App
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/Monosnap-2024-04-17-21-19-47-1.png)
Choose options for your new project:
Interface: SwiftUI
Language: Swift
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/Monosnap-2024-04-17-21-23-39.png)
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/iosdiary-—-ContentView.swift-2024-04-17-21-29-33-1024x685.png)
앱 메인 파일 : iosdiaryApp.swift
//
// iosdiaryApp.swift
// iosdiary
//
// Created by woohaha on 2024/04/17.
//
import SwiftUI
@main
struct iosdiaryApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
@main 은 앱의 진입점을 의미
main App 에서 참조하는 뷰 : ContentView.swift
//
// ContentView.swift
// iosdiary
//
// Created by woohaha on 2024/04/17.
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}
#Preview {
ContentView()
}
ContentView 의 미리보기 : #Preview
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/iosdiary-—-ContentView.swift-2024-04-18-10-39-23-626x1024.png)
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/iosdiary-—-ContentView.swift-2024-04-18-10-44-501.png)
Live mode 에서는 코드에 구현된 뷰의 미리보기가 가능
Selectable mode 에서는 배치된 컴포넌트의 속성 설정이 가능
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/iosdiary-—-ContentView.swift-2024-04-18-10-48-21.png)
Command+Control 을 누른 상태에서 컴포넌트를 클릭하면 해당 컴포넌트에 대한 Inspector 를 볼 수 있다.
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/Monosnap-2024-04-18-10-51-29.png)
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/Monosnap-2024-04-18-10-52-04.png)
편집기에서 Ctrl 키와 함께 선언을 클릭하고 “Show SwiftUI Inspector…” 를 선택하면 코드뷰에서 인스펙터 팝업메뉴를 볼 수 있다.
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/Monosnap-2024-04-18-10-59-54.png)
VStack, HStack, Spacer
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/뷰-생성-및-결합-—-SwiftUI-튜토리얼-Apple-개발자-문서-2024-04-18-11-02-56.png)
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding()
}
}
뷰의 중첩
신규 뷰 생성
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/Monosnap-2024-04-18-11-15-28.png)
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/Save-2024-04-18-11-20-06.png)
import SwiftUI
struct CircleImage: View {
var body: some View {
Text("Hello, World!")
}
}
#Preview {
CircleImage()
}
Text 컴포넌트 지우고 Image 컴포넌트 추가
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
}
}
#Preview {
CircleImage()
}
turtlerock 은 Asset 에 추가해둔 이미지 리소스 이름
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/iosdiary-—-Assets.xcassets-2024-04-18-11-22-48.png)
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/iosdiary-—-CircleImage.swift-—-Edited-2024-04-18-11-24-05.png)
ContentView 에 CircleImage 뷰를 추가
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
CircleImage()
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding()
}
}
#Preview {
ContentView()
}
![](https://blog.woohahaapps.com/wp-content/uploads/2024/04/iosdiary-—-ContentView.swift-—-Edited-2024-04-18-13-22-14.png)
글꼴 수정자의 이동
이동 전
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
이동 후
HStack {
Text("Joshua Tree National Park")
Spacer()
Text("California")
}
.font(.subheadline)