SwiftUI 이미지 구현

swiftuiimage

이번에는 SwiftUI에서 이미지를 어떻게 구현하는지에 대해 알아보겠습니다. 이 강좌는 Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었습니다.

이미지 불러오기

기본적으로, 이미지 파일을 화면에 띄우기 위해서는 다음과 같이 하면 됩니다.

var body: some View {
    Image("image-name")
}

이번에 새로 내장된 ‘SF Symbols‘ 아이콘을 사용하기 위해서는 다음과 같이 하면 됩니다.

Image(systemName: "circle")

SwiftUI에서 UIImage를 통해 이미지를 불러오려면, 다음과 같이 하면 됩니다.

guard let img = UIImage(named: "image-name") else {
    fatalError("Fail to load image")
}

return Image(uiImage: img)

위에서 사용했던 내장된 아이콘을 사용하면, 이미지의 색상도 변경할 수 있습니다.

Image(systemName: "circle")
    .foregroundColor(.blue)

이미지 크기 조절

SwiftUI에서 이미지의 크기를 조절하기 위해서 resizable은 필수에 가깝습니다.

Image("image-name")
    .resizable()

정해진 사이즈에 이미지를 채우는 방식은, 다음과 같이 지정할 수 있습니다.

Image("image-name")
    .resizable()
    .aspectRatio(contentMode: .fill)

그라데이션 구현

다음과 같이 SwiftUI에서는 이미지에 그라데이션 효과를 줄 수도 있습니다.

Text("SwiftUI tutorial by Hohyeon")
    .background(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)

도형 그리기

SwiftUI에서는 사각형을 다음과 같이 그릴 수도 있고,

Rectangle()
    .fill(Color.blue)
    .frame(width: 250, height: 250)

원을 그릴 수도 있습니다.

Circle()
    .fill(Color.blue)
    .frame(width: 250, height: 250)

배경 이미지 사용

배경으로 이미지를 사용하기 위해서는 다음과 같이 하면 됩니다.

Text("SwiftUI tutorial by Hohyeon")
    .background(
        Image("image-name")
            .resizable()
            .frame(width: 100, height: 100))

마무리

이렇게 해서 SwiftUI에서는 이미지를 어떻게 구현하는지 알아봤는데요. 다음에는 SwiftUI에서 어떻게 여러 종류의 버튼을 사용하는지에 대해 알아보려고 합니다.

관련 글