• 이번에는 SwiftUI에서 Image를 어떻게 그리는지에 대해 알아보겠습니다.

Image 그리기

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

Image("image-name")

• iOS 17부터는 이미지 리소스를 자동으로 static property로 생성합니다.
• 그래서 이미지 이름을 String으로 넘기지 않고 다음과 같이 부를 수 있습니다.

Image(.imageName)

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

Image(systemName: "circle")

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

let image = UIImage(named: "image-name")
return Image(uiImage: image ?? UIImage())

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

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

Image 조정하기

• 앞서 사용했던 시스템 아이콘 SF Symbols를 사용하면, 이미지의 색상도 변경할 수 있습니다.

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

• SwiftUI에서 이미지의 크기를 조절하기 위해서는 resizable을 사용하면 됩니다.

Image("image-name")
  .resizable()
  .frame(width: 50, height: 50)

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

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

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

Text("SwiftUI tutorial by Hohyeon")
  .background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom))

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

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

AsyncImage

• AsyncImage는 SwiftUI에서 비동기적으로 이미지를 로드하고 표시하기 위한 뷰입니다.
• iOS 15.0부터 지원되었고, 네트워크나 원격 위치에서 이미지를 가져올 때 특히 유용합니다.

// 가장 간단한 형태
AsyncImage(url: URL(string: "https://example.com/image.jpg"))

// 이미지 크기 지정
AsyncImage(url: URL(string: "https://example.com/image.jpg")) { image in
    image.resizable()
         .aspectRatio(contentMode: .fit)
         .frame(width: 100, height: 100)
}

// 로딩 상태에 따른 다양한 뷰 처리
AsyncImage(url: URL(string: "https://example.com/image.jpg")) { phase in
    switch phase {
    case .empty:
        ProgressView()
    case .success(let image):
        image.resizable()
             .aspectRatio(contentMode: .fit)
             .frame(width: 100, height: 100)
    case .failure:
        Image(systemName: "photo")
            .foregroundColor(.red)
    @unknown default:
        EmptyView()
    }
}

마무리

• 이렇게 해서 SwiftUI에서는 Image를 어떻게 그리는지 알아봤습니다.