.scaledToFill() VS .aspectRatio(contentMode: .fill)

🔧 문제 상황

Cherish 앱의 오늘의 일기 공유 기능에서는 사용자가 일기의 배경으로 이미지를 선택할 수 있다. 근데 이미지를 추가한 후 내비게이션 버튼이 작동하지 않는 문제를 발견하게 되었다.

 

💬 고민 Point

문제가 발생하는 트리거가 "이미지를 추가하면"이었기 때문에 이것은 이미지 문제다라고 생각했다. 그리고 가로 이미지를 넣었을 때에는 문제가 발생하지 않는 것으로 보아 보여지는 이미지는 정사각형으로 잘려있지만, 실제로는 해당 View가 overlap되어 Nav 위를 막고 있을 것이라는 예상을 했다.

 

View hierarchy를 확인하니 내가 생각했던 예상이 맞았다.

 

이후 이미지와 관련된 코드를 확인해봤다. 

Image(uiImage: backgroundImage)
    .resizable()
    .scaledToFill()
    .frame(width: 25, height: 25)
    .clipped()

 

 

이상한 점을 모르겠었다. Fill을 사용하는 것도 맞고, frame 설정은 Fill을 한 후에 하는 게 맞는데..? 하면서 찾아보던 중

.aspectRatio(contentMode: .fill)

그런데 문득 .aspectRatio(contentMode: .fill)이 떠올랐다. 혹시 이걸로 해결될까 해서 다음과 같이 수정을 했더니 문제가 해결되었다.

Image(uiImage: backgroundImage)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 25, height: 25)
    .clipped()

 

🌟 찝찝한 해결, 그리고 의문증

그렇다면 .scaledToFill() 와 .aspectRatio(contentMode: .fill)이 작동하는 방식이 다른 거라는 건데, 전에 공부를 했을 때는 큰 차이가 없는 것으로 결론을 내렸었었다.

.scaledToFill() 공문에 둘이 똑같은 기능을 한다고 했었기 때문이지..

https://developer.apple.com/documentation/swiftui/view/scaledtofill()

 

근데 구글링을 해도 둘이 좀 차이가 있는 듯 했는데 뭐라는 지를 잘 모르겠고,,,,

 

 

아래 코드로 실행을 해봤는데, 둘 다 상단의 버튼은 먹히고, 아래 버튼은 실행이 안된다.

도대체 무슨 문제일까? 그리고 Cherish 코드에서는 .scaledToFill()를 .aspectRatio(contentMode: .fill)로 바꾸니 왜 해결이 된 걸까?

혹시 아시는 분이 있다면.. 댓글로 알려주세요...

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            
            VStack(spacing: 0) {
                Button {
                    print("하잇")
                } label: {
                    Text("버튼")
                        .font(.caption2)
                }
                Button {
                    print("하잇")
                } label: {
                    Text("버튼")
                        .font(.caption2)
                }
                Image(.screenshot)
                    .resizable()
                    .scaledToFill()
                    .frame(width: 25, height: 25)
                    .clipped()
            }
            
            VStack(spacing: 0) {
                Button {
                    print("하잇")
                } label: {
                    Text("버튼")
                        .font(.caption2)
                }
                Button {
                    print("하잇")
                } label: {
                    Text("버튼")
                        .font(.caption2)
                }
                Image(.screenshot)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 25, height: 25)
                    .clipped()
            }
        }
        .padding()
    }
}