SwiftUI에서 텍스트와 이미지 쉽게 추가하기

SwiftUI는 Apple의 사용자 인터페이스 프레임워크로, 간결하고 직관적인 코드로 UI를 구축할 수 있습니다. Text와 Image는 SwiftUI에서 가장 기본적인 구성 요소 중 일부입니다. 이 글에서는 SwiftUI에서 텍스트와 이미지를 어떻게 추가하고 커스터마이즈할 수 있는지 알아보겠습니다.

SwiftUI에서 텍스트 추가하기

SwiftUI의 Text는 매우 강력하고 사용이 간편합니다. 텍스트를 추가하는 기본 방법은 다음과 같습니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

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

위 코드에서 Text는 커스터마이즈할 수 있습니다. 다양한 스타일과 속성을 통해 텍스트를 꾸밀 수 있습니다. 예를 들어, 폰트 크기, 폰트 스타일, 색상 등을 변경할 수 있습니다.

텍스트 스타일 적용하기

SwiftUI에서는 다양한 텍스트 스타일을 지원합니다. 다음은 폰트 스타일을 변경하는 간단한 예제입니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Large Title").font(.largeTitle)
            Text("Title").font(.title)
            Text("Headline").font(.headline)
            Text("Subheadline").font(.subheadline)
        }
    }
}

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

또한, 텍스트의 색상도 변경할 수 있습니다. 다음은 색상을 변경하는 예제입니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Red Text").foregroundColor(.red)
            Text("Blue Text").foregroundColor(.blue)
        }
    }
}

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

SwiftUI에서 이미지 추가하기

SwiftUI의 Image도 Text와 마찬가지로 간편하게 사용할 수 있는 강력한 도구입니다. 이미지를 추가하는 기본 방법은 다음과 같습니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("exampleImage")
    }
}

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

시스템 이미지 사용하기

SwiftUI는 SF Symbols라는 시스템 아이콘 세트를 제공합니다. 이를 통해 특정한 아이콘을 간편하게 추가할 수 있습니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star").imageScale(.large)
            Image(systemName: "heart").imageScale(.large).foregroundColor(.red)
        }
    }
}

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

이미지 스타일 적용하기

이미지를 더 꾸미기 위해 다양한 효과를 사용할 수 있습니다. 예를 들어, 이미지를 둥글게 자르거나, 그림자를 추가할 수 있습니다.

swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image("exampleImage")
                .clipShape(Circle())
            Image(systemName: "star")
                .shadow(radius: 10)
        }
    }
}

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

이와 같이 SwiftUI에서는 매우 간단한 코드로 텍스트와 이미지를 추가하고 꾸밀 수 있습니다. 이를 통해 더욱 직관적이고 효율적인 사용자 인터페이스를 구축할 수 있습니다. SwiftUI의 다양한 구성 요소와 스타일 옵션을 활용하여 창의적인 디자인을 시도해보세요.