[SwiftUI] 이미지 사이즈 조절 및 원형 이미지 만들기

▼ 스위프트 UI를 사용할 때 이미지를 가져와 사이즈를 화면에 맞게 조절하고 원 모양의 이미지를 만드는 방법을 알아보겠습니다. 이미지를 사용하는 방법은 아주 간단한데 사용하는 패턴은 여러가지가 될 수 있으니 알아두는게 좋습니다. 우선 예제를 실행하기 전에 Assets 폴더에 img 라고 아무 이미지나 하나 넣어줍니다.

Assets

---

 

 

 

▼ 다음과 같이 VStack을 하나 만들고 그 안에 Image를 하나 새로 만들어줍니다. 보는 것과 같이 이미지가 화면이 꽉찬 것을 볼 수 있습니다. 기본으로 이미지를 추가하게 되면 높이를 기준으로 좌우가 넓게 표현됩니다.

image 추가

---

 

 

 

▼ 이번에는 .resizable() 을 추가해서 화면을 폭에 맞추어보겠습니다. 화면이 아래위로 꽉차서 비율이 깨지는 것을 볼 수 있습니다.

resizable 옵션 추가

---

 

 

 

▼ 이제 .aspectRatio(contentMode: .fit)을 적용해봅니다. 다음과 같이 이미지가 화면에 들어오고 사이즈도 비율에 맞게 조정되었습니다.

.fit

---

 

 

 

▼ 이번엔 .aspectRatio(contentMode: .fill)을 적용해봅니다. 이번에는 비율은 맞춘대로 화면을 꽉채웁니다. 보통 풀스크린 이미지를 적용할 때 비율을 맞춰서 이미지를 사용할 때 이 모드를 사용합니다.

.fill

---

 

 

 

▼ 이미지에 .clipShape 옵션을 줘서 Circle() 객체를 추가하면 이미지를 원형으로 표현할 수 있습니다.

.clipShape

---

 

 

 

▼ 마지막으로 .inset(by: )값을 줘서 이미지를 화면으로 부터 여백을 줄 수 있습니다.

Image .inset 옵션

---

 

▼ 스위프트 UI는 이미지를 사용해서 다양한 효과를 줄 수 있습니다. 다음과 같이 VStack에 여러가지 형태의 이미지를 넣어보세요.

SwiftUI 다양한 이미지 형태

---

 

▼ 또한 다음과 같이 .aspectRatio(.fit, .fill) 대신 scaledToFit, 또는 scaledToFill을 사용할 수도 있습니다.

scaledToFit, scaledToFill

---

https://developer.apple.com/documentation/swiftui/image

Apple Developer Documentation