[SwiftUI] Image: 이미지 사용하기

 

오늘은 SwiftUI에서 이미지를 넣는 방법에 대해서 설명하겠습니다. (with. documentation)

 

Image 기본

기본적으로, 이미지 파일을 화면에 띄우려면 이렇게 코드를 작성하면 됩니다.

Image("image-name")

 

iOS 17부터는 이미지 리소스를 자동으로 static property로 생성합니다.

그래서 이미지 이름을 string으로 넘기지 않고 다음처럼 코드를 작성할 수 있습니다.

Image(.imageName)

 

만약 아이폰 기본 아이콘(=SF Synbols)를 사용하고 싶다면 다음과 같이 하면 됩니다.

Image(systemName: "heart.fill")
	.foregroundStyle(.white)

• 만약 아이콘의 색상을 바꾸고 싶다면?
  • foregroundStyle을 사용해서 색상을 바꿔줄 수 있습니다.
  • 이전에는 foregroundColor을 사용하였지만 Deprecated 되었습니다.

 

근데 만약에 시스템 이미지가 아닌 이미지의 컬러를 조절하고 싶다면? 

다음 코드처럼 renderingMode를 template으로 바꿔주어야 합니다.

Image("ellipseIcon")
    .resizable()
    .renderingMode(.template)
    .foregroundStyle(Color(red: 0.55, green: 0.58, blue: 0.65))
    .frame(width: 9, height: 9)

 

그 이유는 애플 공식 문서에 나와있습니다.

 

요약을 해보면

TemplateRenderingMode에는 2가지 경우가 있습니다.

    1 .original : 원본의 경우 원본 소스 이미지를 그대로 렌더링합니다.

    2 .template: 템플릿 모드는 모든 불투명 픽셀을 전경생으로 렌더링합니다.

 

그리고 전경생을 바꾸는 것 이외에도 배경색도 바꿀 수 있고, 심지어 그라데이션도 넣어줄 수 있습니다.

Image(systemName: "heart")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 50, height: 50)
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [.pink, .gray]), startPoint: .top, endPoint: .bottom))

 

---

Image 크기 조절

Image에서 크기는 Resizing을 꼭 해주고 이미지 크기를 지정해주어야 합니다.

만약 resizable을 해주지 않는다면 실제 Image 크기 공간은 커지는데 이미지가 커지지 않는 문제가 발생합니다.

왜냐하면 resizable이 이미지 공간에 맞게 이미지 크기를 설정해주기 때문입니다.

 

그래서 아래 코드처럼 사용해야 이미지 크기를 제대로 조절할 수 있습니다.

Image(systemName: "heart.fill")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 50, height: 50)
    .foregroundColor(.white)

• 여기서 이미지를 채우는 방식은
  • aspectRatio을 사용해서 설정해줄 수 있습니다

 

그리고 사진을 동그랗게 만들고 싶다면 clipShape를 사용해서 동그랗게 만들어줄 수 있습니다.

Image(systemName: "heart")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 50, height: 50)
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [.pink, .gray]), startPoint: .top, endPoint: .bottom))
    .clipShape(Circle())